From 4158b20978d02241db478da2101dae3409de22bc Mon Sep 17 00:00:00 2001 From: WizardLoop <67387949+WizardLoop@users.noreply.github.com> Date: Wed, 28 Oct 2026 15:19:24 +0200 Subject: [PATCH 1/2] I refined my studio motion, SVG identity and first-person copy --- .github/PULL_REQUEST_TEMPLATE.md | 2 +- .github/workflows/ci.yml | 20 + CHANGELOG.md | 51 +- CODE_OF_CONDUCT.md | 8 +- CONTRIBUTING.md | 8 +- README.md | 44 +- SECURITY.md | 10 +- THIRD_PARTY_NOTICES.md | 22 +- concepts/concept-a/index.html | 10 +- concepts/concept-b/index.html | 12 +- concepts/concept-c/index.html | 14 +- concepts/index.html | 4 +- docs/DEPLOYMENT.md | 22 +- docs/DESIGN-ASSET-INVENTORY.md | 72 +- docs/INTEGRATION-FEASIBILITY.md | 34 +- docs/QA-INTEGRATIONS.md | 20 +- docs/QA.md | 81 +- docs/REPOSITORY-AUDIT.md | 34 +- docs/previews/about-dark-mobile.png | Bin 0 -> 260956 bytes docs/previews/about-light-desktop.png | Bin 0 -> 392792 bytes docs/previews/contact-dark-mobile.png | Bin 111306 -> 110854 bytes docs/previews/contact-light-desktop.png | Bin 163932 -> 163540 bytes docs/previews/home-dark-desktop.png | Bin 928083 -> 1004172 bytes docs/previews/home-dark-mobile.png | Bin 533768 -> 555051 bytes docs/previews/home-light-desktop.png | Bin 918524 -> 997690 bytes docs/previews/home-light-mobile.png | Bin 440536 -> 506980 bytes docs/previews/posts-dark-mobile.png | Bin 105947 -> 153319 bytes docs/previews/posts-light-desktop.png | Bin 0 -> 252337 bytes docs/previews/projects-light-desktop.png | Bin 151150 -> 151579 bytes docs/previews/studio-dark-desktop.png | Bin 0 -> 202928 bytes docs/previews/studio-light-mobile.png | Bin 0 -> 91299 bytes docs/previews/work-dark-mobile.png | Bin 113699 -> 114019 bytes docs/previews/work-light-desktop.png | Bin 164364 -> 164804 bytes docs/qa/browser-summary.json | 133 +- docs/qa/lighthouse-summary.json | 1635 +++++++++---------- package-lock.json | 4 +- package.json | 5 +- public/media/animations/silver-grimoire.tgs | Bin 0 -> 61579 bytes public/media/posters/silver-grimoire.webp | Bin 0 -> 64110 bytes public/media/previews/silver-grimoire.webp | Bin 0 -> 32920 bytes public/media/profile/profile.json | 2 +- scripts/lighthouse.mjs | 9 +- scripts/render-tgs-poster.mjs | 161 ++ src/components/HeroArt.astro | 2 +- src/components/SparkMark.astro | 49 + src/config/site.ts | 2 +- src/content/artworks.json | 12 + src/layouts/Base.astro | 9 +- src/pages/about.astro | 8 +- src/pages/accessibility.astro | 2 +- src/pages/community.astro | 4 +- src/pages/cookies.astro | 2 +- src/pages/feedback.astro | 4 +- src/pages/index.astro | 22 +- src/pages/posts.astro | 72 +- src/pages/privacy.astro | 11 +- src/pages/projects.astro | 2 +- src/pages/security.astro | 2 +- src/pages/work.astro | 2 +- src/scripts/motion.ts | 76 +- src/styles/destinations.css | 33 + src/styles/global.css | 26 +- tests/site.spec.ts | 365 ++++- 63 files changed, 1884 insertions(+), 1238 deletions(-) create mode 100644 docs/previews/about-dark-mobile.png create mode 100644 docs/previews/about-light-desktop.png create mode 100644 docs/previews/posts-light-desktop.png create mode 100644 docs/previews/studio-dark-desktop.png create mode 100644 docs/previews/studio-light-mobile.png create mode 100644 public/media/animations/silver-grimoire.tgs create mode 100644 public/media/posters/silver-grimoire.webp create mode 100644 public/media/previews/silver-grimoire.webp create mode 100644 scripts/render-tgs-poster.mjs create mode 100644 src/components/SparkMark.astro diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index d15679f..4ba446b 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -8,6 +8,6 @@ List checks actually run, measured results and remaining limitations. Do not pre ## Publication -Merging into `main` triggers the GitHub Pages workflow. Confirm that the change is ready for the owner to publish, preserves `wizardloop.com` and existing URLs, and includes any relevant rollback notes. A pull request does not itself merge or deploy the change. +Merging into `main` triggers my GitHub Pages workflow. Confirm that the change is ready for me to publish, preserves `wizardloop.com` and existing URLs, and includes any relevant rollback notes. I review publication separately; a pull request does not itself merge or deploy the change. State any changes to external links, visitor data handling or hosting settings. Keep credentials and personal messages out of this description. diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 2bdec7a..c7da861 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -23,9 +23,29 @@ jobs: - run: npm run check - run: npx playwright install --with-deps chromium firefox webkit - run: npm run test:browsers + - name: Measure mobile Lighthouse + run: | + npm run preview > /tmp/wizardloop-preview.log 2>&1 & + preview_pid=$! + trap 'kill "$preview_pid" 2>/dev/null || true' EXIT + for attempt in {1..30}; do + if curl --fail --silent http://127.0.0.1:4322/ > /dev/null; then + break + fi + sleep 1 + done + curl --fail --silent http://127.0.0.1:4322/ > /dev/null + export CHROME_PATH="$(node -p "require('@playwright/test').chromium.executablePath()")" + npm run audit:performance - uses: actions/upload-artifact@v4 if: always() with: name: browser-quality-results path: artifacts/final/ retention-days: 7 + - uses: actions/upload-artifact@v4 + if: always() + with: + name: mobile-lighthouse-results + path: artifacts/lighthouse/ + retention-days: 7 diff --git a/CHANGELOG.md b/CHANGELOG.md index a6f4727..01b21d2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,32 +1,43 @@ # Changelog -These headings record source changes. They do not establish that a Git tag, GitHub Release or production deployment exists. +I record source changes here and identify verified deployments separately. A version heading alone does not establish that a Git tag or GitHub Release exists. -## 1.0.0-rc.2 - Unreleased +## 1.0.0-rc.3 - Unreleased -- Simplify the site to static GitHub Pages with manually maintained profile content and local media. -- Replace the feedback form with verified direct contact links while preserving `/feedback/`. -- Add an accessible email-copy action, persistent mobile-menu close control and visible current-page navigation. -- Refine the illustrated destination pages around original ink, paper, star and infinity artwork; keep the creator's existing wizard identity and motion. -- Preload the local body font to reduce initial text-layout work; record fresh Lighthouse measurements and broader three-engine responsive coverage. -- Direct Work and Posts visitors to the original Telegram channel and Projects visitors to all GitHub repositories; retain the existing page URLs. -- Remove automatic profile/post services, the feedback backend, CAPTCHA setup, related fixtures and obsolete operational instructions. -- Remove embedded-feed loading and explain the current external-link behavior in privacy, security and accessibility information. -- Publish validated `dist/` output on pushes to `main`, with a manual retry option. Require lint, typecheck, build and browser checks before deployment; keep deployment permissions in the deploy job. -- Document the one-time GitHub Actions publishing-source setting, direct content editing, verification and rollback. No DNS change or additional service credentials are required. +- I added Silver Grimoire to Home, About and Posts, with local still previews and the existing motion controls. +- I replaced decorative star glyphs with an original reusable SVG mark so the design does not depend on a device's emoji font. +- I cached animation source data and isolated each player's mutable copy so repeated artwork placements can run independently. +- I added a manual poster-generation command for animation asset editing. +- I added regression checks for SVG identity, delayed animation loading, independent playback and lifecycle recovery, plus Linux Lighthouse reports in review CI. +- I rewrote my site and repository prose in my own first-person voice while preserving factual history and third-party legal notices. -Current validation and known limits are recorded in [QA.md](docs/QA.md). This candidate does not claim completed legal conformance, human screen-reader review or a verified production release. +This source candidate has not been deployed. I recorded its measured browser checks, performance samples and the local Home performance limitation separately from the historical baseline in [QA.md](docs/QA.md). + +## 1.0.0-rc.2 - Deployed 2026-10-28 + +- I simplified my site to static GitHub Pages with manually maintained profile content and local media. +- I replaced the feedback form with verified direct contact links while preserving `/feedback/`. +- I added an accessible email-copy action, persistent mobile-menu close control and visible current-page navigation. +- I refined my illustrated destination pages around original ink, paper, star and infinity artwork while retaining my wizard identity and motion. +- I preloaded my local body font to reduce initial text-layout work and recorded fresh Lighthouse measurements and broader three-engine responsive coverage. +- I directed Work and Posts visitors to my Telegram channel and Projects visitors to all my GitHub repositories, retaining the existing page URLs. +- I removed automatic profile/post services, the feedback backend, CAPTCHA setup, related fixtures and obsolete operational instructions. +- I removed embedded-feed loading and explained external-link behavior in my privacy, security and accessibility information. +- I configured publication of validated `dist/` output on pushes to `main`, with a manual retry option. Lint, typecheck, build and browser checks run before deployment; deployment permissions stay in the deploy job. +- I documented the one-time GitHub Actions publishing-source setting, direct content editing, verification and rollback. I made no DNS change and added no service credentials. + +I merged this baseline through [PR #4](https://github.com/WizardLoop/wizardloop.github.io/pull/4) at `ef1157b` and verified it in production on 2026-10-28. [Deployment run 40679459115](https://github.com/WizardLoop/wizardloop.github.io/actions/runs/40679459115) passed 170 browser tests. I retain its local validation and known limits in the [pinned rc.2 QA report](https://github.com/WizardLoop/wizardloop.github.io/blob/ef1157bd1d3f45420656864b5cfbf895d9128f3a/docs/QA.md). I do not claim completed legal conformance or a human screen-reader review. ## 1.0.0-rc.1 - Earlier review candidate -- Rebuilt the personal site with Astro and the selected Spectrum Circuit direction, comic framing and the owner's wizard illustrations. -- Added responsive pages, themes, navigation, motion preferences, semantic metadata, static social artwork and domain-preserving builds. -- Included 30 original wizard animations, six flag samples, retained TGS sources, transparent posters and provenance manifests. -- Added native hero video and static fallbacks for decoders that stop or freeze, plus browser, accessibility and performance checks. -- Prototyped private profile/post synchronization and a feedback backend. Those components were removed in `1.0.0-rc.2` after the owner chose a simpler static scope. Their earlier code and review evidence remain in Git history. +- I rebuilt my personal site with Astro, the Spectrum Circuit direction, comic framing and my wizard illustrations. +- I added responsive pages, themes, navigation, motion preferences, semantic metadata, static social artwork and domain-preserving builds. +- I included 30 original wizard animations, six flag samples, retained TGS sources, transparent posters and provenance manifests. +- I added native hero video and static fallbacks for decoders that stop or freeze, plus browser, accessibility and performance checks. +- I prototyped private profile/post synchronization and a feedback backend. I removed those components in `1.0.0-rc.2` when I chose a simpler static scope. Their earlier code and review evidence remain in Git history. -The earlier service tests are historical evidence, not verification of a current live service. No release is implied by this entry. +I keep the earlier service tests as historical evidence, not verification of a current live service. This entry does not imply a release. ## Earlier baseline -The original four-file website remains in Git history at `658ed667c173f861cd16e6048126de12ec3648b9`, dated 2025-07-20. The initial audit found no tags or GitHub Releases; recheck before creating any release. Do not assign a historical semantic version retrospectively. Phase 1 tooling used `0.1.0-preview.1` for the three local concepts, not a production release. +My original four-file website remains in Git history at `658ed667c173f861cd16e6048126de12ec3648b9`, dated 2025-07-20. My initial audit found no tags or GitHub Releases; recheck before creating any release. I have not assigned a historical semantic version retrospectively. I used `0.1.0-preview.1` for the three local concepts' Phase 1 tooling, not a production release. diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 6c7ddd2..3496015 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,13 +1,13 @@ # Code of Conduct -This is a personal open-source project. Everyone participating in its issues, pull requests and discussions should be able to contribute without harassment. +This is my personal open-source project. I want everyone participating in its issues, pull requests and discussions to be able to contribute without harassment. Be respectful and specific. Discuss the work and its effects, explain disagreements, welcome questions and credit contributions. Respect privacy, accessibility needs and different backgrounds or levels of experience. Harassment, discriminatory abuse, threats, sexualized comments, impersonation, deliberate disruption and publishing another person's private information are not acceptable. Do not use project spaces for spam, unwanted solicitation or attempts to obtain credentials. -Report a concern privately to WizardLoop through [Telegram](https://t.me/wizardloop) or the published email, [wizard@wizardloop.com](mailto:wizard@wizardloop.com). Share only what is needed to understand the incident. Do not publish private evidence in an issue or circulate it unnecessarily. +Report a concern to me privately through [Telegram](https://t.me/wizardloop) or [wizard@wizardloop.com](mailto:wizard@wizardloop.com). Share only what is needed to understand the incident. Do not publish private evidence in an issue or circulate it unnecessarily. -The maintainer may request changes, remove inappropriate material or restrict participation to protect the project. The response should consider the conduct, its impact and whether it continued after a request to stop. No fixed response time or confidential reporting platform is promised by this document. +I may request changes, remove inappropriate material or restrict participation to protect the project. I consider the conduct, its impact and whether it continued after a request to stop. I do not promise a fixed response time or a dedicated confidential reporting platform. -These expectations apply to this repository and project spaces managed by its maintainer, and when someone explicitly represents the project elsewhere. This document does not claim authority over unrelated communities. +These expectations apply to this repository and project spaces I manage, and when someone explicitly represents the project elsewhere. I do not claim authority over unrelated communities. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 41ab192..fc037b1 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,6 +1,6 @@ # Contributing to WizardLoop -This repository is one creator's personal website. Contributions should preserve the owner's identity, verified content and control over publication. Open focused pull requests for corrections, and discuss major visual changes or dependencies first. Report vulnerabilities privately through [SECURITY.md](SECURITY.md). +This repository is my personal website. Please preserve my identity, verified content and control over publication when contributing. Open focused pull requests for corrections, and discuss major visual changes or dependencies with me first. Report vulnerabilities privately through [SECURITY.md](SECURITY.md). ## Local work @@ -9,7 +9,7 @@ This repository is one creator's personal website. Contributions should preserve 3. Install Node 22.23.4 or newer, run `npm ci`, then `npm run dev`. 4. Edit content, styles and browser interactions in their documented locations. No service credentials or mock server are needed. -Preserve `wizardloop.com`, both source CNAME files and existing public routes. Hosting or domain changes require a specific owner-reviewed proposal. Keep the site static unless the owner explicitly requests a different architecture. +Preserve `wizardloop.com`, both source CNAME files and existing public routes. I review hosting or domain changes as separate proposals. Keep my site static unless I explicitly request a different architecture. ## Content and interface @@ -18,7 +18,7 @@ Preserve `wizardloop.com`, both source CNAME files and existing public routes. H - Use a regular hyphen instead of U+2014 in controlled content and metadata. - Preserve keyboard access, visible focus, semantic headings, contrast and narrow-screen layouts. Honor reduced motion and the global motion control. - Keep useful content when JavaScript fails. Do not load external scripts or media merely to display a link to another service. -- Record asset provenance and licensing. MIT code contributions do not relicense the owner's branding or artwork. +- Record asset provenance and licensing. MIT code contributions do not relicense my branding or artwork. ## Validation and review @@ -28,6 +28,6 @@ Describe the concrete change, validation actually performed and remaining limits Keep lockfile updates with dependency changes. Exclude installed packages, build output, test artifacts, `.env` files, credentials and personal messages. Review the diff before submitting. -**An owner-approved merge into `main` triggers publication after checks pass.** Creating a pull request does not authorize someone else to merge it. Confirm publication readiness before merging and follow [DEPLOYMENT.md](docs/DEPLOYMENT.md). Tags, releases and DNS changes remain separate owner decisions. +**A merge I approve into `main` triggers publication after checks pass.** Creating a pull request does not authorize someone else to merge it. Confirm publication readiness with me before merging and follow [DEPLOYMENT.md](docs/DEPLOYMENT.md). I decide separately about tags, releases and DNS changes. New source contributions are offered under the repository's MIT license. Submit only material you may contribute and identify any different asset license. Participation follows [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md). diff --git a/README.md b/README.md index 1af71c3..799a116 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ # WizardLoop -The source of [wizardloop.com](https://wizardloop.com), the personal website of WizardLoop: independent design, illustration, animation, software, Telegram bots and open source. +This is the source of [wizardloop.com](https://wizardloop.com), my personal website. I'm WizardLoop, an independent creator working across design, illustration, animation, software, Telegram bots and open source. -This is a static Astro website for GitHub Pages. It presents the owner's wizard artwork and connects visitors to the Telegram channel, community, GitHub repositories and direct contact details. There is no application backend, automatic profile/post synchronization, feedback form or bot setup. The website requires no credentials. +I use Astro to publish a static website on GitHub Pages. I share my wizard artwork and link to my Telegram channel, community, GitHub repositories and direct contact details. I keep the site free of application backends, automatic profile/post synchronization, feedback forms and bot setup. Running the website requires no credentials. -**Version: `1.0.0-rc.2`.** This identifies the current source candidate, not a published release or a verified production deployment. See [QA.md](docs/QA.md) for recorded validation and its limits. +**Current source candidate: `1.0.0-rc.3`.** I have not deployed this candidate. My previous `1.0.0-rc.2` baseline was merged in [PR #4](https://github.com/WizardLoop/wizardloop.github.io/pull/4) at `ef1157b` and verified in production on 2026-10-28. [Its deployment run](https://github.com/WizardLoop/wizardloop.github.io/actions/runs/40679459115) passed 170 browser tests. I keep those results separate from the new candidate's validation in [QA.md](docs/QA.md). ## Run locally @@ -43,25 +43,34 @@ No `.env` file is required. The only example setting, `PUBLIC_PREVIEW=true`, mar | Reusable icons and artwork components | `src/components/` | | Theme, navigation and motion behavior | `src/scripts/` and `public/js/preferences.js` | -The artwork and flag manifests preserve the original asset collection and its provenance. They do not generate a public gallery or a current portfolio listing; the pages choose the illustrations they display. +I preserve my original asset collection and its provenance in the artwork and flag manifests. These inventories do not generate a public gallery or current portfolio listing; I choose the illustrations displayed on each page. -The local profile is edited in the repository. Changing a Telegram or GitHub profile does not update this site automatically. The Posts and Work pages link to the original Telegram content; Projects points to the owner's GitHub repositories. These destinations remain current on their respective services without requiring a feed importer or repository API request from this website. +I edit my local profile in the repository. Changing my Telegram or GitHub profile does not update this site automatically. My Posts and Work pages link to my original Telegram content; Projects points to my GitHub repositories. I update those destinations on their respective services without a feed importer or repository API request from this website. -Keep factual claims and external links verified. Do not invent clients, achievements or social profiles. Record provenance and rights for new media, provide meaningful alternative text, and preserve image dimensions. The wizard illustrations are original artwork, not screenshots of software or evidence of client relationships. +Keep factual claims and external links verified. Do not invent clients, achievements or social profiles. Record provenance and rights for new media, provide meaningful alternative text, and preserve image dimensions. My wizard illustrations are original artwork, not screenshots of software or evidence of client relationships. Controlled text, metadata and documentation must not contain the em dash character U+2014. Use a regular hyphen; source checks enforce this rule. ## Architecture -Astro generates complete HTML for Home, About, Work, Projects, Posts, Community, Contact at the retained `/feedback/` URL, Privacy, Cookies, Security, Accessibility and a custom 404. Directory output supports direct navigation and refreshes on GitHub Pages. Existing routes and the domain remain intact. +I use Astro to generate complete HTML for Home, About, Work, Projects, Posts, Community, Contact at the retained `/feedback/` URL, Privacy, Cookies, Security, Accessibility and a custom 404. Directory output supports direct navigation and refreshes on GitHub Pages. I preserve my existing routes and domain. -CSS, fonts, icons, profile assets and animation media are served locally. The Home hero uses two native 768 x 768 H.264 MP4 derivatives of the supplied `portal-alchemy` artwork, one per theme, with the original 2.4-second duration. Other TGS artwork uses the shared, lazy-loaded light Canvas Lottie player. Motion preferences, reduced motion and visibility controls limit playback; a still preview remains available when playback fails. +I serve CSS, fonts, icons, profile assets and animation media locally. My Home hero uses two native 768 x 768 H.264 MP4 derivatives of my `portal-alchemy` artwork, one per theme, with the original 2.4-second duration. Other TGS artwork uses a shared, lazy-loaded light Canvas Lottie player. I cache animation source data while keeping each placement's mutable player data separate. Motion preferences, reduced motion and visibility controls limit playback; a still preview remains available when playback fails. I use Silver Grimoire on Home, About and Posts, and reusable SVG sparks instead of decorative star text glyphs. -The build creates quality-94 WebP delivery copies from the unchanged lossless poster masters, preserving dimensions and alpha. It also generates static favicons and a 1200 x 630 social composition from the local avatar and original artwork. Run `node scripts/generate-brand.mjs` after a manual avatar change, or let `npm run build` regenerate these assets. Social-card typography uses installed Arial or a sans fallback and can vary by operating system; no system font is redistributed. +My build creates quality-94 WebP delivery copies from unchanged lossless poster masters, preserving dimensions and alpha. It also generates static favicons and a 1200 x 630 social composition from my local avatar and original artwork. Run `node scripts/generate-brand.mjs` after a manual avatar change, or let `npm run build` regenerate these assets. Social-card typography uses installed Arial or a sans fallback and can vary by operating system; I do not redistribute a system font. -External destinations are ordinary links. The current site does not embed Telegram, fetch remote profile/feed data, submit visitor messages or load a CAPTCHA. Following a link opens the destination service, whose terms and privacy practices apply. See [current integration boundaries](docs/QA-INTEGRATIONS.md). +To regenerate a still when editing an animation asset, install the Playwright Chromium browser and run: -`public/CNAME` is copied to `dist/CNAME` and remains `wizardloop.com`. The original root `CNAME`, `index.html` and PaperMod-attributed stylesheet are retained for recovery. Astro uses `src/` for the new site, and only `dist/` is deployed. There is no repository-name base path for this custom domain. +```sh +npm run media:poster -- silver-grimoire +npm run media:poster -- silver-grimoire 0.35 +``` + +The optional second argument selects a frame fraction from 0 up to, but not including, 1; the default is 0.35. This manual asset-editing step needs a browser. Ordinary development and static builds do not; browser QA remains a separate check. + +I use ordinary links for external destinations. I do not embed Telegram, fetch remote profile/feed data, submit visitor messages or load a CAPTCHA. Following a link opens the destination service, whose terms and privacy practices apply. See [current integration boundaries](docs/QA-INTEGRATIONS.md). + +My build copies `public/CNAME` to `dist/CNAME`, preserving `wizardloop.com`. I retain the original root `CNAME`, `index.html` and PaperMod-attributed stylesheet for recovery. Astro uses `src/` for my rebuilt site, and I deploy only `dist/`. This custom domain needs no repository-name base path. ## Quality checks @@ -83,20 +92,23 @@ On Linux, install browser system dependencies with `npx playwright install --wit | `npm test` | Chromium browser suite | | `npm run test:browsers` | Chromium suite and selected Firefox/WebKit checks | | `npm run audit:performance` | Lighthouse against the running built preview on port 4322 | +| `npm run media:poster -- silver-grimoire [frame-fraction]` | Manually regenerate an animation poster while editing media | Browser evidence is written under ignored `artifacts/final/`; performance reports go to `artifacts/lighthouse/`. See [QA.md](docs/QA.md) for measured results. Tests do not establish complete accessibility or legal conformance, and older reports do not verify later source changes. +My development-branch CI also measures six pages with Lighthouse after browser tests and retains a separate `mobile-lighthouse-results` artifact, including raw traces and network logs. Audit execution errors fail the check; numeric scores are evidence, not a fixed pass threshold. I document the Windows Home performance limitation and all samples in my QA report. + ## Publishing -**Merging a reviewed change into `main` triggers the Pages workflow.** The workflow runs lint, typecheck, build and browser checks before uploading `dist/` and deploying it. A failed build or test blocks publication. Pull request quality checks cannot deploy. +**When I merge a reviewed change into `main`, it triggers my Pages workflow.** The workflow runs lint, typecheck, build and browser checks before uploading `dist/` and deploying it. A failed build or test blocks publication. Pull request quality checks cannot deploy. -One-time prerequisite: in GitHub **Settings > Pages > Build and deployment**, the publishing source must be **GitHub Actions**. Preserve the existing `wizardloop.com` domain and HTTPS setting. The repository cannot establish or verify that account setting by itself; if it still publishes a branch, merging alone may continue serving the old root HTML. See [DEPLOYMENT.md](docs/DEPLOYMENT.md) for setup, manual retry, verification and rollback. +My verified baseline uses GitHub Pages publication. If restoring or reconfiguring it, confirm **Settings > Pages > Build and deployment** uses **GitHub Actions**. Preserve my existing `wizardloop.com` domain and HTTPS setting. The repository cannot change that account setting by itself; branch publication could serve my old root HTML instead of `dist/`. See [DEPLOYMENT.md](docs/DEPLOYMENT.md) for setup, manual retry, verification and rollback. -No Cloudflare account, server, bot token, CAPTCHA key, Python installation or personal access token is required. This workflow uses GitHub's built-in token and deployment identity. A Git tag or Release is optional and requires a separate owner decision; merging does not create one. +No Cloudflare account, server, bot token, CAPTCHA key, Python installation or personal access token is required. My workflow uses GitHub's built-in token and deployment identity. I decide separately whether to create a Git tag or Release; merging does not create one. ## Local design studies -The three original concepts remain separate from the production build: +I keep my three original concepts separate from the production build: ```sh npm run dev:concepts @@ -106,7 +118,7 @@ Open `http://127.0.0.1:4321/concept-a/`, `/concept-b/` or `/concept-c/`. These l ## License and contact -Website source code and tooling are [MIT licensed](LICENSE). WizardLoop's name, branding, illustrations, avatar, animation media and personal content are outside that grant. Fonts and third-party assets retain their own licenses. See [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md) and the [asset inventory](docs/DESIGN-ASSET-INVENTORY.md). +I license my website source code and tooling under [MIT](LICENSE). My name, branding, illustrations, avatar, animation media and personal content are outside that grant. Fonts and third-party assets retain their own licenses. See [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md) and the [asset inventory](docs/DESIGN-ASSET-INVENTORY.md). Read [CONTRIBUTING.md](CONTRIBUTING.md) before contributing and [SECURITY.md](SECURITY.md) for private vulnerability reporting. diff --git a/SECURITY.md b/SECURITY.md index 0eff094..4def3e4 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -1,21 +1,21 @@ # Security -Report suspected vulnerabilities privately to [wizard@wizardloop.com](mailto:wizard@wizardloop.com) or [WizardLoop on Telegram](https://t.me/wizardloop). Include the affected page, commit if known, reproduction steps, expected impact and a safe contact method. Do not publish exploit details, credentials or personal messages in an issue. +Report suspected vulnerabilities to me privately at [wizard@wizardloop.com](mailto:wizard@wizardloop.com) or [on Telegram](https://t.me/wizardloop). Include the affected page, commit if known, reproduction steps, expected impact and a safe contact method. Do not publish exploit details, credentials or personal messages in an issue. ## Scope -Relevant code includes the static website, browser interactions, build tools and GitHub workflows. There is no visitor-message endpoint, bot service or private application backend. External links lead to independently operated services; report provider vulnerabilities through the relevant provider's process too. +I maintain the static website, browser interactions, build tools and GitHub workflows in this repository. I do not operate a visitor-message endpoint, bot service or private application backend for this site. External links lead to independently operated services; report provider vulnerabilities through the relevant provider's process too. -Use a local checkout for testing. This document does not authorize account access, accessing another person's data, unsolicited messages or denial-of-service testing. Stop if a test reveals private information and share only the minimum necessary evidence privately. There is no bug bounty or guaranteed response time. +Use a local checkout for testing. I do not authorize account access, accessing another person's data, unsolicited messages or denial-of-service testing through this document. Stop if a test reveals private information and share only the minimum necessary evidence privately. I do not offer a bug bounty or guarantee a response time. ## Public build boundary Everything in `public/` and `dist/` is public. Never include secrets, sessions, private identifiers or personal correspondence. The website and deployment workflow require no manually configured secrets. A `PUBLIC_` environment variable is public configuration, never a secret store. -Keep dependencies locked and review upgrades. Source/build pattern checks reduce accidental exposure but are not a complete secret scan or security certification. If a credential is published accidentally, notify the owner privately, revoke or rotate it at the provider and assess the exposure. Deleting a file alone does not invalidate a credential. +Keep dependencies locked and review upgrades. My source/build pattern checks reduce accidental exposure but are not a complete secret scan or security certification. If a credential is published accidentally, notify me privately, revoke or rotate it at the provider and assess the exposure. Deleting a file alone does not invalidate a credential. ## Publication and hosting Merging to `main` triggers validated publication through GitHub Pages. Pull request checks use read-only permissions; only the separate deployment job receives Pages write and identity-token permissions. See [DEPLOYMENT.md](docs/DEPLOYMENT.md) for the one-time Pages setting, verification and rollback. -The source sets a referrer policy through document metadata. It does not currently set a Content Security Policy. GitHub Pages does not offer arbitrary repository-defined response headers; do not claim that Permissions-Policy, HSTS or other custom header protections are enforced by these files. Verify actual responses after publication. Adding a separate proxy would be a new infrastructure decision. +I set a referrer policy through document metadata. I do not currently set a Content Security Policy. GitHub Pages does not offer arbitrary repository-defined response headers; do not claim that Permissions-Policy, HSTS or other custom header protections are enforced by these files. Verify actual responses after publication. I would review a separate proxy as a new infrastructure decision. diff --git a/THIRD_PARTY_NOTICES.md b/THIRD_PARTY_NOTICES.md index 5457726..b5ef893 100644 --- a/THIRD_PARTY_NOTICES.md +++ b/THIRD_PARTY_NOTICES.md @@ -1,6 +1,6 @@ # Licenses and media provenance -The root MIT license applies to newly authored website source code and tooling. It does not grant rights to WizardLoop's name, branding, profile artwork, personal content or third-party assets. Those retain their respective rights. No permission to reuse the profile artwork is implied. +I release my newly authored website source code and tooling under the root MIT license. That license does not grant rights to my name, branding, profile artwork, personal content or third-party assets. Those retain their respective rights. No permission to reuse my profile artwork is implied. ## Existing code @@ -8,7 +8,7 @@ The original `assets/css/style.css` remains unchanged and includes its PaperMod ## Self-hosted fonts -The legacy stylesheet is also copied unchanged to `public/assets/css/style.css` to preserve its existing public asset URL after the static migration. The current upstream full MIT permission notice is retained in `public/media/licenses/PAPERMOD-LICENSE.txt`; the older copyright dates in the original stylesheet header remain untouched. The new portfolio does not import the legacy stylesheet. +The legacy stylesheet is also copied unchanged to `public/assets/css/style.css` to preserve its existing public asset URL after the static migration. The current upstream full MIT permission notice is retained in `public/media/licenses/PAPERMOD-LICENSE.txt`; the older copyright dates in the original stylesheet header remain untouched. My current portfolio does not import the legacy stylesheet. Font files are unmodified Latin subsets from these pinned Fontsource variable packages, all under SIL Open Font License 1.1. They are hosted locally and make no font-provider requests in the browser. Original license/copyright notices are included alongside them. @@ -20,24 +20,28 @@ Font files are unmodified Latin subsets from these pinned Fontsource variable pa ## Profile and artwork -`concepts/assets/profile-telegram.jpg` is the public still exposed by https://t.me/wizardloop, downloaded on 2026-10-27 for the owner's requested website. It is 320 x 320 pixels. It is not an authenticated original-resolution primary profile download and is not a claimed video. Provenance and checksum are documented in `docs/INTEGRATION-FEASIBILITY.md`. Keep this image outside the source-code MIT grant. +`concepts/assets/profile-telegram.jpg` is the public still exposed by https://t.me/wizardloop, downloaded on 2026-10-27 for my website. It is 320 x 320 pixels. It is not an authenticated original-resolution primary profile download and is not a claimed video. Provenance and checksum are documented in `docs/INTEGRATION-FEASIBILITY.md`. Keep this image outside the source-code MIT grant. -The orbital diagrams, journal drawings, circuit sculpture, icons, fallback monogram and project illustrations were authored for these concepts. Project illustrations are clearly labeled concept artwork, not real product screenshots or invented client work. SVG/CSS implementation code is MIT; any resulting WizardLoop brand identity and commissioned visual assets retain the owner's brand/media rights. +The orbital diagrams, journal drawings, circuit sculpture, icons, fallback monogram and project illustrations were authored for these concepts. Project illustrations are clearly labeled concept artwork, not real product screenshots or invented client work. SVG/CSS implementation code is MIT; my resulting brand identity and commissioned visual assets retain my brand/media rights. -The owner supplied the local design collection for use in this website. The 30 original TGS animations from `WizardLoop_Infinity_Atelier_30_TGS.zip` are copied unchanged into `public/media/animations/`. Their titles, original archive members, byte sizes and SHA-256 hashes are recorded in `src/content/artworks.json`. Corresponding transparent WebP posters in `public/media/posters/` are lossless raster renders of those vector assets at 35% of the animation duration. These WizardLoop illustrations and derived posters are reserved media, outside the website source-code MIT license. No additional license grant was found inside the source archive. +I supplied the local design collection for my website. The 30 original TGS animations from `WizardLoop_Infinity_Atelier_30_TGS.zip` are copied unchanged into `public/media/animations/`. Their titles, original archive members, byte sizes and SHA-256 hashes are recorded in `src/content/artworks.json`. Corresponding transparent WebP posters in `public/media/posters/` are lossless raster renders of those vector assets at 35% of the animation duration. My illustrations and derived posters are reserved media, outside the website source-code MIT license. No additional license grant was found inside the source archive. + +I separately supplied `WizardLoop_Silver_Grimoire.tgs` on 2026-10-28. Its 512 x 512 vector animation runs for three seconds at 60 fps. The served `silver-grimoire.tgs` changes only the internal root `nm` title's U+2014 character to an ASCII hyphen; geometry, timing and all other decoded JSON bytes are unchanged. The supplied source is untouched. `src/content/artworks.json` records both original and served byte sizes and SHA-256 hashes, plus the normalization note. This asset is distinct from the 30 unchanged Infinity Atelier originals. + +Silver Grimoire contains no expression strings, external media references, fonts, effects, masks or 3D layers. Its verified poster is a transparent 512 x 512 lossless WebP Canvas render at frame 63, 35% of the three-second loop. It is 64,110 bytes, has alpha values from 0 to 255, and rendered without errors. The reviewed frame depicts my silver infinity emblem with engraved details and glinting highlights; this check does not establish complete loop playback or overall website quality. No independent license grant accompanies the source. My new artwork and any derived poster remain reserved media outside the source-code MIT license; existing Lottie player licensing still applies. Six flag animations from `WizardLoop_Country_Flags_001_050.zip` are included: Israel, United States, United Kingdom, France, Japan and Brazil. `src/content/flags.json` records their exact source members and checksums. The supplied flag-source notice is preserved in full in `public/media/licenses/FLAGS-NOTICES.txt`; it lists the larger original collection as well as the six used here. The source collection identifies the underlying flag designs as public domain, with country-flags/Wikimedia attribution. The animation treatment and posters are not covered by the code MIT grant. National-symbol usage restrictions can apply independently of copyright. No third-party app logos or Belize flag artwork are included in this selection. The Home hero uses two native 768 x 768 H.264 MP4 derivatives of `portal-alchemy`, one for each theme, retaining the original 2.4-second loop duration. Other original TGS media use the locally bundled light Canvas build of `lottie-web`, version 5.13.0, under MIT, Copyright (c) 2015 Bodymovin. At most three visible Canvas scenes play, with drawing capped at 24 frames per second while preserving the source loop duration. The player's original license is preserved at `public/media/licenses/LOTTIE-LICENSE.txt` and remains applicable to bundled player code. These animations contain no expression scripts or references to external images. -WebP assets are static previews. The quality-94 delivery copies in `public/media/previews/` retain the masters' dimensions and alpha channel; the lossless masters in `public/media/posters/` and original TGS sources are unchanged. The MP4 and WebP derivatives inherit the underlying WizardLoop media rights and are outside the source-code MIT grant. Full provenance, rendering checks and source-license links are documented in `docs/DESIGN-ASSET-INVENTORY.md`. +WebP assets are static previews. The quality-94 delivery copies in `public/media/previews/` retain the masters' dimensions and alpha channel; the existing lossless masters in `public/media/posters/`, 30 Infinity Atelier TGS files and six flag TGS files are unchanged. The additional Silver Grimoire file has only the metadata normalization documented above. The MP4 and WebP derivatives inherit the underlying rights to my media and are outside the source-code MIT grant. Full provenance, rendering checks and source-license links are documented in `docs/DESIGN-ASSET-INVENTORY.md`. ## Interface icons -The local interface icon set adapts familiar Feather geometry for GitHub, mail and common controls, with custom WizardLoop symbols and Telegram/community treatments. Feather is MIT licensed, Copyright (c) 2013-2023 Cole Bemis. Its full notice is preserved in `public/media/licenses/FEATHER-LICENSE.txt`; source: https://github.com/feathericons/feather/blob/main/LICENSE. No icon CDN is loaded. Social marks identify their respective services and do not imply endorsement. +The local interface icon set adapts familiar Feather geometry for GitHub, mail and common controls, with my custom symbols and Telegram/community treatments. Feather is MIT licensed, Copyright (c) 2013-2023 Cole Bemis. Its full notice is preserved in `public/media/licenses/FEATHER-LICENSE.txt`; source: https://github.com/feathericons/feather/blob/main/LICENSE. No icon CDN is loaded. Social marks identify their respective services and do not imply endorsement. -The final site's self-hosted font notices are also present in `public/fonts/`. The removed synchronization services and their Python dependencies are not part of this revision. Their earlier code and licensing records remain in Git history. +My site's self-hosted font notices are also present in `public/fonts/`. The removed synchronization services and their Python dependencies are not part of this revision. Their earlier code and licensing records remain in Git history. ## Development tooling -Playwright, axe-core, Lighthouse, Prettier and the Prettier Astro plugin are development-only dependencies. Their upstream licenses remain in the installed packages. They are not served to website visitors or included as production scripts. `package-lock.json` records exact dependency versions. Lottie is a runtime dependency because its Canvas player is bundled into the site's lazy-loaded animation module. +Playwright, axe-core, Lighthouse, Prettier and the Prettier Astro plugin are development-only dependencies. Their upstream licenses remain in the installed packages. They are not served to website visitors or included as production scripts. `package-lock.json` records exact dependency versions. Lottie is a runtime dependency because its Canvas player is bundled into my site's lazy-loaded animation module. diff --git a/concepts/concept-a/index.html b/concepts/concept-a/index.html index fd9337b..8e4de73 100644 --- a/concepts/concept-a/index.html +++ b/concepts/concept-a/index.html @@ -2,7 +2,7 @@ - + WizardLoop | Arcane Orbit - Local Concept @@ -33,7 +33,7 @@

