Johan LEROY
ca6700d6ce
All checks were successful
Deploy site (production) / build-and-deploy (push) Successful in 15s
- .htaccess : désactive Google PageSpeed (mod_pagespeed/ngx_pagespeed) qui renvoyait un corps HTML vide sur le vhost Plesk (home en 200 mais 0 octet → page blanche), alors que les assets Vite passaient. Backstop versionné du fix côté serveur. - CopyButton réutilisable (variantes bar/icon, retour ✓ 1,8 s, bilingue, accessible) : ajoute « copier » sur la commande de How-it-works, l'URL localhost et la commande du footer. - URL du dépôt Gitea : johanleroy/git-arboretum → johanleroy/arboretum (centralisée dans lib/links.ts). Le paquet npm @johanleroy/git-arboretum reste inchangé (c'est son nom). - Port affiché corrigé : localhost:7777 → 7317 (port réel du daemon, cf. config.ts).
54 lines
3.1 KiB
Vue
54 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n';
|
|
import { INSTALL_COMMAND } from '../composables/useCopy';
|
|
import CopyButton from './CopyButton.vue';
|
|
|
|
const { t } = useI18n();
|
|
// Port par défaut réel du daemon (cf. packages/server/src/config.ts).
|
|
const LOCAL_URL = 'http://localhost:7317';
|
|
</script>
|
|
|
|
<template>
|
|
<section id="how" class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 pb-[100px]">
|
|
<div v-reveal class="mb-[46px] text-center">
|
|
<div class="mb-3.5 font-mono text-xs uppercase tracking-[0.14em] text-emerald-400">{{ t('howKicker') }}</div>
|
|
<h2 class="m-0 text-[clamp(28px,3.4vw,40px)] font-semibold tracking-[-0.025em] text-zinc-50">{{ t('howTitle') }}</h2>
|
|
</div>
|
|
|
|
<div v-reveal class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-4">
|
|
<div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-[26px]">
|
|
<div class="mb-[18px] font-mono text-[13px] text-emerald-400">01</div>
|
|
<h3 class="m-0 mb-2.5 text-lg font-semibold text-zinc-50">{{ t('step1Title') }}</h3>
|
|
<p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-zinc-400">{{ t('step1Desc') }}</p>
|
|
<div class="flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-950 p-[11px]">
|
|
<code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-[12.5px] text-zinc-200">
|
|
<span class="text-emerald-400">$ </span>{{ INSTALL_COMMAND }}
|
|
</code>
|
|
<CopyButton variant="icon" :text="INSTALL_COMMAND" :label="t('copyCommand')" />
|
|
</div>
|
|
</div>
|
|
<div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-[26px]">
|
|
<div class="mb-[18px] font-mono text-[13px] text-emerald-400">02</div>
|
|
<h3 class="m-0 mb-2.5 text-lg font-semibold text-zinc-50">{{ t('step2Title') }}</h3>
|
|
<p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-zinc-400">{{ t('step2Desc') }}</p>
|
|
<div class="flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-950 p-[11px]">
|
|
<code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-[12.5px] text-sky-300">
|
|
→ {{ LOCAL_URL }}
|
|
</code>
|
|
<CopyButton variant="icon" :text="LOCAL_URL" :label="t('copyUrl')" />
|
|
</div>
|
|
</div>
|
|
<div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-[26px]">
|
|
<div class="mb-[18px] font-mono text-[13px] text-emerald-400">03</div>
|
|
<h3 class="m-0 mb-2.5 text-lg font-semibold text-zinc-50">{{ t('step3Title') }}</h3>
|
|
<p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-zinc-400">{{ t('step3Desc') }}</p>
|
|
<div class="flex flex-wrap gap-1.5">
|
|
<span class="rounded-md bg-emerald-500/10 px-[9px] py-1 font-mono text-[11px] text-emerald-400">{{ t('idle') }}</span>
|
|
<span class="rounded-md bg-[rgba(8,47,73,0.7)] px-[9px] py-1 font-mono text-[11px] text-sky-300">{{ t('busy') }}</span>
|
|
<span class="rounded-md bg-[rgba(69,26,3,0.6)] px-[9px] py-1 font-mono text-[11px] text-amber-300">{{ t('waiting') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|