create-opendocs 0.1.0

package/template/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "__PROJECT_NAME__",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@tailwindcss/typography": "^0.5.19",
+    "clsx": "^2.1.1",
+    "gray-matter": "^4.0.3",
+    "lucide-react": "^0.575.0",
+    "next": "14.2.35",
+    "next-mdx-remote": "^6.0.0",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.35",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

package/template/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

package/template/src/app/[[...slug]]/page.tsx

@@ -0,0 +1,198 @@
+import { getDocBySlug, getAllDocsSlugs, getConfig, getFlatDocLinks } from "@/lib/docs";
+import { notFound } from "next/navigation";
+import { MDXRemote } from "next-mdx-remote/rsc";
+import { Metadata } from "next";
+import { ChevronRight, Home, ArrowRight } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+
+export async function generateStaticParams() {
+    const slugs = getAllDocsSlugs();
+    return slugs.map((slug) => ({
+        slug: slug.length > 0 ? slug : undefined,
+    }));
+}
+
+export async function generateMetadata({ params }: { params: { slug?: string[] } }): Promise<Metadata> {
+    const doc = getDocBySlug(params.slug);
+    if (!doc) {
+        return {
+            title: params.slug && params.slug.length > 0 ? "Not Found" : "Setup Required",
+            description: "__SITE_DESCRIPTION__"
+        };
+    }
+    return {
+        title: `${doc.title} - __SITE_NAME__`,
+        description: `Read documentation for ${doc.title}.`,
+    };
+}
+
+export default async function DocPage({ params }: { params: { slug?: string[] } }) {
+    const doc = getDocBySlug(params.slug);
+    const config = getConfig();
+
+    const isRoot = !params.slug || params.slug.length === 0;
+
+    if (!doc) {
+        if (isRoot) {
+            return <SetupGuide />;
+        }
+        notFound();
+    }
+
+    const currSlugStr = isRoot ? '/' : '/' + (params.slug || []).join('/');
+
+    const flatPages = getFlatDocLinks();
+    const currentIndex = flatPages.findIndex(p => p.slug === currSlugStr);
+    const nextDoc = currentIndex !== -1 && currentIndex < flatPages.length - 1 ? flatPages[currentIndex + 1] : null;
+
+    // Premium Custom MDX Styling setup matching Fixoria's brand
+    const components = {
+        h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-zinc-400 mb-8 pb-4 border-b border-zinc-800/60" {...props} />,
+        h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => <h2 className="text-2xl md:text-3xl font-semibold tracking-tight mt-12 mb-6 pb-2 border-b border-zinc-800/40 text-zinc-100" {...props} />,
+        h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => <h3 className="text-xl font-medium tracking-tight mt-8 mb-4 text-zinc-200" {...props} />,
+        p: (props: React.HTMLAttributes<HTMLParagraphElement>) => <p className="leading-7 text-zinc-400 mb-6" {...props} />,
+        ul: (props: React.HTMLAttributes<HTMLUListElement>) => <ul className="list-disc leading-7 text-zinc-400 mb-6 pl-6 space-y-2 marker:text-zinc-600" {...props} />,
+        ol: (props: React.HTMLAttributes<HTMLOListElement>) => <ol className="list-decimal leading-7 text-zinc-400 mb-6 pl-6 space-y-2 marker:text-zinc-600" {...props} />,
+        li: (props: React.HTMLAttributes<HTMLLIElement>) => <li className="pl-1" {...props} />,
+        a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => <a className="text-white font-medium hover:text-blue-400 underline decoration-zinc-700 hover:decoration-blue-400/50 transition-all underline-offset-4" {...props} />,
+        blockquote: (props: React.QuoteHTMLAttributes<HTMLQuoteElement>) => <blockquote className="border-l-4 border-white/20 pl-6 italic text-zinc-300 my-8 bg-zinc-900/40 py-4 pr-6 rounded-r-2xl shadow-sm" {...props} />,
+        code: (props: React.HTMLAttributes<HTMLElement>) => <code className="bg-zinc-900 border border-zinc-800/80 rounded-md px-1.5 py-0.5 font-mono text-[0.85em] text-zinc-200 shadow-sm" {...props} />,
+        pre: (props: React.HTMLAttributes<HTMLPreElement>) => <pre className="bg-[#09090b] border border-zinc-800/80 rounded-2xl p-5 overflow-x-auto my-8 shadow-2xl custom-scrollbar" {...props} />,
+        table: (props: React.TableHTMLAttributes<HTMLTableElement>) => <div className="overflow-x-auto my-8 border border-zinc-800/80 rounded-2xl shadow-sm"><table className="w-full text-left text-sm" {...props} /></div>,
+        th: (props: React.ThHTMLAttributes<HTMLTableCellElement>) => <th className="border-b border-zinc-800 bg-zinc-900/60 p-4 font-medium text-zinc-200 text-sm tracking-wide" {...props} />,
+        td: (props: React.TdHTMLAttributes<HTMLTableCellElement>) => <td className="p-4 border-b border-zinc-800/40 text-zinc-400" {...props} />,
+        hr: (props: React.HTMLAttributes<HTMLHRElement>) => <hr className="my-10 border-zinc-800" {...props} />,
+    };
+
+    const breadcrumbs = doc.slug && doc.slug.length > 0 ? doc.slug : [];
+
+    return (
+        <article className="max-w-[750px] w-full animate-in fade-in slide-in-from-bottom-4 duration-700 ease-out">
+
+            {/* Breadcrumb Navigation */}
+            {breadcrumbs.length > 0 && (
+                <nav className="flex flex-wrap items-center gap-2 text-sm text-zinc-500 font-medium mb-12">
+                    <Link href="/" className="hover:text-white transition-colors flex items-center gap-1.5">
+                        <Home className="w-3.5 h-3.5" />
+                    </Link>
+                    {breadcrumbs.map((crumb, idx) => (
+                        <div key={idx} className="flex items-center gap-2">
+                            <ChevronRight className="w-3.5 h-3.5 text-zinc-700" />
+                            <span className={idx === breadcrumbs.length - 1 ? 'text-zinc-200' : 'text-zinc-500 capitalize'}>
+                                {crumb.replace(/-/g, ' ')}
+                            </span>
+                        </div>
+                    ))}
+                </nav>
+            )}
+
+            {/* Main Content Render */}
+            <div className="prose-custom max-w-none text-base">
+                <MDXRemote source={doc.content} components={components} />
+            </div>
+
+            {/* Up Next Section */}
+            {nextDoc && (
+                <div className="mt-16">
+                    <p className="text-sm font-medium text-zinc-500 mb-4 uppercase tracking-wider">Up next</p>
+                    <Link
+                        href={nextDoc.slug}
+                        className="group relative flex flex-col p-6 rounded-2xl border border-zinc-800/60 bg-zinc-900/20 hover:bg-zinc-800/40 transition-all overflow-hidden"
+                    >
+                        {/* Subtle gradient background on hover */}
+                        <div className="absolute inset-0 bg-gradient-to-br from-zinc-800/0 via-zinc-800/0 to-zinc-800/20 opacity-0 group-hover:opacity-100 transition-opacity" />
+
+                        <div className="relative flex items-center justify-between">
+                            <div>
+                                <h4 className="text-lg font-semibold text-zinc-200 group-hover:text-white transition-colors mb-1">
+                                    {nextDoc.title}
+                                </h4>
+                                {nextDoc.categoryTitle && (
+                                    <p className="text-sm text-zinc-500 group-hover:text-zinc-400 transition-colors">
+                                        {nextDoc.categoryTitle}
+                                    </p>
+                                )}
+                            </div>
+                            <div className="w-10 h-10 rounded-full bg-zinc-800/50 flex items-center justify-center group-hover:bg-white group-hover:text-black transition-colors">
+                                <ArrowRight className="w-5 h-5 text-zinc-400 group-hover:text-black transition-colors" />
+                            </div>
+                        </div>
+                    </Link>
+                </div>
+            )}
+
+            {/* Bottom Engagement Footer */}
+            {config.contactSupport && (config.contactSupport.title || config.contactSupport.description || config.contactSupport.buttonText) && (
+                <div className="mt-20 pt-10 border-t border-zinc-800/60 flex flex-col md:flex-row justify-between items-start md:items-center gap-6 text-sm text-zinc-500 bg-zinc-900/10 rounded-2xl p-6">
+                    <div>
+                        {config.contactSupport.title && <p className="text-zinc-300 font-medium mb-1">{config.contactSupport.title}</p>}
+                        {config.contactSupport.description && <p>{config.contactSupport.description}</p>}
+                    </div>
+                    {config.contactSupport.buttonText && config.contactSupport.buttonLink && (
+                        <a href={config.contactSupport.buttonLink} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 px-4 py-2 bg-white text-black font-semibold rounded-lg hover:bg-zinc-200 transition-colors shadow-lg shadow-white/10 group">
+                            {config.contactSupport.buttonText}
+                            <ArrowRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
+                        </a>
+                    )}
+                </div>
+            )}
+        </article>
+    );
+}
+
+function SetupGuide() {
+    return (
+        <div className="max-w-[750px] w-full animate-in fade-in slide-in-from-bottom-4 duration-700 ease-out py-12">
+            <div className="p-8 rounded-2xl border border-zinc-800 bg-zinc-900/20 backdrop-blur-sm shadow-2xl">
+                <div className="w-12 h-12 rounded-xl bg-white flex items-center justify-center mb-8 shadow-lg shadow-white/5">
+                    <Home className="w-6 h-6 text-black" />
+                </div>
+
+                <h1 className="text-4xl font-extrabold tracking-tight text-white mb-4">
+                    Setup Your Homepage
+                </h1>
+
+                <p className="text-zinc-400 text-lg mb-8 leading-relaxed">
+                    It looks like you haven&apos;t configured a homepage yet. Follow these simple steps to get your landing page live.
+                </p>
+
+                <div className="space-y-6">
+                    <div className="flex gap-4 group">
+                        <div className="flex-shrink-0 w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center text-sm font-bold text-zinc-300 group-hover:bg-zinc-700 transition-colors">1</div>
+                        <div>
+                            <h3 className="text-zinc-100 font-semibold mb-1">Create your content</h3>
+                            <p className="text-zinc-500 text-sm">Create a <code className="text-zinc-300">index.md</code> or <code className="text-zinc-300">home.md</code> file in your <code className="text-zinc-300">content/</code> directory.</p>
+                        </div>
+                    </div>
+
+                    <div className="flex gap-4 group">
+                        <div className="flex-shrink-0 w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center text-sm font-bold text-zinc-300 group-hover:bg-zinc-700 transition-colors">2</div>
+                        <div>
+                            <h3 className="text-zinc-100 font-semibold mb-1">Update your config</h3>
+                            <p className="text-zinc-500 text-sm">In <code className="text-zinc-300">content/config.json</code>, set the <code className="text-zinc-300">&quot;homepage&quot;</code> property to point to your new file.</p>
+                        </div>
+                    </div>
+
+                    <div className="flex gap-4 group">
+                        <div className="flex-shrink-0 w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center text-sm font-bold text-zinc-300 group-hover:bg-zinc-700 transition-colors">3</div>
+                        <div>
+                            <h3 className="text-zinc-100 font-semibold mb-1">Refresh</h3>
+                            <p className="text-zinc-500 text-sm">Once saved, your homepage will instantly appear here with the site styling applied.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="mt-12 p-5 rounded-xl bg-zinc-500/5 border border-zinc-800/50">
+                    <p className="text-xs text-zinc-500 font-medium uppercase tracking-widest mb-3">Example config.json</p>
+                    <pre className="text-zinc-300 font-mono text-xs overflow-x-auto">
+                        {`{
+  "homepage": "index.md",
+  "sidebar": [ ... ]
+}`}
+                    </pre>
+                </div>
+            </div>
+        </div>
+    );
+}

