create-audora-next 0.1.6 → 2.0.0

package/templates/blog/src/blogs/data/mdx.ts

@@ -0,0 +1,68 @@
+import fs from "fs";
+import path from "path";
+import matter from "gray-matter";
+
+type Metadata = {
+  title: string;
+  publishedAt: string;
+  summary: string;
+  image?: string;
+  repoUrl?: string;
+};
+
+type BlogPost = {
+  metadata: Metadata;
+  slug: string;
+  content: string;
+};
+
+function getMDXFiles(dir: string): string[] {
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+  const files = entries
+    .filter((entry) => entry.isFile() && path.extname(entry.name) === ".mdx")
+    .map((entry) => path.join(dir, entry.name));
+
+  const folders = entries.filter((entry) => entry.isDirectory());
+
+  const nestedFiles = folders.flatMap((folder) =>
+    getMDXFiles(path.join(dir, folder.name)),
+  );
+
+  return [...files, ...nestedFiles];
+}
+
+function readMDXFile(filePath: string) {
+  const rawContent = fs.readFileSync(filePath, "utf-8");
+  return matter(rawContent);
+}
+
+function getMDXData(dir: string): BlogPost[] {
+  const mdxFiles = getMDXFiles(dir);
+  return mdxFiles.map((file) => {
+    const { data, content } = readMDXFile(file);
+    const slug = path.basename(file, path.extname(file));
+
+    return {
+      metadata: data as Metadata,
+      slug,
+      content,
+    };
+  });
+}
+
+export function getBlogPosts() {
+  return getMDXData(path.join(process.cwd(), "src/blogs/content"));
+}
+
+export function getBlogPost(slug: string) {
+  const posts = getMDXData(path.join(process.cwd(), "src/blogs/content"));
+
+  const post = posts.find((p) => p.slug === slug);
+
+  if (!post) {
+    return null;
+  }
+
+  return post;
+}

package/templates/blog/src/blogs/utils/extract-headings.ts

