├── .eslintrc.json
├── app
    ├── favicon.ico
    ├── robots.ts
    ├── page.tsx
    ├── sitemap.ts
    ├── layout.tsx
    ├── [...slug]
    │   └── page.tsx
    ├── api
    │   └── bookmark
    │   │   └── route.ts
    └── globals.css
├── public
    ├── image.webp
    ├── screenshot.jpg
    ├── logo.svg
    └── logo-dark.svg
├── postcss.config.js
├── lib
    ├── utils.ts
    ├── mdx.ts
    └── posts.ts
├── next.config.mjs
├── components
    ├── theme
    │   ├── theme-provider.tsx
    │   └── theme-toggle.tsx
    ├── site
    │   ├── footer.tsx
    │   ├── hero.tsx
    │   └── logo.tsx
    ├── ui
    │   ├── label.tsx
    │   ├── sonner.tsx
    │   ├── badge.tsx
    │   ├── button.tsx
    │   └── form.tsx
    ├── markdown
    │   ├── youtube.tsx
    │   ├── copy-article-button.tsx
    │   ├── share-button.tsx
    │   ├── meta.tsx
    │   ├── mdx-content.tsx
    │   ├── bookmark.tsx
    │   ├── code.tsx
    │   └── media.tsx
    ├── posts
    │   ├── list.tsx
    │   └── item.tsx
    └── ds.tsx
├── components.json
├── .gitignore
├── velite.config.ts
├── tsconfig.json
├── LICENSE
├── content
    ├── blog
    │   └── getting-started.mdx
    ├── docs
    │   └── installation.mdx
    └── example.mdx
├── package.json
└── README.md


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/brijr/mdx/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/public/image.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/brijr/mdx/HEAD/public/image.webp


--------------------------------------------------------------------------------
/public/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/brijr/mdx/HEAD/public/screenshot.jpg


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     "@tailwindcss/postcss": {},
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   experimental: {
4 |     turbopackUseSystemTlsCerts: true,
5 |   },
6 | };
7 | 
8 | export default nextConfig;
9 | 


--------------------------------------------------------------------------------
/app/robots.ts:
--------------------------------------------------------------------------------
 1 | import { MetadataRoute } from "next";
 2 | 
 3 | export default function robots(): MetadataRoute.Robots {
 4 |   const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://example.com";
 5 | 
 6 |   return {
 7 |     rules: {
 8 |       userAgent: "*",
 9 |       allow: "/",
10 |     },
11 |     sitemap: `${baseUrl}/sitemap.xml`,
12 |   };
13 | }
14 | 


--------------------------------------------------------------------------------
/components/theme/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import { ThemeProvider as NextThemesProvider } from "next-themes";
 5 | import { ThemeProviderProps } from "next-themes";
 6 | 
 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
 8 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import { List } from "@/components/posts/list";
 2 | import { Hero } from "@/components/site/hero";
 3 | import { Main } from "@/components/ds";
 4 | 
 5 | import { getAllPosts } from "@/lib/posts";
 6 | 
 7 | export default function HomePage() {
 8 |   const posts = getAllPosts();
 9 | 
10 |   return (
11 |     <Main>
12 |       <Hero />
13 |       <List posts={posts} />
14 |     </Main>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/lib/mdx.ts:
--------------------------------------------------------------------------------
 1 | export interface PageMeta {
 2 |   title: string;
 3 |   description?: string;
 4 |   date?: string;
 5 |   author?: string;
 6 |   tags?: string[];
 7 |   image?: string;
 8 | }
 9 | 
10 | export interface MDXPage {
11 |   metadata: PageMeta;
12 |   content: React.ReactNode;
13 | }
14 | 
15 | export function formatDate(date: string) {
16 |   return new Date(date).toLocaleDateString("en-US", {
17 |     year: "numeric",
18 |     month: "long",
19 |     day: "numeric",
20 |   });
21 | }
22 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "stone",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "iconLibrary": "lucide",
14 |   "aliases": {
15 |     "components": "@/components",
16 |     "utils": "@/lib/utils",
17 |     "ui": "@/components/ui",
18 |     "lib": "@/lib",
19 |     "hooks": "@/hooks"
20 |   },
21 |   "registries": {}
22 | }
23 | 


--------------------------------------------------------------------------------
/components/site/footer.tsx:
--------------------------------------------------------------------------------
 1 | import { Section, Container } from "@/components/ds";
 2 | 
 3 | export const Footer = () => {
 4 |   return (
 5 |     <footer>
 6 |       <Section>
 7 |         <Container className="text-muted-foreground flex justify-start gap-2 sm:gap-4 items-center">
 8 |           <p>&copy; {new Date().getFullYear()} brijr/mdx</p>
 9 |           <span className="text-muted-foreground/40">|</span>
10 |           <a href="https://bridgertower.com">Bridger Tower</a>
11 |         </Container>
12 |       </Section>
13 |     </footer>
14 |   );
15 | };
16 | 


--------------------------------------------------------------------------------
/.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.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | .velite
38 | 
39 | # ai
40 | CLAUDE.md
41 | .claude
42 | 


--------------------------------------------------------------------------------
/components/site/hero.tsx:
--------------------------------------------------------------------------------
 1 | import { Section, Container, Prose } from "@/components/ds";
 2 | import { Logo } from "@/components/site/logo";
 3 | 
 4 | export const Hero = () => {
 5 |   return (
 6 |     <Section className="bg-muted/50 border-b">
 7 |       <Container className="grid gap-6">
 8 |         <Logo width={24} />
 9 |         <Prose isSpaced>
10 |           <h1>Markdown Blog Starter Template</h1>
11 |           <p>
12 |             A modern MDX and Next.js starter made by{" "}
13 |             <a href="https://brijr.dev">brijr</a>. Built with Next.js, Velite,
14 |             and Tailwind CSS. View it on{" "}
15 |             <a href="https://github.com/brijr/mdx">GitHub</a>.
16 |           </p>
17 |         </Prose>
18 |       </Container>
19 |     </Section>
20 |   );
21 | };
22 | 


--------------------------------------------------------------------------------
/app/sitemap.ts:
--------------------------------------------------------------------------------
 1 | import { MetadataRoute } from "next";
 2 | import { getAllPosts } from "@/lib/posts";
 3 | 
 4 | export default function sitemap(): MetadataRoute.Sitemap {
 5 |   const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://example.com";
 6 | 
 7 |   // Homepage
 8 |   const routes: MetadataRoute.Sitemap = [
 9 |     {
10 |       url: baseUrl,
11 |       lastModified: new Date(),
12 |       changeFrequency: "daily",
13 |       priority: 1,
14 |     },
15 |   ];
16 | 
17 |   // Add all published posts
18 |   const posts = getAllPosts();
19 |   const postRoutes: MetadataRoute.Sitemap = posts.map((post) => ({
20 |     url: `${baseUrl}${post.permalink}`,
21 |     lastModified: new Date(post.date),
22 |     changeFrequency: "weekly" as const,
23 |     priority: 0.8,
24 |   }));
25 | 
26 |   return [...routes, ...postRoutes];
27 | }
28 | 


--------------------------------------------------------------------------------
/components/theme/theme-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import { Moon, Sun } from "lucide-react";
 5 | import { useTheme } from "next-themes";
 6 | 
 7 | import { Button } from "@/components/ui/button";
 8 | 
 9 | export function ThemeToggle() {
10 |   const { theme, setTheme } = useTheme();
11 | 
12 |   const toggleTheme = () => {
13 |     setTheme(theme === "dark" ? "light" : "dark");
14 |   };
15 | 
16 |   return (
17 |     <Button variant="outline" size="icon" onClick={toggleTheme}>
18 |       <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
19 |       <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
20 |       <span className="sr-only">Toggle theme</span>
21 |     </Button>
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/components/site/logo.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import Link from "next/link";
 3 | 
 4 | import LogoLight from "@/public/logo.svg";
 5 | import LogoDark from "@/public/logo-dark.svg";
 6 | 
 7 | export const Logo = ({
 8 |   href = "/",
 9 |   width = 72,
10 |   height,
11 |   className,
12 | }: {
13 |   href?: string;
14 |   width?: number;
15 |   height?: number;
16 |   className?: string;
17 | }) => {
18 |   return (
19 |     <Link href={href} className={className}>
20 |       <Image
21 |         width={width}
22 |         height={height}
23 |         src={LogoLight}
24 |         alt="Italy Vita Logo"
25 |         className="block dark:hidden invert"
26 |       />
27 |       <Image
28 |         width={width}
29 |         height={height}
30 |         src={LogoDark}
31 |         alt="Italy Vita Logo"
32 |         className="hidden dark:block"
33 |       />
34 |     </Link>
35 |   );
36 | };
37 | 


--------------------------------------------------------------------------------
/components/markdown/youtube.tsx:
--------------------------------------------------------------------------------
 1 | import { YouTubeEmbed } from "@next/third-parties/google";
 2 | import { cn } from "@/lib/utils";
 3 | 
 4 | interface YouTubeProps {
 5 |   videoid: string;
 6 |   width?: number | string;
 7 |   height?: number;
 8 |   params?: string;
 9 |   playlabel?: string;
10 |   className?: string;
11 | }
12 | 
13 | export function YouTube({
14 |   videoid,
15 |   width = "100%",
16 |   height,
17 |   params,
18 |   playlabel,
19 |   className,
20 | }: YouTubeProps) {
21 |   return (
22 |     <div
23 |       className={cn(
24 |         "my-6 overflow-hidden rounded-lg [&_iframe]:rounded-lg border aspect-video",
25 |         className
26 |       )}
27 |     >
28 |       <YouTubeEmbed
29 |         videoid={videoid}
30 |         width={typeof width === "string" ? undefined : width}
31 |         height={height}
32 |         params={params}
33 |         playlabel={playlabel}
34 |       />
35 |     </div>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/velite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig, defineCollection, s } from "velite";
 2 | 
 3 | const posts = defineCollection({
 4 |   name: "Post",
 5 |   pattern: "**/*.mdx",
 6 |   schema: s
 7 |     .object({
 8 |       slug: s.path(),
 9 |       title: s.string().max(99),
10 |       description: s.string().max(999).optional(),
11 |       date: s.isodate(),
12 |       author: s.string().optional(),
13 |       tags: s.array(s.string()).optional(),
14 |       published: s.boolean().default(true),
15 |       body: s.mdx(),
16 |     })
17 |     .transform((data) => ({
18 |       ...data,
19 |       permalink: `/${data.slug}`,
20 |     })),
21 | });
22 | 
23 | export default defineConfig({
24 |   root: "content",
25 |   output: {
26 |     data: ".velite",
27 |     assets: "public/static",
28 |     base: "/static/",
29 |     name: "[name]-[hash:6].[ext]",
30 |     clean: true,
31 |   },
32 |   collections: { posts },
33 |   mdx: {
34 |     rehypePlugins: [],
35 |     remarkPlugins: [],
36 |   },
37 | });
38 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": [
 4 |       "dom",
 5 |       "dom.iterable",
 6 |       "esnext"
 7 |     ],
 8 |     "allowJs": true,
 9 |     "skipLibCheck": true,
10 |     "strict": true,
11 |     "noEmit": true,
12 |     "esModuleInterop": true,
13 |     "module": "esnext",
14 |     "moduleResolution": "bundler",
15 |     "resolveJsonModule": true,
16 |     "isolatedModules": true,
17 |     "jsx": "react-jsx",
18 |     "incremental": true,
19 |     "plugins": [
20 |       {
21 |         "name": "next"
22 |       }
23 |     ],
24 |     "paths": {
25 |       "@/*": [
26 |         "./*"
27 |       ],
28 |       ".velite": [
29 |         "./.velite"
30 |       ],
31 |       "#site/content": [
32 |         "./.velite/index.d.ts"
33 |       ]
34 |     },
35 |     "target": "ES2017"
36 |   },
37 |   "include": [
38 |     "next-env.d.ts",
39 |     "**/*.ts",
40 |     "**/*.tsx",
41 |     ".next/types/**/*.ts",
42 |     "app/(markdown)/page.mdx",
43 |     ".next/dev/types/**/*.ts",
44 |     ".velite"
45 |   ],
46 |   "exclude": [
47 |     "node_modules"
48 |   ]
49 | }
50 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Bridger Tower
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import {
 4 |   CircleCheckIcon,
 5 |   InfoIcon,
 6 |   Loader2Icon,
 7 |   OctagonXIcon,
 8 |   TriangleAlertIcon,
 9 | } from "lucide-react"
10 | import { useTheme } from "next-themes"
11 | import { Toaster as Sonner, type ToasterProps } from "sonner"
12 | 
13 | const Toaster = ({ ...props }: ToasterProps) => {
14 |   const { theme = "system" } = useTheme()
15 | 
16 |   return (
17 |     <Sonner
18 |       theme={theme as ToasterProps["theme"]}
19 |       className="toaster group"
20 |       icons={{
21 |         success: <CircleCheckIcon className="size-4" />,
22 |         info: <InfoIcon className="size-4" />,
23 |         warning: <TriangleAlertIcon className="size-4" />,
24 |         error: <OctagonXIcon className="size-4" />,
25 |         loading: <Loader2Icon className="size-4 animate-spin" />,
26 |       }}
27 |       style={
28 |         {
29 |           "--normal-bg": "var(--popover)",
30 |           "--normal-text": "var(--popover-foreground)",
31 |           "--normal-border": "var(--border)",
32 |           "--border-radius": "var(--radius)",
33 |         } as React.CSSProperties
34 |       }
35 |       {...props}
36 |     />
37 |   )
38 | }
39 | 
40 | export { Toaster }
41 | 


--------------------------------------------------------------------------------
/components/posts/list.tsx:
--------------------------------------------------------------------------------
 1 | import { Section, Container } from "@/components/ds";
 2 | import { Item } from "@/components/posts/item";
 3 | 
 4 | import type { Post } from "#site/content";
 5 | 
 6 | export const List = ({ posts }: { posts: Post[] }) => {
 7 |   return (
 8 |     <Section>
 9 |       <Container className="space-y-6">
10 |         <h2 className="text-2xl font-semibold tracking-tight">Recent Posts</h2>
11 |         {posts.length > 0 ? (
12 |           <ul className="border divide-y rounded-lg">
13 |             {posts.map((post) => (
14 |               <Item
15 |                 key={post.slug}
16 |                 slug={post.slug}
17 |                 title={post.title}
18 |                 date={post.date}
19 |                 excerpt={post.description}
20 |                 tags={post.tags}
21 |               />
22 |             ))}
23 |           </ul>
24 |         ) : (
25 |           <NoPosts />
26 |         )}
27 |       </Container>
28 |     </Section>
29 |   );
30 | };
31 | 
32 | const NoPosts = () => {
33 |   return (
34 |     <p className="text-muted-foreground">
35 |       No posts yet. Create your first post in the{" "}
36 |       <code className="rounded bg-muted px-2 py-1 font-mono text-sm">
37 |         content/
38 |       </code>
39 |       directory.
40 |     </p>
41 |   );
42 | };
43 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { ThemeProvider } from "@/components/theme/theme-provider";
 2 | import { Layout, Main } from "@/components/ds";
 3 | import { ThemeToggle } from "@/components/theme/theme-toggle";
 4 | import { Toaster } from "@/components/ui/sonner";
 5 | import { Footer } from "@/components/site/footer";
 6 | 
 7 | import type { Metadata } from "next";
 8 | 
 9 | import "./globals.css";
10 | 
11 | import { cn } from "@/lib/utils";
12 | 
13 | export const metadata: Metadata = {
14 |   title: {
15 |     default: "MDX Starter Template for Building Websites",
16 |     template: "%s | MDX Starter",
17 |   },
18 |   description:
19 |     "MDX and Next.js Starter made by Bridger Tower at 9d8 and WIP / AC",
20 | };
21 | 
22 | export default function RootLayout({
23 |   children,
24 | }: {
25 |   children: React.ReactNode;
26 | }) {
27 |   return (
28 |     <Layout>
29 |       <body
30 |         className={cn(
31 |           "min-h-screen bg-background font-sans antialiased w-screen flex flex-col",
32 |         )}
33 |       >
34 |         <ThemeProvider
35 |           attribute="class"
36 |           defaultTheme="system"
37 |           enableSystem
38 |           disableTransitionOnChange
39 |         >
40 |           <Main className="flex-1">{children}</Main>
41 |           <Footer />
42 |           <div className="fixed bottom-6 right-6">
43 |             <ThemeToggle />
44 |           </div>
45 |           <Toaster position="top-center" />
46 |         </ThemeProvider>
47 |       </body>
48 |     </Layout>
49 |   );
50 | }
51 | 


--------------------------------------------------------------------------------
/content/blog/getting-started.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Getting Started with MDX"
 3 | description: "Learn how to create dynamic content with MDX and Next.js"
 4 | date: "2025-01-08"
 5 | author: "Bridger"
 6 | tags: ["tutorial", "mdx", "next.js"]
 7 | published: true
 8 | ---
 9 | 
10 | ## Introduction
11 | 
12 | MDX is a powerful tool that lets you use JSX in your markdown content. This means you can import and use React components directly in your markdown files!
13 | 
14 | ## Why MDX?
15 | 
16 | 1. **Component Integration** - Use React components anywhere in your content
17 | 2. **Type Safety** - Full TypeScript support
18 | 3. **Flexibility** - Mix markdown with custom components
19 | 4. **Performance** - Static generation with Next.js
20 | 
21 | ## Basic Syntax
22 | 
23 | Here's a simple example:
24 | 
25 | ```mdx
26 | import { MyComponent } from "./components";
27 | 
28 | # Hello World
29 | 
30 | This is regular markdown content.
31 | 
32 | <MyComponent />
33 | 
34 | And we're back to markdown!
35 | ```
36 | 
37 | ## Code Highlighting
38 | 
39 | The template includes beautiful code highlighting with copy-to-clipboard functionality:
40 | 
41 | ```javascript
42 | const greeting = "Hello, MDX!";
43 | console.log(greeting);
44 | ```
45 | 
46 | ```python
47 | def greet(name):
48 |     return f"Hello, {name}!"
49 | ```
50 | 
51 | ## Next Steps
52 | 
53 | - Explore the `content/` directory to see more examples
54 | - Add your own MDX files in any folder structure
55 | - Customize the components in `components/posts/`
56 | 
57 | Happy writing!
58 | 


--------------------------------------------------------------------------------
/components/markdown/copy-article-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useState } from "react";
 4 | import { Copy, Check } from "lucide-react";
 5 | import { Button } from "@/components/ui/button";
 6 | import { toast } from "sonner";
 7 | 
 8 | export function CopyArticleButton() {
 9 |   const [hasCopied, setHasCopied] = useState(false);
10 | 
11 |   const copyArticleText = async () => {
12 |     try {
13 |       // Find the article element
14 |       const article = document.querySelector("article");
15 |       if (!article) {
16 |         toast.error("Article not found");
17 |         return;
18 |       }
19 | 
20 |       // Extract text content from the article
21 |       const text = article.innerText || article.textContent || "";
22 | 
23 |       if (!text.trim()) {
24 |         toast.error("No content to copy");
25 |         return;
26 |       }
27 | 
28 |       await navigator.clipboard.writeText(text);
29 |       setHasCopied(true);
30 |       toast.success("Article copied to clipboard");
31 |       setTimeout(() => setHasCopied(false), 2000);
32 |     } catch (error) {
33 |       console.error("Failed to copy text: ", error);
34 |       toast.error("Failed to copy article");
35 |     }
36 |   };
37 | 
38 |   return (
39 |     <Button
40 |       variant="outline"
41 |       size="icon"
42 |       onClick={copyArticleText}
43 |       aria-label="Copy article text"
44 |     >
45 |       {hasCopied ? (
46 |         <Check className="h-4 w-4" />
47 |       ) : (
48 |         <Copy className="h-4 w-4" />
49 |       )}
50 |     </Button>
51 |   );
52 | }
53 | 