package/template/src/app/globals.css

@@ -0,0 +1,92 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #000000;
+  --foreground: #ffffff;
+  --border: #27272a;
+
+  --brand: #ffffff;
+  --brand-foreground: #000000;
+
+  --sidebar: #09090b;
+
+  --content-muted: #a1a1aa;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Custom scrollbar for webkit */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #3f3f46;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #52525b;
+}
+
+/* Prose overrides for super premium dark mode look */
+.prose {
+  max-width: 85ch;
+  --tw-prose-body: #d4d4d8;
+  --tw-prose-headings: #ffffff;
+  --tw-prose-lead: #a1a1aa;
+  --tw-prose-links: #ffffff;
+  --tw-prose-bold: #ffffff;
+  --tw-prose-counters: #a1a1aa;
+  --tw-prose-bullets: #52525b;
+  --tw-prose-hr: #27272a;
+  --tw-prose-quotes: #e4e4e7;
+  --tw-prose-quote-borders: #3f3f46;
+  --tw-prose-captions: #a1a1aa;
+  --tw-prose-code: #ffffff;
+  --tw-prose-pre-code: #e4e4e7;
+  --tw-prose-pre-bg: #18181b;
+  --tw-prose-th-borders: #3f3f46;
+  --tw-prose-td-borders: #27272a;
+}
+
+.prose a {
+  text-decoration-color: #52525b;
+  text-underline-offset: 4px;
+  transition: all 0.2s;
+}
+
+.prose a:hover {
+  text-decoration-color: #ffffff;
+}
+
+.prose pre {
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+}
+
+.prose code {
+  font-size: 0.875em;
+  font-weight: 500;
+  background-color: #18181b;
+  padding: 0.2em 0.4em;
+  border-radius: 0.25rem;
+  border: 1px solid var(--border);
+}
+
+.prose code::before,
+.prose code::after {
+  content: none !important;
+}

