feat: add demo by twangodev · Pull Request #4 · twangodev/ogis

twangodev · 2025-10-18T00:31:35Z

Summary by CodeRabbit

New Features
- Added a demo application featuring a responsive hero page with call-to-action buttons.
- Added navigation menu, footer, and multiple new pages: Documentation, Playground, Showcase, and Templates.
- Added interactive UI components including animated buttons, theme toggle, and scrolling marquee effects.
Documentation
- Updated README with demo image.
- Added setup and development guide for the demo project.
Chores
- Updated Docker configuration for static file handling.

…ories for runtime configuration

…iguration files

coderabbitai · 2025-10-18T00:31:45Z

Caution

Review failed

The pull request is closed.

Walkthrough

A new SvelteKit-based demo application is established in the demo directory with complete project structure, configuration, and components. The Dockerfile removes font asset copying instructions, while docker-compose.yml adds corresponding read-only volume mounts for fonts, fonts.yaml, and templates. The README is updated with an Open Graph image reference.

Changes

Cohort / File(s)	Summary
Docker & Deployment Configuration `Dockerfile`, `docker-compose.yml`	Removes COPY instructions for fonts and fonts.yaml from Docker image build; adds read-only volume mounts for fonts, fonts.yaml, and templates in docker-compose instead.
Root Documentation `README.md`	Adds Demo Open Graph Image markdown reference.
Demo Project Configuration `demo/.gitignore`, `demo/.mcp.json`, `demo/.npmrc`, `demo/.prettierignore`, `demo/.prettierrc`, `demo/README.md`, `demo/components.json`, `demo/eslint.config.js`, `demo/package.json`, `demo/svelte.config.js`, `demo/tsconfig.json`, `demo/vite.config.ts`	Establishes SvelteKit project configuration including build tools (Vite, ESLint, Prettier), package dependencies, TypeScript settings, and shadcn-svelte component framework setup.
Demo Source Setup & Utilities `demo/src/app.css`, `demo/src/app.d.ts`, `demo/src/app.html`, `demo/src/lib/index.ts`, `demo/src/lib/utils.ts`, `demo/src/lib/config/{logos.json,site.ts}`	Initializes SvelteKit app shell, global styling with Tailwind and semantic color tokens, type declarations, utility functions for className composition and TypeScript prop manipulation, and site configuration.
Demo UI Components `demo/src/lib/components/{hero/Hero.svelte,layout/{Footer,Logo,Navigation,ThemeToggle}.svelte,magic/{Marquee,ProgressiveBlur}.svelte,sections/{HeroContent,LogoMarquee}.svelte,ui/button/{animated-button.svelte,button.svelte,index.ts},ui/link/{link.svelte,index.ts}}`	Implements reusable Svelte components including layout shell (Navigation, Footer, Logo), hero sections with responsive design, magical effects (marquee scrolling, progressive blur), and themed UI button/link elements with Tailwind variants.
Demo Routes & Static Assets `demo/src/routes/{+layout.svelte,+layout.ts,+page.svelte,docs/+page.svelte,playground/+page.svelte,showcase/+page.svelte,templates/+page.svelte}`, `demo/static/robots.txt`	Sets up SvelteKit page routing structure with layout wrapper (ModeWatcher, Navigation, Footer), homepage with Hero component, documentation pages for playground/showcase/templates, and SEO robots.txt file.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Browser
    participant SvelteKit as SvelteKit App
    participant Navigation
    participant Hero as Hero Section
    participant Footer

    User->>Browser: Visit demo site
    Browser->>SvelteKit: Request /
    activate SvelteKit
    SvelteKit->>SvelteKit: Load +layout.svelte
    SvelteKit->>Navigation: Render Navigation
    Note over Navigation: Logo + Menu Items + ThemeToggle
    SvelteKit->>Hero: Render +page (Hero)
    activate Hero
    Hero->>Hero: Render HeroContent
    Hero->>Hero: Render LogoMarquee with scroll
    Note over Hero: Marquee animates logos<br/>ProgressiveBlur fades edges
    deactivate Hero
    SvelteKit->>Footer: Render Footer
    deactivate SvelteKit
    SvelteKit-->>Browser: Complete HTML + CSS
    Browser->>User: Display page with animations

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

The review involves understanding a new SvelteKit project structure with ~50 files across configuration, components, and routes. While most changes are homogeneous (standard boilerplate, repetitive component patterns, and configuration files), the breadth requires verification that setup aligns with project standards, component compositions are correct, and the Docker/compose changes properly migrate from file copying to volume mounting. Logic density is low, but comprehensiveness demands systematic verification across all cohorts.

Possibly related PRs

feat: update Docker configuration to mount fonts and templates directories for runtime configuration #3: Directly related—both PRs remove font/fonts.yaml copying from the Docker image build and implement runtime volume mounting instead in docker-compose.yml.

Poem

🐰 A demo garden sprooms with care,
SvelteKit branches everywhere!
Marquees scroll, blur fades so sweet,
Buttons dance with Tailwind's beat—
Fonts now mounted, volumes bloom,
Welcome to our shiny room! 🌟

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/demo

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bd5a050 and d735e24.

