yasukei.github.io

👉 https://yasukei.github.io/

How to

Setup

npm ci                              # Install dependencies
npx playwright install --with-deps  # Install playwright dependencies for browser test and e2e test

Run & Build

npm run dev           # Run local development server
npm run build         # Build for production at ./dist
npm run docs:preview  # Preview production build

Test

npm run typecheck     # Run type check
npm run test:unit     # Run unit test (Logic + Component + Repository-wide)
npm run test:browser  # Run browser test
npm run test:e2e      # Run e2e test
npm run test          # Run unit + browser test + e2e

Project Structure

docs/                      Everything published to the site
├── .vitepress/config.mts  Site config; the sidebar is generated by walking
│                          docs/notes and docs/tools, so a new page shows up
│                          without being registered anywhere
├── index.md               Home page
├── notes/                 Notes, one directory per category
│   └── notes.data.ts      Supplies the /notes index page
├── tools/                 One markdown page per tool
│   └── tools.data.ts      Supplies the /tools index page
├── components/            Vue components that the pages mount
├── lib/                   Plain TypeScript behind the tools; no Vue, and no
│                          DOM except canvas-resize.ts (the canvas pipeline)
│                          and the *-probes.ts files (canvas, WebGL, audio,
│                          fonts, voices, geolocation, camera)
└── utils.ts               Shared helpers behind both index pages
test/                      Checks that span the whole repository
e2e/                       Smoke tests that drive the built site in a browser
vitest.config.ts           The unit and browser test suites
playwright.config.ts       The e2e suite; serves the built dist/
.github/workflows/         CI: type check -> unit -> install browsers ->
                           browser -> build -> e2e -> deploy to Pages

A new tool is a markdown page in docs/tools/, a component in docs/components/, and whatever logic is worth testing on its own in docs/lib/ — which keeps the component thin and the logic reachable from a test.

Tests

Suite	Files	Runs in	Command
Logic	docs/lib/*.test.ts, docs/utils.test.ts	Node	npm run test:unit
Components	docs/components/*.test.ts	happy-dom	npm run test:unit
Repository-wide	test/*.test.ts	Node	npm run test:unit
Browser	*.browser.test.ts	Chromium, Firefox, WebKit	npm run test:browser
E2E	e2e/*.spec.ts	Chromium, Firefox, WebKit	npm run test:e2e

• Logic — pure functions behind the tools. Most behaviour is covered here.
• Components — Vue components mounted with a DOM: state, events, lifecycle.
• Repository-wide — links and heading anchors across every markdown file, and the contracts every tool page has to keep. New pages are picked up automatically.
• Browser — what happy-dom cannot do: real canvas pixels, how the engines differ when downscaling (see stepPlan in docs/lib/image-resize.ts), and that the fingerprint probes in docs/lib/*-probes.ts are repeatable.
• E2E — smoke tests against the built site: choose an image on a tool page and check that the downloaded file comes out at the right size. npm run test:e2e builds the site first and serves it with docs:preview.

Browser and E2E need the browsers from npx playwright install --with-deps. Add --browser=chromium to test:browser, or --project=chromium to test:e2e, to run one engine only.