package/template/src/app/layout.tsx

@@ -0,0 +1,32 @@
+import "@/app/globals.css";
+import { Inter } from "next/font/google";
+import Sidebar from "@/components/Sidebar";
+import { buildSidebarTree } from "@/lib/docs";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "__SITE_NAME__",
+  description: "__SITE_DESCRIPTION__",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const tree = buildSidebarTree();
+
+  return (
+    <html lang="en" className="dark">
+      <body className={`${inter.className} bg-black text-white antialiased selection:bg-zinc-800 selection:text-white`}>
+        <div className="flex min-h-screen pt-14 md:pt-0">
+          <Sidebar tree={tree} />
+          <main className="flex-1 w-full max-w-5xl mx-auto py-12 px-6 md:px-12 lg:px-24">
+            {children}
+          </main>
+        </div>
+      </body>
+    </html>
+  );
+}

package/template/src/app/sitemap.ts

@@ -0,0 +1,17 @@
+import { MetadataRoute } from 'next';
+import { getAllDocsSlugs } from '@/lib/docs';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+    const slugs = getAllDocsSlugs();
+    const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '__SITE_URL__';
+
+    return slugs.map((slug) => {
+        const urlPath = slug.length > 0 ? `/${slug.join('/')}` : '';
+        return {
+            url: `${baseUrl}${urlPath}`,
+            lastModified: new Date(),
+            changeFrequency: 'weekly',
+            priority: slug.length === 0 ? 1 : 0.8,
+        };
+    });
+}

