Ceci est le code source de la marque vanityURLs on vanityURLs Brand

Bon sens

Mon, 01 Jan 0001 00:00:00 +0000

Les standards de marque doivent simplifier les decisions courantes. Quand une page, un badge, un ecran de redirection ou une surface produit n’a pas de regle precise, utilisez ces principes.

Partir de la tache utilisateur

Chaque surface doit aider quelqu’un a faire une chose claire : comprendre une redirection, faire confiance a une destination, copier un actif, gerer une instance ou apprendre le systeme.

Si une idee visuelle ralentit cette tache ou la rend moins fiable, retirez-la.

Couleur

Mon, 01 Jan 0001 00:00:00 +0000

Utilisez le teal comme accent, pas comme interface entiere.
Gardez les couleurs de statut semantiques et distinctes du teal de marque.
Preservez le contraste des badges sur les surfaces claires et sombres.
Associez les accents de marque aux gris neutres, au blanc et aux surfaces encre foncee afin que les pages ne deviennent pas des compositions uniquement teal.
Testez les combinaisons de couleurs selon les exigences de contraste WCAG avant publication.

La palette vanityURLs suit la meme intention que la fondation couleur de Red Hat : la couleur sert l’expression de marque, la hierarchie, les etats et l’accessibilite. Traitez la palette comme un ensemble de decisions nommees, pas comme une reserve decorative interchangeable.

Développement local

Mon, 01 Jan 0001 00:00:00 +0000

Utilisez cette page lorsque vous modifiez les layouts, le contenu, les styles, la recherche ou le petit Worker Cloudflare qui sert le site de documentation.

Prérequis

Outil	Version	Pourquoi
Hugo Extended	`0.158.0+`	Le site utilise des fonctions du pipeline d’assets Hugo qui demandent une version extended moderne
Node.js	`20+`	Scripts npm, Tailwind, PostCSS, Pagefind, Wrangler et tests
Git	Version moderne	`enableGitInfo` utilise les métadonnées de commit pour les dates de dernière modification
Go	Optionnel	Seulement nécessaire si vous construisez Hugo vous-même

Utilisez Hugo Extended

Marque et assets

Mon, 01 Jan 0001 00:00:00 +0000

Disponibles maintenant

Element	Fichier	Telecharger
Pack logo complet	`/resources/vanityurls-logo-pack.zip`
Pack d'images de redirection d'instance	`/resources/v8s-instance-redirected-pack.zip`
Pack icones	`/resources/vanityurls-icon-pack.zip`
Logo principal	`/logo.svg`
Logo d'entete clair compact	`/vanityURLs-link-logo-slim.svg`
Logo d'entete sombre compact	`/vanityURLs-link-logo-dark-slim.svg`
Bundle de logo produit	`/logo/product-logo/vanityurls-link-logo.svg`
Bundle de logo produit sombre	`/logo/product-logo/vanityurls-link-logo-dark.svg`
Logo d'instance demo	`/logo/product-logo/v8s-logo.svg`
Reference favicon du site	`/logo/website-logos/favicon.png`
Reference d'apercu social du site	`/logo/website-logos/social.png`
SVG de redirection d'instance	`/logo/instance-logo/v8s-redirected-{language}.svg`
SVG de redirection d'instance sombres	`/logo/instance-logo/v8s-redirected-{language}-dark.svg`
PNG de redirection d'instance	`/logo/instance-logo/v8s-redirected-{language}-1125-721.png`
PNG d'apercu de redirection d'instance	`/logo/instance-logo/v8s-redirected-{language}-512-328.png`
Badges de redirection	`/images/v8s-redirected-{language}.svg`
Badges de redirection sombres	`/images/v8s-redirected-{language}-dark.svg`

A fournir

Package	Format
Pack de badges d’execution	ZIP avec badges SVG localises clairs et sombres

Logo d'instance et images de redirection

Mon, 01 Jan 0001 00:00:00 +0000

Images de redirection d’instance