I make things
come alive.

-
WizardLoop's purple wizard character in a magical studio
+
My purple wizard character in a magical studio
01 / DESIGN & MOTION02 / CODE & CURIOSITY A SMALL WORLD. ALWAYS IN MOTION. @@ -50,13 +50,13 @@

I make things
come alive.

ANIMATION TOOL / OPEN SOURCE

MagicLottie

A mobile-first editor for Lottie and TGS animations.
TELEGRAM BOT / OPEN SOURCE

Shabbat

Automatic group quiet hours for Shabbat and Jewish holidays.

 -

Original concept illustrations, not product screenshots.

+

My original concept illustrations, not product screenshots.

03 / SIGNALS FROM THE STUDIOTHE TELEGRAM CHANNEL
-

A thought.
A loop.
A little discovery.

Follow the channel
WizardLoop
@wizard_loopLAYOUT STUDY

A window into the process.

This is a posts layout preview. Original channel posts and their media will appear here after the integration is approved.

Read the real posts on Telegram
+

A thought.
A loop.
A little discovery.

Follow the channel
WizardLoop
@wizard_loopLAYOUT STUDY

A window into the process.

This is my original posts layout study. I keep the channel content and its media on Telegram, linked below.

Read the real posts on Telegram

04 / GOOD THINGS HAPPEN IN LOOPS

