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

[Copilot]

The homepage needed to shift from a generic portfolio layout to a phase-driven handbook explaining how HVE, BRD, and PRD work together, plus architecture/practices/ADR context. It also needed clearer handling of Mermaid syntax errors and CI-safe site regression behavior.

• Homepage restructured as a phase-by-phase handbook

  • Replaced highlight/bento-first framing with a guided flow: HVE → BRD → PRD.
  • Added explicit sections for:
    • agent/skill contributions and intended outcomes,
    • Clean Architecture positioning,
    • Object Calisthenics rationale,
    • ADR decision traceability,
    • deep-link subpages for larger topics.
  • Preserved key identity/navigation content expected by existing contracts.

• Mermaid runtime error messaging made user-readable

  • Added a lightweight DOM handler targeting .mermaid blocks.
  • Detects Mermaid runtime strings like Syntax error in text + version marker and replaces raw output with actionable French guidance.

• Layout contract and regression alignment

  • Restored design-tokens.css wiring in the default layout to satisfy structural expectations and keep visual token linkage explicit.

• CI/E2E container flow hardened

  • Updated the Jekyll build invocation in scripts/run-e2e-playwright.sh to avoid host-volume permission failures in containerized runs.
  • Build now runs via explicit Jekyll entrypoint with host user mapping when available.

• Regression coverage updated for new homepage contract

  • Extended site regression checks to validate handbook anchors/content presence (including HVE/BRD/PRD long-form naming).
  • Updated smoke assertion for homepage role text to reflect current content.

<!-- default layout: Mermaid error normalization -->
<script>
  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>

Original prompt

il faut améliorer la page d'accueil.
Corriger les messagers d'erreur comme Syntax error in text
mermaid version 10.9.6

Et restructurer complement le site pour qu'il soit expliquer phase par phase l'intéret.

On démarre de HVE, BRD et PRD pour montrer comment les 2 fonctionnent ensemble.
L'apport de l'un et l'autre.
Et de la documentation expliquant chaque apport d'agent de ses skills avec ce qu'il vise.
Clean archi -> Avec sous page pour comprendre dans le détails quand trop grand (2000 a 3000 word max)
Object Calisthenics ...

Les ADR , architectures,

Je veux tout comprendre comme si c'était un handbook.

The user has attached the following file paths as relevant context:

• .github/instructions/business-lexicon.instructions.md
• .github/instructions/shared/hve-core-location.instructions.md
• .github/copilot-instructions.md
• .github/copilot-instructions.md
• CLAUDE.md

[Chronological Review: The conversation began with the user expressing a desire to build a workflow that updates documentation based on completed work to prevent documentation drift. The user specified using the "genesis" tool and indicated that the workflow should be implemented in the "skraft-plugin" repository. The user then clarified that the workflow should not be in the "meetup-coding-with-ai" repository. Following this, the user requested to update the site documentation to explain how to use "skraft," detailing the contributions of each agent and reviewer, and providing explanations for developers and arguments for decision-makers. The user also pointed out that the agent should be in English. The conversation continued with the user mentioning an anomaly to correct and expressing issues with accessing the GitHub actions. The user requested to trigger actions without merging and reported a 404 error on the site. Finally, the user requested improvements to the homepage, restructuring the site to explain the phases of HVE, BRD, and PRD, and detailing the contributions of agents and skills.]

[Intent Mapping:

1. "Je veux construire une workflow qui mettra la documentation a jour en fonction de ce qui est déjà réalisé." - User wants to create a workflow for documentation updates.
2. "je le veux dans skraft-plugin" - User specifies the repository for the workflow.
3. "pas dans meetup-coding-with-ai" - User clarifies the repository to avoid.
4. "il faut mettre a jour le site" - User requests an update to the site documentation.
5. "On en profite pour faire une explication de chaque pratique pour développeur moyen." - User wants explanations for developers.
6. "C'est l'agent qui doit etre en anglais" - User specifies the language for the agent.
7. "j'avais l'anomalie a corriger aussi" - User mentions a specific anomaly to correct.
8. "Je veux declencher SANS merge pour l'instant" - User requests to trigger actions without merging.
9. "il faut améliorer la page d'accueil." - User requests improvements to the homepage and restructuring of the site.]

[Technical Inventory:

• Tools: "genesis" for workflow creation, GitHub Actions for CI/CD.
• Repositories: "skraft-plugin," "meetup-coding-with-ai."
• Documentation structure: User wants a handbook-style documentation covering various aspects of the project, including HVE, BRD, PRD, and agent contributions.]

[Code Archaeology:

• Recent file: "/Users/sebastiendegodez/Documents/source.nosync/skraft-plugin/docs/site/index.html" - User is actively working on this file for site improvements.
• Workflow file: "/Users/sebastiendegodez/Documents/source.nosync/skraft-plugin/.github/workflows/doc-sync.md" - User has made edits to this file.]

[Progress Assessment:

• Completed: User has outlined the need for a workflow and site updates.
• Pending: Implementation of the workflow, site restructuring, and documentation improvements.]

[Context Validation: All critical information for continuation is captured, including user goals for documentation updates, site improvements, and specific requests for agent language and content structure.]

[Recent Commands Analysis:

• Last Agent Commands: User requested to trigger actions without merging and to improve the homepage.
• Tool Results Summary: User reported a 404 error on the site and mentioned issues with GitHub actions.
• Pre-Summary State: User was actively working on improving the homepage and restructuring the site documentation.
• Operation Context: These commands relate to the user's goal of enhancing documentation and site usability.]

1. Conversation Overview: - Primary Objectives: User wants to create a workflow for documentation updates, improve site documentation, and restructure the site to explain various phases and contributions of agents. - Session Context: The conversation has evolved from creating a workflow to addressing specific documentation needs and site improvements. - User Intent Evolution: User's needs have shifted from general workflow creation to detailed requests for documentation stru...

Created from VS Code.