shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve onboarding section across home and about
All checks were successful
Deploy Sokko G / deploy (push) Successful in 8s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-12 21:45:09 +02:00
parent 53ecde8d2b
commit 2f1526b86b
17 changed files with 440 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

42
tests/helpers/data-validation.mjs
View file

@ -81,10 +81,12 @@ export function validateSiteContent(site) {
"home.stats.toolboxPlural",
"home.stats.toolSingular",
"home.stats.toolPlural",
"home.orientation.ariaLabel",
"home.startMap.eyebrow",
"home.startMap.title",
"home.startMap.description",
"home.onboarding.eyebrow",
"home.onboarding.title",
"home.onboarding.description",
"home.onboarding.stepsTitle",
"home.onboarding.sliderLabel",
"home.onboarding.slideButtonLabel",
"home.origin.eyebrow",
"home.origin.title",
"home.origin.visualAlt",
@ -531,27 +533,39 @@ export function validateSiteContent(site) {
assertNonEmptyString({ tool }, "tool.description");
});
const orientationCards = valueAt(site, "home.orientation.cards");
assert.ok(Array.isArray(orientationCards), "home.orientation.cards must be an array");
assert.ok(orientationCards.length >= 2, "home.orientation.cards must contain at least 2 items");
orientationCards.forEach((card, index) => {
assert.equal(typeof card, "object", `home.orientation.cards[${index}] must be an object`);
const onboardingCards = valueAt(site, "home.onboarding.cards");
assert.ok(Array.isArray(onboardingCards), "home.onboarding.cards must be an array");
assert.ok(onboardingCards.length >= 2, "home.onboarding.cards must contain at least 2 items");
onboardingCards.forEach((card, index) => {
assert.equal(typeof card, "object", `home.onboarding.cards[${index}] must be an object`);
assertNonEmptyString({ card }, "card.icon");
assertNonEmptyString({ card }, "card.image");
assertNonEmptyString({ card }, "card.title");
assertNonEmptyString({ card }, "card.text");
assertNonEmptyString({ card }, "card.action");
assertNonEmptyString({ card }, "card.href");
});
const startMapSteps = valueAt(site, "home.startMap.steps");
assert.ok(Array.isArray(startMapSteps), "home.startMap.steps must be an array");
assert.ok(startMapSteps.length >= 1, "home.startMap.steps must contain at least 1 item");
startMapSteps.forEach((step, index) => {
assert.equal(typeof step, "object", `home.startMap.steps[${index}] must be an object`);
const onboardingSteps = valueAt(site, "home.onboarding.steps");
assert.ok(Array.isArray(onboardingSteps), "home.onboarding.steps must be an array");
assert.ok(onboardingSteps.length >= 1, "home.onboarding.steps must contain at least 1 item");
onboardingSteps.forEach((step, index) => {
assert.equal(typeof step, "object", `home.onboarding.steps[${index}] must be an object`);
assertNonEmptyString({ step }, "step.title");
assertNonEmptyString({ step }, "step.text");
});
const onboardingSlides = valueAt(site, "home.onboarding.slides");
assert.ok(Array.isArray(onboardingSlides), "home.onboarding.slides must be an array");
assert.equal(onboardingSlides.length, 4, "home.onboarding.slides must contain 4 items");
onboardingSlides.forEach((slide, index) => {
assert.equal(typeof slide, "object", `home.onboarding.slides[${index}] must be an object`);
assertNonEmptyString({ slide }, "slide.src");
assertNonEmptyString({ slide }, "slide.alt");
assertNonEmptyString({ slide }, "slide.title");
assertNonEmptyString({ slide }, "slide.text");
});
const lines = valueAt(site, "home.origin.lines");
assert.ok(Array.isArray(lines), "home.origin.lines must be an array");
assert.ok(lines.length >= 2, "home.origin.lines must contain at least 2 items");

14
tests/static-app.test.mjs
View file

@ -14,6 +14,7 @@ test("vite entrypoint and app shell are wired", async () => {
const imageViewer = await readFile("website/src/components/ImageViewer.jsx", "utf8");
const richText = await readFile("website/src/components/RichText.jsx", "utf8");
const homePage = await readFile("website/src/pages/HomePage.jsx", "utf8");
const homeOnboarding = await readFile("website/src/pages/HomeOnboardingSection.jsx", "utf8");
const aboutPage = await readFile("website/src/pages/AboutPage.jsx", "utf8");
const libraryPage = await readFile("website/src/pages/LibraryPage.jsx", "utf8");
const hashRouter = await readFile("website/src/router/hashRouter.js", "utf8");
@ -60,8 +61,15 @@ test("vite entrypoint and app shell are wired", async () => {
assert.match(richText, /value\.split\("\\n"\)/);
assert.match(richText, /<br key=/);
assert.match(homePage, /export function HomePage/);
assert.match(homePage, /HomeOnboardingSection/);
assert.match(homePage, /import\.meta\.env\.DEV \|\| toolboxes\.length === 0/);
assert.match(homePage, /dragon\.png/);
assert.match(homeOnboarding, /export function HomeOnboardingSection/);
assert.match(homeOnboarding, /prefers-reduced-motion: reduce/);
assert.match(homeOnboarding, /home-onboarding-dots/);
assert.match(aboutPage, /export function AboutPage/);
assert.match(aboutPage, /HomeOnboardingSection/);
assert.match(aboutPage, /siteContent\.home\.onboarding/);
assert.match(aboutPage, /module-icon-\$\{tool\.icon \|\| "notepad"\}/);
assert.match(libraryPage, /export function LibraryPage/);
assert.match(libraryPage, /LIBRARY_TOOLBOX_ID/);
@ -125,6 +133,12 @@ test("legacy icons and primary images are available", async () => {
await readFile("website/public/static/icons/zoom.svg", "utf8");
await readFile("website/public/favicon.ico");
await readFile("website/public/static/img/dragon.png");
await readFile("website/public/static/img/dragon-gameguide.png");
await readFile("website/public/static/img/dragon-toolbox.png");
await readFile("website/public/static/img/onboarding/toolbox-overview.png");
await readFile("website/public/static/img/onboarding/toolbox-tools.png");
await readFile("website/public/static/img/onboarding/toolbox-save.png");
await readFile("website/public/static/img/onboarding/toolbox-game-link.png");
await readFile("website/public/static/img/toolbox-icons/toolbox.png");
await readFile("website/public/static/img/toolbox-icons/sword.png");
await readFile("website/public/static/img/toolbox-icons/puzzle.png");

3
tests/static-styles.test.mjs
View file

@ -37,6 +37,9 @@ test("style entrypoint and theme layers are wired", async () => {
assert.match(styleHome, /font-style: italic/);
assert.match(styleHome, /\.about-page/);
assert.match(styleHome, /\.nebula-panel/);
assert.match(styleHome, /\.home-onboarding-layout/);
assert.match(styleHome, /\.home-onboarding-slider figcaption/);
assert.match(styleHome, /\.home-onboarding-dots/);
assert.match(styleHome, /\.about-story-section/);
assert.match(styleHome, /\.about-tools-list/);
assert.match(styleHome, /\.about-tool-item \.module-icon/);