--------------------------------------------------------------------------------
/lib/posts.ts:
--------------------------------------------------------------------------------
 1 | import { posts } from ".velite";
 2 | 
 3 | /**
 4 |  * Get all published posts sorted by date (newest first)
 5 |  */
 6 | export function getAllPosts() {
 7 |   return posts
 8 |     .filter((post) => post.published)
 9 |     .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
10 | }
11 | 
12 | /**
13 |  * Get a single post by its slug path
14 |  * @param slug - The slug path (e.g., "example" or "blog/getting-started")
15 |  */
16 | export function getPostBySlug(slug: string) {
17 |   return posts.find((post) => post.slug === slug);
18 | }
19 | 
20 | /**
21 |  * Get all posts from a specific directory/prefix
22 |  * @param prefix - The directory prefix (e.g., "blog", "docs")
23 |  */
24 | export function getPostsByPrefix(prefix: string) {
25 |   return posts
26 |     .filter((post) => post.published && post.slug.startsWith(prefix))
27 |     .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
28 | }
29 | 
30 | /**
31 |  * Get all unique tags from published posts
32 |  */
33 | export function getAllTags() {
34 |   const tags = new Set<string>();
35 |   posts.forEach((post) => {
36 |     if (post.published && post.tags) {
37 |       post.tags.forEach((tag) => tags.add(tag));
38 |     }
39 |   });
40 |   return Array.from(tags).sort();
41 | }
42 | 
43 | /**
44 |  * Get posts by tag
45 |  */
46 | export function getPostsByTag(tag: string) {
47 |   return posts
48 |     .filter((post) => post.published && post.tags?.includes(tag))
49 |     .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
50 | }
51 | 


--------------------------------------------------------------------------------
/components/markdown/share-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Share2 } from "lucide-react";
 4 | import { Button } from "@/components/ui/button";
 5 | import { toast } from "sonner";
 6 | 
 7 | interface ShareButtonProps {
 8 |   title: string;
 9 |   slug?: string;
10 | }
11 | 
12 | export function ShareButton({ title, slug }: ShareButtonProps) {
13 |   const handleShare = async () => {
14 |     // Construct the full URL
15 |     const url = slug
16 |       ? `${window.location.origin}/${slug}`
17 |       : window.location.href;
18 | 
19 |     // Check if Web Share API is supported
20 |     if (navigator.share) {
21 |       try {
22 |         await navigator.share({
23 |           title,
24 |           url,
25 |         });
26 |       } catch (error) {
27 |         // User cancelled or error occurred
28 |         if ((error as Error).name !== "AbortError") {
29 |           console.error("Error sharing:", error);
30 |           toast.error("Failed to share");
31 |         }
32 |       }
33 |     } else {
34 |       // Fallback: copy URL to clipboard
35 |       try {
36 |         await navigator.clipboard.writeText(url);
37 |         toast.success("Link copied to clipboard");
38 |       } catch (error) {
39 |         console.error("Failed to copy URL:", error);
40 |         toast.error("Failed to copy link");
41 |       }
42 |     }
43 |   };
44 | 
45 |   return (
46 |     <Button
47 |       variant="outline"
48 |       size="icon"
49 |       onClick={handleShare}
50 |       aria-label="Share article"
51 |     >
52 |       <Share2 className="h-4 w-4" />
53 |     </Button>
54 |   );
55 | }
56 | 


--------------------------------------------------------------------------------
/components/markdown/meta.tsx:
--------------------------------------------------------------------------------
 1 | import { Prose, Section, Container } from "@/components/ds";
 2 | import { PageMeta, formatDate } from "@/lib/mdx";
 3 | import { Button } from "@/components/ui/button";
 4 | import { Badge } from "@/components/ui/badge";
 5 | import { CopyArticleButton } from "./copy-article-button";
 6 | import { ShareButton } from "./share-button";
 7 | 
 8 | import Link from "next/link";
 9 | import { Home } from "lucide-react";
10 | 
11 | interface MetaProps extends PageMeta {
12 |   className?: string;
13 |   slug?: string;
14 | }
15 | 
16 | export function Meta({ title, description, date, author, tags, slug }: MetaProps) {
17 |   const hasMeta = date || author || (tags && tags.length > 0);
18 | 
19 |   return (
20 |     <Section className="border-b bg-muted/50">
21 |       <Container className="space-y-6">
22 |         <Prose isSpaced>
23 |           <h1>{title}</h1>
24 |           {description && <p>{description}</p>}
25 |           {hasMeta && (
26 |             <div className="flex flex-wrap items-center gap-6">
27 |               {date && <time dateTime={date}>{formatDate(date)}</time>}
28 |               {author && <span>{author}</span>}
29 |               <div className="flex gap-1">
30 |                 {tags?.map((tag) => (
31 |                   <Badge key={tag}>{tag}</Badge>
32 |                 ))}
33 |               </div>
34 |             </div>
35 |           )}
36 |         </Prose>
37 |         <div className="flex gap-2">
38 |           <Button asChild variant="outline" size="icon">
39 |             <Link href="/">
40 |               <Home />
41 |             </Link>
42 |           </Button>
43 |           <CopyArticleButton />
44 |           <ShareButton title={title} slug={slug} />
45 |         </div>
46 |       </Container>
47 |     </Section>
48 |   );
49 | }
50 | 


--------------------------------------------------------------------------------
/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const badgeVariants = cva(
 8 |   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
14 |         secondary:
15 |           "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
16 |         destructive:
17 |           "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
18 |         outline:
19 |           "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
20 |       },
21 |     },
22 |     defaultVariants: {
23 |       variant: "default",
24 |     },
25 |   }
26 | )
27 | 
28 | function Badge({
29 |   className,
30 |   variant,
31 |   asChild = false,
32 |   ...props
33 | }: React.ComponentProps<"span"> &
34 |   VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
35 |   const Comp = asChild ? Slot : "span"
36 | 
37 |   return (
38 |     <Comp
39 |       data-slot="badge"
40 |       className={cn(badgeVariants({ variant }), className)}
41 |       {...props}
42 |     />
43 |   )
44 | }
45 | 
46 | export { Badge, badgeVariants }
47 | 


--------------------------------------------------------------------------------
/app/[...slug]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Main, Section, Container, Prose } from "@/components/ds";
 2 | import { MDXContent } from "@/components/markdown/mdx-content";
 3 | import { Meta } from "@/components/markdown/meta";
 4 | 
 5 | import { getAllPosts, getPostBySlug } from "@/lib/posts";
 6 | import { notFound } from "next/navigation";
 7 | 
 8 | import type { Metadata } from "next";
 9 | import type { Post } from ".velite";
10 | 
11 | interface PageProps {
12 |   params: Promise<{
13 |     slug: string[];
14 |   }>;
15 | }
16 | 
17 | export async function generateStaticParams() {
18 |   const posts = getAllPosts();
19 |   return posts.map((post: Post) => ({
20 |     slug: post.slug.split("/"),
21 |   }));
22 | }
23 | 
24 | export async function generateMetadata(props: PageProps): Promise<Metadata> {
25 |   const params = await props.params;
26 |   const slug = params.slug.join("/");
27 |   const post = getPostBySlug(slug);
28 | 
29 |   if (!post) {
30 |     return {
31 |       title: "Not Found",
32 |     };
33 |   }
34 | 
35 |   return {
36 |     title: post.title,
37 |     description: post.description,
38 |   };
39 | }
40 | 
41 | export default async function Page(props: PageProps) {
42 |   const params = await props.params;
43 |   const slug = params.slug.join("/");
44 |   const post = getPostBySlug(slug);
45 | 
46 |   if (!post || !post.published) {
47 |     notFound();
48 |   }
49 | 
50 |   return (
51 |     <Main>
52 |       <Meta
53 |         title={post.title}
54 |         description={post.description}
55 |         date={post.date}
56 |         author={post.author}
57 |         tags={post.tags}
58 |         slug={post.slug}
59 |       />
60 |       <Section>
61 |         <Container>
62 |           <Prose isArticle isSpaced>
63 |             <MDXContent code={post.body} />
64 |           </Prose>
65 |         </Container>
66 |       </Section>
67 |     </Main>
68 |   );
69 | }
70 | 


