camelmind 0.1.0

package/template/app/home/page.tsx

@@ -0,0 +1,136 @@
+import Link from "next/link"
+import { FileText, Search, Palette, Code, Rocket, BookOpen } from "lucide-react"
+import { loadNav, getSlugsFromConfig } from "@/lib/nav"
+import { loadVersions, getNavForVersion } from "@/lib/versions"
+import { getSession } from "@/lib/auth"
+import { getConfig, isAuthEnabled } from "@/lib/config"
+import { TopNav } from "@/components/Nav/TopNav"
+
+const FEATURE_CARDS = [
+  {
+    Icon: FileText,
+    title: "Markdown First",
+    description: "Write documentation in Markdown and MDX with a rich component library out of the box.",
+    href: "/guides/writing-docs",
+    cta: "Start writing",
+  },
+  {
+    Icon: Search,
+    title: "Instant Search",
+    description: "Built-in full-text search helps readers find answers quickly across your entire doc site.",
+    href: "/getting-started/overview",
+    cta: "Learn more",
+  },
+  {
+    Icon: Palette,
+    title: "Beautiful Themes",
+    description: "The Sahara theme ships with light and dark modes, tuned typography, and polished components.",
+    href: "/guides/mdx-components",
+    cta: "Explore components",
+  },
+  {
+    Icon: Code,
+    title: "Docs as Code",
+    description: "Keep documentation alongside your source code with YAML navigation and version support.",
+    href: "/guides/navigation",
+    cta: "Configure nav",
+  },
+  {
+    Icon: BookOpen,
+    title: "Role-Based Access",
+    description: "Optional SSO and RBAC let you gate internal pages while keeping public docs open.",
+    href: "/guides/auth-rbac",
+    cta: "Set up auth",
+  },
+  {
+    Icon: Rocket,
+    title: "Deploy Anywhere",
+    description: "Static export, Docker, or any Node.js host — publish your docs wherever you deploy.",
+    href: "/reference/configuration",
+    cta: "View config",
+  },
+]
+
+export default async function HomePage() {
+  const config = getConfig()
+  const nav = loadNav()
+  const { versions } = loadVersions()
+  const session = await getSession()
+  const authEnabled = isAuthEnabled()
+  const versionSlugs = Object.fromEntries(
+    versions.map((v) => [v.id, getSlugsFromConfig(getNavForVersion(v.id))])
+  )
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <TopNav
+        nav={nav.nav}
+        userRoles={session?.roles ?? []}
+        userName={session?.name ?? null}
+        authEnabled={authEnabled}
+        versions={versions}
+        currentVersionId={null}
+        currentSlug="/home"
+        versionSlugs={versionSlugs}
+      />
+
+      <main className="flex-1 bg-[var(--cm-bg-primary)]">
+        <section className="bg-[var(--cm-night-dune)] text-[var(--cm-parchment)] px-4 md:px-6 py-14 md:py-20 text-center">
+          <p className="text-[var(--cm-sandstone)] text-sm font-semibold uppercase tracking-widest mb-3">Open Source</p>
+          <h1 className="text-4xl md:text-5xl font-bold mb-4 font-[family-name:var(--cm-font-heading)]">{config.title}</h1>
+          <p className="text-[var(--cm-sandstone)] text-lg max-w-xl mx-auto mb-8">{config.tagline}</p>
+          <p className="text-[var(--cm-text-muted)] text-base max-w-2xl mx-auto mb-8">
+            Build beautiful documentation from Markdown and MDX. Publish instantly, deploy anywhere, and keep docs close to your code.
+          </p>
+          <div className="flex flex-wrap justify-center gap-3">
+            <Link href="/getting-started/installation" className="cm-primary-button px-5 py-2.5 text-sm font-medium hover:opacity-90 transition-opacity">
+              Get Started
+            </Link>
+            {config.links.github && (
+              <a
+                href={config.links.github}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="bg-transparent hover:bg-[var(--cm-bg-tertiary)] text-[var(--cm-parchment)] px-5 py-2.5 rounded-[var(--cm-radius-md)] text-sm font-medium transition-colors border border-[var(--cm-border)]"
+              >
+                View on GitHub
+              </a>
+            )}
+          </div>
+        </section>
+
+        <div className="max-w-5xl mx-auto px-4 md:px-6 py-10 md:py-16">
+          <section>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {FEATURE_CARDS.map((card) => (
+                <Link
+                  key={card.href}
+                  href={card.href}
+                  className="group flex flex-col gap-4 p-7 rounded-xl border border-[var(--cm-border)] bg-[var(--cm-bg-secondary)] hover:border-[var(--cm-oasis-teal)] hover:shadow-md transition-all"
+                >
+                  <card.Icon size={28} className="text-[var(--cm-oasis-teal)] shrink-0" />
+                  <h3 className="text-lg font-semibold text-[var(--cm-text-primary)]">{card.title}</h3>
+                  <p className="text-base text-[var(--cm-text-secondary)] leading-relaxed flex-1">{card.description}</p>
+                  <span className="text-sm font-medium text-[var(--cm-oasis-teal)] group-hover:text-[var(--cm-link-hover)] transition-colors">
+                    {card.cta} →
+                  </span>
+                </Link>
+              ))}
+            </div>
+          </section>
+        </div>
+      </main>
+
+      <footer className="border-t border-[var(--cm-border)] px-6 py-6 bg-[var(--cm-bg-secondary)]">
+        <div className="max-w-5xl mx-auto flex items-center justify-between text-xs text-[var(--cm-text-muted)]">
+          <span>© {new Date().getFullYear()} CamelMind. MIT License.</span>
+          {config.links.github && (
+            <a href={config.links.github} target="_blank" rel="noopener noreferrer" className="hover:text-[var(--cm-oasis-teal)] transition-colors">
+              GitHub
+            </a>
+          )}
+        </div>
+      </footer>
+    </div>
+  )
+}

