create-specra 0.1.6 → 0.2.0

package/templates/minimal/src/routes/docs/[version]/[...slug]/+page.server.ts

@@ -0,0 +1,119 @@
+import {
+  extractTableOfContents,
+  getAdjacentDocs,
+  isCategoryPage,
+  getCachedVersions,
+  getCachedAllDocs,
+  getCachedDocBySlug,
+  getI18nConfig,
+  getConfig,
+} from 'specra';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params }) => {
+  const { version, slug: slugArray } = params;
+  const slug = slugArray;
+
+  const i18nConfig = getI18nConfig();
+  const slugParts = slug.split('/');
+  let locale: string | undefined;
+  if (i18nConfig && i18nConfig.locales.includes(slugParts[0])) {
+    locale = slugParts[0];
+  }
+
+  const allDocs = await getCachedAllDocs(version, locale);
+  const versions = getCachedVersions();
+  const config = getConfig();
+  const isCategory = isCategoryPage(slug, allDocs);
+  const doc = await getCachedDocBySlug(slug, version);
+
+  let title = 'Page Not Found';
+  let description = 'The requested documentation page could not be found.';
+  let ogUrl = `/docs/${version}/${slug}`;
+
+  if (doc) {
+    title = doc.meta.title || doc.title;
+    description = doc.meta.description || `Documentation for ${title}`;
+  }
+
+  // Category page without doc content
+  if (!doc && isCategory) {
+    const categoryDoc = allDocs.find((d) => d.slug.startsWith(slug + '/'));
+    const categoryTabGroup = categoryDoc?.meta?.tab_group || categoryDoc?.categoryTabGroup;
+    const categoryTitle = slug
+      .split('/')
+      .pop()
+      ?.replace(/-/g, ' ')
+      .replace(/\b\w/g, (l) => l.toUpperCase()) || 'Category';
+
+    return {
+      version,
+      slug,
+      allDocs,
+      versions,
+      config,
+      isCategory: true,
+      isNotFound: false,
+      doc: null,
+      categoryTitle,
+      categoryDescription: 'Browse the documentation in this section.',
+      categoryTabGroup,
+      toc: [],
+      previous: null,
+      next: null,
+      title,
+      description,
+      ogUrl,
+    };
+  }
+
+  // Not found
+  if (!doc) {
+    return {
+      version,
+      slug,
+      allDocs,
+      versions,
+      config,
+      isCategory: false,
+      isNotFound: true,
+      doc: null,
+      categoryTitle: null,
+      categoryDescription: null,
+      categoryTabGroup: undefined,
+      toc: [],
+      previous: null,
+      next: null,
+      title,
+      description,
+      ogUrl,
+    };
+  }
+
+  // Normal doc page
+  const toc = extractTableOfContents(doc.meta.content || doc.content);
+  const { previous, next } = getAdjacentDocs(slug, allDocs);
+  const showCategoryIndex = isCategory && !!doc;
+  const matchingDoc = allDocs.find((d) => d.slug === slug);
+  const currentPageTabGroup = doc.meta?.tab_group || matchingDoc?.categoryTabGroup;
+
+  return {
+    version,
+    slug,
+    allDocs,
+    versions,
+    config,
+    isCategory: showCategoryIndex,
+    isNotFound: false,
+    doc,
+    categoryTitle: null,
+    categoryDescription: null,
+    categoryTabGroup: currentPageTabGroup,
+    toc,
+    previous: previous ? { title: previous.meta.title, slug: previous.slug } : null,
+    next: next ? { title: next.meta.title, slug: next.slug } : null,
+    title,
+    description,
+    ogUrl,
+  };
+};