⛔ Files ignored due to path filters (5)

demo/package-lock.json is excluded by !**/package-lock.json
demo/static/favicon.ico is excluded by !**/*.ico
demo/static/logo.svg is excluded by !**/*.svg
demo/static/logo/fish-audio.svg is excluded by !**/*.svg
demo/static/logo/uw-coursemap.svg is excluded by !**/*.svg

📒 Files selected for processing (44)

Dockerfile (0 hunks)
README.md (1 hunks)
demo/.gitignore (1 hunks)
demo/.mcp.json (1 hunks)
demo/.npmrc (1 hunks)
demo/.prettierignore (1 hunks)
demo/.prettierrc (1 hunks)
demo/README.md (1 hunks)
demo/components.json (1 hunks)
demo/eslint.config.js (1 hunks)
demo/package.json (1 hunks)
demo/src/app.css (1 hunks)
demo/src/app.d.ts (1 hunks)
demo/src/app.html (1 hunks)
demo/src/lib/components/hero/Hero.svelte (1 hunks)
demo/src/lib/components/layout/Footer.svelte (1 hunks)
demo/src/lib/components/layout/Logo.svelte (1 hunks)
demo/src/lib/components/layout/Navigation.svelte (1 hunks)
demo/src/lib/components/layout/ThemeToggle.svelte (1 hunks)
demo/src/lib/components/magic/Marquee.svelte (1 hunks)
demo/src/lib/components/magic/ProgressiveBlur.svelte (1 hunks)
demo/src/lib/components/sections/HeroContent.svelte (1 hunks)
demo/src/lib/components/sections/LogoMarquee.svelte (1 hunks)
demo/src/lib/components/ui/button/animated-button.svelte (1 hunks)
demo/src/lib/components/ui/button/button.svelte (1 hunks)
demo/src/lib/components/ui/button/index.ts (1 hunks)
demo/src/lib/components/ui/link/index.ts (1 hunks)
demo/src/lib/components/ui/link/link.svelte (1 hunks)
demo/src/lib/config/logos.json (1 hunks)
demo/src/lib/config/site.ts (1 hunks)
demo/src/lib/index.ts (1 hunks)
demo/src/lib/utils.ts (1 hunks)
demo/src/routes/+layout.svelte (1 hunks)
demo/src/routes/+layout.ts (1 hunks)
demo/src/routes/+page.svelte (1 hunks)
demo/src/routes/docs/+page.svelte (1 hunks)
demo/src/routes/playground/+page.svelte (1 hunks)
demo/src/routes/showcase/+page.svelte (1 hunks)
demo/src/routes/templates/+page.svelte (1 hunks)
demo/static/robots.txt (1 hunks)
demo/svelte.config.js (1 hunks)
demo/tsconfig.json (1 hunks)
demo/vite.config.ts (1 hunks)
docker-compose.yml (1 hunks)

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

Copilot

Pull Request Overview

This PR adds a demo SvelteKit application to the project. The demo is a basic SvelteKit starter setup with TypeScript, ESLint, Prettier, and Tailwind CSS configured. Additionally, the Docker configuration has been updated to mount fonts and templates as volumes instead of copying them into the image.

Key changes:

Added a complete SvelteKit demo application with standard tooling configuration
Modified Docker setup to use volume mounts for fonts and templates instead of copying them during build

Reviewed Changes

Copilot reviewed 18 out of 22 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
docker-compose.yml	Added volume mounts for fonts and templates directories
Dockerfile	Removed COPY commands for fonts and fonts.yaml (now handled via volumes)
demo/vite.config.ts	Vite configuration with SvelteKit, Tailwind, and devtools plugins
demo/tsconfig.json	TypeScript configuration extending SvelteKit defaults
demo/svelte.config.js	SvelteKit configuration with static adapter
demo/package.json	Project dependencies and scripts for the demo app
demo/eslint.config.js	ESLint configuration with TypeScript and Svelte support
demo/.prettierrc	Prettier formatting configuration
demo/src/app.html	HTML entry point for the SvelteKit app
demo/src/app.css	Global CSS with Tailwind import
demo/src/routes/+layout.svelte	Root layout component with favicon
demo/src/routes/+page.svelte	Default home page component
demo/src/lib/index.ts	Library barrel file placeholder
demo/static/robots.txt	Robots.txt allowing all crawlers
demo/.gitignore	Git ignore rules for Node.js and SvelteKit
demo/.npmrc	NPM configuration
demo/.prettierignore	Prettier ignore rules
demo/README.md	Documentation for the demo project

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

…, and LogoMarquee

…logo rendering

…tion components to use Logo component

…ayout for better readability

… adjustments

…, Showcase, and Docs

…lates

Copilot

Pull Request Overview

Copilot reviewed 43 out of 49 changed files in this pull request and generated 4 comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-18T08:43:04Z

demo/src/lib/components/ui/button/animated-button.svelte