--------------------------------------------------------------------------------
/components/posts/item.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import { formatDate } from "@/lib/mdx";
 3 | import { cn } from "@/lib/utils";
 4 | import { Badge } from "../ui/badge";
 5 | 
 6 | interface PostItemProps {
 7 |   slug: string;
 8 |   title: string;
 9 |   date: string;
10 |   excerpt?: string;
11 |   className?: string;
12 |   tags?: string[];
13 | }
14 | 
15 | const PostDate = ({ date }: { date: string }) => {
16 |   return (
17 |     <time dateTime={date} className="text-xs text-muted-foreground">
18 |       {formatDate(date)}
19 |     </time>
20 |   );
21 | };
22 | 
23 | const PostTags = ({ tags }: { tags: string[] }) => {
24 |   if (!tags.length) return null;
25 | 
26 |   return (
27 |     <div className="flex gap-1 flex-wrap">
28 |       {tags.map((tag) => (
29 |         <Badge variant="outline" key={tag}>
30 |           {tag}
31 |         </Badge>
32 |       ))}
33 |     </div>
34 |   );
35 | };
36 | 
37 | export const Item = ({
38 |   slug,
39 |   title,
40 |   date,
41 |   excerpt,
42 |   className,
43 |   tags,
44 | }: PostItemProps) => {
45 |   return (
46 |     <Link
47 |       href={`/${slug}`}
48 |       className={cn(
49 |         "group grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 items-start",
50 |         "transition-colors hover:bg-muted/50 hover:text-primary px-3 py-2",
51 |         className
52 |       )}
53 |     >
54 |       <div className="group-hover:pl-1 group-hover:-mr-1 transition-all">
55 |         <h3 className="font-medium">{title}</h3>
56 |         {excerpt && (
57 |           <p className="text-sm text-muted-foreground line-clamp-1 mt-1">
58 |             {excerpt}
59 |           </p>
60 |         )}
61 |       </div>
62 | 
63 |       <div className="flex flex-col gap-2 items-start md:items-end text-left md:text-right">
64 |         <PostDate date={date} />
65 |         {tags && <PostTags tags={tags} />}
66 |       </div>
67 |     </Link>
68 |   );
69 | };
70 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/content/docs/installation.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Installation Guide"
 3 | description: "How to install and set up the MDX starter template"
 4 | date: "2025-01-07"
 5 | author: "Bridger"
 6 | tags: ["docs", "setup"]
 7 | published: true
 8 | ---
 9 | 
10 | ## Quick Start
11 | 
12 | Get up and running with the MDX starter template in minutes.
13 | 
14 | ### Prerequisites
15 | 
16 | - Node.js 18+ installed
17 | - pnpm package manager (recommended)
18 | 
19 | ### Installation Steps
20 | 
21 | 1. **Clone the repository**
22 | 
23 | ```bash
24 | git clone https://github.com/brijr/mdx.git
25 | cd mdx
26 | ```
27 | 
28 | 2. **Install dependencies**
29 | 
30 | ```bash
31 | pnpm install
32 | ```
33 | 
34 | 3. **Start the development server**
35 | 
36 | ```bash
37 | pnpm dev
38 | ```
39 | 
40 | 4. **Open your browser**
41 | 
42 | Navigate to `http://localhost:3000` to see your site.
43 | 
44 | ## Project Structure
45 | 
46 | ```
47 | mdx/
48 | ├── app/                 # Next.js App Router
49 | │   ├── [...slug]/      # Dynamic catch-all routes
50 | │   └── page.tsx        # Homepage
51 | ├── components/         # React components
52 | │   ├── mdx/           # MDX-specific components
53 | │   └── theme/         # Theme components
54 | ├── content/           # Your MDX content
55 | │   ├── blog/          # Blog posts
56 | │   └── docs/          # Documentation
57 | └── lib/               # Utility functions
58 | ```
59 | 
60 | ## Adding Content
61 | 
62 | Create new `.mdx` files anywhere in the `content/` directory:
63 | 
64 | ```mdx
65 | ---
66 | title: "My New Post"
67 | description: "This is my first post"
68 | date: "2025-01-09"
69 | published: true
70 | ---
71 | 
72 | # Hello World
73 | 
74 | This is my content!
75 | ```
76 | 
77 | The file structure determines the URL:
78 | - `content/example.mdx` → `/example`
79 | - `content/blog/post.mdx` → `/blog/post`
80 | - `content/docs/guide.mdx` → `/docs/guide`
81 | 
82 | ## Configuration
83 | 
84 | Edit `velite.config.ts` to customize content processing and schema validation.
85 | 
86 | ## Deployment
87 | 
88 | Deploy to Vercel with one click:
89 | 
90 | ```bash
91 | # Build for production
92 | pnpm build
93 | 
94 | # Start production server
95 | pnpm start
96 | ```
97 | 
98 | Your site is now ready for deployment!
99 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mdx-starter",
 3 |   "version": "0.1.0",
 4 |   "description": "A modern MDX starter template with Next.js, Velite, and Tailwind CSS",
 5 |   "author": "Bridger Tower",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/brijr/mdx.git"
 9 |   },
10 |   "keywords": [
11 |     "mdx",
12 |     "nextjs",
13 |     "velite",
14 |     "tailwindcss",
15 |     "typescript",
16 |     "blog",
17 |     "starter",
18 |     "template"
19 |   ],
20 |   "imports": {
21 |     "#site/content": "./.velite/index.js"
22 |   },
23 |   "scripts": {
24 |     "dev": "concurrently \"velite --watch\" \"next dev --turbopack\"",
25 |     "build": "velite && next build",
26 |     "start": "next start",
27 |     "lint": "next lint"
28 |   },
29 |   "dependencies": {
30 |     "@hookform/resolvers": "^5.2.2",
31 |     "@mdx-js/loader": "^3.1.1",
32 |     "@mdx-js/react": "^3.1.1",
33 |     "@next/mdx": "16.0.0",
34 |     "@next/third-parties": "^16.0.1",
35 |     "@radix-ui/react-dialog": "^1.1.15",
36 |     "@radix-ui/react-label": "^2.1.8",
37 |     "@radix-ui/react-slot": "^1.2.4",
38 |     "class-variance-authority": "^0.7.1",
39 |     "clsx": "^2.1.1",
40 |     "lucide-react": "^0.546.0",
41 |     "next": "16.0.7",
42 |     "next-themes": "^0.4.6",
43 |     "prism-react-renderer": "^2.4.1",
44 |     "react": "19.2.0",
45 |     "react-dom": "19.2.0",
46 |     "react-hook-form": "^7.66.0",
47 |     "rehype-autolink-headings": "^7.1.0",
48 |     "rehype-pretty-code": "^0.14.1",
49 |     "rehype-slug": "^6.0.0",
50 |     "shiki": "^3.15.0",
51 |     "sonner": "^2.0.7",
52 |     "tailwind-merge": "^3.4.0",
53 |     "tailwindcss-animate": "^1.0.7",
54 |     "velite": "^0.3.0",
55 |     "zod": "^4.1.12"
56 |   },
57 |   "devDependencies": {
58 |     "@tailwindcss/postcss": "^4.1.17",
59 |     "@tailwindcss/typography": "^0.5.19",
60 |     "@types/hast": "^3.0.4",
61 |     "@types/mdx": "^2.0.13",
62 |     "@types/node": "^22.19.0",
63 |     "@types/react": "19.0.14",
64 |     "@types/react-dom": "19.0.4",
65 |     "concurrently": "^9.2.1",
66 |     "eslint": "^9.39.1",
67 |     "eslint-config-next": "16.0.1",
68 |     "postcss": "^8.5.6",
69 |     "tailwindcss": "^4.1.17",
70 |     "tw-animate-css": "^1.4.0",
71 |     "typescript": "^5.9.3"
72 |   },
73 |   "overrides": {
74 |     "@types/react": "19.0.14",
75 |     "@types/react-dom": "19.0.4"
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/app/api/bookmark/route.ts:
--------------------------------------------------------------------------------
  1 | import { NextRequest, NextResponse } from "next/server";
  2 | 
  3 | interface Metadata {
  4 |   title?: string;
  5 |   description?: string;
  6 |   image?: string;
  7 |   url: string;
  8 |   domain?: string;
  9 | }
 10 | 
 11 | function extractDomain(url: string): string {
 12 |   try {
 13 |     const hostname = new URL(url).hostname;
 14 |     return hostname.replace("www.", "");
 15 |   } catch {
 16 |     return url;
 17 |   }
 18 | }
 19 | 
 20 | function extractMetadata(html: string, url: string): Metadata {
 21 |   const metadata: Metadata = {
 22 |     url,
 23 |     domain: extractDomain(url),
 24 |   };
 25 | 
 26 |   // Extract title
 27 |   const titleMatch =
 28 |     html.match(/<meta\s+property="og:title"\s+content="([^"]+)"/i) ||
 29 |     html.match(/<meta\s+name="twitter:title"\s+content="([^"]+)"/i) ||
 30 |     html.match(/<title>([^<]+)<\/title>/i);
 31 |   if (titleMatch) {
 32 |     metadata.title = titleMatch[1].trim();
 33 |   }
 34 | 
 35 |   // Extract description
 36 |   const descMatch =
 37 |     html.match(/<meta\s+property="og:description"\s+content="([^"]+)"/i) ||
 38 |     html.match(/<meta\s+name="twitter:description"\s+content="([^"]+)"/i) ||
 39 |     html.match(/<meta\s+name="description"\s+content="([^"]+)"/i);
 40 |   if (descMatch) {
 41 |     metadata.description = descMatch[1].trim();
 42 |   }
 43 | 
 44 |   // Extract image
 45 |   const imageMatch =
 46 |     html.match(/<meta\s+property="og:image"\s+content="([^"]+)"/i) ||
 47 |     html.match(/<meta\s+name="twitter:image"\s+content="([^"]+)"/i);
 48 |   if (imageMatch) {
 49 |     let imageUrl = imageMatch[1].trim();
 50 |     // Convert relative URLs to absolute
 51 |     if (imageUrl.startsWith("//")) {
 52 |       imageUrl = `https:${imageUrl}`;
 53 |     } else if (imageUrl.startsWith("/")) {
 54 |       const baseUrl = new URL(url).origin;
 55 |       imageUrl = `${baseUrl}${imageUrl}`;
 56 |     }
 57 |     metadata.image = imageUrl;
 58 |   }
 59 | 
 60 |   return metadata;
 61 | }
 62 | 
 63 | export async function GET(request: NextRequest) {
 64 |   const searchParams = request.nextUrl.searchParams;
 65 |   const url = searchParams.get("url");
 66 | 
 67 |   if (!url) {
 68 |     return NextResponse.json({ error: "URL is required" }, { status: 400 });
 69 |   }
 70 | 
 71 |   try {
 72 |     // Validate URL
 73 |     new URL(url);
 74 | 
 75 |     const response = await fetch(url, {
 76 |       headers: {
 77 |         "User-Agent":
 78 |           "Mozilla/5.0 (compatible; BookmarkBot/1.0; +https://example.com/bot)",
 79 |       },
 80 |       next: { revalidate: 3600 }, // Cache for 1 hour
 81 |     });
 82 | 
 83 |     if (!response.ok) {
 84 |       throw new Error(`Failed to fetch: ${response.status}`);
 85 |     }
 86 | 
 87 |     const html = await response.text();
 88 |     const metadata = extractMetadata(html, url);
 89 | 
 90 |     return NextResponse.json(metadata);
 91 |   } catch (error) {
 92 |     console.error("Error fetching bookmark metadata:", error);
 93 |     return NextResponse.json(
 94 |       {
 95 |         url,
 96 |         domain: extractDomain(url),
 97 |         error: "Failed to fetch metadata",
 98 |       },
 99 |       { status: 500 }
100 |     );
101 |   }
102 | }
103 | 


--------------------------------------------------------------------------------
/components/markdown/mdx-content.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as runtime from "react/jsx-runtime";
  4 | 
  5 | import { Bookmark } from "@/components/markdown/bookmark";
  6 | import { YouTube } from "@/components/markdown/youtube";
  7 | import { Media } from "@/components/markdown/media";
  8 | import { Code } from "./code";
  9 | 
 10 | import React from "react";
 11 | import type { StaticImageData } from "next/image";
 12 | 
 13 | const sharedComponents = {
 14 |   pre: ({ children }: { children: React.ReactNode }) =>
 15 |     children as React.ReactElement,
 16 |   code: ({
 17 |     children,
 18 |     className,
 19 |   }: {
 20 |     children: React.ReactNode;
 21 |     className?: string;
 22 |   }) => {
 23 |     const isInlineCode = !className;
 24 |     if (isInlineCode) {
 25 |       return (
 26 |         <code className="rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
 27 |           {children}
 28 |         </code>
 29 |       );
 30 |     }
 31 | 
 32 |     const language = className?.replace("language-", "");
 33 |     return <Code language={language}>{children as string}</Code>;
 34 |   },
 35 |   p: ({ children }: { children: React.ReactNode }) => {
 36 |     if (
 37 |       React.Children.toArray(children).some(
 38 |         (child) =>
 39 |           React.isValidElement(child) &&
 40 |           /^(pre|div|table)$/.test(
 41 |             (child.type as any)?.name || child.type || ""
 42 |           )
 43 |       )
 44 |     ) {
 45 |       return <>{children}</>;
 46 |     }
 47 |     return <p className="leading-7 not-first:mt-6">{children}</p>;
 48 |   },
 49 |   blockquote: ({ children }: { children: React.ReactNode }) => (
 50 |     <blockquote className="mt-6 border-l-2 pl-6 italic">{children}</blockquote>
 51 |   ),
 52 |   img: ({
 53 |     src,
 54 |     alt,
 55 |     className,
 56 |   }: {
 57 |     src?: string;
 58 |     alt?: string;
 59 |     width?: number | string;
 60 |     height?: number | string;
 61 |     className?: string;
 62 |   }) => {
 63 |     if (!src) return null;
 64 |     return <Media src={src} alt={alt} className={className} />;
 65 |   },
 66 |   YouTube: ({
 67 |     videoid,
 68 |     width,
 69 |     height,
 70 |     params,
 71 |     playlabel,
 72 |     className,
 73 |   }: {
 74 |     videoid: string;
 75 |     width?: number | string;
 76 |     height?: number;
 77 |     params?: string;
 78 |     playlabel?: string;
 79 |     className?: string;
 80 |   }) => {
 81 |     return (
 82 |       <YouTube
 83 |         videoid={videoid}
 84 |         width={width}
 85 |         height={height}
 86 |         params={params}
 87 |         playlabel={playlabel}
 88 |         className={className}
 89 |       />
 90 |     );
 91 |   },
 92 |   Bookmark: ({ url, className }: { url: string; className?: string }) => {
 93 |     return <Bookmark url={url} className={className} />;
 94 |   },
 95 |   Media: ({
 96 |     src,
 97 |     alt,
 98 |     className,
 99 |     fill,
100 |   }: {
101 |     src: string | StaticImageData;
102 |     alt?: string;
103 |     className?: string;
104 |     fill?: boolean;
105 |   }) => {
106 |     return <Media src={src} alt={alt} className={className} fill={fill} />;
107 |   },
108 | };
109 | 
110 | const useMDXComponent = (code: string) => {
111 |   const fn = new Function(code);
112 |   return fn({ ...runtime }).default;
113 | };
114 | 
115 | interface MDXProps {
116 |   code: string;
117 |   components?: Record<string, React.ComponentType<any>>;
118 | }
119 | 
120 | export const MDXContent = ({ code, components }: MDXProps) => {
121 |   const Component = useMDXComponent(code);
122 |   return <Component components={{ ...sharedComponents, ...components }} />;
123 | };
124 | 


