Skip to content

feat(website): add SvelteKit landing site#2

Merged
petems merged 2 commits into
masterfrom
style/add-website
May 16, 2026
Merged

feat(website): add SvelteKit landing site#2
petems merged 2 commits into
masterfrom
style/add-website

Conversation

@petems
Copy link
Copy Markdown
Owner

@petems petems commented May 15, 2026

Summary

  • New SvelteKit static site under website/ with Hero, Pitch, Rules, Install, and Changelog sections.
  • BASE_PATH support so the site can live at the /unsloppify subpath on GitHub Pages.
  • New pages.yml workflow that builds and deploys on every push to master that touches website/** or the workflow itself.

Test plan

  • cd website && pnpm install && pnpm run build succeeds locally
  • pnpm run dev renders the page without console errors
  • After merge, the Pages workflow runs and the site is reachable at https://petems.github.io/unsloppify
  • Nav links, install snippet copy-button, and Changelog links all work on the deployed build

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features
    • Launches a full project website: hero, pitch, rules catalogue, install gallery with copy buttons, changelog, footer, and animated terminal demo — all responsive.
    • Adds social Open Graph image template and site meta for sharing.
    • Enables static prerendering and automated deploys to GitHub Pages for continuous publishing.

Review Change Stack

* Add SvelteKit static-site setup with adapter-static
* Include Hero, Pitch, Rules, Install, Changelog sections
* Wire BASE_PATH support for GitHub Pages subpath hosting
* Add Pages workflow that builds and deploys on master push

Co-Authored-By: Claude <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 15, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: d7f96485-3f45-4303-af13-6a7768939d9e

📥 Commits

Reviewing files that changed from the base of the PR and between ba592ed and f8f9158.

📒 Files selected for processing (2)
  • website/src/app.css
  • website/src/lib/components/Install.svelte
🚧 Files skipped from review as they are similar to previous changes (2)
  • website/src/lib/components/Install.svelte
  • website/src/app.css

📝 Walkthrough

Walkthrough

Adds a SvelteKit + Vite website in website/ and a GitHub Actions Pages workflow that builds the site with pnpm and deploys the produced website/build to GitHub Pages (BASE_PATH=/unsloppify). The site includes global CSS, OG template, prerendered layout, data modules, and components for nav, hero, pitch, rules, install, changelog, terminal, and footer.

Changes

Website Landing Page & Deployment

Layer / File(s) Summary
Build and deployment infrastructure
.github/workflows/pages.yml, website/package.json, website/svelte.config.js, website/vite.config.js, website/.gitignore
Pages workflow builds website/ with pnpm v10 on Node 20, uploads website/build, and deploys via actions/deploy-pages@v4. SvelteKit static adapter configured and Vite plugin enabled; package.json and .gitignore added.
Root HTML template and design system
website/src/app.html, website/src/app.css, website/og-template.html
SvelteKit root document and comprehensive stylesheet with design tokens, editorial utility classes, resets, patterned background, and an OG HTML template for social previews.
Route layout and page composition
website/src/routes/+layout.js, website/src/routes/+layout.svelte, website/src/routes/+page.svelte
Prerender enabled; layout imports global CSS and Nav, and home page composes Hero, Pitch, Rules, Install, Changelog inside <main> with Footer after.
Data models and display components
website/src/lib/data/showcase-rules.js, website/src/lib/data/terminal-script.js, website/src/lib/components/Rules.svelte, website/src/lib/components/Terminal.svelte
Exports tiers and terminal lines. Rules component maps fixable states and renders tiered rule tables. Terminal component animates line-by-line reveal using IntersectionObserver and autoscroll.
Navigation and content section components
website/src/lib/components/Nav.svelte, website/src/lib/components/Hero.svelte, website/src/lib/components/Pitch.svelte, website/src/lib/components/Install.svelte, website/src/lib/components/Changelog.svelte, website/src/lib/components/Footer.svelte
Fixed, scroll-aware Nav; Hero with CTAs and embedded Terminal; Pitch with specimen and tiers; Install with six command cards and copy-to-clipboard logic; Changelog static sheet; Footer colophon. All include component-scoped styling and responsive rules.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

I hopped through styles and HTML bright,
Built a tiny site to set words right.
PNPM buzzed, Vite took the stage,
Pages deployed the unsloppify page.
~🐰

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title 'feat(website): add SvelteKit landing site' accurately describes the main change: adding a complete SvelteKit-based landing website with multiple components and GitHub Pages deployment.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch style/add-website

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
website/src/lib/components/Rules.svelte (1)

55-65: ⚡ Quick win

Add semantic table headers for accessibility.

The rule table currently renders unlabeled cells only. Add a hidden header row (and optional caption) so assistive tech can announce column meaning.

♿ Suggested patch
-					<table class="rule-table">
+					<table class="rule-table">
+						<thead class="sr-only">
+							<tr>
+								<th scope="col">Rule #</th>
+								<th scope="col">Trigger</th>
+								<th scope="col">Note</th>
+							</tr>
+						</thead>
 						<tbody>
 							{`#each` tier.rules as rule, ri}
 <style>
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@website/src/lib/components/Rules.svelte` around lines 55 - 65, The table
rendered by Rules.svelte (the <table class="rule-table"> that iterates
tier.rules and renders rule.trigger and rule.note) lacks semantic headers; add a
<caption> (optional) and a <thead> with a header row containing three <th
scope="col"> cells for the index, trigger, and note so screen readers know each
column meaning, and hide the visual appearance using an existing or new utility
CSS class (e.g., "sr-only" or "visually-hidden") so the headers are announced
but not shown; keep the existing tbody and {`#each` tier.rules as rule, ri} block
unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@website/src/app.css`:
- Line 44: The CSS custom property --serif currently lists "Georgia" capitalized
which triggers stylelint's value-keyword-case rule; update the font-family
fallback to use lowercase "georgia" (i.e., change --serif: 'Fraunces', Georgia,
'Times New Roman', serif; to use georgia) so the value-keyword-case lint error
is resolved while keeping the same font order and fallbacks.

In `@website/src/lib/components/Install.svelte`:
- Around line 4-8: The copy function uses navigator.clipboard.writeText without
handling failures; wrap the writeText call in a try/catch, first guard for
navigator.clipboard availability, and on failure fall back to a legacy copy
approach or surface an error (e.g., set copied to an error state and/or
console.error) so the promise rejection is handled; update the function named
copy and the copied state updates to reflect success vs failure and ensure the
timeout still clears the status.

---

Nitpick comments:
In `@website/src/lib/components/Rules.svelte`:
- Around line 55-65: The table rendered by Rules.svelte (the <table
class="rule-table"> that iterates tier.rules and renders rule.trigger and
rule.note) lacks semantic headers; add a <caption> (optional) and a <thead> with
a header row containing three <th scope="col"> cells for the index, trigger, and
note so screen readers know each column meaning, and hide the visual appearance
using an existing or new utility CSS class (e.g., "sr-only" or
"visually-hidden") so the headers are announced but not shown; keep the existing
tbody and {`#each` tier.rules as rule, ri} block unchanged.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: d3e1e46b-27be-4a93-bf83-915e6b476410

📥 Commits

Reviewing files that changed from the base of the PR and between ac6cc2f and ba592ed.

⛔ Files ignored due to path filters (2)
  • website/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
  • website/static/favicon.svg is excluded by !**/*.svg
📒 Files selected for processing (21)
  • .github/workflows/pages.yml
  • website/.gitignore
  • website/og-template.html
  • website/package.json
  • website/src/app.css
  • website/src/app.html
  • website/src/lib/components/Changelog.svelte
  • website/src/lib/components/Footer.svelte
  • website/src/lib/components/Hero.svelte
  • website/src/lib/components/Install.svelte
  • website/src/lib/components/Nav.svelte
  • website/src/lib/components/Pitch.svelte
  • website/src/lib/components/Rules.svelte
  • website/src/lib/components/Terminal.svelte
  • website/src/lib/data/showcase-rules.js
  • website/src/lib/data/terminal-script.js
  • website/src/routes/+layout.js
  • website/src/routes/+layout.svelte
  • website/src/routes/+page.svelte
  • website/svelte.config.js
  • website/vite.config.js

Comment thread website/src/app.css Outdated
Comment thread website/src/lib/components/Install.svelte
* normalize CSS serif fallback keyword casing

* handle clipboard copy failures in install commands
@petems petems merged commit a91fae1 into master May 16, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant