Skip to content

fix: link SPA contract-card titles to the detail pages (#611 follow-up) #613

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

Merged
rdmueller merged 1 commit into from
Jun 12, 2026
Merged

fix: link SPA contract-card titles to the detail pages (#611 follow-up) #613

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions website/src/components/contracts-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ export function renderContractsPage() {
`
}

function renderContractCard(contract, isSelected) {
export function renderContractCard(contract, isSelected) {
const title = getLocalizedField(contract, 'title')
const description = getLocalizedField(contract, 'description')
const template = getLocalizedField(contract, 'template')
Expand Down Expand Up @@ -213,7 +213,7 @@ function renderContractCard(contract, isSelected) {
/>
<div class="flex-1 min-w-0">
<div class="flex items-start justify-between gap-2 mb-1">
<h3 class="text-lg font-semibold text-[var(--color-text)]">${esc(title)}</h3>
<h3 class="text-lg font-semibold text-[var(--color-text)]"><a href="${import.meta.env.BASE_URL}contract/${esc(contract.id)}" class="hover:underline" title="${esc(i18n.t('contracts.permalink'))}">${esc(title)}</a></h3>
<button
type="button"
class="contract-copy-btn shrink-0 inline-flex items-center justify-center rounded-md border border-[var(--color-border)] p-1.5 text-[var(--color-text-secondary)] hover:text-blue-600 hover:border-blue-300 dark:hover:text-blue-400 dark:hover:border-blue-700 transition-colors"
Expand Down
26 changes: 26 additions & 0 deletions website/src/components/contracts-page.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { describe, it, expect, vi } from 'vitest'

vi.mock('../i18n.js', () => ({
i18n: {
t: (key) => key,
currentLang: () => 'en',
},
}))

import { renderContractCard } from './contracts-page.js'

describe('renderContractCard', () => {
const contract = {
id: 'specification',
title: 'Specification',
description: 'What we mean when we say spec',
template: '- Cockburn use cases\n- Gherkin',
anchors: ['cockburn-use-cases'],
}

it('links the card title to the contract detail page', () => {
const html = renderContractCard(contract, false)
expect(html).toContain(`href="${import.meta.env.BASE_URL}contract/specification"`)
expect(html).toMatch(/<a [^>]*contract\/specification[^>]*>Specification<\/a>/)
})
})
15 changes: 8 additions & 7 deletions website/src/translations/de.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,10 @@
"nav.categoryJump": "Zu Kategorie springen",
"contracts.title": "Semantic Contracts",
"contracts.explanation": "Semantic Anchors referenzieren öffentliches Wissen, das LLMs bereits kennen. Aber die Konventionen, Templates und Definitionen deines Teams? Dafür braucht es Semantic Contracts. Ein Contract definiert, was ein Begriff in deinem Projekt bedeutet — entweder durch Komposition etablierter Anker oder durch eigene Definitionen, die nur in deinem Team existieren. Wähle die passenden aus und lade sie für deine AGENTS.md oder CLAUDE.md herunter.",
"contracts.linkedinLink": "Lies die ganze Geschichte hinter Semantic Contracts auf LinkedIn \u2192",
"contracts.linkedinLink": "Lies die ganze Geschichte hinter Semantic Contracts auf LinkedIn →",
"contracts.download": "Download",
"contracts.copy": "Kopieren",
"contracts.permalink": "Direktlink zu diesem Contract",
"contracts.copied": "Kopiert!",
"contracts.copyOne": "Diesen Contract kopieren",
"contracts.plainText": "Plain-Text-Version aller Contracts (contracts.txt) →",
Expand Down Expand Up @@ -121,13 +122,13 @@
"modal.share": "Teilen",
"onboarding.slogan1": "Semantic Anchors.",
"onboarding.slogan2": "Ein Wort, und die KI versteht den Rest.",
"onboarding.text0": "Semantic Anchors l\u00e4dst du nicht herunter und installierst sie nicht. Sie stecken bereits in jedem modernen KI-Modell \u2014 du brauchst nur das richtige Wort.",
"onboarding.text1": "Stell dir vor, du sagst ein einziges Wort \u2013 und dein Gegen\u00fcber versteht sofort ein ganzes Konzept.",
"onboarding.text2": "Ein Semantic Anchor ist ein etablierter Begriff, der ein ganzes Wissensgebiet aktiviert. Wie ein Anker, der ein Schiff an einem festen Punkt h\u00e4lt \u2013 so verankert ein Semantic Anchor dein Gespr\u00e4ch an einem pr\u00e4zisen Konzept.",
"onboarding.text3": "Das funktioniert, weil KI-Modelle auf Millionen von Texten trainiert wurden. Begriffe wie MECE, Clean Architecture oder Feynman-Technik l\u00f6sen sofort tiefes Kontextwissen aus.",
"onboarding.text4": "Statt lange Prompts zu schreiben, sagst du einfach den richtigen Anker \u2013 und die KI liefert.",
"onboarding.text0": "Semantic Anchors lädst du nicht herunter und installierst sie nicht. Sie stecken bereits in jedem modernen KI-Modell — du brauchst nur das richtige Wort.",
"onboarding.text1": "Stell dir vor, du sagst ein einziges Wort – und dein Gegenüber versteht sofort ein ganzes Konzept.",
"onboarding.text2": "Ein Semantic Anchor ist ein etablierter Begriff, der ein ganzes Wissensgebiet aktiviert. Wie ein Anker, der ein Schiff an einem festen Punkt hält – so verankert ein Semantic Anchor dein Gespräch an einem präzisen Konzept.",
"onboarding.text3": "Das funktioniert, weil KI-Modelle auf Millionen von Texten trainiert wurden. Begriffe wie MECE, Clean Architecture oder Feynman-Technik lösen sofort tiefes Kontextwissen aus.",
"onboarding.text4": "Statt lange Prompts zu schreiben, sagst du einfach den richtigen Anker – und die KI liefert.",
"onboarding.cta": "Katalog erkunden",
"onboarding.watchVideo": "Erkl\u00e4rvideo ansehen",
"onboarding.watchVideo": "Erklärvideo ansehen",
"onboarding.infoButton": "Was sind Semantic Anchors?",
"umbrella.subAnchors": "Patterns in dieser Sammlung",
"umbrella.notAnAnchor": "(kein semantischer Anker)",
Expand Down
11 changes: 6 additions & 5 deletions website/src/translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,10 @@
"nav.categoryJump": "Jump to category",
"contracts.title": "Semantic Contracts",
"contracts.explanation": "Semantic Anchors reference public knowledge that LLMs already understand. But your team's conventions, templates, and definitions? Those need Semantic Contracts. A contract defines what a term means in your project — either by composing established anchors or by providing custom definitions that only exist within your team. Select the ones that fit and download them for your AGENTS.md or CLAUDE.md.",
"contracts.linkedinLink": "Read the full story behind Semantic Contracts on LinkedIn \u2192",
"contracts.linkedinLink": "Read the full story behind Semantic Contracts on LinkedIn →",
"contracts.download": "Download",
"contracts.copy": "Copy",
"contracts.permalink": "Link to this contract",
"contracts.copied": "Copied!",
"contracts.copyOne": "Copy this contract",
"contracts.plainText": "Plain-text version of all contracts (contracts.txt) →",
Expand Down Expand Up @@ -121,11 +122,11 @@
"modal.share": "Share",
"onboarding.slogan1": "Semantic Anchors.",
"onboarding.slogan2": "One word, and the AI gets the rest.",
"onboarding.text0": "You don't download or install Semantic Anchors. They live inside any modern AI model \u2014 you just need the right word.",
"onboarding.text1": "Imagine saying just one word \u2013 and your counterpart instantly understands an entire concept.",
"onboarding.text2": "A Semantic Anchor is an established term that activates an entire body of knowledge. Like an anchor holding a ship in place \u2013 a Semantic Anchor pins your conversation to a precise concept.",
"onboarding.text0": "You don't download or install Semantic Anchors. They live inside any modern AI model — you just need the right word.",
"onboarding.text1": "Imagine saying just one word – and your counterpart instantly understands an entire concept.",
"onboarding.text2": "A Semantic Anchor is an established term that activates an entire body of knowledge. Like an anchor holding a ship in place – a Semantic Anchor pins your conversation to a precise concept.",
"onboarding.text3": "This works because AI models were trained on millions of texts. Terms like MECE, Clean Architecture, or the Feynman Technique instantly trigger deep contextual knowledge.",
"onboarding.text4": "Instead of writing long prompts, just use the right anchor \u2013 and the AI delivers.",
"onboarding.text4": "Instead of writing long prompts, just use the right anchor – and the AI delivers.",
"onboarding.cta": "Explore Catalog",
"onboarding.watchVideo": "Watch explainer video",
"onboarding.infoButton": "What are Semantic Anchors?",
Expand Down
Loading