@orchydae/davidoo-banner

Bande discrète « Système conçu par davidoo » qui clôt une page : la mention et le petit mot sur une ligne, d'environ 45 px de haut, coins droits. Le mot monte du bas jusqu'à sa place pendant que la bande entre dans l'écran, et reste entièrement visible. Aucune dépendance autre que React (18 ou plus).

Installation

npm install @orchydae/davidoo-banner

Le composant importe lui-même sa feuille de style : l'application n'a rien d'autre à faire, pourvu que son outil de build sache importer du CSS (Next.js, Vite…). Essayé le 2026-10-21 avec Next 16.3, en composant serveur, et Vite 7.

Utilisation

import { DavidooBanner } from "@orchydae/davidoo-banner";

<DavidooBanner
  label={copy.credit} // « Système conçu par », dans la langue de la page
  tone="auto" // « auto » (défaut), « system », « light » ou « dark »
  href="https://…" // facultatif : par défaut, le site de davidoo
  className="-mx-site -mb-site" // par exemple : sortie des marges de la page
/>

La bande prend la largeur de son parent : c'est à l'hôte de la sortir de ses marges (className) et de la coller au bas de la page.

L'adresse par défaut est la constante DAVIDOO_URL de src/davidoo-banner.tsx : https://www.davidoo.dev, l'adresse principale du site chez Vercel (davidoo.dev y redirige).

Composant serveur : pas de "use client", pas de script.

Thème

• tone="auto" (défaut) suit le thème de la page : sombre si un ancêtre porte data-theme="dark" (convention de davidoo) ou la classe dark (Tailwind, shadcn), clair sinon. Une page sans mode sombre garde donc une bande claire, même chez un visiteur dont le système est sombre; dès qu'elle en a un, la bande bascule avec elle, sans rien changer ici.

• tone="system" suit le réglage du système d'exploitation (prefers-color-scheme), pour une page qui s'y fie en CSS sans rien poser sur ses ancêtres.

• tone="light" ou "dark" fixe le thème.

• Les couleurs sont celles de la marque (davidoo/src/theme/tokens.css) et ne se changent pas :

  | | fond | texte | mention | mot | | ------ | --------- | --------- | --------- | --------- | | clair | #EFEEE9 | #16120E | #6B655C | #E4562A | | sombre | #16120E | #EFEEE9 | #9A9186 | #F2683B |

La montée

CSS seulement : une animation liée au défilement (animation-timeline: view()) qui fait monter le mot de translateY(100%) à sa place pendant qu'il entre dans l'écran; son enveloppe (davidoo-banner__brand, overflow: hidden) rogne ce qui n'est pas encore monté, donc il sort de la ligne de base de la bande. Là où la fonction manque, ou en mouvement réduit (prefers-reduced-motion), le mot est à sa place d'emblée. Mesuré le 2026-10-16 : Chromium anime; Firefox 153 n'anime pas (le mot est visible). WebKit non essayé.

Le mot

src/wordmark.tsx est « davidoo » en contours de MuseoModerno 700 (Omnibus-Type, licence SIL OFL), en minuscules, crénage et interlettrage de -0,02 em compris, comme .site-footer__brand de davidoo. Aucune police à charger. Pour le refaire (npm i opentype.js, la police en TTF statique 700, que l'API de Google Fonts donne sans en-tête User-Agent) :

import opentype from "opentype.js";
import { readFileSync } from "node:fs";

const buffer = readFileSync("museomoderno-700.ttf");
const font = opentype.parse(
  buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength),
);
const options = { kerning: true, letterSpacing: -0.02 };
const box = font.getPath("davidoo", 0, 0, 1000, options).getBoundingBox();
const path = font.getPath("davidoo", -box.x1, -box.y1, 1000, options);

console.log(path.getBoundingBox()); // viewBox : 0 0 largeur hauteur
console.log(path.toPathData(1));

Le rendu a été comparé au texte natif de Chromium (même police, même interlettrage) : mêmes 758 × 153 px à 200 px, 1,5 % d'écart de lissage.

Développer

npm test           # le rendu du composant (Vitest)
npm run typecheck
npm run build      # dist/ : le JS, les types et le CSS

tsc compile src/ fichier pour fichier et garde l'import du CSS, que le build copie à côté : c'est l'outil de l'application qui le charge.

Publier une version

Sur npm, en public (publishConfig). Une seule fois : npm login avec le compte orchydae.

npm version patch  # ou minor, major : change le numéro, commit et étiquette
npm publish        # reconstruit dist/ (prepack) avant d'envoyer

Puis, dans chaque projet : npm install @orchydae/davidoo-banner@latest.