Les images de redirection d’instance sont des assets locaux a cette page pour documenter comment une instance communique une redirection localisee. Elles restent dans ce bundle de page Hugo afin d’etre disponibles sur le site de marque sans etre copiees dans le dossier static/images/ partage avec le site principal.

Surface claire

Surface sombre

Fichiers de redirection localises

Langue	SVG clair	SVG sombre	PNG clair	PNG sombre
Anglais	`v8s-redirected-en.svg`	`v8s-redirected-en-dark.svg`	`v8s-redirected-en-1125-721.png`	`v8s-redirected-en-dark-1125-721.png`
Francais	`v8s-redirected-fr.svg`	`v8s-redirected-fr-dark.svg`	`v8s-redirected-fr-1125-721.png`	`v8s-redirected-fr-dark-1125-721.png`
Espagnol	`v8s-redirected-es.svg`	`v8s-redirected-es-dark.svg`	`v8s-redirected-es-1125-721.png`	`v8s-redirected-es-dark-1125-721.png`
Italien	`v8s-redirected-it.svg`	`v8s-redirected-it-dark.svg`	`v8s-redirected-it-1125-721.png`	`v8s-redirected-it-dark-1125-721.png`
Allemand	`v8s-redirected-de.svg`	`v8s-redirected-de-dark.svg`	`v8s-redirected-de-1125-721.png`	`v8s-redirected-de-dark-1125-721.png`
Apercu	n/a	n/a	`v8s-redirected-{language}-512-328.png`	`v8s-redirected-{language}-dark-512-328.png`

Tous les SVG fournis utilisent un viewBox de 1125 x 721. Les exports PNG canoniques mesurent 1125 x 721; les exports PNG d’apercu mesurent 512 x 328.

Medias sociaux

Mon, 01 Jan 0001 00:00:00 +0000

Fichiers actuels

Asset	Fichier	Taille
Apercu social	`/social.png`	Raster existant
Open Graph defaut	`/og-default.png`	Raster existant
Open Graph profil	`/og-profile.png`	Raster existant

A fournir

Asset	Format	Taille
Avatar social	PNG	1024 x 1024
Image Open Graph	PNG ou JPG	1200 x 630
Banniere GitHub/sociale	PNG ou JPG	1500 x 500
Banniere LinkedIn	PNG ou JPG	1584 x 396
Modele de publication carre	PNG ou source editable	1080 x 1080
Modele de publication paysage	PNG ou source editable	1600 x 900

Personnalite de marque

Mon, 01 Jan 0001 00:00:00 +0000

La personnalite de vanityURLs est calme, precise, utile, transparente et discretement technique.

Calme

Le systeme doit reduire l’incertitude autour des redirections. Utilisez des etats clairs, des mises en page previsibles et un langage mesure. Les avertissements forts doivent etre reserves aux vrais enjeux de securite ou de disponibilite.

Precise

Les liens courts sont petits, mais les erreurs peuvent couter cher. Utilisez des libelles exacts pour les domaines, alias, cibles, expirations, langues et blocages.

Polices et typographie

Mon, 01 Jan 0001 00:00:00 +0000

Le site auto-heberge Inter Variable pour l’interface et le texte, puis JetBrains Mono pour le code. Les fichiers vivent sous static/fonts/ et sont declares dans assets/css/main.css.

Le modele typographique s’inspire de la fondation famille de polices de Red Hat : utiliser une famille pour le texte expressif et lisible, puis une famille monospace pour le code et les identifiants techniques. vanityURLs utilise Inter plutot que Red Hat Display/Text, mais garde la meme separation entre prose lisible et contenu technique.

Rédaction de contenu

Mon, 01 Jan 0001 00:00:00 +0000

Utilisez cette page lorsque vous ajoutez ou modifiez du contenu dans content/, i18n/, data/ ou les layouts/ Hugo.

Zones du dépôt