--------------------------------------------------------------------------------
/components/markdown/bookmark.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState, useEffect } from "react";
  4 | import { ExternalLink } from "lucide-react";
  5 | import { cn } from "@/lib/utils";
  6 | 
  7 | interface BookmarkMetadata {
  8 |   title?: string;
  9 |   description?: string;
 10 |   image?: string;
 11 |   url: string;
 12 |   domain?: string;
 13 | }
 14 | 
 15 | interface BookmarkProps {
 16 |   url: string;
 17 |   className?: string;
 18 | }
 19 | 
 20 | async function fetchMetadata(url: string): Promise<BookmarkMetadata> {
 21 |   try {
 22 |     const response = await fetch(
 23 |       `/api/bookmark?url=${encodeURIComponent(url)}`
 24 |     );
 25 |     if (!response.ok) {
 26 |       throw new Error("Failed to fetch metadata");
 27 |     }
 28 |     return await response.json();
 29 |   } catch (error) {
 30 |     console.error("Error fetching bookmark metadata:", error);
 31 |     return {
 32 |       url,
 33 |       domain: new URL(url).hostname.replace("www.", ""),
 34 |     };
 35 |   }
 36 | }
 37 | 
 38 | export function Bookmark({ url, className }: BookmarkProps) {
 39 |   const [metadata, setMetadata] = useState<BookmarkMetadata | null>(null);
 40 |   const [isLoading, setIsLoading] = useState(true);
 41 | 
 42 |   useEffect(() => {
 43 |     fetchMetadata(url).then((data) => {
 44 |       setMetadata(data);
 45 |       setIsLoading(false);
 46 |     });
 47 |   }, [url]);
 48 | 
 49 |   if (isLoading) {
 50 |     return (
 51 |       <div
 52 |         className={cn(
 53 |           "my-4 rounded border border-border/50 bg-muted/20 p-3 animate-pulse",
 54 |           className
 55 |         )}
 56 |       >
 57 |         <div className="h-3.5 bg-muted rounded w-2/3 mb-2" />
 58 |         <div className="h-3 bg-muted rounded w-1/2" />
 59 |       </div>
 60 |     );
 61 |   }
 62 | 
 63 |   if (!metadata) {
 64 |     return null;
 65 |   }
 66 | 
 67 |   const displayDomain =
 68 |     metadata.domain || new URL(url).hostname.replace("www.", "");
 69 | 
 70 |   return (
 71 |     <a
 72 |       href={url}
 73 |       target="_blank"
 74 |       rel="noopener noreferrer"
 75 |       className={cn(
 76 |         "bookmark-link group my-4 block rounded border bg-muted/20",
 77 |         "hover:border-border hover:bg-muted/30 transition-colors",
 78 |         "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
 79 |         className
 80 |       )}
 81 |     >
 82 |       <div className="flex overflow-hidden rounded">
 83 |         {metadata.image && (
 84 |           <div className="relative w-32 sm:w-40 shrink-0 p-2 bg-muted border-r">
 85 |             <img
 86 |               src={metadata.image}
 87 |               alt={metadata.title || ""}
 88 |               className="w-full h-full object-cover"
 89 |               loading="lazy"
 90 |             />
 91 |           </div>
 92 |         )}
 93 |         <div className="flex-1 p-4 flex flex-col justify-center min-w-0">
 94 |           {metadata.title && (
 95 |             <h4 className="font-medium text-sm mb-1 line-clamp-1 group-hover:text-foreground transition-colors">
 96 |               {metadata.title}
 97 |             </h4>
 98 |           )}
 99 |           {metadata.description && (
100 |             <p className="text-xs text-muted-foreground line-clamp-1 mb-1.5">
101 |               {metadata.description}
102 |             </p>
103 |           )}
104 |           <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
105 |             <span className="truncate">{displayDomain}</span>
106 |             <ExternalLink className="h-3 w-3 shrink-0 opacity-60" />
107 |           </div>
108 |         </div>
109 |       </div>
110 |     </a>
111 |   );
112 | }
113 | 


