fix(site): corrige la page blanche (PageSpeed), ajoute des boutons copier, corrige l'URL Gitea

- .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).
2026-06-19 10:42:41 +02:00
parent dcb6cd1ec7
commit ca6700d6ce
13 changed files with 135 additions and 37 deletions
--- a/packages/site/src/components/AppFooter.vue
+++ b/packages/site/src/components/AppFooter.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
+import { INSTALL_COMMAND } from '../composables/useCopy';
+import { REPO, LICENSE, COFFEE } from '../lib/links';
 import IconGitea from './icons/IconGitea.vue';
+import CopyButton from './CopyButton.vue';

 const { t } = useI18n();
-const REPO = 'https://git.lidge.fr/johanleroy/git-arboretum';
-const LICENSE = 'https://git.lidge.fr/johanleroy/git-arboretum/src/branch/main/LICENSE';
-const COFFEE = 'https://buymeacoffee.com/johanleroy';
 </script>

 <template>
@@ -40,7 +40,10 @@ const COFFEE = 'https://buymeacoffee.com/johanleroy';
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 2v2" /><path d="M14 2v2" /><path d="M5 8h13a1 1 0 0 1 1 1v2a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1Z" /><path d="M6 15a4 4 0 0 0 4 4h2a4 4 0 0 0 4-4" /><path d="M19 9h1.5a2.5 2.5 0 0 1 0 5H18" /></svg>
          {{ t('coffee') }}
        </a>
-        <span class="font-mono text-[12.5px] text-zinc-600">npx @johanleroy/git-arboretum</span>
+        <div class="flex items-center gap-2">
+          <code class="font-mono text-[12.5px] text-zinc-600">{{ INSTALL_COMMAND }}</code>
+          <CopyButton variant="icon" :text="INSTALL_COMMAND" :label="t('copyCommand')" />
+        </div>
      </div>
    </div>
  </footer>
--- a/packages/site/src/components/AppHeader.vue
+++ b/packages/site/src/components/AppHeader.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
+import { REPO } from '../lib/links';
 import LangToggle from './LangToggle.vue';
 import IconGitea from './icons/IconGitea.vue';

 const { t } = useI18n();
-const REPO = 'https://git.lidge.fr/johanleroy/git-arboretum';

 const navLinks = [
  { href: '#features', key: 'navFeatures' },
--- a/packages/site/src/components/CopyButton.vue
+++ b/packages/site/src/components/CopyButton.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useCopy } from '../composables/useCopy';
+import IconCopy from './icons/IconCopy.vue';
+import IconCheck from './icons/IconCheck.vue';
+
+// Bouton « copier » réutilisable, avec retour visuel (icône ✓ + label) pendant 1800 ms.
+// Deux variantes :
+//  - 'bar'  : bouton étiqueté intégré aux barres de commande (hero, CTA final).
+//  - 'icon' : bouton compact icône seule, pour les blocs de code (étapes, footer).
+withDefaults(
+  defineProps<{
+    text: string;
+    variant?: 'bar' | 'icon';
+    label?: string; // aria-label décrivant ce qui est copié
+    barClass?: string; // padding/ajustements de la variante 'bar'
+  }>(),
+  { variant: 'bar', label: '', barClass: 'px-[15px]' },
+);
+
+const { t } = useI18n();
+const { copied, copy } = useCopy();
+</script>
+
+<template>
+  <button
+    v-if="variant === 'bar'"
+    type="button"
+    :aria-label="label || t('copy')"
+    :class="[
+      'inline-flex flex-none items-center gap-[7px] border-l border-zinc-800 bg-zinc-900 font-mono text-[13px] font-semibold transition-colors hover:bg-zinc-800 hover:text-emerald-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-emerald-500/70',
+      barClass,
+      copied ? 'text-emerald-400' : 'text-zinc-300',
+    ]"
+    @click="copy(text)"
+  >
+    <component :is="copied ? IconCheck : IconCopy" :size="15" />
+    <span aria-live="polite">{{ copied ? t('copied') : t('copy') }}</span>
+  </button>
+
+  <button
+    v-else
+    type="button"
+    :aria-label="label || t('copy')"
+    :title="copied ? t('copied') : label || t('copy')"
+    :class="[
+      'inline-flex flex-none items-center justify-center rounded-md border p-1.5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500/70',
+      copied
+        ? 'border-emerald-500/40 bg-zinc-800 text-emerald-400'
+        : 'border-zinc-800 bg-zinc-900/80 text-zinc-400 hover:border-emerald-500/40 hover:bg-zinc-800 hover:text-emerald-400',
+    ]"
+    @click="copy(text)"
+  >
+    <component :is="copied ? IconCheck : IconCopy" :size="14" />
+    <span aria-live="polite" class="sr-only">{{ copied ? t('copied') : t('copy') }}</span>
+  </button>
+</template>
--- a/packages/site/src/components/FinalCta.vue
+++ b/packages/site/src/components/FinalCta.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { useCopy, INSTALL_COMMAND } from '../composables/useCopy';
+import { INSTALL_COMMAND } from '../composables/useCopy';
+import { REPO } from '../lib/links';
 import IconGitea from './icons/IconGitea.vue';
