[DennisPitallano]

Summary

A full, developer-first redesign of digi-id.io. It keeps the existing Lemonade brand (colours, logo, illustrations) and stays on GitHub Pages, but repositions the site the way the new digibyte.org does: show developers exactly how to ship Digi-ID in real apps, prove it works, and make it easy to contribute.

Live preview: https://dennispitallano.github.io/digi-id-io/ or https://digi-id-io.vercel.app/ (same build this PR deploys; paths are prefixed with /digi-id-io only on the fork)

What's new for visitors

Area	Before	After
Audience	Wallet users	Developers first, plus a "For wallet users" section
Home	Features, tabs, 2 wallet logos	Hero with product mock-up, proof strip, comparison vs passwords / "Sign in with X", 4 steps with code, tabbed code window, 8 use cases, ecosystem, darkpapers + video
Developer content	Spread over getstarted / integration / vendor-info / faq	One Developer hub: quickstart (Node.js, PHP, browser), SDKs with honest status labels, guides, examples, protocol reference, playground, brand kit, support
Guides	None	6: web app login, nonces & replay protection, account linking, WordPress, door access, wallet integration
Demo	Video only	Sandbox demo: the real protocol in the browser with a simulated wallet, incl. "replay" and "tamper" buttons. No network calls, nothing stored
Playground	None	Paste a callback payload and see which verification check passes
Use cases	5 short tabs	8 scenarios with problem, solution, benefits, flow and a "build this" guide
Ecosystem	Hard-coded "Found in"	Data-driven page with status + proof links; submissions via issue form or PR, validated in CI. Seeded with Coinomi, digiid-js, digiid-php, WordPress, phpBB, digiid-core
Docs	FAQ + vendor pages	One Docs page: user FAQ, vendor info, integrator FAQ, security model
Contact	Netlify form (doesn't work on Pages)	Community page: GitHub Discussions, Issues, DigiByte Wiki
Themes	Light only	Light default + dark mode (follows OS, toggle), incl. syntax highlighting
Extras	—	Back-to-top, branded 404, SVG favicon + app icons, per-page social images

Technical changes

• Stack: Bulma/Bulkit + ~30 jQuery plugins + Ruby Sass → Tailwind CSS v4, PostHTML partials and small ES modules bundled with esbuild. Self-hosted fonts, SVG icon sprite, build-time syntax highlighting (Shiki).
• Source layout: pages in src/pages/ (JSON front matter), shared layout in src/partials/, content data in src/data/, code samples in src/snippets/. npm run build writes _site/.
• packages/digiid-core: TypeScript Digi-ID URI helpers, BIP32 per-site key derivation, DigiByte message signing and callback verification on audited @noble/@Scure libraries. Powers the demo and playground, verified against the published derivation vector, and ready for npm as digiid-core (see below).
• Deploy: pages.yml now installs, tests, builds and uploads only _site/ (instead of the whole repo). A BASE_PATH taken from configure-pages makes the same workflow work for forks and the custom domain. Actions bumped to Node 24 majors.
• CI: new ci.yml on pull requests runs unit tests, data lint, build, Playwright + axe, link check and Lighthouse budgets.
• SEO: unique title/description/OG per page, generated sitemap + robots.txt, canonical URLs to https://www.digi-id.io, JSON-LD (Organization, WebSite, FAQPage, TechArticle).
• Privacy: no analytics, no cookies, no third-party scripts on load. The explainer video uses youtube-nocookie.com and loads only on click. Terms & Privacy rewritten to match (MIT licence, nothing collected).
• Cleanup: removed the unused template CSS/SCSS/JS, icon fonts, .htaccess, the publicly served class.fileuploader.php, duplicate PDF and unused images. Darkpapers (12 languages) and illustrations are kept.

Protocol correction

The old integration page said the URL path isn't used in key derivation. The published test vector only matches when the derivation input is the callback URL with its path (https://digiid.digibyteprojects.com/callback), so digiid-core and the docs follow the vector. As a consequence, the door-access guidance now uses one callback for all doors (per-door paths would give each person a different address per door).

Compatibility

• Old URLs keep working: getstarted.html, integration.html, vendor-info.html, faq.html, pricing.html redirect (canonical + meta refresh) to their new homes; /#implementations still exists.
• ToS.html, disclaimer.html, documentation.html, contact.html keep their paths.
• Heads-up on Update vendor info page with September 2026 Digi-ID vendor information. #16: it edits vendor-info.html, which this PR replaces with a redirect to documentation.html#vendors. Its content could be ported into the "For vendors" section of src/pages/documentation.html before or after merging.

Quality

• 17 unit tests (digiid-core, incl. the published vector) and 90 Playwright tests on desktop + mobile, including axe WCAG 2.1 AA checks for every page in light and dark themes.
• Lighthouse (mobile): Performance 0.94 (Home) / 0.98 (Developers); Accessibility, Best Practices and SEO 1.0.
• npm run verify runs every gate locally.

Maintainer follow-ups (optional)

• Publish digiid-core: add an NPM_TOKEN secret and push tag digiid-core-v0.1.0; publish-core.yml tests and publishes with provenance.
• Traffic baseline: add a TRAFFIC_TOKEN secret (read access to repo administration) to enable the weekly traffic.yml snapshot of referrals from digi-id.io to the library repos.
• Pages settings: already "GitHub Actions" in the current workflow; no change needed. vercel.json is included for optional preview deployments.
• Wallets: only wallets with checkable, current proof are listed. Coinomi is in; others (e.g. Ownbit, DigiByte mobile) can be submitted via the new issue form.

How to run locally

npm ci
npm run dev      # http://localhost:8080
npm run verify   # all tests, links and Lighthouse budgets

[JaredTate]

This looks great! Thank you for taking the time to work on this. Awesome work.

[bastiandriessen]

The new site looks very good. Congratulations!

Below a series of recommendations. I would treat the empty use-case link, tab/copy button names, and hash-vs-sticky-header offset as the actual page bugs. (I have prefixed them with "BUG:". The rest is polish.)

Then in regards to the Hero line. The current line is clean, but generic. “Passwordless” is what every passkey / magic-link vendor says. “One scan” is the mechanic, not the reason. The rest of the hero already does the explaining — the headline should pick a lane.

Some ideas:

Sign in with a signature.

No password. A signature.

Scan. Approve. Done.

A QR. A signature. You’re in.

Login that lives in the wallet.

Your wallet is the login.

Sign in without storing secrets.

Keep the subhead you already have. It carries the protocol story. The headline only needs to be the thing someone can repeat.

My personal favourite:

Sign in with a signature.

if you want punchier contrast:

No password. A signature.

---

Review

Semantics and document outline

• BUG: Home use-case cards include at least one link with empty accessible name: . Screen readers get a blank link. Every card needs visible text inside the <a>, or aria-label that includes the use-case title.
• Heading levels jump around. Home uses a kicker (“How it works”) then an h2 (“Four steps…”). Docs and Developers start with an h1 after a label, which is fine; make sure kickers are <p>/<p class="eyebrow">, not extra h1s. One h1 per page is already the pattern — keep it.
• FAQ on documentation.html is a flat list of h3 + p. That is valid HTML. <details>/<summary> (or buttons + aria-expanded) would match how people scan FAQs and would cut page length. Not required for conformance.
• Comparison and protocol tables are real <table>s with header cells. Good. Give them a <caption> or aria-label so the table is named when jumped to.

Accessibility

• Skip link and back-to-top both have .sr-only / focus-visible treatment. Good. Confirm the skip link is visible on keyboard focus (the class name is there; the CSS has to actually show it).
• Mobile menu button has aria-expanded and aria-controls="site-menu". The menu is hidden until open. Also set aria-expanded="true" when open and move focus into the panel (or trap it). Closing on Escape is expected.
• Theme control label is “Dark theme” while the button toggles. Prefer “Use dark theme” / “Use light theme” that updates with state, or aria-pressed plus a label that does not sound one-way.
• theme-color is hard-coded #002451. In dark mode the chrome is different; a matching theme-color (or media="(prefers-color-scheme: dark)") avoids a light-navy browser UI on a dark page.
• Demo page correctly says “The interactive demo needs JavaScript” and still offers a walkthrough. Keep that noscript path. Approve / Decline should stay real <button type="button">s, not clickable divs.
• BUG: Code “Copy” controls need an accessible name (“Copy Node snippet”) and a live confirmation (the existing #live-region is the right place).
• Decorative logos use alt="" with aria-label on the parent home link. Correct. Do the same for ecosystem logos; don’t leave filename alts.

HTML / modern platform

• External GitHub link uses target="_blank" rel="noopener". Add noreferrer if you care about referrer leakage; noopener is the important one. The accessible name should mention that it opens in a new window, or drop target="_blank" — in-app navigation is fine for GitHub.
• PDF links should say they are PDFs in the link text (you already do on the overview) and use type="application/pdf". Opening in a new tab is fine if announced.
• Icon partials (<icon name="menu">) must compile to inline SVG with aria-hidden="true" when the button already has an .sr-only label. If the custom element survives into the output, that is invalid HTML.
• BUG: content-visibility + hash scrolling is handled in head.html by flipping cv-off. That is a real layout bug class; keep the workaround, but prefer scroll-margin-top on headings equal to the sticky header height so #protocol does not land under the bar.
• Preload heading font as font/woff while body is woff2. Fine, but woff2 for Nexa would be smaller and is the current default.

Page-level UX that reads as unfinished markup

• Home use-case grid: first card has no title in the text dump, others do. That is a template hole, not just a11y.
• 404.html explains the redesign and asks for an issue, but the “try one of these instead” list did not render as links in the preview text. If those are missing in HTML, the 404 is a dead end.
• Community form: good that it degrades to “this form needs JavaScript” plus Discussions. Fields need associated <label>s (not only placeholders), autocomplete where it applies (name, email), and a non-JS POST or a clearly visible fallback. Right now JS-off users are told to leave the page, which is acceptable if the message stays next to the submit button.
• BUG: Developers hub is one long page with tabs of code. Tab panels need role="tablist" / role="tab" / aria-selected / aria-controls, and the hidden panels must not be focusable. If they are just toggled hidden divs without roles, keyboard users will not know there are Node / PHP / browser variants.

SEO / social

• Canonical points at www.digi-id.io while the preview lives under /digi-id-io/. That is correct for production; just don’t ship preview URLs in og:url.
• JSON-LD was listed in the PR; I did not verify it in the rendered pages. FAQPage schema only belongs on documentation.html, and questions must match visible FAQ text.

[DennisPitallano]

Thanks for the thorough review, @bastiandriessen! Everything is in 378b0ef.

Headline: changed to "Sign in with a signature." with the subhead unchanged.

The BUG items

• Copy buttons: each one now has its own name, e.g. "Copy Node.js code – Issue a challenge". Screen readers were already told when code is copied.
• Empty use-case link: the first card has its title ("Website & SaaS login") inside the link in the built HTML. I think the text dump dropped it because of the &.
• Sticky header covering anchors: html already has scroll-padding-top: 5rem, which is more than the 4rem header. The cv-off workaround stays.
• Tabs: they already use tablist/tab/tabpanel with aria-selected/aria-controls and arrow, Home and End keys. Hidden panels can't be focused.

Other changes

• Tables: all tables now have a caption or aria-label.
• PDF links: they have type="application/pdf" and "(PDF)" in the link text.
• GitHub header link: now rel="noopener noreferrer" with hidden text "(opens in a new tab)".
• theme-color: separate light and dark values, chosen by the OS colour setting.
• Theme toggle: the label says what happens next ("Use dark theme" / "Use light theme"), without aria-pressed.
• Mobile menu: opening it moves focus to the first link. Escape already closed it.
• Docs FAQ: uses <details>/<summary> now. The FAQPage JSON-LD is still built from the visible question and answer text.
• Nexa font: now served and preloaded as woff2, about 30% smaller.

Already in place

• Section labels above headings are <p class="eyebrow">, with one h1 per page.
• The skip link shows on keyboard focus.
• Demo Approve and Decline are real buttons, and the demo works without JavaScript.
• Logos use alt="" next to visible names.
• <icon> elements become inline SVGs with aria-hidden.
• The 404 page links work.
• Contact fields have labels and autocomplete.
• Canonical and og:url point to www.digi-id.io.

[bastiandriessen]

Follow up Review

From a redesigned-site standpoint this is now ready. The bugs have been fixed/fixed well enough.

Page-review follow-ups are in: use-case cards have accessible names, code tabs/copy controls are labeled, in-page hashes clear the sticky header (scroll-padding-top + cv-off). Headline, FAQ <details>, table captions, and PDF type landed in the same pass.

After merge:

• Don’t merge PR16 as-is (vendor-info.html is now a redirect into documentation.html#vendors).
• Confirm GitHub Pages is serving the new _site/ build, not the stale fork preview.
• Treat digiid-core npm publish as a separate step.

Verdict

Ready to merge.

[ycagel]

ACK. Thanks for all your hard work @DennisPitallano and AJ! Appreciate the review by @bastiandriessen.