--------------------------------------------------------------------------------
/components/markdown/code.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { cn } from "@/lib/utils";
  4 | import { Highlight, themes } from "prism-react-renderer";
  5 | import { Check, Copy } from "lucide-react";
  6 | import { useState, useEffect } from "react";
  7 | import { useTheme } from "next-themes";
  8 | import { toast } from "sonner";
  9 | 
 10 | interface CodeProps {
 11 |   children: string;
 12 |   className?: string;
 13 |   language?: string;
 14 | }
 15 | 
 16 | export function Code({
 17 |   children,
 18 |   className,
 19 |   language = "typescript",
 20 | }: CodeProps) {
 21 |   const [hasCopied, setHasCopied] = useState(false);
 22 |   const [mounted, setMounted] = useState(false);
 23 |   const { resolvedTheme } = useTheme();
 24 | 
 25 |   useEffect(() => {
 26 |     setMounted(true);
 27 |   }, []);
 28 | 
 29 |   // Use a default theme during SSR to prevent hydration mismatch
 30 |   // After mount, use the resolved theme
 31 |   const isDark = mounted ? resolvedTheme === "dark" : false;
 32 | 
 33 |   const copyToClipboard = async () => {
 34 |     try {
 35 |       await navigator.clipboard.writeText(children);
 36 |       setHasCopied(true);
 37 |       toast.success("Code copied to clipboard");
 38 |       setTimeout(() => setHasCopied(false), 2000);
 39 |     } catch (error) {
 40 |       console.error("Failed to copy text: ", error);
 41 |       toast.error("Failed to copy code");
 42 |     }
 43 |   };
 44 | 
 45 |   return (
 46 |     <div className="relative group">
 47 |       <button
 48 |         onClick={copyToClipboard}
 49 |         className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-accent"
 50 |         aria-label="Copy code"
 51 |       >
 52 |         {hasCopied ? (
 53 |           <Check className="h-3.5 w-3.5" />
 54 |         ) : (
 55 |           <Copy className="h-3.5 w-3.5" />
 56 |         )}
 57 |       </button>
 58 | 
 59 |       {!mounted ? (
 60 |         <Highlight
 61 |           theme={themes.github}
 62 |           code={children.trim()}
 63 |           language={language}
 64 |         >
 65 |           {({ style, tokens, getLineProps, getTokenProps }) => (
 66 |             <pre
 67 |               className={cn(
 68 |                 "overflow-x-auto rounded border bg-muted/30 p-3 text-sm font-mono",
 69 |                 className
 70 |               )}
 71 |               style={style}
 72 |             >
 73 |               <code>
 74 |                 {tokens.map((line, i) => (
 75 |                   <div key={i} {...getLineProps({ line })}>
 76 |                     {line.map((token, key) => (
 77 |                       <span key={key} {...getTokenProps({ token })} />
 78 |                     ))}
 79 |                   </div>
 80 |                 ))}
 81 |               </code>
 82 |             </pre>
 83 |           )}
 84 |         </Highlight>
 85 |       ) : (
 86 |         <Highlight
 87 |           theme={isDark ? themes.vsDark : themes.github}
 88 |           code={children.trim()}
 89 |           language={language}
 90 |         >
 91 |           {({ style, tokens, getLineProps, getTokenProps }) => (
 92 |             <pre
 93 |               className={cn(
 94 |                 "overflow-x-auto rounded border bg-muted/30 p-3 text-sm font-mono",
 95 |                 className
 96 |               )}
 97 |               style={style}
 98 |             >
 99 |               <code>
100 |                 {tokens.map((line, i) => (
101 |                   <div key={i} {...getLineProps({ line })}>
102 |                     {line.map((token, key) => (
103 |                       <span key={key} {...getTokenProps({ token })} />
104 |                     ))}
105 |                   </div>
106 |                 ))}
107 |               </code>
108 |             </pre>
109 |           )}
110 |         </Highlight>
111 |       )}
112 |     </div>
113 |   );
114 | }
115 | 


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="40" height="89" viewBox="0 0 40 89" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M28.0038 35.7323C28.145 35.0007 28.4819 34.3568 29.1557 34.2593C29.9273 34.152 30.5467 34.8739 30.9705 35.547C33.6547 39.8004 34.9044 44.8244 37.0561 49.3802C37.3387 49.9753 37.6647 50.5899 38.2189 50.9314C38.7731 51.2728 39.6316 51.1753 39.9033 50.5704C40.0663 50.2192 39.9902 49.8095 39.9142 49.4388C39.0231 44.9513 38.0994 40.4637 36.8714 36.0543C35.6325 31.6058 34.035 27.1378 31.1226 23.5965C26.6562 18.1627 19.0384 15.5093 12.3333 17.3921C7.18228 18.8359 2.85715 22.9819 1.00973 28.0743C-1.17457 34.0837 0.564177 41.3417 2.63981 47.1267C2.86802 47.7511 3.16143 48.434 3.76999 48.6876C4.58503 49.0291 5.53047 48.3364 5.81302 47.4779C6.09556 46.6194 5.91082 45.6927 5.72608 44.8147C4.7915 40.2589 4.12861 35.2251 6.37811 31.1765C6.55198 30.8644 6.7802 30.5327 7.11708 30.4644C7.83431 30.3181 8.20379 31.3034 8.27986 32.0448C8.97536 39.098 10.0073 50.307 10.6919 57.3602C11.6591 67.1937 13.3116 72.9495 16.3435 82.344C17.0173 84.4317 17.8432 86.5584 19.4407 88.0314C19.9732 88.5192 20.6469 88.9387 21.3533 88.8216C22.7443 88.5875 23.016 86.6852 22.8964 85.2511C21.3533 74.9382 18.2233 66.7547 18.1799 57.3602C18.1799 56.0042 18.5059 54.2873 19.8099 54.0141C20.5598 53.858 21.2987 54.3068 21.8638 54.8336C23.0592 55.9457 23.8199 57.448 24.4828 58.9504C27.7647 66.3743 29.6919 73.3216 32.1919 79.3216C32.9635 80.8532 34.5458 84.8609 35.9042 85.8755C36.7953 86.5389 38.0559 86.9486 38.9905 86.3437C40.3815 85.4657 39.9903 83.3293 39.436 81.7587C34.2089 67.1742 28.5797 52.3947 27.906 36.8737C27.8951 36.5128 27.906 36.1031 27.982 35.7226L28.0038 35.7323Z" fill="#F5F5F4"/>
3 | <path d="M18.7886 0.0590821C26.8085 -0.838421 29.9274 8.72194 23.8092 12.9363C15.7566 17.336 9.67101 2.09798 18.6256 0.0883485L18.7886 0.0590821Z" fill="#F5F5F4"/>
4 | <path d="M34.5058 15.386V13.2571H35.2854C35.4365 13.2571 35.5616 13.282 35.6607 13.3319C35.7598 13.3811 35.834 13.448 35.8832 13.5326C35.9324 13.6164 35.957 13.711 35.957 13.8163C35.957 13.905 35.9407 13.9799 35.9081 14.0409C35.8755 14.1012 35.8319 14.1497 35.7771 14.1864C35.7231 14.2224 35.6635 14.2488 35.5983 14.2654V14.2862C35.669 14.2897 35.738 14.3125 35.8052 14.3548C35.8731 14.3964 35.9292 14.4556 35.9736 14.5326C36.018 14.6095 36.0401 14.703 36.0401 14.8132C36.0401 14.922 36.0145 15.0197 35.9632 15.1064C35.9126 15.1923 35.8343 15.2605 35.7283 15.3111C35.6222 15.361 35.4868 15.386 35.3218 15.386H34.5058ZM34.827 15.1105H35.2906C35.4445 15.1105 35.5547 15.0807 35.6212 15.0211C35.6877 14.9615 35.721 14.887 35.721 14.7976C35.721 14.7304 35.704 14.6687 35.6701 14.6126C35.6361 14.5565 35.5876 14.5118 35.5245 14.4785C35.4622 14.4452 35.388 14.4286 35.3021 14.4286H34.827V15.1105ZM34.827 14.1781H35.2574C35.3295 14.1781 35.3943 14.1642 35.4518 14.1365C35.51 14.1088 35.5561 14.07 35.59 14.0201C35.6247 13.9695 35.642 13.9099 35.642 13.8413C35.642 13.7533 35.6112 13.6795 35.5495 13.6199C35.4878 13.5603 35.3932 13.5305 35.2657 13.5305H34.827V14.1781ZM35.1919 16.3215C34.9708 16.3215 34.7602 16.2879 34.5599 16.2207C34.3603 16.1535 34.177 16.0585 34.01 15.9359C33.8437 15.8139 33.6992 15.6694 33.5765 15.5024C33.4545 15.3361 33.3599 15.1531 33.2927 14.9536C33.2255 14.7533 33.1919 14.5426 33.1919 14.3215C33.1919 14.1005 33.2255 13.8901 33.2927 13.6906C33.3599 13.4903 33.4545 13.307 33.5765 13.1407C33.6992 12.9736 33.8437 12.8292 34.01 12.7072C34.177 12.5845 34.3603 12.4896 34.5599 12.4224C34.7602 12.3551 34.9708 12.3215 35.1919 12.3215C35.413 12.3215 35.6233 12.3551 35.8229 12.4224C36.0231 12.4896 36.2064 12.5845 36.3728 12.7072C36.5398 12.8292 36.6843 12.9736 36.8062 13.1407C36.9289 13.307 37.0238 13.4903 37.0911 13.6906C37.1583 13.8901 37.1919 14.1005 37.1919 14.3215C37.1919 14.5426 37.1583 14.7533 37.0911 14.9536C37.0238 15.1531 36.9289 15.3361 36.8062 15.5024C36.6843 15.6694 36.5398 15.8139 36.3728 15.9359C36.2064 16.0585 36.0231 16.1535 35.8229 16.2207C35.6233 16.2879 35.413 16.3215 35.1919 16.3215ZM35.1919 16.0617C35.3845 16.0617 35.5675 16.0322 35.7407 15.9733C35.9147 15.9151 36.0741 15.8326 36.2189 15.7259C36.3645 15.6199 36.4906 15.4944 36.5973 15.3496C36.704 15.2041 36.7865 15.0443 36.8447 14.8704C36.9029 14.6964 36.932 14.5135 36.932 14.3215C36.932 14.1289 36.9029 13.9456 36.8447 13.7716C36.7865 13.5977 36.704 13.4383 36.5973 13.2935C36.4906 13.1486 36.3645 13.0229 36.2189 12.9161C36.0741 12.8094 35.9147 12.7269 35.7407 12.6687C35.5675 12.6105 35.3845 12.5814 35.1919 12.5814C34.9992 12.5814 34.8159 12.6105 34.642 12.6687C34.4681 12.7269 34.3083 12.8094 34.1628 12.9161C34.018 13.0229 33.8922 13.1486 33.7854 13.2935C33.6794 13.4383 33.597 13.5977 33.538 13.7716C33.4798 13.9456 33.4507 14.1289 33.4507 14.3215C33.4507 14.5135 33.4798 14.6964 33.538 14.8704C33.597 15.0443 33.6794 15.2041 33.7854 15.3496C33.8922 15.4944 34.018 15.6199 34.1628 15.7259C34.3083 15.8326 34.4681 15.9151 34.642 15.9733C34.8159 16.0322 34.9992 16.0617 35.1919 16.0617Z" fill="#F5F5F4"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/public/logo-dark.svg:
--------------------------------------------------------------------------------
1 | <svg width="40" height="89" viewBox="0 0 40 89" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M28.0038 35.7323C28.145 35.0007 28.4819 34.3568 29.1557 34.2593C29.9273 34.152 30.5467 34.8739 30.9705 35.547C33.6547 39.8004 34.9044 44.8244 37.0561 49.3802C37.3387 49.9753 37.6647 50.5899 38.2189 50.9314C38.7731 51.2728 39.6316 51.1753 39.9033 50.5704C40.0663 50.2192 39.9902 49.8095 39.9142 49.4388C39.0231 44.9513 38.0994 40.4637 36.8714 36.0543C35.6325 31.6058 34.035 27.1378 31.1226 23.5965C26.6562 18.1627 19.0384 15.5093 12.3333 17.3921C7.18228 18.8359 2.85715 22.9819 1.00973 28.0743C-1.17457 34.0837 0.564177 41.3417 2.63981 47.1267C2.86802 47.7511 3.16143 48.434 3.76999 48.6876C4.58503 49.0291 5.53047 48.3364 5.81302 47.4779C6.09556 46.6194 5.91082 45.6927 5.72608 44.8147C4.7915 40.2589 4.12861 35.2251 6.37811 31.1765C6.55198 30.8644 6.7802 30.5327 7.11708 30.4644C7.83431 30.3181 8.20379 31.3034 8.27986 32.0448C8.97536 39.098 10.0073 50.307 10.6919 57.3602C11.6591 67.1937 13.3116 72.9495 16.3435 82.344C17.0173 84.4317 17.8432 86.5584 19.4407 88.0314C19.9732 88.5192 20.6469 88.9387 21.3533 88.8216C22.7443 88.5875 23.016 86.6852 22.8964 85.2511C21.3533 74.9382 18.2233 66.7547 18.1799 57.3602C18.1799 56.0042 18.5059 54.2873 19.8099 54.0141C20.5598 53.858 21.2987 54.3068 21.8638 54.8336C23.0592 55.9457 23.8199 57.448 24.4828 58.9504C27.7647 66.3743 29.6919 73.3216 32.1919 79.3216C32.9635 80.8532 34.5458 84.8609 35.9042 85.8755C36.7953 86.5389 38.0559 86.9486 38.9905 86.3437C40.3815 85.4657 39.9903 83.3293 39.436 81.7587C34.2089 67.1742 28.5797 52.3947 27.906 36.8737C27.8951 36.5128 27.906 36.1031 27.982 35.7226L28.0038 35.7323Z" fill="#F5F5F4"/>
3 | <path d="M18.7886 0.0590821C26.8085 -0.838421 29.9274 8.72194 23.8092 12.9363C15.7566 17.336 9.67101 2.09798 18.6256 0.0883485L18.7886 0.0590821Z" fill="#F5F5F4"/>
4 | <path d="M34.5058 15.386V13.2571H35.2854C35.4365 13.2571 35.5616 13.282 35.6607 13.3319C35.7598 13.3811 35.834 13.448 35.8832 13.5326C35.9324 13.6164 35.957 13.711 35.957 13.8163C35.957 13.905 35.9407 13.9799 35.9081 14.0409C35.8755 14.1012 35.8319 14.1497 35.7771 14.1864C35.7231 14.2224 35.6635 14.2488 35.5983 14.2654V14.2862C35.669 14.2897 35.738 14.3125 35.8052 14.3548C35.8731 14.3964 35.9292 14.4556 35.9736 14.5326C36.018 14.6095 36.0401 14.703 36.0401 14.8132C36.0401 14.922 36.0145 15.0197 35.9632 15.1064C35.9126 15.1923 35.8343 15.2605 35.7283 15.3111C35.6222 15.361 35.4868 15.386 35.3218 15.386H34.5058ZM34.827 15.1105H35.2906C35.4445 15.1105 35.5547 15.0807 35.6212 15.0211C35.6877 14.9615 35.721 14.887 35.721 14.7976C35.721 14.7304 35.704 14.6687 35.6701 14.6126C35.6361 14.5565 35.5876 14.5118 35.5245 14.4785C35.4622 14.4452 35.388 14.4286 35.3021 14.4286H34.827V15.1105ZM34.827 14.1781H35.2574C35.3295 14.1781 35.3943 14.1642 35.4518 14.1365C35.51 14.1088 35.5561 14.07 35.59 14.0201C35.6247 13.9695 35.642 13.9099 35.642 13.8413C35.642 13.7533 35.6112 13.6795 35.5495 13.6199C35.4878 13.5603 35.3932 13.5305 35.2657 13.5305H34.827V14.1781ZM35.1919 16.3215C34.9708 16.3215 34.7602 16.2879 34.5599 16.2207C34.3603 16.1535 34.177 16.0585 34.01 15.9359C33.8437 15.8139 33.6992 15.6694 33.5765 15.5024C33.4545 15.3361 33.3599 15.1531 33.2927 14.9536C33.2255 14.7533 33.1919 14.5426 33.1919 14.3215C33.1919 14.1005 33.2255 13.8901 33.2927 13.6906C33.3599 13.4903 33.4545 13.307 33.5765 13.1407C33.6992 12.9736 33.8437 12.8292 34.01 12.7072C34.177 12.5845 34.3603 12.4896 34.5599 12.4224C34.7602 12.3551 34.9708 12.3215 35.1919 12.3215C35.413 12.3215 35.6233 12.3551 35.8229 12.4224C36.0231 12.4896 36.2064 12.5845 36.3728 12.7072C36.5398 12.8292 36.6843 12.9736 36.8062 13.1407C36.9289 13.307 37.0238 13.4903 37.0911 13.6906C37.1583 13.8901 37.1919 14.1005 37.1919 14.3215C37.1919 14.5426 37.1583 14.7533 37.0911 14.9536C37.0238 15.1531 36.9289 15.3361 36.8062 15.5024C36.6843 15.6694 36.5398 15.8139 36.3728 15.9359C36.2064 16.0585 36.0231 16.1535 35.8229 16.2207C35.6233 16.2879 35.413 16.3215 35.1919 16.3215ZM35.1919 16.0617C35.3845 16.0617 35.5675 16.0322 35.7407 15.9733C35.9147 15.9151 36.0741 15.8326 36.2189 15.7259C36.3645 15.6199 36.4906 15.4944 36.5973 15.3496C36.704 15.2041 36.7865 15.0443 36.8447 14.8704C36.9029 14.6964 36.932 14.5135 36.932 14.3215C36.932 14.1289 36.9029 13.9456 36.8447 13.7716C36.7865 13.5977 36.704 13.4383 36.5973 13.2935C36.4906 13.1486 36.3645 13.0229 36.2189 12.9161C36.0741 12.8094 35.9147 12.7269 35.7407 12.6687C35.5675 12.6105 35.3845 12.5814 35.1919 12.5814C34.9992 12.5814 34.8159 12.6105 34.642 12.6687C34.4681 12.7269 34.3083 12.8094 34.1628 12.9161C34.018 13.0229 33.8922 13.1486 33.7854 13.2935C33.6794 13.4383 33.597 13.5977 33.538 13.7716C33.4798 13.9456 33.4507 14.1289 33.4507 14.3215C33.4507 14.5135 33.4798 14.6964 33.538 14.8704C33.597 15.0443 33.6794 15.2041 33.7854 15.3496C33.8922 15.4944 34.018 15.6199 34.1628 15.7259C34.3083 15.8326 34.4681 15.9151 34.642 15.9733C34.8159 16.0322 34.9992 16.0617 35.1919 16.0617Z" fill="#F5F5F4"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | 
  3 | @custom-variant dark (&:is(.dark *));
  4 | 
  5 | @theme inline {
  6 |   --radius-sm: calc(var(--radius) - 4px);
  7 |   --radius-md: calc(var(--radius) - 2px);
  8 |   --radius-lg: var(--radius);
  9 |   --radius-xl: calc(var(--radius) + 4px);
 10 |   --color-background: var(--background);
 11 |   --color-foreground: var(--foreground);
 12 |   --color-card: var(--card);
 13 |   --color-card-foreground: var(--card-foreground);
 14 |   --color-popover: var(--popover);
 15 |   --color-popover-foreground: var(--popover-foreground);
 16 |   --color-primary: var(--primary);
 17 |   --color-primary-foreground: var(--primary-foreground);
 18 |   --color-secondary: var(--secondary);
 19 |   --color-secondary-foreground: var(--secondary-foreground);
 20 |   --color-muted: var(--muted);
 21 |   --color-muted-foreground: var(--muted-foreground);
 22 |   --color-accent: var(--accent);
 23 |   --color-accent-foreground: var(--accent-foreground);
 24 |   --color-destructive: var(--destructive);
 25 |   --color-border: var(--border);
 26 |   --color-input: var(--input);
 27 |   --color-ring: var(--ring);
 28 |   --color-chart-1: var(--chart-1);
 29 |   --color-chart-2: var(--chart-2);
 30 |   --color-chart-3: var(--chart-3);
 31 |   --color-chart-4: var(--chart-4);
 32 |   --color-chart-5: var(--chart-5);
 33 |   --color-sidebar: var(--sidebar);
 34 |   --color-sidebar-foreground: var(--sidebar-foreground);
 35 |   --color-sidebar-primary: var(--sidebar-primary);
 36 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 37 |   --color-sidebar-accent: var(--sidebar-accent);
 38 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 39 |   --color-sidebar-border: var(--sidebar-border);
 40 |   --color-sidebar-ring: var(--sidebar-ring);
 41 | }
 42 | 
 43 | :root {
 44 |   --radius: 0.625rem;
 45 |   --background: oklch(1 0 0);
 46 |   --foreground: oklch(0.147 0.004 49.25);
 47 |   --card: oklch(1 0 0);
 48 |   --card-foreground: oklch(0.147 0.004 49.25);
 49 |   --popover: oklch(1 0 0);
 50 |   --popover-foreground: oklch(0.147 0.004 49.25);
 51 |   --primary: oklch(0.6837 0.212 40.59);
 52 |   --primary-foreground: oklch(0.985 0.001 106.423);
 53 |   --secondary: oklch(0.97 0.001 106.424);
 54 |   --secondary-foreground: oklch(0.6837 0.212 40.59);
 55 |   --muted: oklch(0.97 0.001 106.424);
 56 |   --muted-foreground: oklch(0.553 0.013 58.071);
 57 |   --accent: oklch(0.97 0.001 106.424);
 58 |   --accent-foreground: oklch(0.6837 0.212 40.59);
 59 |   --destructive: oklch(0.577 0.245 27.325);
 60 |   --border: oklch(0.923 0.003 48.717);
 61 |   --input: oklch(0.923 0.003 48.717);
 62 |   --ring: oklch(0.709 0.01 56.259);
 63 |   --chart-1: oklch(0.646 0.222 41.116);
 64 |   --chart-2: oklch(0.6 0.118 184.704);
 65 |   --chart-3: oklch(0.398 0.07 227.392);
 66 |   --chart-4: oklch(0.828 0.189 84.429);
 67 |   --chart-5: oklch(0.769 0.188 70.08);
 68 |   --sidebar: oklch(0.985 0.001 106.423);
 69 |   --sidebar-foreground: oklch(0.147 0.004 49.25);
 70 |   --sidebar-primary: oklch(0.6837 0.212 40.59);
 71 |   --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
 72 |   --sidebar-accent: oklch(0.97 0.001 106.424);
 73 |   --sidebar-accent-foreground: oklch(0.6837 0.212 40.59);
 74 |   --sidebar-border: oklch(0.923 0.003 48.717);
 75 |   --sidebar-ring: oklch(0.709 0.01 56.259);
 76 | }
 77 | 
 78 | .dark {
 79 |   --background: oklch(0.147 0.004 49.25);
 80 |   --foreground: oklch(0.985 0.001 106.423);
 81 |   --card: oklch(0.6837 0.212 40.59);
 82 |   --card-foreground: oklch(0.985 0.001 106.423);
 83 |   --popover: oklch(0.6837 0.212 40.59);
 84 |   --popover-foreground: oklch(0.985 0.001 106.423);
 85 |   --primary: oklch(0.6837 0.212 40.59);
 86 |   --primary-foreground: oklch(0.985 0.001 106.423);
 87 |   --secondary: oklch(0.268 0.007 34.298);
 88 |   --secondary-foreground: oklch(0.985 0.001 106.423);
 89 |   --muted: oklch(0.268 0.007 34.298);
 90 |   --muted-foreground: oklch(0.709 0.01 56.259);
 91 |   --accent: oklch(0.268 0.007 34.298);
 92 |   --accent-foreground: oklch(0.985 0.001 106.423);
 93 |   --destructive: oklch(0.704 0.191 22.216);
 94 |   --border: oklch(1 0 0 / 10%);
 95 |   --input: oklch(1 0 0 / 15%);
 96 |   --ring: oklch(0.553 0.013 58.071);
 97 |   --chart-1: oklch(0.488 0.243 264.376);
 98 |   --chart-2: oklch(0.696 0.17 162.48);
 99 |   --chart-3: oklch(0.769 0.188 70.08);
100 |   --chart-4: oklch(0.627 0.265 303.9);
101 |   --chart-5: oklch(0.645 0.246 16.439);
102 |   --sidebar: oklch(0.6837 0.212 40.59);
103 |   --sidebar-foreground: oklch(0.985 0.001 106.423);
104 |   --sidebar-primary: oklch(0.488 0.243 264.376);
105 |   --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
106 |   --sidebar-accent: oklch(0.268 0.007 34.298);
107 |   --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
108 |   --sidebar-border: oklch(1 0 0 / 10%);
109 |   --sidebar-ring: oklch(0.553 0.013 58.071);
110 | }
111 | 
112 | @layer base {
113 |   * {
114 |     @apply border-border outline-ring/50;
115 |   }
116 | 
117 |   body {
118 |     @apply bg-background text-foreground;
119 |   }
120 | }
121 | 