package/template/app/icon.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Night Dune background -->
+  <rect width="32" height="32" rx="6" fill="#1E2833"/>
+
+  <!-- Camel silhouette in Camel Gold — overlapping shapes merge into one solid form -->
+
+  <!-- Body -->
+  <ellipse cx="18" cy="21" rx="10" ry="6" fill="#D8A15B"/>
+
+  <!-- Hump (rises above body, right of center) -->
+  <ellipse cx="21" cy="13" rx="7" ry="7" fill="#D8A15B"/>
+
+  <!-- Neck (connects head to body) -->
+  <rect x="5" y="15" width="6" height="8" fill="#D8A15B"/>
+
+  <!-- Head -->
+  <ellipse cx="8" cy="13" rx="4" ry="4" fill="#D8A15B"/>
+
+  <!-- Snout / muzzle -->
+  <ellipse cx="4.5" cy="16" rx="2.5" ry="2" fill="#D8A15B"/>
+
+  <!-- Front legs -->
+  <rect x="9" y="26" width="2.5" height="5" rx="1" fill="#D8A15B"/>
+  <rect x="14" y="26" width="2.5" height="5" rx="1" fill="#D8A15B"/>
+
+  <!-- Back legs -->
+  <rect x="20" y="26" width="2.5" height="5" rx="1" fill="#D8A15B"/>
+  <rect x="25" y="26" width="2.5" height="5" rx="1" fill="#D8A15B"/>
+</svg>

package/template/app/layout.tsx

@@ -0,0 +1,44 @@
+import type { Metadata } from "next"
+import { Alegreya, Inter, JetBrains_Mono } from "next/font/google"
+import "./globals.css"
+import { SearchModal } from "@/components/Search/SearchModal"
+import { ThemeProvider } from "next-themes"
+import { getConfig } from "@/lib/config"
+
+const alegreya = Alegreya({
+  subsets: ["latin"],
+  variable: "--font-alegreya",
+  display: "swap",
+})
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+})
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-jetbrains-mono",
+  display: "swap",
+})
+
+const config = getConfig()
+
+export const metadata: Metadata = {
+  title: config.title,
+  description: config.tagline,
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={`h-full antialiased ${alegreya.variable} ${inter.variable} ${jetbrainsMono.variable}`} suppressHydrationWarning>
+      <body className="min-h-full flex flex-col bg-[var(--cm-bg-primary)] text-[var(--cm-text-primary)]">
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          {children}
+          <SearchModal />
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}

package/template/app/login/LoginForm.tsx

