Skip to content

Restructure homepage into handbook flow and harden Mermaid/E2E regression behavior #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 3 commits into
base: main
Choose a base branch
from
+210 −39
Draft

Restructure homepage into handbook flow and harden Mermaid/E2E regression behavior #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bda5e04
Initial plan
Copilot Jun 2, 2026
e5e068a
feat: restructure homepage handbook flow and stabilize site tests
Copilot Jun 2, 2026
2c3f7ea
fix: finalize homepage handbook flow and CI-safe e2e build
Copilot Jun 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
/>
<link rel="stylesheet" href="/assets/css/tech-glass.css" />
<link rel="stylesheet" href="/design-tokens.css" />
<style>
/* ============================================================
HERO
Expand Down Expand Up @@ -641,6 +642,20 @@
document.addEventListener('click', () => {
document.querySelectorAll('[data-dropdown]').forEach(d => d.classList.remove('open'));
});

// Pattern based on Mermaid 10.9.6 runtime error strings.
const mermaidSyntaxPattern = /Syntax error in text/i;
const mermaidVersionPattern = /mermaid version\s+\d+\.\d+\.\d+/i;
document.querySelectorAll('.mermaid').forEach(node => {
const text = (node.textContent || '').trim();
if (!text || node.dataset.mermaidErrorHandled === 'true') return;
if (mermaidSyntaxPattern.test(text) && mermaidVersionPattern.test(text)) {
node.dataset.mermaidErrorHandled = 'true';
const strong = document.createElement('strong');
strong.textContent = 'Diagramme Mermaid indisponible.';
node.replaceChildren(strong, document.createTextNode(' Le texte du diagramme contient une erreur de syntaxe. Corrigez la définition Mermaid puis rechargez la page.'));
}
});
</script>

{{ content }}
Expand Down
211 changes: 175 additions & 36 deletions index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,53 +30,192 @@ title: Accueil
</div>
</header>

<!-- BENTO BOX — Highlights -->
<nav class="toc" aria-label="Plan du handbook">
<ul class="toc__list">
<li><a href="#phase-flow"><i class="fa-solid fa-route" aria-hidden="true"></i> HVE → BRD → PRD</a></li>
<li><a href="#agents-skills"><i class="fa-solid fa-robot" aria-hidden="true"></i> Agents & Skills</a></li>
<li><a href="#architecture"><i class="fa-solid fa-sitemap" aria-hidden="true"></i> Clean Architecture</a></li>
<li><a href="#practices"><i class="fa-solid fa-dumbbell" aria-hidden="true"></i> Object Calisthenics</a></li>
<li><a href="#adr"><i class="fa-solid fa-book-open" aria-hidden="true"></i> ADR & décisions</a></li>
<li><a href="#deep-dives"><i class="fa-solid fa-folder-open" aria-hidden="true"></i> Sous-pages</a></li>
</ul>
</nav>

<main>
<section class="bento-section" id="highlights" aria-labelledby="highlights-title">
{% assign highlights = site.data.homepage.highlights %}
<div class="bento-section__header">
<section class="section" id="phase-flow" aria-labelledby="phase-flow-title">
<div class="section__header" markdown="1">
## Handbook du workflow IA
{: #phase-flow-title .section__title}

Cette page explique le flux de travail phase par phase, comme un handbook: pourquoi chaque artefact existe, ce qu'il apporte, et comment les agents s'en servent pour livrer de façon fiable.
{: .section__subtitle}
</div>

<div class="project-list">
<article class="project-card">
<div class="project-card__main">
<h3>1) HVE — comprendre le besoin avant toute implémentation</h3>
<p>Le <strong>HVE</strong> (High Value Exploration) clarifie la valeur business, les risques, les hypothèses et les critères de succès. C'est la phase de cadrage qui évite de coder trop tôt.</p>
<p><strong>Apport:</strong> langage commun entre produit, tech et design, priorités explicites, et limites du problème connues dès le départ.</p>
<div class="project-card__tags">
<span class="tag">Value</span><span class="tag">Scope</span><span class="tag">Risques</span>
</div>
</div>
</article>

<article class="project-card">
<div class="project-card__main">
<h3>2) BRD — transformer l'intention en besoins métier vérifiables</h3>
<p>Le <strong>BRD</strong> (Business Requirements Document) formalise les exigences métier, les règles de gestion et les cas d'usage prioritaires avec une granularité exploitable.</p>
<p><strong>Apport:</strong> source de vérité fonctionnelle pour aligner les équipes, tracer les décisions et préparer les critères d'acceptation.</p>
<div class="project-card__tags">
<span class="tag">Exigences</span><span class="tag">Règles métier</span><span class="tag">Traçabilité</span>
</div>
</div>
</article>

<article class="project-card">
<div class="project-card__main">
<h3>3) PRD — rendre l'exécution produit et technique concrète</h3>
<p>Le <strong>PRD</strong> (Product Requirements Document) relie besoins et livraison: parcours utilisateur, contraintes techniques, qualité attendue, métriques et plan de release.</p>
<p><strong>Apport:</strong> BRD + PRD fonctionnent ensemble pour réduire l'ambiguïté: le BRD décrit le <em>quoi</em>, le PRD explicite le <em>comment livrer</em> sans dériver de la valeur initiale.</p>
<div class="project-card__tags">
<span class="tag">Delivery</span><span class="tag">Qualité</span><span class="tag">Release</span>
</div>
</div>
</article>
</div>
</section>

<section class="section" id="agents-skills" aria-labelledby="agents-skills-title">
<div class="section__header" markdown="1">
## Apport des agents et de leurs skills
{: #agents-skills-title .section__title}

Chaque agent vise un objectif précis. Les skills apportent le contexte et les garde-fous adaptés à la phase active.
{: .section__subtitle}
</div>
<div class="project-list">
<article class="project-card">
<div class="project-card__main">
<h3>Agent spécialiste</h3>
<p>Produit les artefacts attendus de la phase (analyse, design, plan de tests, implémentation) avec une stratégie claire orientée résultat.</p>
</div>
</article>
<article class="project-card">
<div class="project-card__main">
<h3>Agent reviewer</h3>
<p>Challenge les hypothèses, détecte les incohérences et applique des lenses adversariales (fonctionnel, architecture, sécurité, opérationnel).</p>
</div>
</article>
<article class="project-card">
<div class="project-card__main">
<h3>Skills par phase</h3>
<p>Active uniquement les compétences utiles au moment donné (discovery, ADR, quality gates, tests) pour limiter le bruit et améliorer la précision.</p>
</div>
</article>
</div>
</section>

<h2 id="highlights-title" class="bento-section__title">Points <span>forts</span></h2>
<section class="section" id="architecture" aria-labelledby="architecture-title">
<div class="section__header" markdown="1">
## Clean Architecture comme colonne vertébrale
{: #architecture-title .section__title}

<p class="bento-section__subtitle">{{ highlights.subtitle }}</p>
Le handbook s'appuie sur une architecture claire: domaine isolé, cas d'usage explicites, adaptateurs techniques à la périphérie. Cela facilite l'évolution et la revue.
{: .section__subtitle}
</div>
<div class="project-list">
<article class="project-card">
<div class="project-card__main">
<h3>Pourquoi c'est clé</h3>
<p>Quand les responsabilités sont nettes, les agents peuvent contribuer sans casser le modèle métier: moins de dérive, plus de lisibilité, meilleure maintenabilité.</p>
</div>
</article>
</div>
</section>

<section class="section" id="practices" aria-labelledby="practices-title">
<div class="section__header" markdown="1">
## Object Calisthenics pour garder un code pilotable
{: #practices-title .section__title}

Les règles Object Calisthenics imposent une discipline utile pour les humains et pour l'IA: petites unités, intention claire, modèle métier explicite.
{: .section__subtitle}
</div>
<div class="project-list">
<article class="project-card">
<div class="project-card__main">
<h3>Bénéfice direct</h3>
<p>Moins d'effets de bord, relecture plus simple, et génération de code plus fiable car les contraintes sont explicites.</p>
</div>
</article>
</div>
</section>

<div class="bento-grid">
{% for card in highlights.cards %}
<div class="bento-card{% if card.wide %} bento-card--wide{% endif %}">
<div class="bento-card__icon"><i class="{{ card.icon }}" aria-hidden="true"></i></div>
<div class="bento-card__label">{{ card.label }}</div>
<div class="bento-card__title">{{ card.title }}</div>
<div class="bento-card__body">
{{ card.body_html }}
<section class="section" id="adr" aria-labelledby="adr-title">
<div class="section__header" markdown="1">
## ADR, décisions d'architecture et historique
{: #adr-title .section__title}

Chaque choix structurant est documenté dans des ADR pour préserver le contexte décisionnel, faciliter les revues et accélérer l'onboarding.
{: .section__subtitle}
</div>
<div class="project-list">
<article class="project-card">
<div class="project-card__main">
<h3>Traçabilité opérationnelle</h3>
<p>Les ADR relient les décisions aux contraintes du moment. On sait pourquoi une direction a été prise, quand la reconsidérer, et comment la faire évoluer proprement.</p>
</div>
{% if card.tags and card.tags.size > 0 %}
<div class="bento-card__tags">
{% for tag in card.tags %}
<span class="{{ tag.class }}">{{ tag.text }}</span>
{% endfor %}
</article>
</div>
</section>

<section class="section" id="deep-dives" aria-labelledby="deep-dives-title">
<div class="section__header" markdown="1">
## Sous-pages pour aller en détail
{: #deep-dives-title .section__title}

Cette page reste volontairement compacte. Les détails sont répartis en sous-pages pour garder une lecture fluide.
{: .section__subtitle}
</div>
<div class="project-list">
<article class="project-card">
<div class="project-card__main">
<h3>Workflow agents et gouvernance</h3>
<p><a href="/presentations/skraft-agents/" target="_blank" rel="noopener">Voir la présentation skraft-agents</a> pour la vue détaillée des rôles, gates et contrats.</p>
</div>
{% endif %}
{% if card.link %}
<a class="bento-card__link" href="{{ card.link.href }}"{% if card.link.external %} target="_blank" rel="noopener"{% endif %}><i class="{{ card.link.icon }}" aria-hidden="true"></i> {{ card.link.text }}</a>
{% endif %}
</div>
{% endfor %}

<!-- Brag Document CTA -->
<div class="bento-card" style="background: rgba(2, 136, 209, 0.12); border-color: rgba(2, 136, 209, 0.35);">
<div class="bento-card__icon" style="background: rgba(2,136,209,0.2); color: var(--color-primary);">
<i class="fa-solid fa-trophy" aria-hidden="true"></i>
</article>
<article class="project-card">
<div class="project-card__main">
<h3>Impacts, résultats et exemples concrets</h3>
<p><a href="{% link brag.md %}">Consulter le Brag Document</a> pour les livrables, réalisations et preuves d'impact.</p>
</div>
<div class="bento-card__label">Réalisations détaillées</div>
<div class="bento-card__title">Brag Document complet</div>
<div class="bento-card__body">
Projets majeurs, contributions open source, talks & publications, mentoring — détaillés par impact et par thème.
</article>
<article class="project-card">
<div class="project-card__main">
<h3>Catalogue de contenus</h3>
<p><a href="/presentations-catalog.html">Accéder au catalogue des présentations</a> pour les ressources complémentaires par thème.</p>
</div>
<a class="bento-card__link" href="{% link brag.md %}" style="color: var(--color-highlight);"><i class="fa-solid fa-arrow-right" aria-hidden="true"></i> Consulter le Brag Document</a>
</div>
</article>
</div>
</section>

<section class="section" id="technical-improvements" aria-labelledby="technical-improvements-title">
<div class="section__header" markdown="1">
## Améliorations techniques du site
{: #technical-improvements-title .section__title}

Améliorations de lisibilité et d'expérience utilisateur sur le rendu de la documentation.
{: .section__subtitle}
</div>
<div class="project-list">
<article class="project-card">
<div class="project-card__main">
<h3>Messages d'erreur Mermaid rendus compréhensibles</h3>
<p>Les messages techniques bruts comme <code>Syntax error in text</code> (Mermaid 10.9.6) sont remplacés par une explication lisible qui aide à corriger la définition du diagramme.</p>
</div>
</article>
</div>
</section>
</main>
13 changes: 11 additions & 2 deletions scripts/run-e2e-playwright.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
SITE_IMAGE="jekyll/jekyll:4"
SERVER_CONTAINER="site-e2e"
BASE_URL="${BASE_URL:-http://127.0.0.1:4000}"
USER_ARGS=()

if command -v id >/dev/null 2>&1; then
USER_ARGS=(--user "$(id -u):$(id -g)")
fi

cleanup() {
docker rm -f "$SERVER_CONTAINER" >/dev/null 2>&1 || true
Expand All @@ -21,8 +26,12 @@ echo "[2/5] Install Playwright browser"
npx playwright install chromium

echo "[3/5] Build static site in Jekyll container"
docker run --rm -v "$PWD":/srv/jekyll "$SITE_IMAGE" \
jekyll build --source /srv/jekyll --destination /srv/jekyll/_site
# Run as host user (when available) and disable disk cache to avoid permission issues on host-mounted volumes in CI.
docker run --rm \
"${USER_ARGS[@]}" \
--entrypoint /usr/gem/bin/jekyll \
-v "$PWD":/srv/jekyll "$SITE_IMAGE" \
build --source /srv/jekyll --destination /srv/jekyll/_site --disable-disk-cache

echo "[4/5] Start site container on http://127.0.0.1:4000"
docker run -d --name "$SERVER_CONTAINER" -p 4000:80 \
Expand Down
3 changes: 2 additions & 1 deletion tests/e2e/site-smoke.spec.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { test, expect } from '@playwright/test';
test('home page loads critical identity content', async ({ page }) => {
await page.goto('/');
await expect(page.getByRole('heading', { level: 1, name: /DEGODEZ Sebastien|DEGODEZ Sébastien/i })).toBeVisible();
await expect(page.locator('.hero__role')).toContainText(/Software Engineer/i);
await expect(page.locator('.hero__role')).toContainText(/Tech Lead/i);
await expect(page.locator('.hero__role')).toContainText(/AXA France/i);
});

test('brag page loads projects section', async ({ page }) => {
Expand Down
7 changes: 7 additions & 0 deletions tests/site-regression.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,13 @@ test('homepage keeps critical identity content', () => {
assert.match(index, /Software Engineer.+AXA France/i, 'Missing current role');
assert.match(index, /Brag Document/i, 'Missing Brag Document CTA');
assert.match(index, /LinkedIn/i, 'Missing LinkedIn link');
assert.match(index, /HVE/i, 'Missing HVE phase explanation');
assert.match(index, /BRD/i, 'Missing BRD phase explanation');
assert.match(index, /PRD/i, 'Missing PRD phase explanation');
assert.match(index, /High Value Exploration/i, 'Missing HVE long-form explanation');
assert.match(index, /Business Requirements Document/i, 'Missing BRD long-form explanation');
assert.match(index, /Product Requirements Document/i, 'Missing PRD long-form explanation');
assert.match(index, /Agents & Skills/i, 'Missing agents and skills section');
});

test('layout keeps navigation shell and design tokens', () => {
Expand Down