├── bun.lockb ├── .example.env ├── app ├── favicon.ico ├── opengraph-image.tsx ├── layout.tsx ├── page.tsx ├── context │ └── ThemeContext.tsx └── globals.css ├── public ├── vercel.svg ├── window.svg ├── file.svg ├── globe.svg └── next.svg ├── postcss.config.mjs ├── next.config.ts ├── tailwind.config.ts ├── eslint.config.mjs ├── lib └── cosmic.ts ├── .gitignore ├── tsconfig.json ├── package.json ├── components ├── ThemeToggle.tsx └── Slideshow.tsx ├── README.md └── bucket.json /bun.lockb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/cosmic-slideshow/main/bun.lockb -------------------------------------------------------------------------------- /.example.env: -------------------------------------------------------------------------------- 1 | COSMIC_BUCKET_SLUG=your_bucket_slug 2 | COSMIC_READ_KEY=your_bucket_read_key 3 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/cosmic-slideshow/main/app/favicon.ico -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | images: { 6 | remotePatterns: [ 7 | { 8 | hostname: "imgix.cosmicjs.com", 9 | }, 10 | ], 11 | }, 12 | }; 13 | 14 | export default nextConfig; 15 | -------------------------------------------------------------------------------- /public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | import typography from "@tailwindcss/typography"; 3 | 4 | export default { 5 | content: [ 6 | "./pages/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./components/**/*.{js,ts,jsx,tsx,mdx}", 8 | "./app/**/*.{js,ts,jsx,tsx,mdx}", 9 | ], 10 | darkMode: "class", 11 | theme: { 12 | extend: {}, 13 | }, 14 | plugins: [typography], 15 | }; 16 | -------------------------------------------------------------------------------- /app/opengraph-image.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import { ImageResponse } from "next/og"; 3 | import { getSettings } from "@/lib/cosmic"; 4 | 5 | export default async function Image() { 6 | const settings = await getSettings(); 7 | return new ImageResponse( 8 | ( 9 | {settings.metadata.title}

13 | ) 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { dirname } from "path"; 2 | import { fileURLToPath } from "url"; 3 | import { FlatCompat } from "@eslint/eslintrc"; 4 | 5 | const __filename = fileURLToPath(import.meta.url); 6 | const __dirname = dirname(__filename); 7 | 8 | const compat = new FlatCompat({ 9 | baseDirectory: __dirname, 10 | }); 11 | 12 | const eslintConfig = [ 13 | ...compat.extends("next/core-web-vitals", "next/typescript"), 14 | ]; 15 | 16 | export default eslintConfig; 17 | -------------------------------------------------------------------------------- /lib/cosmic.ts: -------------------------------------------------------------------------------- 1 | import { createBucketClient } from "@cosmicjs/sdk"; 2 | 3 | const cosmic = createBucketClient({ 4 | bucketSlug: process.env.COSMIC_BUCKET_SLUG as string, 5 | readKey: process.env.COSMIC_READ_KEY as string, 6 | }); 7 | 8 | export default cosmic; 9 | 10 | export const getSettings = async (): Promise<{ 11 | metadata: { 12 | title: string; 13 | description: string; 14 | og_image: { imgix_url: string }; 15 | }; 16 | }> => { 17 | const { object: settings } = await cosmic.objects 18 | .findOne({ 19 | type: "settings", 20 | slug: "settings", 21 | }) 22 | .props(`metadata`); 23 | return settings; 24 | }; 25 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import "./globals.css"; 2 | import { ThemeProvider } from "./context/ThemeContext"; 3 | import { getSettings } from "@/lib/cosmic"; 4 | 5 | export const generateMetadata = async () => { 6 | const settings = await getSettings(); 7 | return { 8 | title: settings.metadata.title, 9 | description: settings.metadata.description, 10 | }; 11 | }; 12 | 13 | export default function RootLayout({ 14 | children, 15 | }: { 16 | children: React.ReactNode; 17 | }) { 18 | return ( 19 | 20 | 21 | {children} 22 | 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env* 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cosmic-slideshow", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev --turbopack", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@cosmicjs/sdk": "^1.3.1", 13 | "framer-motion": "^11.14.1", 14 | "lucide-react": "^0.468.0", 15 | "next": "15.1.0", 16 | "react": "^19.0.0", 17 | "react-dom": "^19.0.0", 18 | "react-markdown": "^9.0.1", 19 | "react-swipeable": "^7.0.2" 20 | }, 21 | "devDependencies": { 22 | "@eslint/eslintrc": "^3", 23 | "@tailwindcss/typography": "^0.5.15", 24 | "@types/node": "^20", 25 | "@types/react": "^19", 26 | "@types/react-dom": "^19", 27 | "eslint": "^9", 28 | "eslint-config-next": "15.1.0", 29 | "postcss": "^8", 30 | "tailwindcss": "^3.4.1", 31 | "typescript": "^5" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /public/globe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/ThemeToggle.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useTheme } from "@/app/context/ThemeContext"; 4 | import { SunIcon, MoonIcon } from "lucide-react"; 5 | import { useState, useEffect } from "react"; 6 | 7 | export default function ThemeToggle() { 8 | const { theme, toggleTheme } = useTheme(); 9 | const [isMac, setIsMac] = useState(false); 10 | 11 | useEffect(() => { 12 | setIsMac(navigator.platform.toUpperCase().indexOf("MAC") >= 0); 13 | }, []); 14 | 15 | return ( 16 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Cosmic Slideshow Template 2 | 3 | ![Cosmic 2024 Year In Review](https://imgix.cosmicjs.com/b6528c00-b8b1-11ef-bee4-3bb1d3c55332-onboarding.png?w=1200) 4 | 5 | [View the demo](https://year-end-wrap-up-2024.vercel.app/) 6 | 7 | ## Getting started 8 | 1. Create a new project in the [Cosmic dashboard](https://app.cosmicjs.com/login). 9 | 2. In your project, go to the Settings > Import / Export area. 10 | 3. Download and install the [Bucket JSON file](https://github.com/cosmicjs/cosmic-slideshow/blob/main/bucket.json) to install the slideshow content model and demo content. See screenshot below: 11 | CleanShot 2024-12-18 at 12 16 41@2x

12 | 13 | 14 | ## Download and run locally 15 | Download this code: 16 | ```bash 17 | git clone https://github.com/cosmicjs/cosmic-slideshow 18 | cd cosmic-slideshow 19 | ``` 20 | Copy the `.example.env` file to `.env`: 21 | ```bash 22 | mv .example.env .env 23 | ``` 24 | 25 | Add your API keys found in the Cosmic dashboard located in Project > API keys. 26 | ```bash 27 | COSMIC_BUCKET_SLUG=your_bucket_slug 28 | COSMIC_READ_KEY=your_bucket_read_key 29 | ``` 30 | Install packages 31 | ```bash 32 | npm i 33 | # or 34 | pnpm i 35 | # or 36 | yarn i 37 | # or 38 | bun i 39 | ``` 40 | Run locally 41 | ```bash 42 | npm run dev 43 | # or 44 | pnpm run dev 45 | # or 46 | yarn dev 47 | # or 48 | bun dev 49 | ``` 50 | 51 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import Slideshow from "@/components/Slideshow"; 3 | import cosmic from "@/lib/cosmic"; 4 | import ThemeToggle from "@/components/ThemeToggle"; 5 | import { HomeIcon, GithubIcon } from "lucide-react"; 6 | 7 | export default async function Home({ 8 | searchParams, 9 | }: { 10 | searchParams: Promise<{ slide?: string }>; 11 | }) { 12 | const { slide } = await searchParams; 13 | 14 | const { objects } = await cosmic.objects 15 | .find({ 16 | type: "webinar-slides", 17 | }) 18 | .props(["slug", "title", "metadata"]) 19 | .depth(1) 20 | .sort("-order"); 21 | 22 | const initialSlide = slide 23 | ? Math.min(Math.max(parseInt(slide) - 1, 0), objects.length - 1) 24 | : 0; 25 | 26 | return ( 27 |

28 |

29 | 30 | 31 | 32 |

33 | 40 | 41 | 42 | 43 |

44 |

45 | 46 |

47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /app/context/ThemeContext.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { createContext, useContext, useEffect, useState } from "react"; 4 | 5 | type Theme = "light" | "dark"; 6 | 7 | type ThemeContextType = { 8 | theme: Theme; 9 | toggleTheme: () => void; 10 | }; 11 | 12 | const ThemeContext = createContext(undefined); 13 | 14 | export function ThemeProvider({ children }: { children: React.ReactNode }) { 15 | const [theme, setTheme] = useState("dark"); 16 | 17 | useEffect(() => { 18 | const savedTheme = localStorage.getItem("theme") as Theme; 19 | if (savedTheme) { 20 | setTheme(savedTheme); 21 | document.documentElement.classList.toggle("dark", savedTheme === "dark"); 22 | } 23 | 24 | const handleKeyDown = (e: KeyboardEvent) => { 25 | if (e.key === "/" && (e.metaKey || e.ctrlKey)) { 26 | e.preventDefault(); 27 | const newTheme = theme === "light" ? "dark" : "light"; 28 | setTheme(newTheme); 29 | localStorage.setItem("theme", newTheme); 30 | document.documentElement.classList.toggle("dark", newTheme === "dark"); 31 | } 32 | }; 33 | 34 | window.addEventListener("keydown", handleKeyDown); 35 | return () => window.removeEventListener("keydown", handleKeyDown); 36 | }, [theme]); 37 | 38 | const toggleTheme = () => { 39 | const newTheme = theme === "light" ? "dark" : "light"; 40 | setTheme(newTheme); 41 | localStorage.setItem("theme", newTheme); 42 | document.documentElement.classList.toggle("dark", newTheme === "dark"); 43 | }; 44 | 45 | return ( 46 | 47 | {children} 48 | 49 | ); 50 | } 51 | 52 | export function useTheme() { 53 | const context = useContext(ThemeContext); 54 | if (context === undefined) { 55 | throw new Error("useTheme must be used within a ThemeProvider"); 56 | } 57 | return context; 58 | } 59 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | html, 6 | body { 7 | margin: 0; 8 | padding: 0; 9 | overflow: hidden; 10 | font-size: 20px; 11 | } 12 | 13 | /* Custom prose styles */ 14 | .prose h1 { 15 | font-size: 2.5rem !important; 16 | line-height: 1.2 !important; 17 | margin-bottom: 1rem !important; 18 | font-weight: 700 !important; 19 | } 20 | 21 | @media (min-width: 640px) { 22 | .prose h1 { 23 | font-size: 4rem !important; 24 | } 25 | } 26 | 27 | .prose h2 { 28 | font-size: 1.5rem !important; 29 | line-height: 1.2 !important; 30 | margin-bottom: 1.25rem !important; 31 | margin-top: 1.25rem !important; 32 | font-weight: 700 !important; 33 | } 34 | 35 | @media (min-width: 640px) { 36 | .prose h2 { 37 | font-size: 2rem !important; 38 | margin-bottom: 1.5rem !important; 39 | margin-top: 1.5rem !important; 40 | } 41 | } 42 | 43 | .prose ul { 44 | list-style-type: disc !important; 45 | margin-left: .5rem !important; 46 | } 47 | 48 | .prose li { 49 | margin-bottom: 0.5rem !important; 50 | } 51 | 52 | .prose ol { 53 | list-style-type: decimal !important; 54 | margin-left: 2rem !important; 55 | } 56 | 57 | img { 58 | @apply rounded-lg; 59 | } 60 | 61 | .prose a { 62 | color: #2d6cdf !important; 63 | text-decoration: underline !important; 64 | text-underline-offset: 2px !important; 65 | } 66 | 67 | .prose a:hover { 68 | opacity: 0.8 !important; 69 | } 70 | 71 | .prose p { 72 | margin-top: 0.5rem !important; 73 | margin-bottom: 0.5rem !important; 74 | } 75 | 76 | /* Custom scrollbar styles */ 77 | .prose::-webkit-scrollbar { 78 | width: 8px; 79 | } 80 | 81 | .prose::-webkit-scrollbar-track { 82 | background: rgba(255, 255, 255, 0.1); 83 | border-radius: 4px; 84 | } 85 | 86 | .prose::-webkit-scrollbar-thumb { 87 | background: rgba(255, 255, 255, 0.3); 88 | border-radius: 4px; 89 | } 90 | 91 | .prose::-webkit-scrollbar-thumb:hover { 92 | background: rgba(255, 255, 255, 0.4); 93 | } -------------------------------------------------------------------------------- /components/Slideshow.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | "use client"; 3 | 4 | import { useState, useEffect, useCallback } from "react"; 5 | import { motion, AnimatePresence } from "framer-motion"; 6 | import ReactMarkdown from "react-markdown"; 7 | import { useRouter, useSearchParams } from "next/navigation"; 8 | import { useTheme } from "@/app/context/ThemeContext"; 9 | import { useSwipeable } from "react-swipeable"; 10 | import Image from "next/image"; 11 | type Slide = { 12 | title: string; 13 | metadata: { 14 | slide_image?: { imgix_url: string }; 15 | slide_title?: string; 16 | slide_content: string; 17 | }; 18 | }; 19 | 20 | const fadeVariants = { 21 | hidden: { 22 | opacity: 0, 23 | }, 24 | visible: { 25 | opacity: 1, 26 | }, 27 | }; 28 | 29 | export default function Slideshow({ 30 | slides, 31 | initialSlide = 0, 32 | }: { 33 | slides: Slide[]; 34 | initialSlide?: number; 35 | }) { 36 | const [currentIndex, setCurrentIndex] = useState(initialSlide); 37 | const router = useRouter(); 38 | const searchParams = useSearchParams(); 39 | const { theme } = useTheme(); 40 | 41 | useEffect(() => { 42 | setCurrentIndex(initialSlide); 43 | }, [initialSlide]); 44 | 45 | const updateURL = useCallback( 46 | (index: number) => { 47 | const params = new URLSearchParams(searchParams); 48 | params.set("slide", (index + 1).toString()); 49 | router.push(`?${params.toString()}`, { scroll: false }); 50 | }, 51 | [router, searchParams] 52 | ); 53 | 54 | useEffect(() => { 55 | const handleKeyPress = (e: KeyboardEvent) => { 56 | if (e.key === "ArrowRight") { 57 | const nextIndex = (currentIndex + 1) % slides.length; 58 | setCurrentIndex(nextIndex); 59 | updateURL(nextIndex); 60 | } else if (e.key === "ArrowLeft") { 61 | const nextIndex = (currentIndex - 1 + slides.length) % slides.length; 62 | setCurrentIndex(nextIndex); 63 | updateURL(nextIndex); 64 | } 65 | }; 66 | 67 | window.addEventListener("keydown", handleKeyPress); 68 | return () => window.removeEventListener("keydown", handleKeyPress); 69 | }, [currentIndex, slides.length, updateURL]); 70 | 71 | const handleNavigation = useCallback( 72 | (direction: "next" | "prev") => { 73 | const nextIndex = 74 | direction === "next" 75 | ? (currentIndex + 1) % slides.length 76 | : (currentIndex - 1 + slides.length) % slides.length; 77 | setCurrentIndex(nextIndex); 78 | updateURL(nextIndex); 79 | }, 80 | [currentIndex, slides.length, updateURL] 81 | ); 82 | 83 | const currentSlide = slides[currentIndex]; 84 | 85 | const swipeHandlers = useSwipeable({ 86 | onSwipedLeft: () => handleNavigation("next"), 87 | onSwipedRight: () => handleNavigation("prev"), 88 | preventScrollOnSwipe: true, 89 | trackMouse: false, 90 | }); 91 | 92 | return ( 93 |

94 |

95 | 96 | 105 |

106 | {currentSlide.metadata.slide_title && ( 107 |

108 | {currentSlide.metadata.slide_title} 109 |

110 | )} 111 | {currentSlide.metadata.slide_image && ( 112 |

113 |

120 |

121 | )} 122 |

127 | ( 130 | 131 | ), 132 | img: ({ src, alt, ...props }) => { 133 | if (src?.endsWith(".mp4")) { 134 | return ( 135 |

158 | 165 | 166 | {currentIndex + 1} / {slides.length} 167 | 168 | 175 |

176 |