--------------------------------------------------------------------------------
/components/markdown/media.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState } from "react";
  4 | 
  5 | import Image, { type StaticImageData } from "next/image";
  6 | 
  7 | import { X } from "lucide-react";
  8 | import { cn } from "@/lib/utils";
  9 | 
 10 | import * as Dialog from "@radix-ui/react-dialog";
 11 | 
 12 | interface MediaProps {
 13 |   src: string | StaticImageData;
 14 |   alt?: string;
 15 |   className?: string;
 16 |   fill?: boolean;
 17 | }
 18 | 
 19 | const overlayClasses = cn(
 20 |   "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm",
 21 |   "transition-opacity duration-300 ease-out",
 22 |   "starting:opacity-0",
 23 |   "data-[state=open]:opacity-100",
 24 |   "data-[state=closed]:opacity-0"
 25 | );
 26 | 
 27 | const contentClasses = cn(
 28 |   "fixed left-1/2 top-1/2 z-50 w-full max-w-7xl",
 29 |   "-translate-x-1/2 -translate-y-1/2 p-4",
 30 |   "transition-all duration-300 ease-out",
 31 |   "starting:opacity-0 starting:scale-[0.96]",
 32 |   "data-[state=open]:opacity-100 data-[state=open]:scale-100",
 33 |   "data-[state=closed]:opacity-0 data-[state=closed]:scale-[0.96]"
 34 | );
 35 | 
 36 | const closeButtonClasses = cn(
 37 |   "absolute -right-2 -top-2 z-10",
 38 |   "rounded-full bg-background p-2 shadow-lg",
 39 |   "transition-all duration-200 ease-out",
 40 |   "hover:bg-accent",
 41 |   "starting:opacity-0 starting:scale-90",
 42 |   "data-[state=open]:opacity-100 data-[state=open]:scale-100",
 43 |   "data-[state=open]:delay-150",
 44 |   "data-[state=closed]:opacity-0 data-[state=closed]:scale-90"
 45 | );
 46 | 
 47 | const imageClasses = cn(
 48 |   "h-auto w-full object-contain",
 49 |   "transition-opacity duration-300 ease-out",
 50 |   "starting:opacity-0",
 51 |   "data-[state=open]:opacity-100 data-[state=open]:delay-75",
 52 |   "data-[state=closed]:opacity-0"
 53 | );
 54 | 
 55 | export function Media({ src, alt = "", className, fill = false }: MediaProps) {
 56 |   const [isOpen, setIsOpen] = useState(false);
 57 | 
 58 |   const isStaticImport =
 59 |     typeof src === "object" && "width" in src && "height" in src;
 60 |   const imageWidth = isStaticImport ? src.width : undefined;
 61 |   const imageHeight = isStaticImport ? src.height : undefined;
 62 |   const imageSrc = isStaticImport ? src.src : src;
 63 |   const aspectRatio =
 64 |     imageWidth && imageHeight ? `${imageWidth} / ${imageHeight}` : undefined;
 65 | 
 66 |   return (
 67 |     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
 68 |       <Dialog.Trigger asChild>
 69 |         <button
 70 |           type="button"
 71 |           className={cn(
 72 |             "relative cursor-zoom-in overflow-hidden rounded-lg",
 73 |             "transition-opacity hover:opacity-90",
 74 |             "border",
 75 |             "block w-full",
 76 |             (fill || (!isStaticImport && !imageWidth && !imageHeight)) &&
 77 |               "aspect-4/3",
 78 |             className
 79 |           )}
 80 |           style={
 81 |             !fill && aspectRatio
 82 |               ? {
 83 |                   aspectRatio,
 84 |                 }
 85 |               : undefined
 86 |           }
 87 |           aria-label="Open image in lightbox"
 88 |         >
 89 |           {fill || (!isStaticImport && !imageWidth && !imageHeight) ? (
 90 |             <Image
 91 |               src={src}
 92 |               alt={alt}
 93 |               fill
 94 |               className={cn(
 95 |                 isStaticImport ? "object-contain" : "object-cover",
 96 |                 "bg-muted"
 97 |               )}
 98 |               sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
 99 |             />
100 |           ) : (
101 |             <Image
102 |               src={src}
103 |               alt={alt}
104 |               width={imageWidth}
105 |               height={imageHeight}
106 |               className="object-contain bg-muted"
107 |               style={{ width: "100%", height: "100%" }}
108 |             />
109 |           )}
110 |         </button>
111 |       </Dialog.Trigger>
112 | 
113 |       <Dialog.Portal>
114 |         <Dialog.Overlay className={overlayClasses} />
115 |         <Dialog.Content className={contentClasses}>
116 |           <Dialog.Title className="sr-only">
117 |             {alt || "Image lightbox"}
118 |           </Dialog.Title>
119 |           <div className="relative flex items-center justify-center">
120 |             <Dialog.Close asChild>
121 |               <button
122 |                 className={closeButtonClasses}
123 |                 aria-label="Close lightbox"
124 |               >
125 |                 <X className="h-5 w-5" />
126 |               </button>
127 |             </Dialog.Close>
128 |             <div className="relative max-h-[90vh] w-full overflow-auto rounded-lg border">
129 |               <img
130 |                 src={imageSrc}
131 |                 alt={alt}
132 |                 className={imageClasses}
133 |                 loading="eager"
134 |               />
135 |             </div>
136 |           </div>
137 |         </Dialog.Content>
138 |       </Dialog.Portal>
139 |     </Dialog.Root>
140 |   );
141 | }
142 | 


--------------------------------------------------------------------------------
/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as LabelPrimitive from "@radix-ui/react-label"
  5 | import { Slot } from "@radix-ui/react-slot"
  6 | import {
  7 |   Controller,
  8 |   FormProvider,
  9 |   useFormContext,
 10 |   type ControllerProps,
 11 |   type FieldPath,
 12 |   type FieldValues,
 13 | } from "react-hook-form"
 14 | 
 15 | import { cn } from "@/lib/utils"
 16 | import { Label } from "@/components/ui/label"
 17 | 
 18 | const Form = FormProvider
 19 | 
 20 | type FormFieldContextValue<
 21 |   TFieldValues extends FieldValues = FieldValues,
 22 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 23 | > = {
 24 |   name: TName
 25 | }
 26 | 
 27 | const FormFieldContext = React.createContext<FormFieldContextValue | null>(null)
 28 | 
 29 | const FormField = <
 30 |   TFieldValues extends FieldValues = FieldValues,
 31 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 32 | >({
 33 |   ...props
 34 | }: ControllerProps<TFieldValues, TName>) => {
 35 |   return (
 36 |     <FormFieldContext.Provider value={{ name: props.name }}>
 37 |       <Controller {...props} />
 38 |     </FormFieldContext.Provider>
 39 |   )
 40 | }
 41 | 
 42 | const useFormField = () => {
 43 |   const fieldContext = React.useContext(FormFieldContext)
 44 |   const itemContext = React.useContext(FormItemContext)
 45 |   const { getFieldState, formState } = useFormContext()
 46 | 
 47 |   if (!fieldContext) {
 48 |     throw new Error("useFormField should be used within <FormField>")
 49 |   }
 50 | 
 51 |   if (!itemContext) {
 52 |     throw new Error("useFormField should be used within <FormItem>")
 53 |   }
 54 | 
 55 |   const fieldState = getFieldState(fieldContext.name, formState)
 56 | 
 57 |   const { id } = itemContext
 58 | 
 59 |   return {
 60 |     id,
 61 |     name: fieldContext.name,
 62 |     formItemId: `${id}-form-item`,
 63 |     formDescriptionId: `${id}-form-item-description`,
 64 |     formMessageId: `${id}-form-item-message`,
 65 |     ...fieldState,
 66 |   }
 67 | }
 68 | 
 69 | type FormItemContextValue = {
 70 |   id: string
 71 | }
 72 | 
 73 | const FormItemContext = React.createContext<FormItemContextValue | null>(null)
 74 | 
 75 | const FormItem = React.forwardRef<
 76 |   HTMLDivElement,
 77 |   React.HTMLAttributes<HTMLDivElement>
 78 | >(({ className, ...props }, ref) => {
 79 |   const id = React.useId()
 80 | 
 81 |   return (
 82 |     <FormItemContext.Provider value={{ id }}>
 83 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 84 |     </FormItemContext.Provider>
 85 |   )
 86 | })
 87 | FormItem.displayName = "FormItem"
 88 | 
 89 | const FormLabel = React.forwardRef<
 90 |   React.ElementRef<typeof LabelPrimitive.Root>,
 91 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 92 | >(({ className, ...props }, ref) => {
 93 |   const { error, formItemId } = useFormField()
 94 | 
 95 |   return (
 96 |     <Label
 97 |       ref={ref}
 98 |       className={cn(error && "text-destructive", className)}
 99 |       htmlFor={formItemId}
100 |       {...props}
101 |     />
102 |   )
103 | })
104 | FormLabel.displayName = "FormLabel"
105 | 
106 | const FormControl = React.forwardRef<
107 |   React.ElementRef<typeof Slot>,
108 |   React.ComponentPropsWithoutRef<typeof Slot>
109 | >(({ ...props }, ref) => {
110 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
111 | 
112 |   return (
113 |     <Slot
114 |       ref={ref}
115 |       id={formItemId}
116 |       aria-describedby={
117 |         !error
118 |           ? `${formDescriptionId}`
119 |           : `${formDescriptionId} ${formMessageId}`
120 |       }
121 |       aria-invalid={!!error}
122 |       {...props}
123 |     />
124 |   )
125 | })
126 | FormControl.displayName = "FormControl"
127 | 
128 | const FormDescription = React.forwardRef<
129 |   HTMLParagraphElement,
130 |   React.HTMLAttributes<HTMLParagraphElement>
131 | >(({ className, ...props }, ref) => {
132 |   const { formDescriptionId } = useFormField()
133 | 
134 |   return (
135 |     <p
136 |       ref={ref}
137 |       id={formDescriptionId}
138 |       className={cn("text-sm text-muted-foreground", className)}
139 |       {...props}
140 |     />
141 |   )
142 | })
143 | FormDescription.displayName = "FormDescription"
144 | 
145 | const FormMessage = React.forwardRef<
146 |   HTMLParagraphElement,
147 |   React.HTMLAttributes<HTMLParagraphElement>
148 | >(({ className, children, ...props }, ref) => {
149 |   const { error, formMessageId } = useFormField()
150 |   const body = error ? String(error?.message ?? "") : children
151 | 
152 |   if (!body) {
153 |     return null
154 |   }
155 | 
156 |   return (
157 |     <p
158 |       ref={ref}
159 |       id={formMessageId}
160 |       className={cn("text-sm font-medium text-destructive", className)}
161 |       {...props}
162 |     >
163 |       {body}
164 |     </p>
165 |   )
166 | })
167 | FormMessage.displayName = "FormMessage"
168 | 
169 | export {
170 |   useFormField,
171 |   Form,
172 |   FormItem,
173 |   FormLabel,
174 |   FormControl,
175 |   FormDescription,
176 |   FormMessage,
177 |   FormField,
178 | }
179 | 


