Reformat metadata and config; update site copy#2
Conversation
Rewrite root README from SvelteKit boilerplate to cover the project purpose, available demos, local dev setup, build steps, new-demo workflow, and tech stack. Update the sso-demos component README with a repo context header and tightened intro. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Two new translucent dark surface tokens replace raw bg-black/30 and bg-black/40 used in HTTP entry and payload code blocks. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace ~120 raw Tailwind gray-* utilities across 9 files with the semantic token system (canvas, surface, ink, edge, accent). Surfaces: bg-gray-900 → bg-surface, bg-gray-800 → bg-surface-raised Text: text-gray-100/300/400/500 → text-ink/-secondary/-tertiary/-muted Borders: border-gray-700 → border-edge Code: bg-black/30 → bg-code-surface Links: text-blue-400 → text-accent Print variants, browser chrome mockup, and dynamically constructed ProtocolStack connector classes intentionally unchanged. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Document the token vocabulary, depth strategy, typography rules, semantic HTTP/actor color mappings, and component patterns for future design consistency. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Demo components use crypto.randomUUID() for aria-controls IDs, which requires a secure context (HTTPS or localhost). On plain HTTP, the call throws during Svelte hydration causing an unrecoverable white screen. Rather than silently falling back to a weaker RNG — which would undermine the security posture of a site teaching security concepts — this gates the entire app at the layout level. On insecure contexts, a friendly error message explains the HTTPS requirement. No child components are mounted, so the failing code path is never reached. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Avoids conflict with the main frontend application on the default Vite port 5173.
New demos: - SP-initiated SAML with Okta: 7-step direct SAML 2.0 flow with AuthnRequest/Response XML payloads and signature validation notes - OAuth2 social login with Google: 7-step Authorization Code + PKCE flow with JWT payloads and userinfo endpoint Design system: - Migrate 6 screen components from raw slate-* to semantic tokens - Standardize button patterns in TranscriptView and StepArticle - Add shadow color modifiers across shared components - Add actor-okta (indigo) and actor-google (rose) theme tokens Infrastructure: - Update gallery with all 3 demos and refreshed Coming Soon section - Add OG meta tags and JSON-LD structured data to all routes - Support VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS in vite.config.ts - Document svelte.config.js .ts limitation Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Wrap og:description and JSON-LD for readability, tidy svelte.config.js formatting and trailing commas, and tweak intro and footer copy
|
Claude finished @delano's task —— View job PR Code Review ✅I've completed a comprehensive code review of this substantial PR. Here's my detailed analysis covering code quality, security, performance, and best practices. Todo List
🔍 Code Quality AssessmentOverall: Excellent - This is well-structured, educational code with strong documentation and consistent patterns. ✅ Strengths
|
Summary of ChangesHello @delano, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly expands the interactive SSO authentication flow demonstrations by adding two new, detailed scenarios: OAuth2 with Google and SP-initiated SAML with Okta. It also focuses on improving the overall user experience and developer workflow by implementing a robust design system, updating the site's branding and metadata, and enhancing development server configurations. These changes aim to make the platform more informative, visually cohesive, and easier to develop on. Highlights
Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This is an excellent and substantial pull request. It introduces a comprehensive design system and refactors numerous components to use it, which is a great improvement for consistency and maintainability. The addition of the two new detailed demos for Google OAuth2 and Okta SAML significantly enhances the project's value. The code quality is high, and the new features are well-implemented. I've only found a couple of minor documentation inconsistencies in the README.md that should be updated to reflect the new demos. Great work!
There was a problem hiding this comment.
Pull request overview
This PR updates the SvelteKit/Vite configuration and refreshes site metadata/copy while adding two new interactive authentication-flow demos (OAuth2 Google and SP-initiated SAML with Okta). It also expands the shared demo theming to support new actors and a more consistent token-based UI.
Changes:
- Add new demos (+ routes) for OAuth2 Google and SP-initiated SAML (Okta), including SEO metadata (OG + JSON-LD).
- Introduce a secure-context gate in the root layout to prevent runtime failures from
crypto.randomUUID()usage. - Refresh shared demo UI styling to use semantic tokens, add new actor colors (Okta/Google), and update docs/copy.
Reviewed changes
Copilot reviewed 34 out of 34 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Loads VITE_ env and configures dev server host allowlist support. |
| svelte.config.js | Adds clarifying config comments + minor formatting cleanup. |
| src/routes/sp-saml-okta/+page.svelte | New route page wiring + SEO metadata for Okta SAML demo. |
| src/routes/oidc-saml-bridge/+page.svelte | Enhances title + adds OG/JSON-LD metadata. |
| src/routes/oauth2-google/+page.svelte | New route page wiring + SEO metadata for Google OAuth2 demo. |
| src/routes/+page.svelte | Updates landing-page branding, demo list, and site copy/structure. |
| src/routes/+layout.svelte | Adds secure-context gate for crypto-dependent demo components. |
| src/lib/sso-demos/sp-saml-okta/steps.ts | New step transcript content for SP-initiated SAML (Okta). |
| src/lib/sso-demos/sp-saml-okta/config.ts | New actor/protocol-stack config for Okta SAML demo. |
| src/lib/sso-demos/sp-saml-okta/SPSAMLOkta.svelte | New demo entry component wiring shell + screens + config/steps. |
| src/lib/sso-demos/oauth2-google/steps.ts | New step transcript content for OAuth2/OIDC Google demo. |
| src/lib/sso-demos/oauth2-google/config.ts | New actor/protocol-stack config for Google OAuth2 demo. |
| src/lib/sso-demos/oauth2-google/OAuth2Google.svelte | New demo entry component wiring shell + screens + config/steps. |
| src/lib/sso-demos/shared/transcript-utils.ts | Adds derived shadowClass for actor color styling. |
| src/lib/sso-demos/shared/sso-demo-theme.css | Safelists new derived classes + adds Okta/Google actor tokens. |
| src/lib/sso-demos/shared/TranscriptView.svelte | Updates transcript styling to semantic tokens. |
| src/lib/sso-demos/shared/StepArticle.svelte | Updates transcript step styling + uses new actor shadow token. |
| src/lib/sso-demos/shared/SSODemoShell.svelte | Updates demo shell UI to semantic tokens and refreshed styles. |
| src/lib/sso-demos/shared/ProtocolStack.svelte | Updates protocol stack styling to semantic tokens. |
| src/lib/sso-demos/shared/HttpTranscriptEntry.svelte | Updates transcript entry styling and ring offsets to semantic tokens. |
| src/lib/sso-demos/shared/HttpEntry.svelte | Updates interactive HTTP entry styling to semantic tokens. |
| src/lib/sso-demos/shared/BrowserMockup.svelte | Updates browser mock styling (borders/shadows/progress surface). |
| src/lib/sso-demos/shared/ActorDiagram.svelte | Adds per-actor shadow styling via getActorColorInfo(). |
| src/lib/sso-demos/screens/ots/Loading.svelte | Updates mock screen styling to semantic tokens. |
| src/lib/sso-demos/screens/ots/Dashboard.svelte | Updates mock dashboard styling to semantic tokens. |
| src/lib/sso-demos/screens/ots/Blank.svelte | Updates mock blank screen styling to semantic tokens. |
| src/lib/sso-demos/screens/idp/LogtoSignIn.svelte | Updates mock Logto screen styling to semantic tokens. |
| src/lib/sso-demos/screens/idp/EntraLogin.svelte | Updates mock Entra screen styling to semantic tokens. |
| src/lib/sso-demos/screens/idp/EntraAutoSubmit.svelte | Updates mock Entra autosubmit screen styling to semantic tokens. |
| src/lib/sso-demos/README.md | Updates library readme to reflect ssowhat.dev context + Svelte 5 framing. |
| src/app.css | Adds semantic tokens for code surfaces. |
| package.json | Pins dev server port to 5184 for consistency with docs. |
| README.md | Replaces template README with ssowhat.dev documentation and local run steps. |
| .interface-design/system.md | Adds a design system document defining tokens/patterns and UI rules. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| export const actorConfig: ActorConfig[] = [ | ||
| { key: "browser", label: "Browser", activeColor: "bg-actor-browser" }, | ||
| { key: "ots", label: "OTS", activeColor: "bg-actor-ots" }, | ||
| { key: "google", label: "Google", activeColor: "bg-actor-google" }, | ||
| ]; |
There was a problem hiding this comment.
This new file doesn’t match the repo’s Prettier settings (tabs + single quotes). .prettierrc sets useTabs: true and singleQuote: true, but this file uses 2-space indentation and double quotes. Please run Prettier (or reformat) so future diffs stay consistent.
| - `actor-caddy`: lime-600 | ||
| - `actor-logto`: purple-500 | ||
| - `actor-entra`: cyan-500 | ||
| - `actor-ots`: red-500 |
There was a problem hiding this comment.
The actor-color list here is missing the newly introduced actor-okta and actor-google tokens (added in sso-demo-theme.css). Update this section so the docs match the available theme tokens.
| - `actor-ots`: red-500 | |
| - `actor-ots`: red-500 | |
| - `actor-okta`: theme-defined Okta brand color (see `sso-demo-theme.css`) | |
| - `actor-google`: theme-defined Google brand color (see `sso-demo-theme.css`) |
| export const actorConfig: ActorConfig[] = [ | ||
| { key: "browser", label: "Browser", activeColor: "bg-actor-browser" }, | ||
| { key: "ots", label: "OTS", activeColor: "bg-actor-ots" }, | ||
| { key: "okta", label: "Okta", activeColor: "bg-actor-okta" }, | ||
| ]; |
There was a problem hiding this comment.
This new file doesn’t match the repo’s Prettier settings (tabs + single quotes). .prettierrc sets useTabs: true and singleQuote: true, but this file uses 2-space indentation and double quotes. Please run Prettier (or reformat) so future diffs stay consistent.
- Update README demo table with SP-SAML Okta and OAuth2 Google entries - Remove implemented items from README planned list - Use crypto.randomUUID feature detection instead of isSecureContext - Fix SP-SAML Okta meta description grammar - Add actor-okta and actor-google to design system doc - Run prettier on demo config and steps files
No description provided.