@@ -0,0 +1,105 @@
+"use client"
+
+import { useState, Suspense } from "react"
+import { useRouter, useSearchParams } from "next/navigation"
+import { DEMO_PERSONAS } from "@/lib/auth-providers/dev-mock"
+import type { AuthProvider } from "@/lib/config-types"
+
+function LoginFormInner({ provider }: { provider: AuthProvider }) {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const returnTo = searchParams.get("returnTo") ?? "/home"
+  const error = searchParams.get("error")
+  const [loading, setLoading] = useState(false)
+
+  async function signInWithOidc() {
+    setLoading(true)
+    window.location.href = `/api/auth/signin?returnTo=${encodeURIComponent(returnTo)}`
+  }
+
+  async function signInWithPersona(persona: string) {
+    setLoading(true)
+    const res = await fetch("/api/auth/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ persona, returnTo }),
+    })
+    const data = await res.json()
+    if (data.redirectTo) router.push(data.redirectTo)
+    else setLoading(false)
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--cm-night-dune)] flex items-center justify-center px-4">
+      <div className="bg-[var(--cm-bg-secondary)] border border-[var(--cm-border)] rounded-xl shadow-lg p-8 w-full max-w-md">
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center gap-1 text-2xl mb-4">
+            <span className="text-[var(--cm-oasis-teal)] font-mono font-bold">&lt;</span>
+            <span className="text-[var(--cm-camel-gold)]">🐪</span>
+            <span className="text-[var(--cm-oasis-teal)] font-mono font-bold">&gt;</span>
+          </div>
+          <h1 className="text-2xl font-bold text-[var(--cm-text-primary)] font-[family-name:var(--cm-font-heading)]">CamelMind</h1>
+          <p className="text-[var(--cm-text-muted)] text-sm mt-1">Doc site spun up in minutes.</p>
+        </div>
+
+        {error && (
+          <p className="text-sm text-[var(--cm-danger)] bg-[var(--cm-danger-bg)] border border-[var(--cm-danger-border)] rounded-md px-3 py-2 mb-4">
+            Sign-in failed. Please try again.
+          </p>
+        )}
+
+        {provider === "oidc" ? (
+          <div className="space-y-4">
+            <p className="text-[var(--cm-text-secondary)] text-sm">
+              Sign in with your organization&apos;s identity provider to access restricted documentation.
+            </p>
+            <button
+              onClick={signInWithOidc}
+              disabled={loading}
+              className="w-full cm-primary-button px-4 py-2.5 text-sm font-medium transition-colors hover:opacity-90 disabled:opacity-50"
+            >
+              {loading ? "Redirecting…" : "Sign in with SSO"}
+            </button>
+          </div>
+        ) : (
+          <>
+            <div className="mb-6">
+              <p className="text-[var(--cm-text-primary)] font-medium text-sm mb-1">Development sign-in</p>
+              <p className="text-[var(--cm-text-muted)] text-xs">
+                Choose a persona to simulate role-based access. In production, set{" "}
+                <code className="text-[var(--cm-oasis-teal)]">auth.provider: &quot;oidc&quot;</code> in{" "}
+                <code className="text-[var(--cm-oasis-teal)]">camelmind.config.ts</code>.
+              </p>
+            </div>
+            <div className="space-y-3">
+              {DEMO_PERSONAS.map((persona) => (
+                <button
+                  key={persona.id}
+                  onClick={() => signInWithPersona(persona.id)}
+                  disabled={loading}
+                  className="w-full text-left bg-[var(--cm-bg-tertiary)] hover:bg-[var(--cm-dune-beige)] border border-[var(--cm-border)] rounded-lg px-4 py-3 transition-colors disabled:opacity-50"
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="text-[var(--cm-text-primary)] text-sm font-medium">{persona.label}</span>
+                    <span className="text-xs px-2 py-0.5 rounded border border-[var(--cm-border)] font-mono text-[var(--cm-text-muted)]">
+                      {persona.badge}
+                    </span>
+                  </div>
+                  <p className="text-[var(--cm-text-muted)] text-xs mt-0.5">{persona.description}</p>
+                </button>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function LoginForm({ provider }: { provider: AuthProvider }) {
+  return (
+    <Suspense>
+      <LoginFormInner provider={provider} />
+    </Suspense>
+  )
+}

package/template/app/login/page.tsx

@@ -0,0 +1,9 @@
+import { redirect } from "next/navigation"
+import { getAuthConfig, isAuthEnabled } from "@/lib/config"
+import { LoginForm } from "./LoginForm"
+
+export default function LoginPage() {
+  if (!isAuthEnabled()) redirect("/home")
+  const { provider } = getAuthConfig()
+  return <LoginForm provider={provider} />
+}

package/template/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation"
+
+export default function Home() {
+  redirect("/home")
+}

package/template/camelmind.config.ts

@@ -0,0 +1,33 @@
+import type { CamelMindConfig } from "./lib/config-types"
+
+const config: CamelMindConfig = {
+  title: "My Docs",
+  tagline: "Documentation made simple.",
+  url: process.env.CAMELMIND_URL ?? "http://localhost:3000",
+
+  contentDir: "content",
+  navFile: "nav/nav.yml",
+  versionsFile: "versions.yml",
+
+  auth: {
+    enabled: process.env.CAMELMIND_AUTH_ENABLED === "true",
+    requireLogin: process.env.CAMELMIND_AUTH_REQUIRE_LOGIN === "true",
+    provider: (process.env.CAMELMIND_AUTH_PROVIDER as "dev-mock" | "oidc") ?? "dev-mock",
+
+    oidc: {
+      issuer: process.env.OIDC_ISSUER ?? "",
+      clientId: process.env.OIDC_CLIENT_ID ?? "",
+      clientSecret: process.env.OIDC_CLIENT_SECRET ?? "",
+      rolesClaim: process.env.OIDC_ROLES_CLAIM ?? "realm_access.roles",
+      roleMapping: {},
+    },
+
+    publicPaths: ["/", "/home", "/login", "/api/auth"],
+  },
+
+  links: {
+    github: "",
+  },
+}
+
+export default config

package/template/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link"
+import type { NavGroup, NavEntry, NavChild } from "@/lib/nav-types"
+
+type Crumb = { label: string; slug?: string }
+
+type Props = {
+  activeGroup?: NavGroup | null
+  sectionEntry?: NavEntry | null
+  currentEntry?: NavEntry | NavChild | null
+}
+
+export function Breadcrumbs({ activeGroup, sectionEntry, currentEntry }: Props) {
+  const crumbs: Crumb[] = []
+
+  if (activeGroup) crumbs.push({ label: activeGroup.label })
+  if (sectionEntry && sectionEntry.slug !== currentEntry?.slug) {
+    crumbs.push({ label: sectionEntry.label, slug: sectionEntry.slug })
+  }
+  if (currentEntry) crumbs.push({ label: currentEntry.label })
+
+  if (crumbs.length <= 1) return null
+
+  return (
+    <nav className="flex items-center gap-1.5 text-xs text-gray-400 dark:text-gray-500 mb-4">
+      {crumbs.map((crumb, i) => (
+        <span key={i} className="flex items-center gap-1.5">
+          {i > 0 && <span>/</span>}
+          {crumb.slug ? (
+            <Link href={crumb.slug} className="hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
+              {crumb.label}
+            </Link>
+          ) : (
+            <span className={i === crumbs.length - 1 ? "text-gray-600 dark:text-gray-300 font-medium" : ""}>
+              {crumb.label}
+            </span>
+          )}
+        </span>
+      ))}
+    </nav>
+  )
+}

package/template/components/Code/CodeBlock.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { useState } from "react"
+
+export function CodeBlock({ children, className }: { children: string; className?: string }) {
+  const [copied, setCopied] = useState(false)
+  const language = className?.replace("language-", "") ?? ""
+
+  const copy = () => {
+    navigator.clipboard.writeText(children)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="relative group my-4 rounded-lg overflow-hidden border border-gray-200">
+      {language && (
+        <div className="flex items-center justify-between px-4 py-2 border-b border-gray-700" style={{ backgroundColor: "#13151a" }}>
+          <span className="text-xs text-gray-400 font-mono">{language}</span>
+          <button
+            onClick={copy}
+            className="text-xs text-gray-400 hover:text-white transition-colors flex items-center gap-1"
+          >
+            {copied ? (
+              <>
+                <svg className="w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+                <span className="text-green-400">Copied</span>
+              </>
+            ) : (
+              <>
+                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+                Copy
+              </>
+            )}
+          </button>
+        </div>
+      )}
+      {!language && (
+        <button
+          onClick={copy}
+          className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 text-xs text-gray-400 hover:text-white bg-gray-800 rounded px-2 py-1 transition-all flex items-center gap-1"
+        >
+          {copied ? "Copied ✓" : "Copy"}
+        </button>
+      )}
+      <pre className="text-gray-100 p-4 overflow-x-auto text-sm leading-relaxed font-mono" style={{ backgroundColor: "#1a1d23" }}>
+        <code>{children}</code>
+      </pre>
+    </div>
+  )
+}

package/template/components/DocActions/DocActions.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { FileText, Download } from "lucide-react"
+
+type Props = {
+  file: string
+  downloadPdf?: string
+  offline?: boolean
+}
+
+export function DocActions({ file, downloadPdf, offline }: Props) {
+  // In offline builds, /api/raw doesn't exist — only show PDF download if present
+  if (offline) {
+    if (!downloadPdf) return null
+    return (
+      <div className="flex items-center gap-5 mb-6 pb-5 border-b border-gray-200">
+        <a
+          href={downloadPdf}
+          download
+          className="flex items-center gap-1.5 text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"
+        >
+          <Download size={14} />
+          Download PDF
+        </a>
+      </div>
+    )
+  }
+
+  const rawBase = `/api/raw?file=${encodeURIComponent(file)}`
+
+  return (
+    <div className="flex items-center gap-5 mb-6 pb-5 border-b border-gray-200">
+      <a
+        href={rawBase}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex items-center gap-1.5 text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"
+      >
+        <FileText size={14} />
+        View as Markdown
+      </a>
+      <a
+        href={`${rawBase}&download=1`}
+        download
+        className="flex items-center gap-1.5 text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"
+      >
+        <Download size={14} />
+        Download Markdown
+      </a>
+      {downloadPdf && (
+        <a
+          href={downloadPdf}
+          download
+          className="flex items-center gap-1.5 text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"
+        >
+          <Download size={14} />
+          Download PDF
+        </a>
+      )}
+    </div>
+  )
+}