-import IconCopy from './icons/IconCopy.vue';
+import CopyButton from './CopyButton.vue';

 const { t } = useI18n();
-const { copied, copy } = useCopy();
-const REPO = 'https://git.lidge.fr/johanleroy/git-arboretum';
 </script>

 <template>
@@ -34,15 +33,7 @@ const REPO = 'https://git.lidge.fr/johanleroy/git-arboretum';
        <div class="flex min-w-0 flex-1 items-center gap-2.5 overflow-x-auto whitespace-nowrap px-4 font-mono text-sm">
          <span class="text-emerald-400">$</span><span class="text-zinc-200">{{ INSTALL_COMMAND }}</span>
        </div>
-        <button
-          type="button"
-          aria-label="Copy install command"
-          class="inline-flex flex-none items-center gap-[7px] border-l border-zinc-800 bg-zinc-900 px-4 font-mono text-[13px] font-semibold text-zinc-300 transition-colors hover:bg-zinc-800 hover:text-emerald-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-emerald-500/70"
-          @click="copy()"
-        >
-          <IconCopy :size="15" />
-          <span aria-live="polite">{{ copied ? t('copied') : t('copy') }}</span>
-        </button>
+        <CopyButton variant="bar" :text="INSTALL_COMMAND" :label="t('copyCommand')" bar-class="px-4" />
      </div>

      <div class="mt-[18px]">
--- a/packages/site/src/components/HeroMockup.vue
+++ b/packages/site/src/components/HeroMockup.vue
@@ -76,7 +76,7 @@ const dlgOptions = computed(() =>
        <span class="h-2.5 w-2.5 rounded-full bg-zinc-700"></span>
        <span class="h-2.5 w-2.5 rounded-full bg-zinc-700"></span>
        <span class="h-2.5 w-2.5 rounded-full bg-zinc-700"></span>
-        <span class="ml-2 font-mono text-[11.5px] text-zinc-600">arboretum · localhost:7777</span>
+        <span class="ml-2 font-mono text-[11.5px] text-zinc-600">arboretum · localhost:7317</span>
      </div>

      <div class="flex min-h-[360px]">
--- a/packages/site/src/components/HeroSection.vue
+++ b/packages/site/src/components/HeroSection.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { useCopy, INSTALL_COMMAND } from '../composables/useCopy';
+import { INSTALL_COMMAND } from '../composables/useCopy';
+import { REPO } from '../lib/links';
 import HeroMockup from './HeroMockup.vue';
 import IconGitea from './icons/IconGitea.vue';
-import IconCopy from './icons/IconCopy.vue';
+import CopyButton from './CopyButton.vue';

 const { t } = useI18n();
-const { copied, copy } = useCopy();
-const REPO = 'https://git.lidge.fr/johanleroy/git-arboretum';
 </script>

 <template>
@@ -44,15 +43,7 @@ const REPO = 'https://git.lidge.fr/johanleroy/git-arboretum';
        >
          <span class="text-emerald-400">$</span><span class="text-zinc-200">{{ INSTALL_COMMAND }}</span>
        </div>
-        <button
-          type="button"
-          aria-label="Copy install command"
-          class="inline-flex flex-none items-center gap-[7px] border-l border-zinc-800 bg-zinc-900 px-[15px] font-mono text-[13px] font-semibold text-zinc-300 transition-colors hover:bg-zinc-800 hover:text-emerald-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-emerald-500/70"
-          @click="copy()"
-        >
-          <IconCopy :size="15" />
-          <span aria-live="polite">{{ copied ? t('copied') : t('copy') }}</span>
-        </button>
+        <CopyButton variant="bar" :text="INSTALL_COMMAND" :label="t('copyCommand')" />
      </div>

      <div class="mt-6 flex flex-wrap gap-[13px]">
--- a/packages/site/src/components/HowItWorksSection.vue
+++ b/packages/site/src/components/HowItWorksSection.vue
@@ -1,6 +1,11 @@
 <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>
@@ -15,16 +20,22 @@ const { t } = useI18n();
        <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="overflow-x-auto whitespace-nowrap rounded-lg border border-zinc-800 bg-zinc-950 p-[11px] font-mono text-[12.5px] text-zinc-200">
-          <span class="text-emerald-400">$ </span>npx @johanleroy/git-arboretum
+        <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="overflow-x-auto whitespace-nowrap rounded-lg border border-zinc-800 bg-zinc-950 p-[11px] font-mono text-[12.5px] text-sky-300">
-          → http://localhost:7777
+        <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]">
--- a/packages/site/src/components/icons/IconCheck.vue
+++ b/packages/site/src/components/icons/IconCheck.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ size?: number }>(), { size: 15 });
+</script>
+
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+</template>