--------------------------------------------------------------------------------
/components/ds.tsx:
--------------------------------------------------------------------------------
  1 | // Design system components for layout and prose styling.
  2 | // Provides reusable components for structuring pages and formatting rich text content.
  3 | 
  4 | import { cn } from "@/lib/utils";
  5 | 
  6 | type DSProps = {
  7 |   className?: string;
  8 |   children?: React.ReactNode;
  9 |   id?: string;
 10 |   style?: React.CSSProperties;
 11 |   dangerouslySetInnerHTML?: { __html: string };
 12 |   containerClassName?: string;
 13 |   isArticle?: boolean;
 14 |   isSpaced?: boolean;
 15 | };
 16 | 
 17 | export const Section = ({ children, className, id, style }: DSProps) => (
 18 |   <section className={cn("py-2 sm:py-4", className)} id={id} style={style}>
 19 |     {children}
 20 |   </section>
 21 | );
 22 | 
 23 | export const Container = ({ children, className, id, style }: DSProps) => (
 24 |   <div
 25 |     className={cn("max-w-5xl mx-auto p-4 sm:p-6", className)}
 26 |     id={id}
 27 |     style={style}
 28 |   >
 29 |     {children}
 30 |   </div>
 31 | );
 32 | 
 33 | export const Nav = ({
 34 |   children,
 35 |   className,
 36 |   id,
 37 |   style,
 38 |   containerClassName,
 39 | }: DSProps) => (
 40 |   <nav className={cn(className)} id={id} style={style}>
 41 |     <div
 42 |       id="nav-container"
 43 |       className={cn("max-w-5xl mx-auto px-4 sm:px-6 py-2", containerClassName)}
 44 |     >
 45 |       {children}
 46 |     </div>
 47 |   </nav>
 48 | );
 49 | 
 50 | export const Layout = ({ children, className, style }: DSProps) => (
 51 |   <html
 52 |     lang="en"
 53 |     suppressHydrationWarning
 54 |     className={cn("scroll-smooth antialiased focus:scroll-auto", className)}
 55 |     style={style}
 56 |   >
 57 |     {children}
 58 |   </html>
 59 | );
 60 | 
 61 | export const Main = ({ children, className, id, style }: DSProps) => (
 62 |   <main className={cn(className)} id={id} style={style}>
 63 |     {children}
 64 |   </main>
 65 | );
 66 | 
 67 | // Prose component styles
 68 | const proseBaseClasses = "antialiased text-base leading-7";
 69 | 
 70 | const proseHeadingClasses = [
 71 |   "[&_h1]:text-4xl sm:[&_h1]:text-5xl [&_h1]:font-medium [&_h1]:tracking-tight [&_h1]:text-balance",
 72 |   "[&_h2]:text-3xl sm:[&_h2]:text-4xl [&_h2]:font-medium [&_h2]:tracking-tight [&_h2]:text-balance",
 73 |   "[&_h3]:text-2xl sm:[&_h3]:text-3xl [&_h3]:font-medium [&_h3]:tracking-tight [&_h3]:text-balance",
 74 |   "[&_h4]:text-xl sm:[&_h4]:text-2xl [&_h4]:tracking-tight [&_h4]:text-balance",
 75 |   "[&_h5]:text-lg sm:[&_h5]:text-xl [&_h5]:tracking-tight [&_h5]:text-balance",
 76 |   "[&_h6]:text-base sm:[&_h6]:text-lg [&_h6]:tracking-tight [&_h6]:text-balance",
 77 | ];
 78 | 
 79 | const proseTextClasses = [
 80 |   "[&_p]:text-pretty [&_p]:text-base",
 81 |   "[&_strong]:font-semibold",
 82 |   "[&_muted]:text-muted-foreground",
 83 |   "[&_em]:italic",
 84 |   "[&_del]:line-through",
 85 |   "[&_small]:text-sm [&_small]:leading-snug",
 86 |   "[&_sub]:text-sm [&_sub]:align-baseline [&_sup]:text-sm [&_sup]:align-baseline",
 87 | ];
 88 | 
 89 | const proseLinkClasses =
 90 |   "[&_a:not(h1_a,h2_a,h3_a,h4_a,h5_a,h6_a,.bookmark-link)]:text-primary dark:[&_a:not(h1_a,h2_a,h3_a,h4_a,h5_a,h6_a,.bookmark-link)]:text-primary [&_a:not(h1_a,h2_a,h3_a,h4_a,h5_a,h6_a,.bookmark-link)]:transition-all [&_a:not(h1_a,h2_a,h3_a,h4_a,h5_a,h6_a,.bookmark-link)]:underline [&_a:not(h1_a,h2_a,h3_a,h4_a,h5_a,h6_a,.bookmark-link)]:hover:underline [&_a:not(h1_a,h2_a,h3_a,h4_a,h5_a,h6_a,.bookmark-link)]:underline-offset-2 [&_a:not(h1_a,h2_a,h3_a,h4_a,h5_a,h6_a,.bookmark-link)]:decoration-primary/50 [&_a:not(h1_a,h2_a,h3_a,h4_a,h5_a,h6_a,.bookmark-link)]:focus-visible:outline-hidden [&_a:not(h1_a,h2_a,h3_a,h4_a,h5_a,h6_a,.bookmark-link)]:focus-visible:ring-2 [&_a:not(h1_a,h2_a,h3_a,h4_a,h5_a,h6_a,.bookmark-link)]:focus-visible:ring-primary/50";
 91 | 
 92 | const proseListClasses = [
 93 |   "[&_ul]:pl-0 [&_ul]:py-3 [&_ul]:list-none [&_ul]:space-y-1",
 94 |   "[&_ul>li]:relative [&_ul>li]:pl-6",
 95 |   "[&_ul>li]:before:absolute [&_ul>li]:before:left-1 [&_ul>li]:before:top-[0.6875em] [&_ul>li]:before:h-1.5 [&_ul>li]:before:w-1.5 [&_ul>li]:before:rounded-full [&_ul>li]:before:bg-foreground/80 [&_ul>li]:before:content-['']",
 96 |   "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:py-3 [&_ol]:space-y-1",
 97 |   "[&_ol>ol]:list-[lower-alpha]",
 98 |   "[&_ol>ol>ol]:list-[lower-roman]",
 99 |   "[&_dl]:py-3 [&_dl]:space-y-1",
100 |   "[&_dt]:font-medium [&_dt]:text-sm [&_dt]:leading-snug [&_dt:not(:first-child)]:mt-3",
101 |   "[&_dd]:text-sm [&_dd]:leading-snug [&_dd]:text-muted-foreground",
102 |   "[&_li]:pl-2 [&_li]:marker:text-foreground/80",
103 |   "[&_li>ul]:mt-2 [&_li>ul]:mb-0 [&_li>ol]:mt-2 [&_li>ol]:mb-0",
104 |   "[&_ul>ul>li]:before:bg-foreground/60",
105 |   "[&_ul>ul>ul>li]:before:bg-foreground/40",
106 | ];
107 | 
108 | const proseCodeClasses = [
109 |   "[&_code:not(pre_code)]:rounded [&_code:not(pre_code)]:border [&_code:not(pre_code)]:bg-muted/50 [&_code:not(pre_code)]:px-1 [&_code:not(pre_code)]:py-px [&_code:not(pre_code)]:font-mono [&_code:not(pre_code)]:text-sm [&_code:not(pre_code)]:font-medium",
110 |   "[&_h1>code:not(pre_code)]:text-inherit [&_h1>code:not(pre_code)]:tracking-tight [&_h1>code:not(pre_code)]:text-4xl sm:[&_h1>code:not(pre_code)]:text-5xl",
111 |   "[&_h2>code:not(pre_code)]:text-inherit [&_h2>code:not(pre_code)]:tracking-tight [&_h2>code:not(pre_code)]:text-3xl sm:[&_h2>code:not(pre_code)]:text-4xl",
112 |   "[&_h3>code:not(pre_code)]:text-inherit [&_h3>code:not(pre_code)]:tracking-tight [&_h3>code:not(pre_code)]:text-2xl sm:[&_h3>code:not(pre_code)]:text-3xl",
113 |   "[&_h4>code:not(pre_code)]:text-inherit [&_h4>code:not(pre_code)]:tracking-tight [&_h4>code:not(pre_code)]:text-xl sm:[&_h4>code:not(pre_code)]:text-2xl",
114 |   "[&_h5>code:not(pre_code)]:text-inherit [&_h5>code:not(pre_code)]:tracking-tight [&_h5>code:not(pre_code)]:text-lg sm:[&_h5>code:not(pre_code)]:text-xl",
115 |   "[&_h6>code:not(pre_code)]:text-inherit [&_h6>code:not(pre_code)]:tracking-tight [&_h6>code:not(pre_code)]:text-base sm:[&_h6>code:not(pre_code)]:text-lg",
116 |   "[&_pre]:overflow-x-auto [&_pre]:rounded-sm [&_pre]:border [&_pre]:bg-muted/50 [&_pre]:p-4 [&_pre]:my-4",
117 |   "[&_pre>code]:bg-transparent [&_pre>code]:p-0",
118 | ];
119 | 
120 | const proseTableClasses = [
121 |   "[&_table]:w-full [&_table]:my-4 [&_table]:overflow-hidden [&_table]:rounded-sm [&_table]:border",
122 |   "[&_thead]:bg-muted/50",
123 |   "[&_tr]:border-b [&_tr:nth-child(even)]:bg-muted/20",
124 |   "[&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-semibold [&_th]:border-r",
125 |   "[&_td]:px-4 [&_td]:py-2 [&_td]:border-r",
126 | ];
127 | 
128 | const proseMediaClasses = [
129 |   "[&_img]:border [&_img]:my-4 [&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-sm",
130 |   "[&_video]:border [&_video]:my-4 [&_video]:max-w-full [&_video]:h-auto [&_video]:rounded-sm",
131 |   "[&_figure]:my-4",
132 |   "[&_figcaption]:text-sm [&_figcaption]:mb-6! [&_figcaption]:text-muted-foreground",
133 | ];
134 | 
135 | const proseBlockClasses = [
136 |   "[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4! [&_blockquote]:py-2 [&_blockquote]:my-4 [&_blockquote]:text-muted-foreground [&_blockquote]:bg-muted/30",
137 |   "[&_hr]:my-8! [&_hr]:border-t-2 [&_hr]:border-border/50",
138 |   "[&_p:has(>hr)]:my-8! [&_p:has(>hr)]:border-t-2 [&_p:has(>hr)]:border-border/50",
139 |   "[&_details]:rounded-sm [&_details]:border [&_details]:px-4 [&_details]:py-2 [&_details]:my-4",
140 |   "[&_summary]:cursor-pointer [&_summary]:font-semibold focus-visible:[&_summary]:outline-hidden",
141 | ];
142 | 
143 | const proseInteractiveClasses = [
144 |   "[&_kbd]:rounded-sm [&_kbd]:border [&_kbd]:bg-muted [&_kbd]:px-1.5 [&_kbd]:py-0.5 [&_kbd]:text-sm [&_kbd]:font-mono [&_kbd]:shadow-xs [&_kbd]:align-middle",
145 |   "[&_abbr]:border-b [&_abbr]:border-dotted [&_abbr]:decoration-muted-foreground [&_abbr]:underline-offset-2 [&_abbr]:cursor-help",
146 | ];
147 | 
148 | const proseSpacedClasses = [
149 |   "space-y-6",
150 |   "[&_h1:not(:first-child)]:mt-8 [&_h1]:mb-4",
151 |   "[&_h2:not(:first-child)]:mt-8 [&_h2]:mb-4",
152 |   "[&_h3:not(:first-child)]:mt-6 [&_h3]:mb-3",
153 |   "[&_h4:not(:first-child)]:mt-6 [&_h4]:mb-3",
154 |   "[&_h5:not(:first-child)]:mt-6 [&_h5]:mb-2",
155 |   "[&_h6:not(:first-child)]:mt-4 [&_h6]:mb-2",
156 | ];
157 | 
158 | export const Prose = ({
159 |   children,
160 |   className,
161 |   id,
162 |   dangerouslySetInnerHTML,
163 |   style,
164 |   isArticle = false,
165 |   isSpaced = false,
166 | }: DSProps) => {
167 |   const Component = isArticle ? "article" : "div";
168 | 
169 |   return (
170 |     <Component
171 |       className={cn(
172 |         proseBaseClasses,
173 |         proseHeadingClasses,
174 |         proseTextClasses,
175 |         proseLinkClasses,
176 |         proseListClasses,
177 |         proseCodeClasses,
178 |         proseTableClasses,
179 |         // proseMediaClasses,
180 |         proseBlockClasses,
181 |         proseInteractiveClasses,
182 |         isArticle && "max-w-prose",
183 |         isSpaced && proseSpacedClasses,
184 |         className
185 |       )}
186 |       id={id}
187 |       dangerouslySetInnerHTML={dangerouslySetInnerHTML}
188 |       style={style}
189 |     >
190 |       {children}
191 |     </Component>
192 |   );
193 | };
194 | 


