feat: Add onboarding modal with explainer video (#145) #146
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| node_modules/ | ||
| *.png | ||
| !website/public/logo.png | ||
| !website/public/icon.png | ||
| .playwright-mcp/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| # Onboarding Modal Design | ||
|
|
||
| **Issue:** #145 | ||
| **Date:** 2026-03-08 | ||
|
|
||
| ## Overview | ||
|
|
||
| Modal dialog explaining Semantic Anchors to first-time visitors. Combines logo, explainer video (YouTube Shorts), and concise text. | ||
|
|
||
| ## Components | ||
|
|
||
| ### 1. `onboarding-modal.js` | ||
|
|
||
| New component (separate from anchor-modal.js): | ||
| - `createOnboardingModal()`: Singleton DOM creation | ||
| - `showOnboarding()`: Opens modal, sets `overflow: hidden` | ||
| - `closeOnboarding()`: Closes, saves `localStorage.setItem('onboarding-seen', 'true')` | ||
| - `shouldShowOnboarding()`: Checks `localStorage.getItem('onboarding-seen')` | ||
|
|
||
| ### 2. Layout | ||
|
|
||
| **Desktop:** Logo top, slogan highlighted, video (YouTube embed) left + text right, CTA button bottom. | ||
|
|
||
| **Mobile:** Logo top, slogan highlighted, text, YouTube link (no embed), CTA button bottom. | ||
|
|
||
| ### 3. Header Change | ||
|
|
||
| Info icon (i) button next to site title. Calls `showOnboarding()`. | ||
|
|
||
| ### 4. i18n Keys | ||
|
|
||
| New keys in en.json/de.json: `onboarding.slogan1`, `onboarding.slogan2`, `onboarding.text1`-`text4`, `onboarding.cta`, `onboarding.watchVideo`, `onboarding.infoButton` | ||
|
|
||
| ### 5. Videos | ||
|
|
||
| - EN: https://youtube.com/shorts/Fb7t45E8_HE | ||
| - DE: https://youtube.com/shorts/cp-qqiHU-MA | ||
|
|
||
| ### 6. Text Content | ||
|
|
||
| **Slogan:** | ||
| - EN: "Semantic Anchors. One word, and the AI gets the rest." | ||
| - DE: "Semantic Anchors. Ein Wort, und die KI versteht den Rest." | ||
|
|
||
| **Body (4 paragraphs, condensed from video scripts):** | ||
|
|
||
| EN: | ||
| 1. Imagine saying just one word - and your counterpart instantly understands an entire concept. | ||
| 2. 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. | ||
| 3. 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. | ||
| 4. Instead of writing long prompts, just use the right anchor - and the AI delivers. | ||
|
|
||
| DE: | ||
| 1. Stell dir vor, du sagst ein einziges Wort - und dein Gegenüber versteht sofort ein ganzes Konzept. | ||
| 2. 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. | ||
| 3. 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. | ||
| 4. Statt lange Prompts zu schreiben, sagst du einfach den richtigen Anker - und die KI liefert. | ||
|
|
||
| ### 7. Accessibility | ||
|
|
||
| - Focus trap in modal | ||
| - ESC to close | ||
| - `role="dialog"`, `aria-modal="true"` | ||
|
|
||
| ### 8. Not Included (YAGNI) | ||
|
|
||
| - No open/close animation | ||
| - No "don't show again" checkbox | ||
| - No analytics | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| #!/usr/bin/env node | ||
| /** | ||
| * Sync anchor .adoc files from docs/anchors/ to website/public/docs/anchors/ | ||
| * | ||
| * Ensures the website always has the latest anchor files available for | ||
| * client-side rendering in the anchor modal. Runs as a pre-step for | ||
| * both dev and build. | ||
| * | ||
| * Usage: node scripts/sync-anchors.js | ||
| */ | ||
|
|
||
| const fs = require('fs') | ||
| const path = require('path') | ||
|
|
||
| const ROOT = path.join(__dirname, '..') | ||
| const SRC = path.join(ROOT, 'docs', 'anchors') | ||
| const DEST = path.join(ROOT, 'website', 'public', 'docs', 'anchors') | ||
|
|
||
| function sync() { | ||
| if (!fs.existsSync(SRC)) { | ||
| console.warn(`[sync-anchors] Source directory not found: ${SRC}`) | ||
| return | ||
| } | ||
|
|
||
| fs.mkdirSync(DEST, { recursive: true }) | ||
|
|
||
| const srcFiles = fs.readdirSync(SRC).filter((f) => f.endsWith('.adoc')) | ||
| let copied = 0 | ||
| let skipped = 0 | ||
|
|
||
| for (const file of srcFiles) { | ||
| const srcPath = path.join(SRC, file) | ||
| const destPath = path.join(DEST, file) | ||
|
|
||
| const srcStat = fs.statSync(srcPath) | ||
|
|
||
| if (fs.existsSync(destPath)) { | ||
| const destStat = fs.statSync(destPath) | ||
| if (srcStat.mtimeMs <= destStat.mtimeMs) { | ||
| skipped++ | ||
| continue | ||
| } | ||
| } | ||
|
|
||
| fs.copyFileSync(srcPath, destPath) | ||
| copied++ | ||
| } | ||
|
Comment on lines
+27
to
+47
Contributor
There was a problem hiding this comment. Das ist noch kein vollständiger Sync. Wenn ein Anchor in 🧹 Mögliche Ergänzung const srcFiles = fs.readdirSync(SRC).filter((f) => f.endsWith('.adoc'))
+ const destFiles = fs.readdirSync(DEST).filter((f) => f.endsWith('.adoc'))
let copied = 0
let skipped = 0
+
+ for (const file of destFiles) {
+ if (!srcFiles.includes(file)) {
+ fs.unlinkSync(path.join(DEST, file))
+ }
+ }
for (const file of srcFiles) {🤖 Prompt for AI Agents |
||
|
|
||
| console.log(`[sync-anchors] ${copied} copied, ${skipped} up-to-date (${srcFiles.length} total)`) | ||
| } | ||
|
|
||
| sync() | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.