@@ -0,0 +1,38 @@
+export type Heading = {
+  id: string;
+  text: string;
+  level: 2 | 3;
+};
+
+/**
+ * Extracts h2 and h3 headings from MDX content
+ * Creates slug IDs matching rehype-slug behavior
+ */
+export function extractHeadings(content: string): Heading[] {
+  const headings: Heading[] = [];
+
+  // Match ## and ### headings in MDX
+  const headingRegex = /^(#{2,3})\s+(.+)$/gm;
+  let match;
+
+  while ((match = headingRegex.exec(content)) !== null) {
+    const level = match[1].length as 2 | 3;
+    const text = match[2]
+      .replace(/\*\*([^*]+)\*\*/g, "$1") // Remove bold
+      .replace(/\*([^*]+)\*/g, "$1") // Remove italic
+      .replace(/`([^`]+)`/g, "$1") // Remove code blocks
+      .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1") // Remove links, keep text
+      .trim();
+
+    // Generate slug matching rehype-slug styles (which seems to map each space to a dash)
+    const id = text
+      .toLowerCase()
+      .replace(/[^\w\s-]/g, "") // Remove special characters
+      .replace(/\s/g, "-") // Replace each space with a hyphen (don't squash)
+      .replace(/^-|-$/g, ""); // Remove leading/trailing hyphens
+
+    headings.push({ id, text, level });
+  }
+
+  return headings;
+}

package/templates/blog/src/components/copyable-code.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useState } from "react";
+import { CopyIcon, CheckIcon } from "./icons";
+
+interface CopyableCodeProps {
+  code: string;
+}
+
+export const CopyableCode = ({ code }: CopyableCodeProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+
+  return (
+    <div className="relative mx-auto mt-12 max-w-lg rounded-md border border-neutral-200 bg-neutral-200 p-4 pr-12 dark:border-neutral-800 dark:bg-neutral-900">
+      <button
+        onClick={handleCopy}
+        className="absolute top-3 right-3 inline-flex h-8 w-8 items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-neutral-300 hover:text-neutral-950 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
+        aria-label="Copy code"
+      >
+        {copied ? (
+          <CheckIcon className="h-4 w-4" />
+        ) : (
+          <CopyIcon className="h-4 w-4" />
+        )}
+      </button>
+      <code className="block text-xs text-neutral-700 md:text-sm dark:text-neutral-300">
+        <span className="text-neutral-400 dark:text-neutral-600">$</span> {code}
+      </code>
+    </div>
+  );
+};

package/templates/blog/src/components/footer.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+
+export function Footer() {
+  return (
+    <footer className="border-t border-border py-6">
+      <div className="container flex max-w-5xl flex-wrap items-center justify-center gap-4 px-4 mx-auto text-center">
+        <Link
+          href="/llms.txt"
+          className="text-xs text-muted-foreground transition-colors hover:text-foreground"
+        >
+          llms.txt
+        </Link>
+        <span className="text-border" aria-hidden>
+          ·
+        </span>
+        <Link
+          href="/llms-full.txt"
+          className="text-xs text-muted-foreground transition-colors hover:text-foreground"
+        >
+          llms-full.txt
+        </Link>
+      </div>
+    </footer>
+  );
+}

package/templates/blog/src/components/header.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import { SITE_CONFIG } from "@/config/site";
+import { ThemeToggle } from "@/components/theme-toggle";
+
+export function Header() {
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-14 max-w-5xl items-center justify-between px-4 mx-auto">
+        <Link
+          href="/"
+          className="text-sm font-semibold tracking-tight text-foreground transition-colors hover:text-foreground/80"
+        >
+          {SITE_CONFIG.name}
+        </Link>
+        <nav className="flex items-center gap-4">
+          <Link
+            href="/blogs"
+            className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Blog
+          </Link>
+          <ThemeToggle />
+        </nav>
+      </div>
+    </header>
+  );
+}

package/templates/blog/src/components/icons.tsx

@@ -0,0 +1,84 @@
+export const MoonIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+    </svg>
+  );
+};
+
+export const SunIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2" />
+      <path d="M12 20v2" />
+      <path d="m4.93 4.93 1.41 1.41" />
+      <path d="m17.66 17.66 1.41 1.41" />
+      <path d="M2 12h2" />
+      <path d="M20 12h2" />
+      <path d="m6.34 17.66-1.41 1.41" />
+      <path d="m19.07 4.93-1.41 1.41" />
+    </svg>
+  );
+};
+
+export const CopyIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2" />
+    </svg>
+  );
+};
+
+export const CheckIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+};

package/templates/blog/src/components/section-heading.tsx

@@ -0,0 +1,11 @@
+export default function SectionHeading({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <h2 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl py-4">
+      {children}
+    </h2>
+  );
+}

package/templates/blog/src/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ComponentProps } from "react";
+
+export function ThemeProvider({
+  children,
+  ...props
+}: ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

package/templates/blog/src/components/theme-toggle.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { MoonIcon, SunIcon } from "./icons";
+
+export const ThemeToggle = () => {
+  const { setTheme, resolvedTheme } = useTheme();
+
+  return (
+    <button
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+      className="inline-flex h-9 w-9 items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-zinc-100 focus-visible:ring-1 focus-visible:ring-zinc-950 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-zinc-800 dark:focus-visible:ring-zinc-300"
+      aria-label="Toggle theme"
+    >
+      <SunIcon className="hidden text-muted-foreground transition-colors hover:text-foreground dark:block" />
+      <MoonIcon className="block text-muted-foreground transition-colors hover:text-foreground dark:hidden" />
+      <span className="sr-only">Toggle theme</span>
+    </button>
+  );
+};

package/templates/blog/src/components/view-all-link.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowUpRight } from "lucide-react";
+import { motion } from "motion/react";
+
+interface ViewAllLinkProps {
+  href: string;
+  children?: React.ReactNode;
+}
+
+const MotionLink = motion.create(Link);
+
+export function ViewAllLink({ href, children = "View All" }: ViewAllLinkProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "-40px" }}
+      transition={{
+        type: "spring",
+        stiffness: 400,
+        damping: 30,
+      }}
+    >
+      <MotionLink
+        href={href}
+        className="group inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-5 py-2.5 text-sm font-medium text-white ring-2 ring-zinc-900/10 ring-offset-2 transition-all hover:bg-zinc-800 active:scale-95 dark:bg-zinc-100 dark:text-zinc-900 dark:ring-zinc-100/20 dark:ring-offset-black dark:hover:bg-zinc-200"
+        whileHover="hover"
+      >
+        {children}
+        <div className="relative h-4 w-4 overflow-hidden">
+          <motion.div
+            variants={{
+              hover: { x: "150%", y: "-150%" },
+            }}
+            transition={{ duration: 0.3, ease: "easeInOut" }}
+            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+          >
+            <ArrowUpRight className="h-4 w-4" />
+          </motion.div>
+          <motion.div
+            initial={{ x: "-150%", y: "150%" }}
+            variants={{
+              hover: { x: "0%", y: "0%" },
+            }}
+            transition={{ duration: 0.3, ease: "easeInOut" }}
+            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+          >
+            <ArrowUpRight className="h-4 w-4" />
+          </motion.div>
+        </div>
+      </MotionLink>
+    </motion.div>
+  );
+}

package/templates/blog/src/config/site.ts

@@ -0,0 +1,19 @@
+import SITE_DATA from "@/data/site";
+
+export const SITE_CONFIG = {
+  name: SITE_DATA.name,
+  url: SITE_DATA.url,
+  ogImage: SITE_DATA.ogImage,
+  tagline: SITE_DATA.tagline,
+  description: SITE_DATA.description,
+  shortDescription: SITE_DATA.shortDescription,
+  alternateNames: SITE_DATA.alternateNames,
+  twitterHandle: SITE_DATA.twitterHandle,
+  keywords: SITE_DATA.keywords,
+  features: SITE_DATA.features,
+};
+
+export const META_THEME_COLORS = {
+  light: "#ededed",
+  dark: "#09090b",
+};

package/templates/blog/src/data/llms.ts

@@ -0,0 +1,112 @@
+const LLMS_DATA = {
+  // Quick start command for cloning the starter
+  quickStart: "bunx degit AudoraLabs/next-starter my-app",
+
+  // GitHub repository URL
+  repository: "https://github.com/AudoraLabs/next-starter",
+
+  // Tech stack summary
+  techStack: [
+    "Next.js 16 with App Router",
+    "React 19",
+    "TypeScript (strict mode)",
+    "Tailwind CSS 4",
+    "Bun (package manager)",
+    "ESLint 9 (flat config)",
+    "Prettier",
+    "React Compiler",
+  ],
+
+  // Key features for the summary
+  features: [
+    "SEO-ready with robots.ts, sitemap.ts, and Open Graph metadata",
+    "Title templates and metadataBase configured",
+    "Path alias @/* mapped to ./src/*",
+    "Dark mode support via CSS custom properties",
+    "Geist font family pre-configured",
+    "Pre-commit hooks with Husky and lint-staged",
+  ],
+
+  // Folder structure for llms-full.txt
+  folderStructure: `src/
+├── app/
+│   ├── layout.tsx       # Root layout with metadata
+│   ├── page.tsx         # Home page
+│   ├── manifest.ts      # PWA manifest
+│   ├── robots.ts        # robots.txt generation
+│   ├── sitemap.ts       # Sitemap generation
+│   ├── llms.txt/        # AI-friendly summary (this file)
+│   └── llms-full.txt/   # AI-friendly full documentation
+├── components/
+│   ├── icons.tsx        # Icon components
+│   ├── theme-provider.tsx  # Theme context provider
+│   └── theme-toggle.tsx    # Dark/light mode toggle
+├── config/
+│   └── site.ts          # Site configuration exports
+├── data/
+│   ├── site.ts          # Site data (name, URL, description)
+│   └── llms.ts          # LLMs.txt content configuration
+├── lib/
+│   └── seo.ts           # SEO utilities and JSON-LD generators
+├── styles/
+│   └── globals.css      # Global styles and Tailwind imports
+└── utils/
+    └── cn.ts            # Class name utility`,
+
+  // Development commands
+  commands: {
+    dev: "bun dev",
+    build: "bun run build",
+    start: "bun start",
+    lint: "bun lint",
+    format: "bun format",
+  },
+
+  // SEO documentation for llms-full.txt
+  seoDetails: `## SEO Configuration
+
+This starter includes production-ready SEO defaults:
+
+### Metadata (src/lib/seo.ts)
+- getMetadata(): Default site metadata with Open Graph and Twitter cards
+- getPageMetadata(): Page-specific metadata generator
+- getViewport(): Viewport configuration with theme colors
+
+### Structured Data (JSON-LD)
+- getWebSiteJsonLd(): WebSite schema
+- getOrganizationJsonLd(): Organization schema
+- getBreadcrumbJsonLd(): Breadcrumb navigation schema
+
+### Configuration (src/data/site.ts)
+Customize these values for your project:
+- name: Site name
+- url: Base URL for canonical links
+- ogImage: Default Open Graph image
+- tagline: Short tagline
+- description: Full description
+- twitterHandle: Twitter/X handle
+
+### Files
+- robots.ts: Generates robots.txt with sitemap reference
+- sitemap.ts: Dynamic sitemap generation
+- manifest.ts: PWA web app manifest`,
+
+  // Conventions documentation
+  conventions: `## Conventions
+
+### Path Aliases
+Use @/* to import from src/*:
+- import { cn } from "@/utils/cn"
+- import { SITE_CONFIG } from "@/config/site"
+
+### Theme
+Dark mode uses CSS custom properties. Toggle with ThemeProvider and ThemeToggle components.
+
+### Components
+No component library included by default. Add shadcn/ui or Radix as needed.
+
+### Styling
+Tailwind CSS 4 with PostCSS. Global styles in src/styles/globals.css.`,
+};
+
+export default LLMS_DATA;

package/templates/blog/src/data/site.ts

@@ -0,0 +1,52 @@
+const SITE_DATA = {
+  name: "next-starter",
+  url: process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000",
+  ogImage:
+    process.env.NEXT_PUBLIC_OG_IMAGE ?? "/images/screenshot-desktop-light.webp",
+
+  tagline: "Kickstart your Next.js project",
+  description: "A modern, performant starter kit for Next.js applications.",
+  shortDescription:
+    "A modern, performant starter kit for Next.js applications.",
+
+  alternateNames: ["next-starter", "Next Starter", "NextJS Starter"],
+
+  twitterHandle: "@nextstarter",
+
+  keywords: [
+    "next-starter",
+    "next.js starter",
+    "react boilerplate",
+    "next.js boilerplate",
+    "nextjs template",
+    "starter project",
+    "next.js template",
+    "typescript nextjs starter",
+    "boilerplate for next.js",
+    "web app starter",
+  ],
+
+  features: [
+    {
+      title: "MDX blog",
+      description:
+        "Write posts in MDX with frontmatter, code blocks, and components.",
+    },
+    {
+      title: "SEO & metadata",
+      description:
+        "Built-in metadata, Open Graph, and JSON-LD for search and sharing.",
+    },
+    {
+      title: "Dark mode",
+      description: "System-aware theme toggle with persistent preference.",
+    },
+    {
+      title: "TypeScript",
+      description:
+        "Full TypeScript support and strict mode for safer refactors.",
+    },
+  ],
+};
+
+export default SITE_DATA;