package/template/src/components/Sidebar.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import clsx from 'clsx';
+import { Book, Menu, X } from 'lucide-react';
+import { useState, useEffect } from 'react';
+
+type SidebarNode = {
+    title: string;
+    slug?: string;
+    children: SidebarNode[];
+};
+
+export default function Sidebar({ tree }: { tree: SidebarNode }) {
+    const pathname = usePathname();
+    const [isOpen, setIsOpen] = useState(false);
+
+    // Close sidebar on mobile when navigating
+    useEffect(() => {
+        setIsOpen(false);
+    }, [pathname]);
+
+    const renderTree = (node: SidebarNode, level: number = 0) => {
+        return (
+            <ul className={clsx("flex flex-col gap-1", level > 0 && "pl-4 border-l border-zinc-800/80 ml-2 mt-1")}>
+                {node.children.map((child, index) => {
+                    const isActive = pathname === child.slug || (pathname === '/' && child.slug === '/');
+
+                    return (
+                        <li key={child.slug || index}>
+                            {child.slug ? (
+                                <Link
+                                    href={child.slug}
+                                    className={clsx(
+                                        "flex items-center text-sm px-3 py-1.5 rounded-lg transition-colors duration-200",
+                                        isActive
+                                            ? "bg-white/10 text-white font-medium"
+                                            : "text-zinc-400 hover:text-white hover:bg-white/5"
+                                    )}
+                                >
+                                    {child.title}
+                                </Link>
+                            ) : (
+                                <div className="flex items-center text-sm px-3 py-2 text-zinc-300 font-semibold mt-2">
+                                    {child.title}
+                                </div>
+                            )}
+                            {child.children?.length > 0 && renderTree(child, level + 1)}
+                        </li>
+                    );
+                })}
+            </ul>
+        );
+    };
+
+    return (
+        <>
+            {/* Mobile Toggle */}
+            <div className="md:hidden fixed top-0 left-0 w-full bg-zinc-950 border-b border-zinc-800 z-50 flex items-center justify-between px-4 py-3">
+                <div className="flex items-center gap-2">
+                    <div className="w-6 h-6 bg-white rounded-md flex items-center justify-center">
+                        <Book className="w-4 h-4 text-black" />
+                    </div>
+                    <span className="text-white font-bold text-lg tracking-tight">__SITE_NAME__</span>
+                </div>
+                <button onClick={() => setIsOpen(!isOpen)} className="text-zinc-400 hover:text-white">
+                    {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+                </button>
+            </div>
+
+            {/* Sidebar Overlay */}
+            {isOpen && (
+                <div
+                    className="fixed inset-0 bg-black/50 z-40 md:hidden"
+                    onClick={() => setIsOpen(false)}
+                />
+            )}
+
+            {/* Sidebar Content */}
+            <aside className={clsx(
+                "fixed md:sticky top-0 left-0 h-[100dvh] w-64 bg-zinc-950/80 backdrop-blur-xl border-r border-zinc-800 z-50 transform transition-transform duration-300 ease-in-out md:translate-x-0 overflow-y-auto custom-scrollbar flex flex-col",
+                isOpen ? "translate-x-0" : "-translate-x-full"
+            )}>
+                <div className="p-6">
+                    <Link href="/" className="mb-8 flex items-center gap-3">
+                        <div className="w-8 h-8 flex-shrink-0 bg-white rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(255,255,255,0.3)]">
+                            <Book className="w-5 h-5 text-black" />
+                        </div>
+                        <span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-zinc-400">
+                            __SITE_NAME__
+                        </span>
+                    </Link>
+                    <div className="mt-8">
+                        {renderTree(tree)}
+                    </div>
+                </div>
+            </aside>
+        </>
+    );
+}