package/templates/minimal/src/routes/docs/[version]/[...slug]/+page.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import {
+    TableOfContents,
+    Header,
+    DocLayout,
+    CategoryIndex,
+    HotReloadIndicator,
+    DevModeBadge,
+    MdxHotReload,
+    MdxContent,
+    NotFoundContent,
+    SearchHighlight,
+    MobileDocLayout,
+    mdxComponents,
+  } from 'specra/components';
+  import type { PageData } from './$types';
+
+  let { data }: { data: PageData } = $props();
+
+  let allDocsCompat: any[] = $derived(data.allDocs);
+  let previousDoc = $derived(data.previous ?? undefined);
+  let nextDoc = $derived(data.next ?? undefined);
+  let categoryTitle = $derived(data.categoryTitle ?? undefined);
+  let categoryDescription = $derived(data.categoryDescription ?? undefined);
+</script>
+
+<svelte:head>
+  <title>{data.title}</title>
+  <meta name="description" content={data.description} />
+  <meta property="og:title" content={data.title} />
+  <meta property="og:description" content={data.description} />
+  <meta property="og:url" content={data.ogUrl} />
+  <meta property="og:type" content="article" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content={data.title} />
+  <meta name="twitter:description" content={data.description} />
+</svelte:head>
+
+{#if !data.doc && data.isCategory}
+  <MobileDocLayout
+    docs={allDocsCompat}
+    version={data.version}
+    config={data.config}
+    activeTabGroup={data.categoryTabGroup}
+  >
+    {#snippet header()}
+      <Header currentVersion={data.version} versions={data.versions} config={data.config} />
+    {/snippet}
+    <CategoryIndex
+      categoryPath={data.slug}
+      version={data.version}
+      allDocs={allDocsCompat}
+      title={categoryTitle}
+      description={categoryDescription}
+      config={data.config}
+    />
+  </MobileDocLayout>
+  <MdxHotReload />
+  <HotReloadIndicator />
+  <DevModeBadge />
+{:else if data.isNotFound}
+  <MobileDocLayout
+    docs={allDocsCompat}
+    version={data.version}
+    config={data.config}
+  >
+    {#snippet header()}
+      <Header currentVersion={data.version} versions={data.versions} config={data.config} />
+    {/snippet}
+    <NotFoundContent version={data.version} />
+  </MobileDocLayout>
+  <MdxHotReload />
+  <HotReloadIndicator />
+  <DevModeBadge />
+{:else if data.doc}
+  <MobileDocLayout
+    docs={allDocsCompat}
+    version={data.version}
+    config={data.config}
+    activeTabGroup={data.categoryTabGroup}
+  >
+    {#snippet header()}
+      <Header currentVersion={data.version} versions={data.versions} config={data.config} />
+    {/snippet}
+    {#snippet toc()}
+      {#if !data.isCategory}
+        <TableOfContents items={data.toc} config={data.config} />
+      {/if}
+    {/snippet}
+
+    {#if data.isCategory}
+      {#snippet categoryContent()}
+        {#if data.doc?.contentNodes}
+          <MdxContent nodes={data.doc.contentNodes} components={mdxComponents} />
+        {:else if data.doc?.content}
+          {@html data.doc.content}
+        {/if}
+      {/snippet}
+      <CategoryIndex
+        categoryPath={data.slug}
+        version={data.version}
+        allDocs={allDocsCompat}
+        title={data.doc.meta.title}
+        description={data.doc.meta.description}
+        content={categoryContent}
+        config={data.config}
+      />
+    {:else}
+      <SearchHighlight />
+      <DocLayout
+        meta={data.doc.meta}
+        previousDoc={previousDoc}
+        nextDoc={nextDoc}
+        version={data.version}
+        slug={data.slug}
+        config={data.config}
+      >
+        {#if data.doc.contentNodes}
+          <MdxContent nodes={data.doc.contentNodes} components={mdxComponents} />
+        {:else}
+          {@html data.doc.content}
+        {/if}
+      </DocLayout>
+    {/if}
+  </MobileDocLayout>
+  <MdxHotReload />
+  <HotReloadIndicator />
+  <DevModeBadge />
+{/if}

package/templates/minimal/svelte.config.js

@@ -0,0 +1,8 @@
+import { specraConfig } from 'specra/svelte-config';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+const config = specraConfig({
+  vitePreprocess: { vitePreprocess }
+});
+
+export default config;

package/templates/minimal/tsconfig.json

@@ -1,41 +1,12 @@
 {
+  "extends": "./.svelte-kit/tsconfig.json",
   "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
     "allowJs": true,
-    "target": "ES6",
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
+    "checkJs": true,
     "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
+    "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": [
-        "./*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+    "skipLibCheck": true,
+    "strict": true
+  }
 }

package/templates/minimal/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});

package/templates/minimal/README.md

@@ -1,132 +0,0 @@
-# Specra Documentation Site
-
-Welcome to your new Specra documentation site! This project was created with `create-specra`.
-
-## Getting Started
-
-First, install dependencies and run the development server:
-
-```bash
-npm install
-npm run dev
-# or
-yarn install
-yarn dev
-# or
-pnpm install
-pnpm dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see your documentation site.
-
-## Project Structure
-
-```
-├── app/              # Next.js app directory
-│   ├── layout.tsx    # Root layout
-│   ├── page.tsx      # Home page
-│   └── docs/         # Documentation pages
-├── components/       # Reusable components
-│   ├── docs/        # Documentation-specific components
-│   └── ui/          # UI components
-├── docs/            # Your MDX documentation files
-│   └── v1.0.0/     # Version 1.0.0 docs
-├── lib/             # Utility functions
-│   ├── mdx.ts      # MDX processing
-│   ├── config.ts   # Configuration
-│   └── parsers/    # API parsers
-├── public/          # Static assets
-└── specra.config.json  # Specra configuration
-```
-
-## Writing Documentation
-
-Add your MDX files in the `docs/v1.0.0/` directory:
-
-```mdx
----
-title: My Page
-description: This is my documentation page
----
-
-# My Page
-
-Your content here...
-```
-
-### Using Components
-
-Import and use components in your MDX:
-
-```mdx
-import { Callout } from '@/components/docs/callout'
-import { CodeBlock } from '@/components/docs/code-block'
-import { Tabs, Tab } from '@/components/docs/tabs'
-
-<Callout type="info">
-  This is an info callout!
-</Callout>
-
-<Tabs>
-  <Tab title="JavaScript">
-    ```js
-    console.log('Hello World')
-    ```
-  </Tab>
-  <Tab title="TypeScript">
-    ```ts
-    console.log('Hello World')
-    ```
-  </Tab>
-</Tabs>
-```
-
-## Configuration
-
-Edit `specra.config.json` to customize your site:
-
-```json
-{
-  "site": {
-    "title": "Your Docs",
-    "description": "Your documentation site",
-    "url": "https://yourdocs.com"
-  },
-  "navigation": {
-    "links": [
-      { "title": "Home", "href": "/" },
-      { "title": "Docs", "href": "/docs" }
-    ]
-  }
-}
-```
-
-## Building for Production
-
-```bash
-npm run build
-npm run start
-```
-
-## Learn More
-
-- [Specra Documentation](https://specra.dev/docs)
-- [Next.js Documentation](https://nextjs.org/docs)
-- [MDX Documentation](https://mdxjs.com)
-
-## Deployment
-
-Deploy your Specra documentation site to Vercel, Netlify, or any hosting platform that supports Next.js.
-
-### Vercel
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new)
-
-### Netlify
-
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start)
-
-## Need Help?
-
-- Check the [documentation](https://specra.dev/docs)
-- Report issues on [GitHub](https://github.com/yourusername/specra/issues)

package/templates/minimal/app/api/mdx-watch/route.ts

@@ -1,6 +0,0 @@
-// Next.js requires dynamic to be statically analyzable, so we can't re-export it
-export const dynamic = 'error'
-export const runtime = 'nodejs'
-
-// Re-export the GET handler from SDK
-export { GET } from "specra/app/api/mdx-watch"

package/templates/minimal/app/docs/[version]/[...slug]/loading.tsx

@@ -1,7 +0,0 @@
-export default function Loading() {
-    return (
-        <div className="flex items-center justify-center min-h-screen">
-            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900" />
-        </div>
-    )
-}

package/templates/minimal/app/docs/[version]/[...slug]/page.tsx

@@ -1,192 +0,0 @@
-import type { Metadata } from "next"
-import { Suspense } from "react"
-import {
-  extractTableOfContents,
-  getAdjacentDocs,
-  isCategoryPage,
-  getCachedVersions,
-  getCachedAllDocs,
-  getCachedDocBySlug,
-  getConfig,
-} from "specra/lib"
-import {
-  DocLayout,
-  TableOfContents,
-  Header,
-  DocLayoutWrapper,
-  HotReloadIndicator,
-  DevModeBadge,
-  MdxHotReload,
-  CategoryIndex,
-  NotFoundContent,
-  DocLoading,
-} from "specra/components"
-
-interface PageProps {
-  params: Promise<{
-    version: string
-    slug: string[]
-  }>
-}
-
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
-  const { version, slug: slugArray } = await params
-  const slug = slugArray.join("/")
-  const doc = await getCachedDocBySlug(slug, version)
-
-  if (!doc) {
-    return {
-      title: "Page Not Found",
-      description: "The requested documentation page could not be found.",
-    }
-  }
-
-  const title = doc.meta.title || doc.title
-  const description = doc.meta.description || `Documentation for ${title}`
-  const url = `/docs/${version}/${slug}`
-
-  return {
-    title: `${title}`,
-    description,
-    openGraph: {
-      title,
-      description,
-      url,
-      siteName: "Documentation Platform",
-      type: "article",
-      locale: "en_US",
-    },
-    twitter: {
-      card: "summary_large_image",
-      title,
-      description,
-    },
-    alternates: {
-      canonical: url,
-    },
-  }
-}
-
-export async function generateStaticParams() {
-  const versions = getCachedVersions()
-  const params = []
-
-  for (const version of versions) {
-    const docs = await getCachedAllDocs(version)
-    for (const doc of docs) {
-      params.push({
-        version,
-        slug: doc.slug.split("/").filter(Boolean),
-      })
-    }
-  }
-
-  return params
-}
-
-export default async function DocPage({ params }: PageProps) {
-  const { version, slug: slugArray } = await params
-  const slug = slugArray.join("/")
-
-  const allDocs = await getCachedAllDocs(version)
-  const versions = getCachedVersions()
-  const config = getConfig()
-  const isCategory = isCategoryPage(slug, allDocs)
-  const doc = await getCachedDocBySlug(slug, version)
-
-  if (!doc && isCategory) {
-    const categoryDoc = allDocs.find((d) => d.slug.startsWith(slug + "/"))
-    const categoryTabGroup = categoryDoc?.meta?.tab_group || categoryDoc?.categoryTabGroup
-
-    return (
-      <>
-        <DocLayoutWrapper
-          header={<Header currentVersion={version} versions={versions} config={config} />}
-          docs={allDocs}
-          version={version}
-          children={
-            <CategoryIndex
-              categoryPath={slug}
-              version={version}
-              allDocs={allDocs}
-              title={slug.split("/").pop()?.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()) || "Category"}
-              description="Browse the documentation in this section."
-              config={config}
-            />
-          }
-          toc={<div />}
-          config={config}
-          currentPageTabGroup={categoryTabGroup}
-        />
-        <MdxHotReload />
-        <HotReloadIndicator />
-        <DevModeBadge />
-      </>
-    )
-  }
-
-  if (!doc) {
-    return (
-      <>
-        <Suspense fallback={<DocLoading />}>
-          <DocLayoutWrapper
-            header={<Header currentVersion={version} versions={versions} config={config} />}
-            docs={allDocs}
-            version={version}
-            children={<NotFoundContent version={version} />}
-            toc={<div />}
-            config={config}
-            currentPageTabGroup={undefined}
-          />
-          <MdxHotReload />
-          <HotReloadIndicator />
-          <DevModeBadge />
-        </Suspense>
-      </>
-    )
-  }
-
-  const toc = extractTableOfContents(doc.content)
-  const { previous, next } = getAdjacentDocs(slug, allDocs)
-  const showCategoryIndex = isCategory && doc
-  const currentPageTabGroup = doc.meta?.tab_group || doc.categoryTabGroup
-
-  return (
-    <>
-      <Suspense fallback={<DocLoading />}>
-        <DocLayoutWrapper
-          header={<Header currentVersion={version} versions={versions} config={config} />}
-          docs={allDocs}
-          version={version}
-          toc={showCategoryIndex ? <div /> : <TableOfContents items={toc} config={config} />}
-          config={config}
-          currentPageTabGroup={currentPageTabGroup}
-        >
-          {showCategoryIndex ? (
-            <CategoryIndex
-              categoryPath={slug}
-              version={version}
-              allDocs={allDocs}
-              title={doc.meta.title}
-              description={doc.meta.description}
-              content={doc.content}
-              config={config}
-            />
-          ) : (
-            <DocLayout
-              meta={doc.meta}
-              content={doc.content}
-              previousDoc={previous ? { title: previous.meta.title, slug: previous.slug } : undefined}
-              nextDoc={next ? { title: next.meta.title, slug: next.slug } : undefined}
-              version={version}
-              slug={slug}
-              config={config}
-            />
-          )}
-        </DocLayoutWrapper>
-        <MdxHotReload />
-        <HotReloadIndicator />
-      </Suspense>
-    </>
-  )
-}

package/templates/minimal/app/docs/[version]/not-found.tsx

@@ -1,10 +0,0 @@
-
-import { VersionNotFound } from "specra/components"
-
-export default function NotFound() {
-  return (
-    <>
-      <VersionNotFound />
-    </>
-  )
-}

package/templates/minimal/app/docs/[version]/page.tsx

@@ -1,27 +0,0 @@
-import { redirect } from "next/navigation"
-import { getCachedVersions, getCachedAllDocs } from "specra/lib"
-
-interface PageProps {
-  params: Promise<{
-    version: string
-  }>
-}
-
-export async function generateStaticParams() {
-  const versions = getCachedVersions()
-  return versions.map((version) => ({
-    version,
-  }))
-}
-
-export default async function VersionIndexPage({ params }: PageProps) {
-  const { version } = await params
-  const docs = await getCachedAllDocs(version)
-
-  if (docs.length === 0) {
-    redirect("/docs/v1.0.0")
-  }
-
-  // Redirect to first doc
-  redirect(`/docs/${version}/${docs[0].slug}`)
-}

package/templates/minimal/app/globals.css

@@ -1 +0,0 @@
-@import "specra/styles";