Let's make
something unexpected.

Have a thought, a question, or a little spark of an idea?

Say hello Join the community
- + diff --git a/concepts/concept-b/index.html b/concepts/concept-b/index.html index 171bcb6..d38362b 100644 --- a/concepts/concept-b/index.html +++ b/concepts/concept-b/index.html @@ -4,7 +4,7 @@ - + The Alchemist's Journal | WizardLoop concept B @@ -46,7 +46,7 @@

I make things
come alive.

-
WizardLoop's public Telegram profile still
+
My public Telegram profile still
a little curiosity
goes a long way.

Telegram public profile still · local snapshot

@@ -63,22 +63,22 @@

I make things
come alive.

02 / SELECTED BUILDS

A few things
from the workbench.

-

From idea
to something real.

PUBLIC REPOSITORIES
BY WIZARDLOOP
+

From idea
to something real.

MY PUBLIC
REPOSITORIES
I.

MagicLottie

Motion, animation & code

 II.

Shabbat

An open-source build

 III.

CreationDate

A software experiment

 -
Original concept illustrations, not project screenshots.Explore the workbench
+
My original concept illustrations, not project screenshots.Explore the workbench
03 / NOTES IN THE MARGIN

Thoughts, process
& the in-between.

-

Notes from the loop.

LAYOUT PREVIEW

