feat: semantic fallback page with rel=me injection

Add a Vite plugin that renders bio, links and greetings from the Task 2 content modules into the raw served index.html at build time, so non-JS clients (Mastodon's rel=me verifier included) see real content and the mastodon.saillant.cc/@clement rel=me anchor. Hide the fallback for sighted users once the 3D demo boots, but keep it in the accessibility tree. Add @types/node so tsc can type-check the node:fs import in the new test.
2026-07-09 11:12:28 +02:00
parent 017ffe0cf3
commit 4436877e45
9 changed files with 146 additions and 3 deletions
@@ -4,8 +4,33 @@
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Clément Saillant — LE BUS</title>
+    <meta
+      name="description"
+      content="Clément Saillant — électronique, IA souveraine, musique bruitiste. Hub perso façon demoscene : un bus sur un PCB géant."
+    />
+    <link rel="me" href="https://mastodon.saillant.cc/@clement" />
  </head>
  <body>
+    <main id="fallback">
+      <h1><!--name--></h1>
+      <p class="tagline"><!--tagline--></p>
+      <section id="bio" aria-label="Bio">
+        <!--bio-->
+      </section>
+      <nav id="identities" aria-label="Identités">
+        <!--nav-->
+      </nav>
+      <section id="music" aria-label="Musique">
+        <!--music-->
+      </section>
+      <section id="greetings" aria-label="Greetings">
+        <!--greetings-->
+      </section>
+      <p class="hint">
+        Version animée : ce site est une demo 3D (un bus sur un PCB).
+        Activez JavaScript / les animations pour monter dedans.
+      </p>
+    </main>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>