+			<span
+				class="spark mask-gradient animate-flip before:animate-kitrotate absolute inset-0 h-[100%] w-[100%] overflow-hidden rounded-md [mask:linear-gradient(white,_transparent_50%)] before:absolute before:[inset:0_auto_auto_50%] before:aspect-square before:w-[200%] before:[translate:-50%_-15%]
+        before:rotate-[-90deg] before:bg-[conic-gradient(from_0deg,transparent_0_330deg,blue_360deg)] before:content-[''] dark:before:bg-[conic-gradient(from_0deg,transparent_0_340deg,white_360deg)]"
+				>,</span


Extra comma '>,</span' on line 29 should be '></span'.

Suggested change

>,</span

></span

Copilot · 2025-10-18T08:43:04Z

demo/src/lib/components/sections/LogoMarquee.svelte

+
+	let {
+		logos = DEFAULT_LOGOS,
+		label = 'Powering open source, enterprise, and more.',


[nitpick] Missing space after comma in the default label value. Should be 'Powering open source, enterprise, and more.' with consistent spacing.

Copilot · 2025-10-18T08:43:05Z

demo/src/lib/components/layout/Footer.svelte

+			class="mt-12 flex flex-col items-center justify-between gap-4 border-t pt-8 sm:flex-row"
+		>
+			<p class="text-sm text-muted-foreground">
+				Made by <Link href="https://twango.dev" external>James Ding</Link>. Licensed under{' '}


The template literal {' '} for spacing is a React pattern. In Svelte, use regular space or   instead.

Suggested change

Made by <Link href="https://twango.dev" external>James Ding</Link>. Licensed under{' '}

Made by <Link href="https://twango.dev" external>James Ding</Link>. Licensed under

Copilot · 2025-10-18T08:43:05Z

demo/src/lib/components/layout/Footer.svelte

+				>
+					<img
+						src="https://kener.twango.dev/badge/ogis/dot?animate=ping"
+						alt="Status Badge"


The alt text 'Status Badge' is not descriptive enough for screen reader users. Consider using 'Service status indicator' or 'Current service health status' to convey the badge's purpose.

Suggested change

alt="Status Badge"

alt="Current service health status"

twangodev added 2 commits October 17, 2025 13:59

feat: update Docker configuration to mount fonts and templates direct…

3c16c68

…ories for runtime configuration

feat: initialize demo SvelteKit project with basic structure and conf…

5474271

…iguration files

Copilot AI review requested due to automatic review settings October 18, 2025 00:31

twangodev marked this pull request as draft October 18, 2025 00:31

Copilot AI reviewed Oct 18, 2025

View reviewed changes

twangodev added 16 commits October 17, 2025 19:50

feat: initialize shadcn-svelte

20c0ee1

feat: add MCP configuration for Svelte integration

9362b6a

feat: import Hero component and animated button with responsive design

6865e91

feat: add layout components including Navigation, Footer, HeroContent…

5da78e6

…, and LogoMarquee

feat: add theme toggle functionality and integrate mode-watcher

8fc0900

feat: refactor Navigation component to use Lucide icons and simplify …

94ab872

…logo rendering

feat: replace favicon with Lucide icon and refactor Footer and Naviga…

0befa8b

…tion components to use Logo component

feat: integrate site configuration into Footer and Logo components

412aa48

feat: add Link component and update Footer with external links

7911497

feat: update HeroContent with new title and description, and adjust l…

2efb81c

…ayout for better readability

feat: update layout and components with new logo handling and favicon…

d965070

… adjustments

feat: add GitHub link to Navigation and update ThemeToggle button

a931651

feat: update Navigation menu with new links for Playground, Templates…

0785472

…, Showcase, and Docs

feat: add new pages for Documentation, Playground, Showcase, and Temp…

11e9bd8

…lates

feat: add service status link to Footer and include new logo SVG

d46734f

feat: update Footer links and GitHub URL in site configuration

d735e24

twangodev marked this pull request as ready for review October 18, 2025 08:42

Copilot AI review requested due to automatic review settings October 18, 2025 08:42

twangodev merged commit 30af1a8 into main Oct 18, 2025
7 checks passed

twangodev deleted the feat/demo branch October 18, 2025 08:42

Copilot AI reviewed Oct 18, 2025

View reviewed changes

coderabbitai bot mentioned this pull request Dec 16, 2025

feat: improve benchmarking #81

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add demo#4

feat: add demo#4
twangodev merged 18 commits intomainfrom
feat/demo

twangodev commented Oct 18, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Oct 18, 2025 •

edited

Loading

Review failed

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 18, 2025

Uh oh!

Copilot AI Oct 18, 2025

Uh oh!

Copilot AI Oct 18, 2025

Uh oh!

Copilot AI Oct 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	Made by <Link href="https://twango.dev" external>James Ding</Link>. Licensed under{' '}
	Made by <Link href="https://twango.dev" external>James Ding</Link>. Licensed under

Uh oh!

Conversation

twangodev commented Oct 18, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Oct 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

twangodev commented Oct 18, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 18, 2025 •

edited

Loading