A little closer
to the process.

The journal will bring posts from my Telegram channel into this space, with a direct path to the original.

This is a design sample. Live posts and Telegram media are not loaded in this local concept.

Read the real channel
+

Notes from the loop.

LAYOUT PREVIEW

A little closer
to the process.

I explored a journal-style home for posts from my Telegram channel, with a direct path to the original.

This is my design sample. Live posts and Telegram media are not loaded in this local concept.

Read the real channel
04 / KEEP THE CONVERSATION GOING

Good things start
with a hello.

Have a curious idea, a question, or something you've been making? I'd love to hear about it.

Say hello on Telegram
- + `); + } else { + response.writeHead(404); + response.end(); + } +}); +await new Promise((resolve) => server.listen(0, '127.0.0.1', resolve)); +const windowsBrowser = path.join( + homedir(), + 'AppData/Local/ms-playwright/chromium-1228/chrome-win64/chrome.exe', +); +const executablePath = + process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE || + (process.platform === 'win32' && existsSync(windowsBrowser) + ? windowsBrowser + : undefined); +let browser; +try { + browser = await chromium.launch(executablePath ? { executablePath } : {}); + const page = await browser.newPage({ + viewport: { width: data.w, height: data.h }, + deviceScaleFactor: 1, + }); + const errors = []; + page.on('pageerror', (error) => errors.push(error.message)); + const origin = `http://127.0.0.1:${server.address().port}`; + await page.route('**/*', (route) => + route + .request() + .url() + .startsWith(origin + '/') + ? route.continue() + : route.abort(), + ); + await page.goto(origin); + await page.evaluate(() => + Promise.race([ + window.ready, + new Promise((_, reject) => + setTimeout(() => reject(new Error('Poster render timed out')), 15000), + ), + ]), + ); + if (errors.length) throw new Error(errors.join('\n')); + const png = await page.screenshot({ omitBackground: true }); + const raw = await sharp(png).ensureAlpha().raw().toBuffer(); + let min = 255, + max = 0; + for (let index = 3; index < raw.length; index += 4) { + min = Math.min(min, raw[index]); + max = Math.max(max, raw[index]); + } + if (min !== 0 || max === 0) + throw new Error('Expected visible transparent artwork'); + const poster = await sharp(png) + .webp({ lossless: true, effort: 6 }) + .toBuffer(); + await mkdir('public/media/posters', { recursive: true }); + await mkdir('artifacts/asset-review', { recursive: true }); + await writeFile(`public/media/posters/${name}.webp`, poster); + await writeFile(`artifacts/asset-review/${name}.png`, png); + for (const fraction of [0, 0.15, 0.6, 0.85, 0.99]) { + await page.evaluate( + (frame) => lottie.getRegisteredAnimations()[0].goToAndStop(frame, true), + Math.round((data.op - data.ip - 1) * fraction), + ); + await page.screenshot({ + path: `artifacts/asset-review/${name}-${Math.round(fraction * 100)}.png`, + omitBackground: true, + }); + } + const audit = { + name, + sourceSha256: createHash('sha256').update(original).digest('hex'), + width: data.w, + height: data.h, + fps: data.fr, + durationSeconds: (data.op - data.ip) / data.fr, + frame, + frameRatio: ratio, + renderer: 'lottie light Canvas', + encoding: 'lossless WebP', + bytes: poster.length, + alphaMin: min, + alphaMax: max, + pageErrors: errors, + }; + await writeFile( + `artifacts/asset-review/${name}.json`, + JSON.stringify(audit, null, 2) + '\n', + ); + console.log(JSON.stringify(audit)); +} finally { + await browser?.close(); + await new Promise((resolve) => server.close(resolve)); +} diff --git a/src/components/HeroArt.astro b/src/components/HeroArt.astro index de74a67..4992bfb 100644 --- a/src/components/HeroArt.astro +++ b/src/components/HeroArt.astro @@ -1,6 +1,6 @@ --- const description = - "WizardLoop's illustrated infinity wizard conjures a glowing orb inside a magical portal"; + 'My illustrated infinity wizard conjures a glowing orb inside a magical portal'; --- -
diff --git a/src/pages/privacy.astro b/src/pages/privacy.astro index 5e6a239..d6d0abf 100644 --- a/src/pages/privacy.astro +++ b/src/pages/privacy.astro @@ -4,7 +4,7 @@ import Base from '../layouts/Base.astro';
@@ -21,11 +21,10 @@ import Base from '../layouts/Base.astro';