--------------------------------------------------------------------------------
/content/example.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: "Example Page"
  3 | description: "A showcase of MDX features and components"
  4 | date: "2025-01-09"
  5 | author: "Bridger"
  6 | published: true
  7 | ---
  8 | 
  9 | Welcome to the MDX Starter Template! This template combines the power of Next.js 15+, MDX, and shadcn/ui to create a modern content-focused website. Whether you're building a blog, documentation site, or portfolio, this starter provides everything you need to get up and running quickly.
 10 | 
 11 | The template is designed with developer experience in mind, offering a clean and intuitive structure that makes it easy to create beautiful, performant content. With built-in support for dark mode, syntax highlighting, and optimized images, you can focus on writing great content instead of configuring tooling.
 12 | 
 13 | - View on [GitHub](https://github.com/brijr/mdx-starter)
 14 | - Deploy with [Vercel](https://vercel.com)
 15 | 
 16 | ## Features
 17 | 
 18 | This starter template comes packed with modern features that make content creation a breeze. **Next.js 15+** brings the latest features from the framework, including improved performance, better developer experience, and enhanced server components. The App Router provides a file-system based routing system that makes organizing your content intuitive and scalable.
 19 | 
 20 | **MDX** allows you to write content using Markdown syntax while seamlessly integrating React components. This means you can use standard Markdown for your content, but also drop in interactive components, custom styling, or complex layouts whenever you need them. It's the best of both worlds - the simplicity of Markdown with the power of React.
 21 | 
 22 | **Shadcn UI** provides beautiful and accessible components out of the box. These components are built on Radix UI primitives, ensuring they're fully accessible and follow best practices. The design system is customizable and follows modern design principles, making it easy to create a cohesive look and feel across your site.
 23 | 
 24 | **Dark Mode** support is built-in and works seamlessly with Next.js and the theme system. Users can toggle between light and dark modes, and their preference is automatically saved. The theme system is designed to work with CSS variables, making it easy to customize colors and styles.
 25 | 
 26 | ## Markdown Examples
 27 | 
 28 | This section demonstrates various Markdown features and how they render in the template. Each example shows how you can structure your content to create engaging, readable articles and documentation.
 29 | 
 30 | ### Text Formatting
 31 | 
 32 | Regular text looks like this. You can make text **bold** to emphasize important points or _italic_ to add subtle emphasis. These formatting options help you create visual hierarchy and guide readers through your content.
 33 | 
 34 | You can also `highlight code` inline when you need to reference specific functions, variables, or technical terms. This is particularly useful when writing technical documentation or explaining code concepts. For longer code examples, you can create code blocks that support syntax highlighting:
 35 | 
 36 | ```typescript
 37 | function greet(name: string) {
 38 |   return `Hello, ${name}!`;
 39 | }
 40 | ```
 41 | 
 42 | ### Lists
 43 | 
 44 | Lists are a great way to organize information and break up long paragraphs. They make content more scannable and easier to digest, especially when presenting multiple related items or steps in a process.
 45 | 
 46 | Unordered lists work well for items that don't have a specific order or sequence:
 47 | 
 48 | - Next.js provides the framework and routing system
 49 | - React powers the component architecture
 50 | - TypeScript adds type safety and better developer experience
 51 | - Tailwind CSS handles styling with utility classes
 52 | 
 53 | Ordered lists are perfect for step-by-step instructions or when the sequence matters:
 54 | 
 55 | 1. Install dependencies using your preferred package manager
 56 | 2. Write your content in MDX files within the content directory
 57 | 3. Deploy to your hosting platform of choice
 58 | 
 59 | ### Blockquotes
 60 | 
 61 | Blockquotes are perfect for highlighting important information, quotes, or callouts. They create visual emphasis and draw attention to key points in your content. Use them sparingly to maintain their impact.
 62 | 
 63 | > MDX combines the simplicity of Markdown with the power of React components. This makes it an ideal choice for content creators who want the ease of writing in Markdown while having the flexibility to add interactive elements when needed.
 64 | 
 65 | You can use blockquotes for various purposes - highlighting key concepts, sharing quotes from other sources, or creating callout sections that stand out from the regular content flow.
 66 | 
 67 | ### Links
 68 | 
 69 | Links are essential for connecting your content to external resources, related articles, or documentation. They help readers dive deeper into topics and provide context for the information you're sharing.
 70 | 
 71 | When writing content, make sure your links are descriptive and provide value to the reader. Instead of "click here," use meaningful link text that describes what the reader will find when they click:
 72 | 
 73 | - Check out the [GitHub repository](https://github.com/brijr/mdx) to see the source code and contribute to the project
 74 | - Visit [shadcn/ui](https://ui.shadcn.com) for comprehensive component documentation and examples
 75 | - Learn more about [MDX](https://mdxjs.com) to understand how it works and explore advanced features
 76 | 
 77 | Good linking practices improve the user experience and help search engines understand the relationships between different pieces of content.
 78 | 
 79 | ### Images
 80 | 
 81 | Images are automatically enhanced with the Media component, which provides lightbox functionality out of the box. This means readers can click on any image to view it in full size within a beautiful overlay. The lightbox includes smooth animations and makes it easy to view images in detail without leaving the page.
 82 | 
 83 | The image component handles optimization automatically, ensuring fast loading times and good performance. Images are lazy-loaded by default, which means they only load when they're about to come into view, improving initial page load times.
 84 | 
 85 | ![Example Image](/image.webp)
 86 | 
 87 | You can also use images with explicit dimensions when you need more control over how they're displayed. This is useful when you want to ensure consistent sizing or when working with images that have specific aspect ratios:
 88 | 
 89 | ![Screenshot](/screenshot.jpg)
 90 | 
 91 | For optimal performance and automatic dimension handling, you can use static imports with the Media component. This approach automatically extracts width and height from the image, preventing layout shift:
 92 | 
 93 | ```jsx
 94 | import heroImage from "@/public/image.webp";
 95 | 
 96 | <Media src={heroImage} alt="Hero Image" />;
 97 | ```
 98 | 
 99 | Static imports provide better performance and automatic aspect ratio calculation, ensuring your images display correctly without any layout shift. The component automatically extracts the image dimensions and applies the correct aspect ratio to prevent layout shift.
100 | 
101 | All images support standard Markdown syntax, making it easy to add visual content to your articles. The component handles responsive sizing automatically, so your images will look great on all devices.
102 | 
103 | ### YouTube Videos
104 | 
105 | Embedding YouTube videos is straightforward with the YouTube component. The component uses Next.js optimized third-party loading, which means videos load faster and don't impact your site's performance. The implementation uses `lite-youtube-embed` under the hood, providing a lightweight solution that only loads the full YouTube player when the user clicks play.
106 | 
107 | This approach significantly improves page load times and reduces the initial JavaScript bundle size. Videos are lazy-loaded by default, so they won't affect your site's performance until users actually interact with them.
108 | 
109 | <YouTube videoid="dQw4w9WgXcQ" height={400} />
110 | 
111 | The YouTube component accepts all standard YouTube player parameters, giving you full control over how videos are displayed and played. This makes it easy to create custom video experiences that match your content's needs.
112 | 
113 | ### Bookmarks
114 | 
115 | The Bookmark component automatically fetches and displays rich link previews with metadata from any URL. This creates beautiful, informative link cards that show the title, description, image, and domain of the linked content. The component fetches Open Graph and Twitter Card metadata to provide a rich preview experience.
116 | 
117 | When you add a bookmark, it automatically extracts the most relevant information from the linked page, making it easy for readers to understand what they'll find when they click through. The component includes smooth loading states and handles errors gracefully, ensuring a great user experience even if metadata isn't available.
118 | 
119 | <Bookmark url="https://nextjs.org" />
120 | 
121 | You can use bookmarks to highlight important resources, reference articles, or create curated link collections. The component is fully responsive and includes hover effects that make it clear the card is clickable. All bookmarks open in a new tab with proper security attributes to protect your readers.
122 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # MDX Starter
  2 | 
  3 | A modern, type-safe MDX content site built with Next.js 16, Velite, and Tailwind CSS. Perfect for blogs, documentation sites, and content-driven projects that need the power of React components within Markdown.
  4 | 
  5 | ## Overview
  6 | 
  7 | This starter template provides a complete foundation for building content-rich websites with MDX. It uses Velite for type-safe content management, ensuring your frontmatter and content structure are validated at build time. With Next.js App Router and React Server Components, you get optimal performance and SEO out of the box.
  8 | 
  9 | ### Key Features
 10 | 
 11 | - **Next.js 16 App Router** - Built on the latest Next.js with React Server Components for optimal performance
 12 | - **Type-Safe Content** - [Velite](https://velite.js.org/) validates your MDX frontmatter and generates TypeScript types
 13 | - **MDX Support** - Write Markdown with embedded React components
 14 | - **Syntax Highlighting** - Beautiful code blocks with copy-to-clipboard functionality powered by Shiki
 15 | - **Dark Mode** - Automatic dark mode with system preference detection via next-themes
 16 | - **Modern UI** - Pre-configured [Shadcn/UI](https://ui.shadcn.com/) components with Tailwind CSS
 17 | - **SEO Optimized** - Automatic sitemap and robots.txt generation
 18 | - **TypeScript** - Full type safety across your entire project
 19 | - **File-Based Routing** - Content folder structure maps directly to URL routes
 20 | 
 21 | ## Prerequisites
 22 | 
 23 | Before you begin, ensure you have the following installed:
 24 | 
 25 | - **Node.js** 18.17 or later
 26 | - **pnpm** (recommended) or npm
 27 | 
 28 | ## Setup
 29 | 
 30 | ### 1. Clone or Use This Template
 31 | 
 32 | ```bash
 33 | # Clone the repository
 34 | git clone https://github.com/brijr/mdx.git my-mdx-site
 35 | cd my-mdx-site
 36 | 
 37 | # Or use as a GitHub template
 38 | # Click "Use this template" on GitHub
 39 | ```
 40 | 
 41 | ### 2. Install Dependencies
 42 | 
 43 | ```bash
 44 | pnpm install
 45 | ```
 46 | 
 47 | This will install all required dependencies including Next.js, Velite, Tailwind CSS, and UI components.
 48 | 
 49 | ### 3. Start Development Server
 50 | 
 51 | ```bash
 52 | pnpm dev
 53 | ```
 54 | 
 55 | This command does two things:
 56 | - Watches your `content/` directory for changes and rebuilds with Velite
 57 | - Starts the Next.js development server with Turbopack
 58 | 
 59 | Your site will be available at [http://localhost:3000](http://localhost:3000)
 60 | 
 61 | ### 4. Build for Production
 62 | 
 63 | ```bash
 64 | pnpm build
 65 | ```
 66 | 
 67 | This processes your MDX content with Velite and builds an optimized production bundle.
 68 | 
 69 | ### 5. Start Production Server
 70 | 
 71 | ```bash
 72 | pnpm start
 73 | ```
 74 | 
 75 | Serves your production build locally.
 76 | 
 77 | ## Project Structure
 78 | 
 79 | ```
 80 | mdx-starter/
 81 | ├── app/                      # Next.js app directory
 82 | │   ├── [...slug]/           # Dynamic route for all MDX pages
 83 | │   ├── api/                 # API routes (e.g., bookmark metadata)
 84 | │   ├── layout.tsx           # Root layout with theme provider
 85 | │   └── page.tsx             # Homepage
 86 | ├── components/
 87 | │   ├── markdown/            # MDX components (code blocks, media, etc.)
 88 | │   ├── posts/               # Post list and item components
 89 | │   ├── theme/               # Theme provider and toggle
 90 | │   └── ui/                  # Shadcn UI components
 91 | ├── content/                 # Your MDX content goes here
 92 | │   └── **/*.mdx            # All MDX files are auto-discovered
 93 | ├── lib/                     # Utility functions
 94 | ├── public/                  # Static assets
 95 | ├── velite.config.ts         # Velite configuration
 96 | ├── next.config.mjs          # Next.js configuration
 97 | └── tailwind.config.ts       # Tailwind CSS configuration
 98 | ```
 99 | 
100 | ## Writing Content
101 | 
102 | ### Creating MDX Files
103 | 
104 | Create MDX files anywhere in the `content/` directory. The folder structure automatically determines your URLs:
105 | 
106 | ```
107 | content/
108 | ├── about.mdx                    → /about
109 | ├── blog/
110 | │   ├── getting-started.mdx     → /blog/getting-started
111 | │   └── advanced-tips.mdx       → /blog/advanced-tips
112 | └── docs/
113 |     ├── installation.mdx         → /docs/installation
114 |     └── configuration.mdx        → /docs/configuration
115 | ```
116 | 
117 | ### Example MDX File
118 | 
119 | ```mdx
120 | ---
121 | title: "Getting Started with MDX"
122 | description: "Learn how to create your first MDX post"
123 | date: "2025-01-09"
124 | author: "Your Name"
125 | tags: ["nextjs", "mdx", "tutorial"]
126 | published: true
127 | ---
128 | 
129 | # Getting Started
130 | 
131 | This is your MDX content. You can use **markdown** syntax and React components!
132 | 
133 | ## Code Example
134 | 
135 | \`\`\`typescript
136 | const greeting = "Hello, MDX!";
137 | console.log(greeting);
138 | \`\`\`
139 | 
140 | Mix in React components for interactive content.
141 | ```
142 | 
143 | ### Frontmatter Schema
144 | 
145 | All frontmatter fields are validated by Velite. Here's what you can use:
146 | 
147 | | Field | Type | Required | Description |
148 | |-------|------|----------|-------------|
149 | | `title` | string | ✅ | Page title (max 99 characters) |
150 | | `description` | string | ❌ | SEO description (max 999 characters) |
151 | | `date` | ISO date | ✅ | Publication date (e.g., "2025-01-09") |
152 | | `author` | string | ❌ | Author name |
153 | | `tags` | string[] | ❌ | Array of tags for categorization |
154 | | `published` | boolean | ❌ | Show/hide post (default: `true`) |
155 | 
156 | ### Using React Components in MDX
157 | 
158 | You can import and use React components directly in your MDX files:
159 | 
160 | ```mdx
161 | import { Button } from '@/components/ui/button'
162 | 
163 | # My Page
164 | 
165 | Click this button:
166 | 
167 | <Button>Click Me</Button>
168 | ```
169 | 
170 | ## Development Workflow
171 | 
172 | ### Adding New Content
173 | 
174 | 1. Create a new `.mdx` file in the `content/` directory
175 | 2. Add required frontmatter (title and date)
176 | 3. Write your content using Markdown and React components
177 | 4. The dev server will automatically reload with your changes
178 | 
179 | ### Adding UI Components
180 | 
181 | This starter includes Shadcn/UI. Add new components with:
182 | 
183 | ```bash
184 | npx shadcn@latest add [component-name]
185 | ```
186 | 
187 | ### Modifying the Schema
188 | 
189 | Edit `velite.config.ts` to customize your content schema:
190 | 
191 | ```typescript
192 | const posts = defineCollection({
193 |   name: "Post",
194 |   pattern: "**/*.mdx",
195 |   schema: s.object({
196 |     // Add your custom fields here
197 |     customField: s.string().optional(),
198 |   })
199 | });
200 | ```
201 | 
202 | ## Customization
203 | 
204 | ### Styling
205 | 
206 | - **Tailwind Config**: Edit `tailwind.config.ts`
207 | - **Global Styles**: Modify `app/globals.css`
208 | - **Theme Colors**: Update CSS variables in `app/globals.css`
209 | 
210 | ### Site Metadata
211 | 
212 | Update site metadata in `app/layout.tsx`:
213 | 
214 | ```typescript
215 | export const metadata = {
216 |   title: "Your Site Name",
217 |   description: "Your site description",
218 |   // ... other metadata
219 | }
220 | ```
221 | 
222 | ## Deployment
223 | 
224 | ### Deploy to Vercel (Recommended)
225 | 
226 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fbrijr%2Fmdx)
227 | 
228 | 1. Click the button above or visit [vercel.com/new](https://vercel.com/new)
229 | 2. Import your repository
230 | 3. Vercel will auto-detect Next.js and configure build settings
231 | 4. Deploy!
232 | 
233 | ### Other Platforms
234 | 
235 | This is a standard Next.js application and can be deployed to any platform that supports Node.js:
236 | 
237 | - **Netlify**: Works with Next.js runtime
238 | - **Railway**: Easy Node.js deployment
239 | - **Self-hosted**: Use `pnpm build` and `pnpm start`
240 | 
241 | ### Environment Variables
242 | 
243 | No environment variables are required for basic functionality. Add your own as needed in `.env.local`:
244 | 
245 | ```bash
246 | # Example
247 | NEXT_PUBLIC_SITE_URL=https://yourdomain.com
248 | ```
249 | 
250 | ## Built With
251 | 
252 | - [Next.js 16](https://nextjs.org/) - React framework
253 | - [Velite](https://velite.js.org/) - Type-safe content toolkit
254 | - [MDX](https://mdxjs.com/) - Markdown + JSX
255 | - [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS
256 | - [Shadcn/UI](https://ui.shadcn.com/) - Re-usable component library
257 | - [next-themes](https://github.com/pacocoursey/next-themes) - Dark mode
258 | - [Shiki](https://shiki.style/) - Syntax highlighting
259 | - [TypeScript](https://www.typescriptlang.org/) - Type safety
260 | 
261 | ## Scripts
262 | 
263 | ```bash
264 | pnpm dev      # Start development server with Velite watch mode
265 | pnpm build    # Build for production
266 | pnpm start    # Start production server
267 | pnpm lint     # Run ESLint
268 | ```
269 | 
270 | ## License
271 | 
272 | MIT License - see [LICENSE](LICENSE) for details
273 | 
274 | ## Credits
275 | 
276 | Made by [Bridger Tower](https://bridgertower.com)
277 | 
278 | ## Support
279 | 
280 | Found an issue or have a question? Please [open an issue](https://github.com/brijr/mdx/issues) on GitHub.
281 | 


--------------------------------------------------------------------------------