Chemin	Rôle
`content/`	Pages, articles, entrées de vitrine et documentation
`layouts/`	Templates Hugo, partials et shortcodes
`assets/`	CSS et JavaScript traités et fingerprintés par Hugo
`static/`	Fichiers copiés tels quels avec des URLs publiques stables
`data/`	Données structurées pour accueil, FAQ, glossaire, confiance et audits
`i18n/`	Chaînes UI utilisées par les templates et shortcodes

Fichiers de contenu

Utilisez des noms de fichiers propres à la langue :

Contribution a la documentation

Mon, 01 Jan 0001 00:00:00 +0000

Le site principal a un court guide de contribution pour le code, la documentation, les rapports de bogues et l’aide communautaire. Cette page ajoute les attentes propres au site de marque.

Ou contribuer

Travail	Depot
Code du redirecteur	`github.com/vanityURLs/vanityURLs`
Documentation du site principal	`github.com/vanityURLs/website`, dans `content/`
Standards de marque	`github.com/vanityURLs/website`, dans `brand-content/`
Templates du site	`github.com/vanityURLs/website`, dans `layouts/`
CSS et JavaScript	`github.com/vanityURLs/website`, dans `assets/`
Telechargements publics stables	`github.com/vanityURLs/website`, dans `static/`

Regles de documentation de marque

Gardez les pages pratiques et proches de la source de verite.
Basez les standards sur l’implementation existante avant d’inventer une nouvelle regle.
Ajoutez les pages anglaises et francaises ensemble quand la section est bilingue.
Utilisez brand-content/ pour les standards de marque et content/ pour le site produit principal.
Liez vers le site principal quand un visiteur a besoin de documentation produit, pages legales, pages de confiance ou points d’entree communautaires.
Utilisez des commits conventionnels pour que release-please classe les changements.

Avant d’ouvrir une pull request

Executez :

Voix

Mon, 01 Jan 0001 00:00:00 +0000

Utilisez un langage direct et operationnel. Le lecteur doit sentir que vanityURLs traite les redirections avec soin, explique le comportement du systeme et respecte son temps.

Qualites de la voix

Qualite	Signifie	Evite
Directe	Dire ce que le systeme fait	Promesses vagues ou benefices abstraits
Precise	Utiliser domaines, etats, chemins et temps exacts	Langage approximatif quand les details comptent
Calme	Expliquer les problemes sans drame	Formulations alarmistes pour des etats courants
Operationnelle	Aider a agir ou verifier	Texte poli mais peu informatif
Honnete	Decrire le comportement implemente	Impliquer des fonctions ou garanties absentes

Verbes preferes

Utilisez des verbes concrets comme create, redirect, expire, block, audit, deploy, verify, copy, download et configure.

Fonds d'ecran et arriere-plans

Mon, 01 Jan 0001 00:00:00 +0000

A fournir

Asset	Format	Taille
Fond desktop	PNG ou JPG	3840 x 2160
Fond desktop	PNG ou JPG	2560 x 1440
Fond mobile	PNG ou JPG	1290 x 2796
Fond de presentation	PNG ou JPG	1920 x 1080
Arriere-plan d’appel video	PNG ou JPG	1920 x 1080
Source de texture abstraite	SVG, PNG ou source editable	Vectoriel ou 3840 x 2160

Utilisez les arriere-plans avec retenue. Ils doivent soutenir la reconnaissance de marque sans reduire la lisibilite.

Grille

Mon, 01 Jan 0001 00:00:00 +0000

Utilisez une colonne de contenu centree pour les pages de documentation et de reference. Gardez les surfaces de lecture assez etroites pour rester faciles a parcourir.

La mise en page de documentation standard utilise une navigation a gauche, une colonne de lecture principale et une table des matieres optionnelle. Les pages de marque devraient reutiliser cette mise en page sauf lorsqu’une page sert specifiquement de previsualisation d’assets.

L’approche de grille s’appuie sur la fondation grille de Red Hat : une structure previsible avec colonnes, marges, gouttieres et longueur de ligne responsive. vanityURLs garde cette discipline et l’adapte a un site de documentation compact et aux pages de redirection generees.