A small, static website

- This is WizardLoop's personal creative website, hosted on GitHub Pages. - The site does not run advertising, visitor analytics, contact forms or - embedded social feeds. Fonts, illustrations and profile artwork are - served with the site. No profile or post synchronization runs in the - background. + This is my personal creative website, hosted on GitHub Pages. The site + does not run advertising, visitor analytics, contact forms or embedded + social feeds. Fonts, illustrations and profile artwork are served with + the site. No profile or post synchronization runs in the background.

GitHub processes connection information to deliver and protect the diff --git a/src/pages/projects.astro b/src/pages/projects.astro index cddbf0c..cf71931 100644 --- a/src/pages/projects.astro +++ b/src/pages/projects.astro @@ -7,7 +7,7 @@ import '../styles/destinations.css';

diff --git a/src/pages/security.astro b/src/pages/security.astro index 89032ae..2e4e2c3 100644 --- a/src/pages/security.astro +++ b/src/pages/security.astro @@ -4,7 +4,7 @@ import Base from '../layouts/Base.astro';
diff --git a/src/pages/work.astro b/src/pages/work.astro index d9f98f8..29bf92c 100644 --- a/src/pages/work.astro +++ b/src/pages/work.astro @@ -7,7 +7,7 @@ import '../styles/destinations.css';
diff --git a/src/scripts/motion.ts b/src/scripts/motion.ts index 2984d3e..08ead92 100644 --- a/src/scripts/motion.ts +++ b/src/scripts/motion.ts @@ -11,10 +11,18 @@ type Playback = { duration: number; }; +type MotionData = { + fr: number; + ip: number; + op: number; + [key: string]: unknown; +}; + export function mountMotion(nodes: HTMLElement[]) { const instances = new Map(); const visible = new Set(); const loading = new Set(); + const assets = new Map>(); let renderer: | Promise | undefined; @@ -64,14 +72,18 @@ export function mountMotion(nodes: HTMLElement[]) { // One bounded draw loop for all art. Elapsed time preserves the source speed. if (now - lastTick >= 1000 / 24) { lastTick = now - ((now - lastTick) % (1000 / 24)); - instances.forEach((playback) => { + instances.forEach((playback, node) => { if (!playback.running || !playback.ready) return; const elapsed = (playback.elapsed + now - playback.started) % playback.duration; const frame = Math.floor((elapsed * playback.fps) / 1000); if (frame !== playback.lastFrame) { - playback.animation.goToAndStop(frame, true); - playback.lastFrame = frame; + try { + playback.animation.goToAndStop(frame, true); + playback.lastFrame = frame; + } catch { + unavailable(node); + } } }); } @@ -82,12 +94,41 @@ export function mountMotion(nodes: HTMLElement[]) { request = requestAnimationFrame(tick); } + function loadAsset(name: string): Promise { + const cached = assets.get(name); + if (cached) return cached; + const pending = (async () => { + const response = await fetch(`/media/animations/${name}.tgs`, { + signal: AbortSignal.timeout(12000), + }); + if (!response.ok || !response.body) + throw new Error('Animation unavailable'); + const data = await new Response( + response.body.pipeThrough(new DecompressionStream('gzip')), + ).json(); + if ( + !data || + ![data.fr, data.ip, data.op].every(Number.isFinite) || + data.fr <= 0 || + data.op <= data.ip + ) + throw new Error('Invalid animation timing'); + return data as MotionData; + })(); + assets.set(name, pending); + void pending.catch(() => { + if (assets.get(name) === pending) assets.delete(name); + }); + return pending; + } + async function mount(node: HTMLElement) { if ( instances.has(node) || loading.has(node) || node.dataset.state === 'unavailable' || !allowed() || + !visible.has(node) || disposed ) return; @@ -96,27 +137,17 @@ export function mountMotion(nodes: HTMLElement[]) { !name || !/^[a-z0-9-]+$/.test(name) || !('DecompressionStream' in window) - ) + ) { + unavailable(node); return; + } loading.add(node); try { - renderer ||= import('lottie-web/build/player/lottie_light_canvas'); - const response = await fetch(`/media/animations/${name}.tgs`, { - signal: AbortSignal.timeout(12000), - }); - if (!response.ok || !response.body) - throw new Error('Animation unavailable'); - const data = await new Response( - response.body.pipeThrough(new DecompressionStream('gzip')), - ).json(); - const { default: lottie } = await renderer; - if (disposed || !allowed()) return; - if ( - ![data.fr, data.ip, data.op].every(Number.isFinite) || - data.fr <= 0 || - data.op <= data.ip - ) - throw new Error('Invalid animation timing'); + const [data, { default: lottie }] = await Promise.all([ + loadAsset(name), + (renderer ||= import('lottie-web/build/player/lottie_light_canvas')), + ]); + if (disposed || !allowed() || !visible.has(node)) return; const container = node.querySelector('.art-player'); if (!container) return; const size = Math.max(node.clientWidth, node.clientHeight, 1); @@ -130,7 +161,8 @@ export function mountMotion(nodes: HTMLElement[]) { renderer: 'canvas', loop: true, autoplay: false, - animationData: data, + // Lottie mutates animation data; each view needs an independent copy. + animationData: structuredClone(data), rendererSettings: { dpr, clearCanvas: true, diff --git a/src/styles/destinations.css b/src/styles/destinations.css index d69cb3c..47c0e3e 100644 --- a/src/styles/destinations.css +++ b/src/styles/destinations.css @@ -153,6 +153,39 @@ text-align: center; transform: rotate(-3deg); } +.dispatch-seal { + position: relative; + isolation: isolate; + aspect-ratio: 1; +} +.dispatch-orbits { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + pointer-events: none; +} +.dispatch-grimoire { + position: absolute; + inset: 6%; + width: 88%; + height: 88%; +} +.dispatch-telegram { + position: absolute; + bottom: 11%; + right: 5%; + display: grid; + place-items: center; + width: 56px; + height: 56px; + border: 1.5px solid var(--ink); + border-radius: 50%; + background: var(--paper); + color: var(--accent); + box-shadow: 3px 3px 0 var(--ink); + transform: rotate(10deg); +} .destination-after { display: flex; justify-content: space-between; diff --git a/src/styles/global.css b/src/styles/global.css index eca5027..001588a 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -368,7 +368,8 @@ main:focus { } .brand-spark { color: var(--accent); - font-size: 20px; + width: 20px; + height: 20px; vertical-align: super; display: inline-block; margin-left: 2px; @@ -545,9 +546,7 @@ dialog::backdrop { .drawn-star { width: 87px; height: 87px; - fill: none; - stroke: var(--accent); - stroke-width: 1.5; + color: var(--accent); transform: rotate(-8deg); } .magic-word { @@ -963,8 +962,8 @@ dialog::backdrop { position: absolute; left: 7%; top: 70px; - font-size: 90px; - line-height: 1; + width: 90px; + height: 90px; color: var(--accent); transform: rotate(-10deg); } @@ -1396,7 +1395,8 @@ dialog::backdrop { } .cta-spark { left: 4%; - font-size: 70px; + width: 70px; + height: 70px; } } @media (max-width: 900px) { @@ -1556,7 +1556,8 @@ dialog::backdrop { display: none; } .cta-spark { - font-size: 45px; + width: 45px; + height: 45px; left: 25px; top: 25px; } @@ -1677,7 +1678,8 @@ dialog::backdrop { height: 28px; } .brand-spark { - font-size: 17px; + width: 17px; + height: 17px; } .header-contact { display: none; @@ -1906,7 +1908,8 @@ dialog::backdrop { font-size: 11px; } .cta-spark { - font-size: 34px; + width: 34px; + height: 34px; left: 17px; top: 17px; } @@ -2142,7 +2145,8 @@ dialog::backdrop { width: 24px; } .brand-spark { - font-size: 15px; + width: 15px; + height: 15px; } .header-controls .icon-button { width: 34px; diff --git a/tests/site.spec.ts b/tests/site.spec.ts index 0052894..e307f8e 100644 --- a/tests/site.spec.ts +++ b/tests/site.spec.ts @@ -1,4 +1,10 @@ -import { test, expect, type Page, type TestInfo } from '@playwright/test'; +import { + test, + expect, + type Locator, + type Page, + type TestInfo, +} from '@playwright/test'; import { mkdir, readFile } from 'node:fs/promises'; import { resolve } from 'node:path'; @@ -64,6 +70,28 @@ async function noOverflow(page: Page, label: string) { ); } +async function canvasFrame(canvas: Locator) { + return canvas.evaluate((element) => { + const bitmap = element as HTMLCanvasElement; + const pixels = bitmap + .getContext('2d')! + .getImageData(0, 0, bitmap.width, bitmap.height).data; + let hash = 2166136261; + for (let index = 0; index < pixels.length; index += 13) + hash = Math.imul(hash ^ pixels[index], 16777619) >>> 0; + return `${bitmap.width}x${bitmap.height}:${hash}`; + }); +} + +async function waitForPaint(page: Page) { + await page.evaluate( + () => + new Promise((done) => + requestAnimationFrame(() => requestAnimationFrame(() => done())), + ), + ); +} + async function screenshot(page: Page, name: string, info: TestInfo) { await mkdir(screenshotDirectory, { recursive: true }); const path = resolve(screenshotDirectory, `${info.project.name}-${name}.png`); @@ -582,6 +610,9 @@ test('reduced motion avoids animation payloads and external providers @motion', await page.goto('/about/'); await page.locator('[data-animation]').first().scrollIntoViewIfNeeded(); await page.waitForLoadState('networkidle'); + await page.goto('/posts/'); + await page.locator('.dispatch-grimoire').scrollIntoViewIfNeeded(); + await page.waitForLoadState('networkidle'); await expect(page.locator('html')).toHaveAttribute('data-motion', 'paused'); expect( requests.filter((url) => @@ -1059,6 +1090,336 @@ test('failed native hero media retains its poster across theme retries @motion', await expect(video).toBeHidden(); }); +test('native spark marks keep mobile identity clear without emoji or extra accessible names @keyboard', async ({ + page, +}) => { + await page.emulateMedia({ reducedMotion: 'reduce' }); + await page.goto('/'); + await page.evaluate(() => document.fonts.ready); + const headerBrand = page.locator('.site-header .brand'); + const footerBrand = page.locator('.footer-identity .brand'); + await expect(headerBrand).toHaveAccessibleName('WizardLoop home'); + await expect(footerBrand).toHaveAccessibleName('WizardLoop'); + for (const selector of [ + '.site-header .brand-spark', + '.footer-identity .brand-spark', + '.drawn-star', + '.cta-spark', + ]) { + const mark = page.locator(selector); + await expect(mark).toHaveCount(1); + await expect(mark).toHaveAttribute('viewBox', '0 0 64 64'); + await expect(mark).toHaveAttribute('aria-hidden', 'true'); + await expect(mark).toHaveAttribute('focusable', 'false'); + expect(await mark.evaluate((node) => node instanceof SVGSVGElement)).toBe( + true, + ); + expect(Number(await mark.getAttribute('width'))).toBeGreaterThan(0); + expect(Number(await mark.getAttribute('height'))).toBeGreaterThan(0); + expect(await mark.textContent()).not.toMatch(/[\u2733\uFE0F]/u); + } + expect(await page.locator('body').innerText()).not.toMatch(/[\u2733\uFE0F]/u); + for (const currentTheme of themes) { + await theme(page, currentTheme); + for (const width of [320, 390]) { + await page.setViewportSize({ width, height: 844 }); + await page.evaluate(() => scrollTo(0, 0)); + const mark = await page + .locator('.site-header .brand-spark') + .boundingBox(); + const brand = await headerBrand.boundingBox(); + const controls = await page.locator('.header-controls').boundingBox(); + expect(mark).not.toBeNull(); + expect(brand).not.toBeNull(); + expect(controls).not.toBeNull(); + expect(mark!.width).toBeGreaterThanOrEqual(12); + expect(Math.abs(mark!.width - mark!.height)).toBeLessThan(1); + expect(mark!.x).toBeGreaterThanOrEqual(brand!.x); + expect(mark!.x + mark!.width).toBeLessThanOrEqual( + brand!.x + brand!.width + 1, + ); + expect(brand!.x + brand!.width).toBeLessThanOrEqual(controls!.x + 1); + await noOverflow(page, `SVG identity at ${width}px in ${currentTheme}`); + await page.locator('[data-menu-toggle]').click(); + await expect(page.locator('#mobile-nav')).toBeVisible(); + await page.keyboard.press('Escape'); + await expect(page.locator('[data-menu-toggle]')).toBeFocused(); + } + } +}); + +test('the silver grimoire renders original moving pixels without shifting the three editorial layouts @motion', async ({ + page, +}) => { + test.setTimeout(90_000); + await page.setViewportSize({ width: 390, height: 844 }); + for (const [path, selector] of [ + ['/', '.post-comic [data-animation]'], + ['/about/', '.about-profile [data-animation]'], + ['/posts/', '.dispatch-grimoire'], + ] as const) { + let release!: () => void; + const held = new Promise((resolve) => { + release = resolve; + }); + await page.route( + '**/media/animations/silver-grimoire.tgs', + async (route) => { + await held; + await route.continue(); + }, + ); + await page.goto(path); + const art = page.locator(selector); + await expect(art).toHaveAttribute('data-animation', 'silver-grimoire'); + await page.evaluate(() => document.fonts.ready); + await art.scrollIntoViewIfNeeded(); + const poster = art.locator('.art-poster'); + await expect + .poll(() => + poster.evaluate((node) => (node as HTMLImageElement).naturalWidth), + ) + .toBeGreaterThan(0); + await expect(art).toHaveAttribute('data-state', 'poster'); + const before = await art.boundingBox(); + const pageHeight = await page.evaluate( + () => document.documentElement.scrollHeight, + ); + release(); + await expect(art).toHaveAttribute('data-state', 'ready', { + timeout: 25_000, + }); + const canvas = art.locator('.art-player canvas'); + await expect(canvas).toHaveCount(1); + const initial = await canvasFrame(canvas); + await expect.poll(() => canvasFrame(canvas)).not.toBe(initial); + const after = await art.boundingBox(); + expect(before).not.toBeNull(); + expect(after).not.toBeNull(); + for (const key of ['x', 'y', 'width', 'height'] as const) + expect( + Math.abs(after![key] - before![key]), + `${path}: ${key} stays stable when motion replaces its poster`, + ).toBeLessThanOrEqual(1); + expect( + Math.abs( + (await page.evaluate(() => document.documentElement.scrollHeight)) - + pageHeight, + ), + ).toBeLessThanOrEqual(1); + await page.locator('[data-motion-toggle]').click(); + await expect(art).toHaveAttribute('data-playing', 'false'); + await waitForPaint(page); + const frozen = await canvasFrame(canvas); + await page.waitForTimeout(180); + expect(await canvasFrame(canvas)).toBe(frozen); + await noOverflow(page, `${path}: the grimoire at 390px`); + await page.locator('[data-motion-toggle]').click(); + await page.unroute('**/media/animations/silver-grimoire.tgs'); + } +}); + +test('pausing while the grimoire is downloading keeps its poster until motion is resumed @motion', async ({ + page, +}) => { + let release!: () => void; + const held = new Promise((resolve) => { + release = resolve; + }); + let requests = 0; + await page.route('**/media/animations/silver-grimoire.tgs', async (route) => { + requests += 1; + await held; + await route.continue(); + }); + await page.goto('/about/'); + const art = page.locator('.about-profile [data-animation]'); + await art.scrollIntoViewIfNeeded(); + await expect.poll(() => requests).toBe(1); + await page.locator('[data-motion-toggle]').click(); + await expect(page.locator('html')).toHaveAttribute('data-motion', 'paused'); + const response = page.waitForResponse( + '**/media/animations/silver-grimoire.tgs', + ); + release(); + await (await response).finished(); + await page.waitForTimeout(300); + await expect(art).toHaveAttribute('data-state', 'poster'); + await expect(art.locator('canvas')).toHaveCount(0); + await expect(art.locator('.art-poster')).toHaveCSS('opacity', '1'); + await page.locator('[data-motion-toggle]').click(); + await expect(art).toHaveAttribute('data-state', 'ready', { timeout: 25_000 }); + await expect(art.locator('canvas')).toHaveCount(1); + const first = await canvasFrame(art.locator('canvas')); + await expect.poll(() => canvasFrame(art.locator('canvas'))).not.toBe(first); + expect( + requests, + 'Resuming should reuse the successfully downloaded original.', + ).toBe(1); +}); + +test('repeated grimoire instances share a download while keeping independent canvases and a real playback limit @motion', async ({ + page, +}) => { + await page.setViewportSize({ width: 1200, height: 900 }); + // Duplicate complete SSR components before the normal site module collects + // artwork. The real renderer, data, intersections and pixels remain in use. + await page.addInitScript(() => { + const observer = new MutationObserver(() => { + const original = document.querySelector( + '.about-profile [data-animation="silver-grimoire"]', + ); + if ( + !original?.querySelector('.art-player') || + !original.querySelector('.art-poster') || + !document.body + ) + return; + observer.disconnect(); + const fixture = document.createElement('section'); + fixture.dataset.motionFixture = ''; + fixture.style.cssText = + 'position:fixed;left:40px;top:150px;display:flex;gap:24px;z-index:10;'; + const copies = [ + original, + ...Array.from( + { length: 3 }, + () => original.cloneNode(true) as HTMLElement, + ), + ]; + copies.forEach((node, index) => { + node.dataset.fixtureArt = String(index); + node.style.cssText = 'width:160px;height:160px;flex:none;'; + fixture.append(node); + }); + document.body.append(fixture); + }); + observer.observe(document, { childList: true, subtree: true }); + }); + let requests = 0; + await page.route('**/media/animations/silver-grimoire.tgs', async (route) => { + requests += 1; + await route.continue(); + }); + await page.goto('/about/'); + const copies = page.locator('[data-fixture-art]'); + await expect(copies).toHaveCount(4); + await expect( + page.locator('[data-fixture-art][data-playing="true"]'), + ).toHaveCount(3, { timeout: 25_000 }); + await expect(page.locator('[data-fixture-art="3"] canvas')).toHaveCount(0); + expect( + requests, + 'Simultaneous instances should fetch and decode their shared source once.', + ).toBe(1); + for (let index = 0; index < 3; index += 1) { + const canvas = copies.nth(index).locator('canvas'); + await expect(canvas).toHaveCount(1); + const first = await canvasFrame(canvas); + await expect + .poll(() => canvasFrame(canvas), { + message: `Instance ${index} renders changing pixels independently.`, + }) + .not.toBe(first); + } + const firstArt = copies.nth(0); + await firstArt.evaluate((node) => { + node.style.transform = 'translateY(2000px)'; + }); + await expect(firstArt).toHaveAttribute('data-playing', 'false'); + await expect(copies.nth(3)).toHaveAttribute('data-playing', 'true'); + await expect(copies.nth(3).locator('canvas')).toHaveCount(1); + await waitForPaint(page); + const frozen = await canvasFrame(firstArt.locator('canvas')); + const sibling = copies.nth(1).locator('canvas'); + const siblingFrame = await canvasFrame(sibling); + await expect.poll(() => canvasFrame(sibling)).not.toBe(siblingFrame); + expect( + await canvasFrame(firstArt.locator('canvas')), + 'Offscreen instance freezes while its sibling continues.', + ).toBe(frozen); + await firstArt.evaluate((node) => { + node.style.transform = ''; + }); + await copies.nth(1).evaluate((node) => { + node.style.transform = 'translateY(2000px)'; + }); + await expect(firstArt).toHaveAttribute('data-playing', 'true'); + await expect + .poll(() => canvasFrame(firstArt.locator('canvas'))) + .not.toBe(frozen); + await expect( + page.locator('[data-fixture-art][data-playing="true"]'), + ).toHaveCount(3); + await expect(page.locator('[data-fixture-art] canvas')).toHaveCount(4); + expect(requests).toBe(1); + await page.locator('[data-motion-toggle]').click(); + await expect( + page.locator('[data-fixture-art][data-playing="true"]'), + ).toHaveCount(0); +}); + +test('an offscreen pending grimoire defers its canvas and resumes cleanly after leaving and restoring the page @motion', async ({ + page, +}) => { + await page.setViewportSize({ width: 390, height: 600 }); + let release!: () => void; + const held = new Promise((resolve) => { + release = resolve; + }); + let requests = 0; + await page.route('**/media/animations/silver-grimoire.tgs', async (route) => { + requests += 1; + await held; + await route.continue(); + }); + await page.goto('/about/'); + const art = page.locator('.about-profile [data-animation]'); + await art.scrollIntoViewIfNeeded(); + await expect.poll(() => requests).toBe(1); + await page.locator('.site-footer').scrollIntoViewIfNeeded(); + await expect + .poll(() => art.evaluate((node) => node.getBoundingClientRect().bottom)) + .toBeLessThan(0); + await waitForPaint(page); + const response = page.waitForResponse( + '**/media/animations/silver-grimoire.tgs', + ); + release(); + await (await response).finished(); + await page.waitForTimeout(300); + await expect(art).toHaveAttribute('data-state', 'poster'); + await expect(art.locator('canvas')).toHaveCount(0); + await art.scrollIntoViewIfNeeded(); + await expect(art).toHaveAttribute('data-playing', 'true', { + timeout: 25_000, + }); + await expect(art.locator('canvas')).toHaveCount(1); + expect(requests).toBe(1); + // Exercise the registered lifecycle handlers deterministically. This is + // synthetic page-cache restoration, not a claim about browser BFCache policy. + await page.evaluate(() => + dispatchEvent(new PageTransitionEvent('pagehide', { persisted: true })), + ); + await expect(art).toHaveAttribute('data-state', 'poster'); + await expect(art.locator('canvas')).toHaveCount(0); + await page.evaluate(() => + dispatchEvent(new PageTransitionEvent('pageshow', { persisted: true })), + ); + await expect(art).toHaveAttribute('data-playing', 'true', { + timeout: 25_000, + }); + await expect(art.locator('canvas')).toHaveCount(1); + const restored = await canvasFrame(art.locator('canvas')); + await expect + .poll(() => canvasFrame(art.locator('canvas'))) + .not.toBe(restored); + expect( + requests, + 'Restoring a page reuses its local parsed source and does not duplicate a request.', + ).toBe(1); +}); + test('original Canvas animation changes, freezes on pause and bounds active artwork @motion', async ({ page, }) => { @@ -1407,7 +1768,7 @@ test('the profile is a dimensioned local still with no provider or synchronizati await expect(image).toHaveAttribute('src', '/media/profile/avatar.jpg'); await expect(image).toHaveAttribute('width', '96'); await expect(image).toHaveAttribute('height', '96'); - await expect(image).toHaveAttribute('alt', /WizardLoop/); + await expect(image).toHaveAttribute('alt', 'My public profile artwork'); await expect( page.locator('[data-profile-video], [data-profile-source]'), ).toHaveCount(0); From aba6e736043b154a4ca560566ab2259c3e81884c Mon Sep 17 00:00:00 2001 From: WizardLoop <67387949+WizardLoop@users.noreply.github.com> Date: Wed, 28 Oct 2026 15:32:00 +0200 Subject: [PATCH 2/2] I recorded my verified Linux QA and performance results --- README.md | 2 +- docs/QA.md | 19 +- docs/qa/ci-summary.json | 446 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 464 insertions(+), 3 deletions(-) create mode 100644 docs/qa/ci-summary.json diff --git a/README.md b/README.md index 799a116..9e3567d 100644 --- a/README.md +++ b/README.md @@ -96,7 +96,7 @@ On Linux, install browser system dependencies with `npx playwright install --wit Browser evidence is written under ignored `artifacts/final/`; performance reports go to `artifacts/lighthouse/`. See [QA.md](docs/QA.md) for measured results. Tests do not establish complete accessibility or legal conformance, and older reports do not verify later source changes. -My development-branch CI also measures six pages with Lighthouse after browser tests and retains a separate `mobile-lighthouse-results` artifact, including raw traces and network logs. Audit execution errors fail the check; numeric scores are evidence, not a fixed pass threshold. I document the Windows Home performance limitation and all samples in my QA report. +My development-branch CI also measures six pages with Lighthouse after browser tests and retains a separate `mobile-lighthouse-results` artifact, including raw traces and network logs. Audit execution errors fail the check; numeric scores are evidence, not a fixed pass threshold. My QA report records the complete 185-case Linux pass, its 97-100 performance scores and the separate Windows Home performance limitation. ## Publishing diff --git a/docs/QA.md b/docs/QA.md index cbd7393..6b342eb 100644 --- a/docs/QA.md +++ b/docs/QA.md @@ -20,7 +20,9 @@ I ran the complete local suite on Windows against the built site at `http://127. All three failures came from the same outdated profile-alt assertion, once per engine. The test expected the word `WizardLoop`, while my revised first-person text was `My public profile artwork`. I corrected only that test expectation and reran the affected cases: **3 of 3 passed**. I changed no served application source between the full run and the focused verification; only the assertion and documentation changed. -The latest result for each of **186 unique browser checks is passing**: **Chromium 79, Firefox 53 and WebKit 54**, with no unresolved failures or skips. I report this as a combined result, **not a green full-suite local rerun**. [browser-summary.json](qa/browser-summary.json) retains both histories, the original failure messages and platform notes. Raw reports remain in ignored `artifacts/rc3-initial-full-results.json` and `artifacts/rc3-profile-results.json`. GitHub CI must independently run the complete suite on the pushed revision. +The latest result for each of **186 unique browser checks is passing**: **Chromium 79, Firefox 53 and WebKit 54**, with no unresolved failures or skips. I report this as a combined result, **not a green full-suite local rerun**. [browser-summary.json](qa/browser-summary.json) retains both histories, the original failure messages and platform notes. Raw reports remain in ignored `artifacts/rc3-initial-full-results.json` and `artifacts/rc3-profile-results.json`. + +I then independently passed the complete **185-case Linux suite** in [GitHub run 40695410701](https://github.com/WizardLoop/wizardloop.github.io/actions/runs/40695410701), at application commit `4158b20978d02241db478da2101dae3409de22bc`, with no failures or skips. That run took 2.3 minutes for browser checks. Linux omits the Windows-specific native-video diagnostic. [ci-summary.json](qa/ci-summary.json) records the remote evidence. The subsequent report-only update changes no application code, dependencies or workflow. My responsive matrix covers 12 routes, three engines, six widths (320, 360, 390, 768, 1024 and 1440px) and both themes: **432 viewport cases**. **24 axe checks passed** across six main pages, both themes and mobile/desktop. The suite also checks direct navigation, keyboard/focus behavior, mobile-menu scrolling, theme/motion persistence, local profile fallback, static SEO/social assets and the absence of unsolicited external requests. Clipboard tests use controlled success, denial and unavailable-API fixtures; they do not inspect a visitor's clipboard or send a message. @@ -61,7 +63,20 @@ Accessibility and Best Practices scored 100 in all ten samples. SEO scored 100 i **Home did not meet my 90 performance target in these Windows samples.** The reports show variable initial style/layout work before any TGS or Lottie request. The affected runs used identical payloads; the current evidence does not establish the root cause. I tried preloading the existing Cormorant font, measured Home at 61 and reverted that experiment because it did not resolve the delayed first paint. Its two samples remain separately recorded, outside the final-source distribution. -I added an independent Linux Lighthouse pass to development-branch CI, with HTML/JSON reports, raw traces and network logs retained as the `mobile-lighthouse-results` artifact. A failed audit execution fails CI; numeric scores are recorded without a flaky score threshold. Those remote results are pending until this revision is pushed. I do not label these local measurements uniformly 90+, reuse rc.2 scores or equate lab results with field Core Web Vitals. +I added an independent Linux Lighthouse pass to development-branch CI, with HTML/JSON reports, raw traces and network logs retained as the `mobile-lighthouse-results` artifact. A failed audit execution fails CI; numeric scores are recorded without a flaky score threshold. + +The successful [same-revision Linux run](https://github.com/WizardLoop/wizardloop.github.io/actions/runs/40695410701) measured one sample per page: + +| Page | Performance | Accessibility | Best Practices | SEO | LCP | TBT | CLS | +| --- | ---: | ---: | ---: | ---: | ---: | ---: | ---: | +| Home | 98 | 100 | 100 | 100 | 2.25 s | 0 ms | 0 | +| About | 97 | 100 | 100 | 100 | 2.47 s | 4 ms | 0 | +| Work | 100 | 100 | 100 | 100 | 1.51 s | 0 ms | 0 | +| Projects | 100 | 100 | 100 | 100 | 1.52 s | 0 ms | 0 | +| Posts | 98 | 100 | 100 | 100 | 2.23 s | 9 ms | 0 | +| Contact | 100 | 100 | 100 | 100 | 1.51 s | 0 ms | 0 | + +These independent readings meet the 90 target in that environment. They do not erase the lower Windows measurements or establish their cause. I keep the environments separate, retain all samples and do not equate lab results with field Core Web Vitals or universal device performance. The complete remote samples are in [ci-summary.json](qa/ci-summary.json). ## Historical baseline and publication diff --git a/docs/qa/ci-summary.json b/docs/qa/ci-summary.json new file mode 100644 index 0000000..1ff501c --- /dev/null +++ b/docs/qa/ci-summary.json @@ -0,0 +1,446 @@ +{ + "schemaVersion": 1, + "version": "1.0.0-rc.3", + "runId": 40695410701, + "jobId": 122840751243, + "commit": "4158b20978d02241db478da2101dae3409de22bc", + "workflow": "https://github.com/WizardLoop/wizardloop.github.io/actions/runs/40695410701", + "conclusion": "success", + "environment": "GitHub Actions ubuntu-latest, installed Playwright Chromium, Lighthouse mobile simulation; separate from Windows samples", + "browserTests": { + "total": 185, + "passed": 185, + "failed": 0, + "skipped": 0, + "durationMinutes": 2.3 + }, + "sourceCheck": { + "files": 241, + "astroFiles": 25, + "routes": 12 + }, + "performanceSamples": [ + { + "page": "home", + "version": "13.5.0", + "fetchTime": "2026-10-28T13:23:14.826Z", + "formFactor": "mobile", + "throttling": "simulate", + "scores": { + "performance": 98, + "accessibility": 100, + "best-practices": 100, + "seo": 100 + }, + "metrics": { + "first-contentful-paint": { + "numericValue": 1147.6956500000001, + "displayValue": "1.1 s" + }, + "largest-contentful-paint": { + "numericValue": 2254.7971000000002, + "displayValue": "2.3 s" + }, + "total-blocking-time": { + "numericValue": 0, + "displayValue": "0 ms" + }, + "cumulative-layout-shift": { + "numericValue": 0, + "displayValue": "0" + }, + "speed-index": { + "numericValue": 1147.6956500000001, + "displayValue": "1.1 s" + }, + "total-byte-weight": { + "numericValue": 905787, + "displayValue": "Total size was 885 KiB" + } + }, + "failedAudits": [ + { + "id": "first-contentful-paint", + "score": 0.99, + "title": "First Contentful Paint" + }, + { + "id": "largest-contentful-paint", + "score": 0.94, + "title": "Largest Contentful Paint" + }, + { + "id": "interactive", + "score": 0.99, + "title": "Time to Interactive" + }, + { + "id": "image-delivery-insight", + "score": 0, + "title": "Improve image delivery" + }, + { + "id": "network-dependency-tree-insight", + "score": 0, + "title": "Network dependency tree" + }, + { + "id": "render-blocking-insight", + "score": 0, + "title": "Render-blocking requests" + } + ], + "error": null + }, + { + "page": "about", + "version": "13.5.0", + "fetchTime": "2026-10-28T13:23:21.066Z", + "formFactor": "mobile", + "throttling": "simulate", + "scores": { + "performance": 97, + "accessibility": 100, + "best-practices": 100, + "seo": 100 + }, + "metrics": { + "first-contentful-paint": { + "numericValue": 1579.2842, + "displayValue": "1.6 s" + }, + "largest-contentful-paint": { + "numericValue": 2473.998675, + "displayValue": "2.5 s" + }, + "total-blocking-time": { + "numericValue": 4, + "displayValue": "0 ms" + }, + "cumulative-layout-shift": { + "numericValue": 0, + "displayValue": "0" + }, + "speed-index": { + "numericValue": 1579.2842, + "displayValue": "1.6 s" + }, + "total-byte-weight": { + "numericValue": 286460, + "displayValue": "Total size was 280 KiB" + } + }, + "failedAudits": [ + { + "id": "first-contentful-paint", + "score": 0.94, + "title": "First Contentful Paint" + }, + { + "id": "largest-contentful-paint", + "score": 0.9, + "title": "Largest Contentful Paint" + }, + { + "id": "interactive", + "score": 0.98, + "title": "Time to Interactive" + }, + { + "id": "mainthread-work-breakdown", + "score": 0.5, + "title": "Minimize main-thread work" + }, + { + "id": "bootup-time", + "score": 0.5, + "title": "Reduce JavaScript execution time" + }, + { + "id": "unused-javascript", + "score": 0, + "title": "Reduce unused JavaScript" + }, + { + "id": "image-delivery-insight", + "score": 0, + "title": "Improve image delivery" + }, + { + "id": "network-dependency-tree-insight", + "score": 0, + "title": "Network dependency tree" + }, + { + "id": "render-blocking-insight", + "score": 0, + "title": "Render-blocking requests" + } + ], + "error": null + }, + { + "page": "work", + "version": "13.5.0", + "fetchTime": "2026-10-28T13:23:27.110Z", + "formFactor": "mobile", + "throttling": "simulate", + "scores": { + "performance": 100, + "accessibility": 100, + "best-practices": 100, + "seo": 100 + }, + "metrics": { + "first-contentful-paint": { + "numericValue": 1358.1146999999999, + "displayValue": "1.4 s" + }, + "largest-contentful-paint": { + "numericValue": 1508.1146999999999, + "displayValue": "1.5 s" + }, + "total-blocking-time": { + "numericValue": 0, + "displayValue": "0 ms" + }, + "cumulative-layout-shift": { + "numericValue": 0, + "displayValue": "0" + }, + "speed-index": { + "numericValue": 1358.1146999999999, + "displayValue": "1.4 s" + }, + "total-byte-weight": { + "numericValue": 105759, + "displayValue": "Total size was 103 KiB" + } + }, + "failedAudits": [ + { + "id": "first-contentful-paint", + "score": 0.98, + "title": "First Contentful Paint" + }, + { + "id": "network-dependency-tree-insight", + "score": 0, + "title": "Network dependency tree" + }, + { + "id": "render-blocking-insight", + "score": 0, + "title": "Render-blocking requests" + } + ], + "error": null + }, + { + "page": "projects", + "version": "13.5.0", + "fetchTime": "2026-10-28T13:23:32.643Z", + "formFactor": "mobile", + "throttling": "simulate", + "scores": { + "performance": 100, + "accessibility": 100, + "best-practices": 100, + "seo": 100 + }, + "metrics": { + "first-contentful-paint": { + "numericValue": 1366.2687, + "displayValue": "1.4 s" + }, + "largest-contentful-paint": { + "numericValue": 1516.2687, + "displayValue": "1.5 s" + }, + "total-blocking-time": { + "numericValue": 0, + "displayValue": "0 ms" + }, + "cumulative-layout-shift": { + "numericValue": 0, + "displayValue": "0" + }, + "speed-index": { + "numericValue": 1366.2687, + "displayValue": "1.4 s" + }, + "total-byte-weight": { + "numericValue": 105568, + "displayValue": "Total size was 103 KiB" + } + }, + "failedAudits": [ + { + "id": "first-contentful-paint", + "score": 0.97, + "title": "First Contentful Paint" + }, + { + "id": "network-dependency-tree-insight", + "score": 0, + "title": "Network dependency tree" + }, + { + "id": "render-blocking-insight", + "score": 0, + "title": "Render-blocking requests" + } + ], + "error": null + }, + { + "page": "posts", + "version": "13.5.0", + "fetchTime": "2026-10-28T13:23:38.180Z", + "formFactor": "mobile", + "throttling": "simulate", + "scores": { + "performance": 98, + "accessibility": 100, + "best-practices": 100, + "seo": 100 + }, + "metrics": { + "first-contentful-paint": { + "numericValue": 1360.878, + "displayValue": "1.4 s" + }, + "largest-contentful-paint": { + "numericValue": 2228.004, + "displayValue": "2.2 s" + }, + "total-blocking-time": { + "numericValue": 8.5, + "displayValue": "10 ms" + }, + "cumulative-layout-shift": { + "numericValue": 0, + "displayValue": "0" + }, + "speed-index": { + "numericValue": 1360.878, + "displayValue": "1.4 s" + }, + "total-byte-weight": { + "numericValue": 256169, + "displayValue": "Total size was 250 KiB" + } + }, + "failedAudits": [ + { + "id": "first-contentful-paint", + "score": 0.98, + "title": "First Contentful Paint" + }, + { + "id": "largest-contentful-paint", + "score": 0.94, + "title": "Largest Contentful Paint" + }, + { + "id": "max-potential-fid", + "score": 0.99, + "title": "Max Potential First Input Delay" + }, + { + "id": "interactive", + "score": 0.99, + "title": "Time to Interactive" + }, + { + "id": "unused-javascript", + "score": 0.5, + "title": "Reduce unused JavaScript" + }, + { + "id": "image-delivery-insight", + "score": 0.5, + "title": "Improve image delivery" + }, + { + "id": "lcp-discovery-insight", + "score": 0, + "title": "LCP request discovery" + }, + { + "id": "network-dependency-tree-insight", + "score": 0, + "title": "Network dependency tree" + }, + { + "id": "render-blocking-insight", + "score": 0, + "title": "Render-blocking requests" + } + ], + "error": null + }, + { + "page": "feedback", + "version": "13.5.0", + "fetchTime": "2026-10-28T13:23:43.936Z", + "formFactor": "mobile", + "throttling": "simulate", + "scores": { + "performance": 100, + "accessibility": 100, + "best-practices": 100, + "seo": 100 + }, + "metrics": { + "first-contentful-paint": { + "numericValue": 1359.0942, + "displayValue": "1.4 s" + }, + "largest-contentful-paint": { + "numericValue": 1509.0942, + "displayValue": "1.5 s" + }, + "total-blocking-time": { + "numericValue": 0, + "displayValue": "0 ms" + }, + "cumulative-layout-shift": { + "numericValue": 0, + "displayValue": "0" + }, + "speed-index": { + "numericValue": 1359.0942, + "displayValue": "1.4 s" + }, + "total-byte-weight": { + "numericValue": 105709, + "displayValue": "Total size was 103 KiB" + } + }, + "failedAudits": [ + { + "id": "first-contentful-paint", + "score": 0.98, + "title": "First Contentful Paint" + }, + { + "id": "network-dependency-tree-insight", + "score": 0, + "title": "Network dependency tree" + }, + { + "id": "render-blocking-insight", + "score": 0, + "title": "Render-blocking requests" + } + ], + "error": null + } + ], + "notes": [ + "One Lighthouse sample per page in this run; no repeatability distribution is claimed.", + "Windows Home results remain lower and are retained separately in lighthouse-summary.json.", + "The later report-only commit does not change the tested application, dependencies or workflow." + ] +}