Skip to content

Commit 693217f

Browse files
authored
Merge pull request #369 from raifdmueller/feat/contracts-expansion
feat: expand Semantic Contracts to cover full workflow + fix More menu
2 parents d9f0600 + 1d1c893 commit 693217f

5 files changed

Lines changed: 92 additions & 22 deletions

File tree

website/public/data/contracts.json

Lines changed: 61 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,26 @@
1010
"templateDe": "Wenn wir von einer \"Spezifikation\" oder \"Spec\" sprechen, meinen wir:\n- Use Cases mit Activity Diagrams (alle Pfade, nicht nur der Happy Path)\n- Akzeptanzkriterien im Gherkin-Format (Given/When/Then)",
1111
"category": "requirements"
1212
},
13+
{
14+
"id": "requirements-discovery",
15+
"title": "Requirements Discovery",
16+
"titleDe": "Anforderungsermittlung",
17+
"description": "How we clarify requirements before writing specs",
18+
"descriptionDe": "Wie wir Anforderungen klären, bevor wir Specs schreiben",
19+
"anchors": ["socratic-method", "mece", "prd"],
20+
"template": "Clarify requirements using the Socratic Method:\n- Ask at most 3 questions at a time, challenge assumptions\n- Use MECE to ensure questions cover all areas without overlap\n- Keep asking until you fully understand the requirements\n- Document as a PRD (problem, goals, personas, success criteria, scope)",
21+
"templateDe": "Anforderungen mit der Sokratischen Methode klären:\n- Höchstens 3 Fragen gleichzeitig, Annahmen hinterfragen\n- MECE nutzen, um alle Bereiche überlappungsfrei abzudecken\n- Weiterfragen bis die Anforderungen vollständig verstanden sind\n- Als PRD dokumentieren (Problem, Ziele, Personas, Erfolgskriterien, Scope)",
22+
"category": "requirements"
23+
},
1324
{
1425
"id": "architecture-documentation",
1526
"title": "Architecture Documentation",
1627
"titleDe": "Architekturdokumentation",
17-
"description": "How we document architecture",
18-
"descriptionDe": "Wie wir Architektur dokumentieren",
19-
"anchors": ["arc42", "c4-diagrams", "adr-according-to-nygard"],
20-
"template": "When we say \"architecture documentation\", we mean:\n- arc42 template with all 12 sections\n- C4 diagrams for visualization\n- ADRs according to Nygard for decisions",
21-
"templateDe": "Wenn wir \"Architekturdokumentation\" sagen, meinen wir:\n- arc42-Template mit allen 12 Abschnitten\n- C4-Diagramme zur Visualisierung\n- ADRs nach Nygard für Entscheidungen",
28+
"description": "How we document architecture with ADRs and decision evaluation",
29+
"descriptionDe": "Wie wir Architektur mit ADRs und Entscheidungsbewertung dokumentieren",
30+
"anchors": ["arc42", "c4-diagrams", "adr-according-to-nygard", "pugh-matrix"],
31+
"template": "Architecture documentation follows arc42 with all 12 sections.\n- C4 diagrams (PlantUML) for visualization at four abstraction levels\n- Every architecture decision documented as an ADR according to Nygard (Context, Decision, Status, Consequences)\n- Each ADR includes a Pugh Matrix with 3-point scale (-1, 0, +1) evaluating alternatives against quality goals",
32+
"templateDe": "Architekturdokumentation folgt arc42 mit allen 12 Abschnitten.\n- C4-Diagramme (PlantUML) zur Visualisierung auf vier Abstraktionsebenen\n- Jede Architekturentscheidung als ADR nach Nygard dokumentiert (Kontext, Entscheidung, Status, Konsequenzen)\n- Jedes ADR enthält eine Pugh-Matrix mit 3-Punkt-Skala (-1, 0, +1) zur Bewertung von Alternativen gegen Qualitätsziele",
2233
"category": "architecture"
2334
},
2435
{
@@ -32,26 +43,59 @@
3243
"templateDe": "An jeder Schichtgrenze:\n- Nur definierte DTOs und Contracts exponieren — niemals Domain-Entitäten\n- Explizites Mapping an jeder Nahtstelle\n- Anti-Corruption-Layer bei Integration externer Systeme\n- Abhängigkeitsrichtung zeigt nach innen (DIP)",
3344
"category": "architecture"
3445
},
46+
{
47+
"id": "backlog-management",
48+
"title": "Backlog Management",
49+
"titleDe": "Backlog-Verwaltung",
50+
"description": "How we create and prioritize implementation tasks",
51+
"descriptionDe": "Wie wir Implementierungsaufgaben erstellen und priorisieren",
52+
"anchors": ["invest", "moscow"],
53+
"template": "Create EPICs and User Stories as GitHub issues from the specification.\n- User Stories follow INVEST criteria (Independent, Negotiable, Valuable, Estimable, Small, Testable)\n- Prioritize with MoSCoW (Must/Should/Could/Won't)\n- Mark dependencies between issues\n- Groom the backlog regularly as the project evolves",
54+
"templateDe": "EPICs und User Stories als GitHub Issues aus der Spezifikation erstellen.\n- User Stories folgen den INVEST-Kriterien (Independent, Negotiable, Valuable, Estimable, Small, Testable)\n- Priorisierung mit MoSCoW (Must/Should/Could/Won't)\n- Abhängigkeiten zwischen Issues markieren\n- Backlog regelmäßig groomen",
55+
"category": "development"
56+
},
57+
{
58+
"id": "implement-next",
59+
"title": "Implement Next",
60+
"titleDe": "Nächstes Feature",
61+
"description": "The implementation loop for each issue",
62+
"descriptionDe": "Der Implementierungs-Loop für jedes Issue",
63+
"anchors": ["tdd-london-school", "tdd-chicago-school", "definition-of-done", "conventional-commits"],
64+
"template": "For each issue:\n- Create a feature branch for the EPIC\n- Select next issue from backlog (respect dependencies)\n- Analyze and document analysis as a comment on the issue\n- Implement using TDD (London or Chicago School as appropriate)\n- Commit with Conventional Commits, reference issue number\n- Check if spec or architecture docs need updating\n- When EPIC is complete, create a Pull Request",
65+
"templateDe": "Für jedes Issue:\n- Feature-Branch für das EPIC erstellen\n- Nächstes Issue aus dem Backlog wählen (Abhängigkeiten beachten)\n- Analysieren und Analyse als Kommentar am Issue dokumentieren\n- Mit TDD implementieren (London oder Chicago School je nach Kontext)\n- Mit Conventional Commits committen, Issue-Nummer referenzieren\n- Prüfen ob Spec oder Architektur-Docs aktualisiert werden müssen\n- Wenn EPIC fertig, Pull Request erstellen",
66+
"category": "development"
67+
},
3568
{
3669
"id": "code-quality",
3770
"title": "Code Quality",
3871
"titleDe": "Code-Qualität",
39-
"description": "Our coding conventions and quality standards",
40-
"descriptionDe": "Unsere Coding-Konventionen und Qualitätsstandards",
41-
"anchors": ["tdd-london-school", "tdd-chicago-school", "solid-principles", "dry-principle", "kiss-principle", "conventional-commits"],
42-
"template": "Our code follows:\n- TDD (London or Chicago School as appropriate)\n- SOLID principles\n- DRY, KISS\n- Conventional Commits",
43-
"templateDe": "Unser Code folgt:\n- TDD (London oder Chicago School je nach Kontext)\n- SOLID-Prinzipien\n- DRY, KISS\n- Conventional Commits",
72+
"description": "Coding conventions and design principles",
73+
"descriptionDe": "Coding-Konventionen und Design-Prinzipien",
74+
"anchors": ["solid-principles", "dry-principle", "kiss-principle", "domain-driven-design"],
75+
"template": "Our code follows:\n- SOLID principles\n- DRY, KISS\n- Ubiquitous Language from Domain-Driven Design (same terms in code as in the specification)",
76+
"templateDe": "Unser Code folgt:\n- SOLID-Prinzipien\n- DRY, KISS\n- Ubiquitous Language aus Domain-Driven Design (gleiche Begriffe im Code wie in der Spezifikation)",
4477
"category": "development"
4578
},
79+
{
80+
"id": "quality-review",
81+
"title": "Quality Review",
82+
"titleDe": "Qualitätsprüfung",
83+
"description": "How we review code and check for security issues",
84+
"descriptionDe": "Wie wir Code reviewen und Sicherheitsprobleme prüfen",
85+
"anchors": ["fagan-inspection", "owasp-top-10", "atam"],
86+
"template": "Quality assurance follows three layers:\n- Code review using Fagan Inspection (structured, systematic, with defined phases)\n- Security review based on OWASP Top 10\n- Architecture review using ATAM (scenario-based tradeoff analysis against quality goals)\n- Use a different AI model or fresh session for reviews to avoid blind spots",
87+
"templateDe": "Qualitätssicherung folgt drei Schichten:\n- Code-Review mit Fagan Inspection (strukturiert, systematisch, mit definierten Phasen)\n- Security-Review basierend auf OWASP Top 10\n- Architektur-Review mit ATAM (szenariobasierte Tradeoff-Analyse gegen Qualitätsziele)\n- Anderes KI-Modell oder frische Session für Reviews nutzen, um blinde Flecken zu vermeiden",
88+
"category": "quality"
89+
},
4690
{
4791
"id": "documentation-style",
48-
"title": "Documentation Style",
49-
"titleDe": "Dokumentationsstil",
50-
"description": "How we write and organize documentation",
51-
"descriptionDe": "Wie wir Dokumentation schreiben und organisieren",
52-
"anchors": ["plain-english-strunk-white", "gutes-deutsch-wolf-schneider", "docs-as-code", "diataxis-framework"],
53-
"template": "All documentation uses:\n- Plain English according to Strunk & White (or Gutes Deutsch nach Wolf Schneider for German)\n- Docs-as-Code with AsciiDoc\n- Diataxis for document types",
54-
"templateDe": "Alle Dokumentation verwendet:\n- Gutes Deutsch nach Wolf Schneider (oder Plain English nach Strunk & White für Englisch)\n- Docs-as-Code mit AsciiDoc\n- Diataxis für Dokumenttypen",
92+
"title": "Docs-as-Code",
93+
"titleDe": "Docs-as-Code",
94+
"description": "How we write and build documentation",
95+
"descriptionDe": "Wie wir Dokumentation schreiben und bauen",
96+
"anchors": ["docs-as-code", "plain-english-strunk-white", "gutes-deutsch-wolf-schneider"],
97+
"template": "Documentation follows Docs-as-Code according to Ralf D. Müller:\n- AsciiDoc as format, PlantUML for inline diagrams, built by docToolchain\n- Version-controlled, peer-reviewed, and built automatically\n- Plain English according to Strunk & White (or Gutes Deutsch nach Wolf Schneider)",
98+
"templateDe": "Dokumentation folgt Docs-as-Code nach Ralf D. Müller:\n- AsciiDoc als Format, PlantUML für Inline-Diagramme, gebaut von docToolchain\n- Versioniert, reviewt und automatisch gebaut\n- Gutes Deutsch nach Wolf Schneider (oder Plain English nach Strunk & White)",
5599
"category": "documentation"
56100
},
57101
{

website/src/components/header.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,12 @@ export function renderHeader() {
3737
<a href="#/" class="nav-link text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors" data-route="/" data-i18n="nav.catalog">${i18n.t('nav.catalog')}</a>
3838
<a href="#/contracts" class="nav-link text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors" data-route="/contracts" data-i18n="nav.contracts">${i18n.t('nav.contracts')}</a>
3939
<a href="#/workflow" class="nav-link text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors" data-route="/workflow" data-i18n="nav.workflow">${i18n.t('nav.workflow')}</a>
40-
<div class="relative group">
41-
<button class="nav-link text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors flex items-center gap-1" data-i18n="nav.more">
40+
<div class="relative" id="more-menu-container">
41+
<button id="more-menu-toggle" class="nav-link text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors flex items-center gap-1" data-i18n="nav.more">
4242
${i18n.t('nav.more')}
4343
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
4444
</button>
45-
<div class="absolute left-0 top-full mt-1 hidden group-hover:block bg-[var(--color-bg)] border border-[var(--color-border)] rounded-lg shadow-lg py-2 min-w-[160px] z-50">
45+
<div id="more-menu-dropdown" class="absolute left-0 top-full mt-1 hidden bg-[var(--color-bg)] border border-[var(--color-border)] rounded-lg shadow-lg py-2 min-w-[160px] z-50">
4646
<a href="#/about" class="nav-link block px-4 py-2 text-base text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/about" data-i18n="nav.about">${i18n.t('nav.about')}</a>
4747
<a href="#/agentskill" class="nav-link block px-4 py-2 text-base text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/agentskill" data-i18n="nav.agentskill">${i18n.t('nav.agentskill')}</a>
4848
<a href="#/contributing" class="nav-link block px-4 py-2 text-base text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/contributing" data-i18n="nav.contributing">${i18n.t('nav.contributing')}</a>

website/src/main.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ function initApp() {
127127
bindThemeToggle()
128128
bindLanguageToggle()
129129
bindMobileMenu()
130+
bindMoreMenu()
130131
bindOnboardingButton()
131132
updateActiveNavLink()
132133

@@ -476,6 +477,31 @@ function bindOnboardingButton() {
476477
})
477478
}
478479

480+
function bindMoreMenu() {
481+
const toggle = document.getElementById('more-menu-toggle')
482+
const dropdown = document.getElementById('more-menu-dropdown')
483+
if (!toggle || !dropdown) return
484+
485+
toggle.addEventListener('click', (e) => {
486+
e.stopPropagation()
487+
dropdown.classList.toggle('hidden')
488+
})
489+
490+
// Close on click outside
491+
document.addEventListener('click', (e) => {
492+
if (!e.target.closest('#more-menu-container')) {
493+
dropdown.classList.add('hidden')
494+
}
495+
})
496+
497+
// Close on nav link click
498+
dropdown.querySelectorAll('a').forEach((link) => {
499+
link.addEventListener('click', () => {
500+
dropdown.classList.add('hidden')
501+
})
502+
})
503+
}
504+
479505
function bindMobileMenu() {
480506
const menuToggle = document.getElementById('mobile-menu-toggle')
481507
const mobileMenu = document.getElementById('mobile-menu')

website/src/translations/de.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"header.slogan": "Ein Wort, und die KI versteht den Rest.",
66
"header.themeToggle.dark": "Zum Dunkelmodus wechseln",
77
"header.themeToggle.light": "Zum Hellmodus wechseln",
8-
"nav.catalog": "Katalog",
8+
"nav.catalog": "Anchors",
99
"nav.about": "Über",
1010
"nav.contributing": "Mitwirken",
1111
"nav.changelog": "Änderungsprotokoll",

website/src/translations/en.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"header.slogan": "One word, and the AI gets the rest.",
66
"header.themeToggle.dark": "Switch to dark mode",
77
"header.themeToggle.light": "Switch to light mode",
8-
"nav.catalog": "Catalog",
8+
"nav.catalog": "Anchors",
99
"nav.about": "About",
1010
"nav.contributing": "Contributing",
1111
"nav.changelog": "Changelog",

0 commit comments

Comments
 (0)