Code source du site liens.manu.quebec
- JavaScript 64.6%
- HTML 14.3%
- CSS 13.4%
- Shell 7.7%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
Manu
56b496cc10
- Remplacer github.sha → forgejo.sha, secrets.GITHUB_TOKEN → secrets.FORGEJO_TOKEN, github.repository → forgejo.repository - Adapter build.sh : GITHUB_SHA → FORGEJO_SHA - Ajouter .forgejo/workflows/update-deps.yml ( quotidien 11h UTC, npm-check-updates, PR automatique via API Forgejo) |
||
| .forgejo/workflows | ||
| css | ||
| images | ||
| js | ||
| test | ||
| .editorconfig | ||
| .gitignore | ||
| .node-version | ||
| .prettierignore | ||
| .prettierrc | ||
| .stylelintrc.json | ||
| AGENTS.md | ||
| build.sh | ||
| CADDY_SECURITY_CONFIG.md | ||
| eslint.config.js | ||
| index.html | ||
| LICENSE | ||
| manifest.json | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| robots.txt | ||
| schema.json | ||
| sitemap.xml | ||
| sw.js | ||
| test-html.js | ||
| verify-csp.sh | ||
| vitest.config.js | ||
liens.manu.quebec
Page de destination personnelle regroupant les liens vers mes profils en ligne et mes informations de contact.
Demo : https://liens.manu.quebec
Fonctionnalités
- Liste de liens : regroupe mes profils sur les réseaux sociaux, mes contacts et d'autres liens pertinents.
- Thème clair/sombre : bouton de bascule + détection
prefers-color-scheme, sans flash au chargement. - Arrière-plan animé : aurora WebGL avec DPR plafonné, pause quand l'onglet est masqué.
- Protection du courriel : adresse encodée en XOR pour éviter le scraping.
- PWA : installable, manifest + Service Worker avec cache versionné par commit.
- Accessibilité : respect de
prefers-reduced-motion, lien d'évitement, ARIA. - Sécurité renforcée : CSP stricte
default-src 'none', Trusted Types, HSTS. - Responsive : mobile, tablette et bureau.
Technologies
- HTML5, CSS3, JavaScript vanilla (aucun framework, aucun bundler)
- WebGL pour l'animation d'arrière-plan
- Node.js 24 pour la validation et la minification
Structure du projet
index.html → Page unique (lang=fr, OG, Twitter Cards)
css/styles.css → ~510 lignes, thèmes clair/sombre, glassmorphism, animations
js/aurora-engine.js → Moteur WebGL de l'arrière-plan aurora (~250 lignes)
js/main.js → Thème, JSON-LD dynamique, email XOR, SW, visibilité
js/theme-init.js → Initialisation thème anti-flash + Trusted Types policy
sw.js → Service Worker (Network First HTML, Cache First assets)
manifest.json → Manifeste PWA
schema.json → Données structurées JSON-LD (externalisées, CSP-friendly)
build.sh → Minification + injection placeholders + statistiques
verify-csp.sh → Vérification des en-têtes CSP en production
test/ → 6 suites vitest (main, aurora, thème, styles, glass, canvas)
test-html.js → Validation HTML (vnu W3C ou repli html-validate)
images/ → Logos WebP + icônes PWA 192/512
Développement
Aucune étape de build. Ouvrir index.html dans un navigateur ou servir localement :
python3 -m http.server 8000 # ou npx serve .
npm install
npm test # html-validate + stylelint + eslint + vitest (35 tests)
Build
En CI, chaque fichier est minifié (terser, clean-css-cli, html-minifier-terser),
les placeholders %%COMMIT_SOURCE_URL%% et %%COMMIT_HASH%% sont remplacés, et le
résultat est poussé en force-push vers la branche dist.
npm run build # produit dist/ avec statistiques de compression
Configuration de sécurité
Le site utilise une Content Security Policy stricte configurée via Caddy :
CADDY_SECURITY_CONFIG.md— documentation complèteverify-csp.sh— script de vérification des en-têtes
./verify-csp.sh https://liens.manu.quebec
Note : le JSON-LD est externalisé dans schema.json et chargé
via fetch(), ce qui élimine toute gestion de hash SHA-256 dans la CSP.
Dernière revue complète : 2026-09-13