{"id":30887608,"url":"https://github.com/sethdavis512/rr7-slides","last_synced_at":"2026-04-09T12:15:21.432Z","repository":{"id":307601591,"uuid":"1030075739","full_name":"sethdavis512/rr7-slides","owner":"sethdavis512","description":"A modern slideshow application built with React Router 7, TypeScript, MDX, and TailwindCSS for creating PowerPoint-style presentations with keyboard navigation and dynamic slide discovery","archived":false,"fork":false,"pushed_at":"2025-09-05T23:37:35.000Z","size":435,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-06T01:18:37.116Z","etag":null,"topics":["mdx","presentation","react","react-router","slides","slideshow","tailwindcss","typescript","vite"],"latest_commit_sha":null,"homepage":"https://slides.sethdavis.tech/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sethdavis512.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-01T03:52:04.000Z","updated_at":"2025-09-05T23:37:39.000Z","dependencies_parsed_at":"2025-08-01T06:18:17.736Z","dependency_job_id":"6a219e66-ebb0-4868-b7cd-69fe6a18d598","html_url":"https://github.com/sethdavis512/rr7-slides","commit_stats":null,"previous_names":["sethdavis512/rr7-slides"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sethdavis512/rr7-slides","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethdavis512%2Frr7-slides","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethdavis512%2Frr7-slides/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethdavis512%2Frr7-slides/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethdavis512%2Frr7-slides/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sethdavis512","download_url":"https://codeload.github.com/sethdavis512/rr7-slides/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethdavis512%2Frr7-slides/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274196120,"owners_count":25239148,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-08T02:00:09.813Z","response_time":121,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mdx","presentation","react","react-router","slides","slideshow","tailwindcss","typescript","vite"],"created_at":"2025-09-08T14:03:33.350Z","updated_at":"2026-04-09T12:15:21.421Z","avatar_url":"https://github.com/sethdavis512.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RR7 Slides\n\nA slideshow application built with React Router 7, TypeScript, and MDX. Features dynamic slide discovery, smooth transitions, and PowerPoint-inspired designs.\n\n## Quick Start\n\n### Prerequisites\n\n- Node.js 22+\n- npm\n\n### Installation\n\n1. Clone the repository:\n\n```bash\ngit clone \u003crepository-url\u003e\ncd rr7-slides\n```\n\n1. Install dependencies:\n\n```bash\nnpm install\n```\n\n1. Start the development server:\n\n```bash\nnpm run dev\n```\n\n1. Open your browser to `http://localhost:5173`\n\n## Usage\n\n### Routes\n\n- **`/`** - Home page with navigation to start slideshow\n- **`/slides/{slide-id}`** - Full-screen presentation mode (e.g., `/slides/intro`)\n\n### Navigation Controls\n\nIn presentation mode:\n\n- **Left/Right Arrow Keys** - Navigate between slides\n- **Navigation buttons** - Click previous/next buttons on screen\n- **Slide indicators** - Click dots at bottom to jump to specific slides\n\n### Creating New Slides\n\n1. Create a new `.mdx` file in `app/routes/slides/`\n2. Add frontmatter with `title` and `order` fields\n3. Write your slide content using MDX:\n\n```mdx\n---\ntitle: Your Slide Title\norder: 7\n---\n\n\u003cdiv className=\"h-full flex flex-col justify-center items-center text-center\"\u003e\n  \u003ch1 className=\"text-7xl font-bold text-white mb-8\"\u003eYour Slide Title\u003c/h1\u003e\n  \u003cp className=\"text-2xl text-gray-300\"\u003eYour content here\u003c/p\u003e\n\u003c/div\u003e\n```\n\n1. The slide will be automatically discovered and added to the presentation\n\n### Slide Structure\n\nSlides are ordered by the `order` field in frontmatter:\n\n- `intro.mdx` (order: 1) - Introduction slide\n- `alfa.mdx` (order: 2) - Title \u0026 photo layout\n- `beta.mdx` (order: 3) - Section title with two columns\n- `charlie.mdx` (order: 4) - Photo \u0026 content layout\n- `delta.mdx` (order: 5) - Key statement\n- `end.mdx` (order: 6) - Closing slide\n\n## Architecture\n\n### Project Structure\n\n```text\napp/\n├── routes/\n│   ├── slides/           # MDX slide files\n│   ├── home.tsx          # Landing page\n│   └── stage.tsx         # Presentation component\n├── utils/\n│   ├── slide-discovery.ts # Dynamic slide discovery using Vite glob\n│   └── slides.server.ts  # Server-side slide navigation\n├── types/\n│   └── mdx.d.ts          # MDX module type declarations\n├── app.css               # Global styles with view transitions\n├── root.tsx              # App root component\n└── routes.ts             # Route configuration\n```\n\n### Key Technologies\n\n- **React Router 7** - File-based routing and SSR\n- **MDX** - Markdown with React components\n- **TailwindCSS 4** - Utility-first CSS framework\n- **TypeScript** - Type safety\n- **Vite** - Build tool and dev server\n\n### Slide Discovery System\n\nThe application uses Vite's `import.meta.glob` to automatically discover slides:\n\n- Scans `app/routes/slides/*.mdx` files\n- Extracts ordering from the `order` field in frontmatter\n- Lazy loads slide components for performance\n- Caches metadata to avoid repeated discovery\n\n## Development\n\n### Available Scripts\n\n```bash\nnpm run dev        # Start development server\nnpm run build      # Build for production\nnpm start          # Start production server\nnpm run typecheck  # Type checking (includes React Router type generation)\n```\n\n## Deployment\n\n### Docker\n\nA multi-stage Dockerfile is included. Build and run:\n\n```bash\ndocker build -t rr7-slides .\ndocker run -p 3000:3000 rr7-slides\n```\n\n### Node.js\n\n```bash\nnpm run build\nnpm start\n```\n\n## License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n---\n\nBuilt with ❤️ using React Router 7, TypeScript, and MDX.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsethdavis512%2Frr7-slides","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsethdavis512%2Frr7-slides","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsethdavis512%2Frr7-slides/lists"}