Hébergement et déploiement

Mon, 01 Jan 0001 00:00:00 +0000

Le site de documentation fonctionne sur Workers Static Assets avec Cloudflare Workers. Ce n’est pas un projet Cloudflare Pages. Un Worker sert le site statique généré par Hugo et gère les analytics côté serveur pour les pages HTML.

Architecture

flowchart LR
A[Branche main
GitHub]
B[Intégration GitHub
Cloudflare]
C[build.sh]
D[Build Hugo
et index Pagefind]
E[wrangler deploy]
F[Worker
vanityurls-website]
G[Binding Static Assets
./public]
H[Domaine custom
vanityurls.link]

A --> B
B --> C
C --> D
D --> E
E --> F
F --> G
F --> H

Le Worker est configuré pour que les requêtes HTML passent par src/worker.mjs; tout le reste est du trafic d’assets statiques peu coûteux, comme CSS, fontes, bundles JavaScript, images, fichiers Pagefind et sitemaps, qui évite le code Worker.

Noms et termes

Mon, 01 Jan 0001 00:00:00 +0000

Utilisez des noms coherents pour distinguer le produit, le site public, le site de marque et les surfaces de redirection generees.

Projet et domaines

Nom	Utilisation
`vanityURLs`	Nom du projet et du produit
`vanityURLs.link`	Domaine public de documentation et de produit
`brand.vanityURLs.link`	Domaine des standards de marque et du systeme de design
`v8s.link`	Instance de demo, exemples de badges et exemples compacts

Gardez le style vanityURLs dans le texte. Dans les URLs et noms d’hote, utilisez la casse reelle seulement quand elle aide la reconnaissance; DNS n’est pas sensible a la casse.

Analytics du site

Mon, 01 Jan 0001 00:00:00 +0000

Le site utilise Umami pour les analytics visiteurs. Les événements sont envoyés côté serveur depuis le Worker Cloudflare plutôt qu’avec un script JavaScript dans le navigateur.

Modèle de confidentialité

Le setup analytics du site est volontairement limité :

aucun cookie analytics
aucun script analytics côté navigateur
aucun localStorage ou sessionStorage pour le tracking
pas de fingerprinting navigateur
pas d’adresse IP visiteur complète envoyée à Umami

Le Worker tronque les adresses IP avant de transmettre les données analytics : IPv4 en /24 et IPv6 en /48. Cela garde une géographie approximative tout en retirant la précision au niveau d’un foyer.

Espacement

Mon, 01 Jan 0001 00:00:00 +0000

L’espacement doit rendre l’interface facile a parcourir. Utilisez un espacement plus serre pour les outils operationnels et plus genereux pour les ouvertures de page, resumes de marque et apercus d’assets.

Le site utilise des tokens d’espacement de documentation fluides dans assets/css/main.css, de --docs-space-2xs a --docs-space-l. Utilisez ces relations de tokens lorsque vous ajoutez de nouveaux composants de documentation.

Le modele d’espacement suit la fondation espacement de Red Hat : une petite echelle nommee garde le rythme coherent entre composants, motifs et mises en page. vanityURLs applique cette idee a la prose documentaire, aux interfaces produit compactes, aux pages generees et aux apercus d’assets.

Espace blanc et flux du texte

Mon, 01 Jan 0001 00:00:00 +0000

L’espace blanc fait partie de l’interface. Il aide a comprendre ce qui va ensemble, ou commence une section et quelle action compte le plus.

Flux de lecture

La documentation utilise les motifs content-flow et docs-flow pour creer un espacement regulier entre paragraphes, titres, listes, blocs de code, tableaux et encadres.

Utilisez ce rythme pour les pages longues. Evitez d’empiler des marges manuelles sauf si un composant reutilisable a besoin d’une nouvelle regle d’espacement.

A11Y

Mon, 01 Jan 0001 00:00:00 +0000

L’accessibilite fait partie du systeme de marque; ce n’est pas une verification de derniere minute.

Le site principal publie une declaration d’accessibilite et un centre de confiance avec la cible de conformite, les limites connues et les canaux de signalement. Le travail de marque doit conserver ces engagements.

Exigences

Preservez les etats de focus visibles.
Utilisez des textes de liens explicites.
Gardez le contraste lisible.
Fournissez des textes alternatifs localises pour les badges et images.
Evitez les mises en page ou le texte se superpose, se coupe ou devient trop petit pour etre lu.

Standards du site

Le site actuel vise WCAG 2.1 niveau AA et documente publiquement une conformite partielle. Ce standard s’applique aux pages de marque, a la documentation, aux pages de redirection generees, aux badges et aux surfaces operateur.

Composants et motifs

Mon, 01 Jan 0001 00:00:00 +0000

Le systeme de marque doit reutiliser les composants existants avant d’en creer de nouveaux. Les motifs partages rendent les pages previsibles et reduisent la derive CSS.

Motifs de documentation

Utilisez les shortcodes Hugo et composants CSS existants pour :

Encadres et avis.
Etapes et parcours de configuration.
Arborescences de fichiers et structure de depot.
Blocs de code avec bouton de copie.
Tableaux pour jetons, actifs et notes de compatibilite.
Sections details pour les explications secondaires.
Cartes pour les listes de navigation ou les telechargements.

Motifs produit

Les surfaces de redirection generees et les interfaces operateur doivent etre reliees a la documentation sans devenir des pages de documentation.

Releases

Mon, 01 Jan 0001 00:00:00 +0000

Le dépôt website utilise release-please avec GitHub Actions. Les releases sont pilotées par l’historique de commits et les métadonnées release-please, pas par des changements manuels de version package.

flowchart LR
A[Conventional
commits]
B[GitHub
Actions]
C[release-please]
D[PR de release]
E[CHANGELOG.md]
F[Versions
package]
G[Manifest
release]
H[Release
GitHub]

A --> B
B --> C
C --> D
D --> E
D --> F
D --> G
D --> H

Avant de merger un changement website orienté release :

Lancez npm run build.
Lancez npm run lint ou la vérification plus ciblée pertinente.
Confirmez que .release-please-manifest.json correspond toujours à la release actuelle prévue.
Évitez les modifications manuelles aux notes de release générées sauf si vous corrigez les métadonnées de release.

Gestion du changelog

Iconographie

Mon, 01 Jan 0001 00:00:00 +0000

L’iconographie doit clarifier le sens, pas decorer le vide. Le systeme vanityURLs suit l’approche pratique de la fondation iconographie de Red Hat : choisir des icones dans un ensemble connu, les utiliser de facon coherente et rendre leur role clair dans le contexte.

Roles des icones

Role	Usage	Recommandation
Navigation	Identite de section, liens precedent/suivant, liens externes	Associez au texte sauf si l’icone est universelle et nommee pour les technologies d’assistance.
Actions	Copier, telecharger, rechercher, ouvrir, fermer, basculer le theme	Utilisez des symboles familiers et conservez les etats hover, presse et focus.
Statut	Succes, avertissement, danger, bloque, expire, maintenance	Associez a un texte visible. Ne comptez pas seulement sur la couleur ou la forme.
Metadonnees	GitHub, RSS, social, type de fichier, langue	Gardez petit et secondaire par rapport au libelle ou a la valeur.
Illustration	Concepts produit ou recit de marque	Utilisez avec retenue; la documentation doit rester utile avant d’etre expressive.

Style

Preferez un style contour coherent pour les icones d’interface.
Utilisez les icones pleines seulement quand l’etat ou l’ensemble d’icones le demande, par exemple pour une selection ou une marque sociale.
Equilibrez epaisseur, taille et poids optique avec le texte voisin.
Utilisez des icones 1em dans le texte inline et des dimensions carrees stables pour les boutons icones.
Ne melangez pas des bibliotheques d’icones sans lien dans le meme groupe de controles.

Accessibilite

Les icones decoratives devraient etre masquees aux technologies d’assistance. Les icones informatives ont besoin d’un nom accessible ou d’un texte voisin portant le meme sens.

Diagrammes et code

Mon, 01 Jan 0001 00:00:00 +0000

vanityURLs est un produit technique; les diagrammes et exemples de code font donc partie du langage de marque. Ils doivent clarifier le comportement, pas decorer la page.

Diagrammes Mermaid

Utilisez Mermaid pour les flux de redirection, chemins de deploiement, decisions de routage et cycles de vie.

Gardez les diagrammes assez courts pour etre compris sans zoomer.
Libellez les transitions avec de vraies conditions comme alias found, blocked, expired ou fallback.
Preferez un flux de gauche a droite pour les pipelines de requete.
Utilisez un diagramme quand le comportement serait plus difficile a comprendre en prose.

Blocs de code

Les blocs de code utilisent Chroma avec des classes CSS et des boutons de copie. Les exemples doivent etre assez complets pour etre executes ou reconnus.

Interaction

Mon, 01 Jan 0001 00:00:00 +0000

Les interactions doivent etre previsibles, rapides a comprendre et visiblement reversibles quand l’action est locale.

Les recommandations d’interaction partent de la fondation liens de Red Hat : les liens connectent vers des pages, sections et ressources; les boutons executent des actions sur la surface actuelle. Cette distinction compte pour vanityURLs, car les pages generees demandent souvent au visiteur de continuer, inspecter ou signaler un lien.

La documentation utilise des etats actifs dans la barre laterale, une navigation mobile, des liens d’ancrage, des liens precedent et suivant, et parfois une table des matieres. Conservez ces motifs pour que l’utilisateur puisse parcourir le contenu sans reapprendre le site.

Mode sombre et themes

Mon, 01 Jan 0001 00:00:00 +0000

Le site utilise le mode sombre par classe de Tailwind. Le changement de theme doit ressembler au meme systeme sous une autre lumiere, pas a une marque separee.

Comportement du theme

Initialisez le theme choisi avant l’affichage quand c’est possible.
Conservez les etats actifs, focus, hover et selectionnes dans les deux themes.
Gardez la coloration du code lisible sur fonds clairs et sombres.
Evitez le contenu propre a un theme sauf si l’actif exige une version claire ou sombre.

Couleur en mode sombre

Utilisez les accents teal avec retenue sur les surfaces sombres. Le teal de marque doit identifier les liens, etats selectionnes et accents importants; il ne doit pas devenir le fond de chaque panneau.

Ceci est le code source de la marque vanityURLs on vanityURLs Brand

Bon sens

Partir de la tache utilisateur

Couleur

Développement local

Prérequis

Marque et assets

Disponibles maintenant

A fournir

Logo d'instance et images de redirection

Images de redirection d’instance

Surface claire

Surface sombre

Fichiers de redirection localises

Medias sociaux

Fichiers actuels

A fournir

Personnalite de marque

Calme

Precise

Polices et typographie

Rédaction de contenu

Zones du dépôt

Fichiers de contenu

Contribution a la documentation

Ou contribuer

Regles de documentation de marque

Avant d’ouvrir une pull request

Voix

Qualites de la voix

Verbes preferes

Fonds d'ecran et arriere-plans

A fournir

Grille

Hébergement et déploiement

Architecture

Noms et termes

Projet et domaines

Analytics du site

Modèle de confidentialité

Espacement

Espace blanc et flux du texte

Flux de lecture

A11Y

Exigences

Standards du site

Composants et motifs

Motifs de documentation

Motifs produit

Releases

Iconographie

Roles des icones

Style

Accessibilite

Diagrammes et code

Diagrammes Mermaid

Blocs de code

Interaction

Navigation

Mode sombre et themes

Comportement du theme

Couleur en mode sombre