@barodoc/theme-docs 7.1.1 → 8.0.0

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@barodoc/theme-docs",
-  "version": "7.1.1",
+  "version": "8.0.0",
   "description": "Documentation theme for Barodoc",
   "type": "module",
   "sideEffects": false,
   "exports": {
     ".": "./src/index.ts",
-    "./theme": "./src/theme.ts",
+    "./theme": {
+      "types": "./src/theme.ts",
+      "import": "./dist/theme.js"
+    },
     "./components": "./src/components/index.ts",
     "./components/*": "./src/components/*",
     "./layouts/*": "./src/layouts/*",
@@ -15,7 +18,8 @@
     "./lib/*": "./src/lib/*"
   },
   "files": [
-    "src"
+    "src",
+    "dist"
   ],
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
@@ -36,7 +40,7 @@
     "rehype-katex": "^7.0.1",
     "remark-math": "^6.0.0",
     "tailwind-merge": "^3.4.0",
-    "@barodoc/core": "7.0.0"
+    "@barodoc/core": "8.0.0"
   },
   "peerDependencies": {
     "astro": "^5.0.0",
@@ -53,6 +57,7 @@
     "@types/react-dom": "^19.0.0",
     "astro": "^5.0.0",
     "tailwindcss": "^4.0.0",
+    "tsup": "^8.3.0",
     "typescript": "^5.7.0"
   },
   "keywords": [
@@ -69,6 +74,8 @@
     "directory": "packages/theme-docs"
   },
   "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
     "typecheck": "tsc --noEmit"
   }
 }

package/src/components/Breadcrumb.astro

@@ -1,4 +1,6 @@
 ---
+import config from "virtual:barodoc/config";
+
 interface BreadcrumbItem {
   label: string;
   href?: string;
@@ -6,15 +8,24 @@ interface BreadcrumbItem {
 
 interface Props {
   items: BreadcrumbItem[];
+  sectionSlug?: string;
+}
+
+const { items, sectionSlug = "docs" } = Astro.props;
+
+function getSectionLabel(): string {
+  if (sectionSlug === "docs") return "Docs";
+  const sec = config.sections?.find((s: any) => s.slug === sectionSlug);
+  return sec?.label ?? sectionSlug.charAt(0).toUpperCase() + sectionSlug.slice(1);
 }
 
-const { items } = Astro.props;
+const sectionLabel = getSectionLabel();
 ---
 
 <nav aria-label="Breadcrumb" class="mb-4">
   <ol class="flex flex-wrap items-center gap-1.5 text-[13px] text-[var(--bd-text-muted)]">
     <li class="flex items-center gap-1.5">
-      <a href="/docs" class="hover:text-[var(--bd-text)] transition-colors">Docs</a>
+      <a href={`/${sectionSlug}`} class="hover:text-[var(--bd-text)] transition-colors">{sectionLabel}</a>
     </li>
     {items.map((item, i) => (
       <li class="flex items-center gap-1.5">

package/src/components/MobileNav.astro

@@ -7,11 +7,21 @@ import { getLocalizedNavGroup } from "@barodoc/core";
 interface Props {
   currentPath: string;
   currentLocale?: string;
+  sectionSlug?: string;
 }
 
-const { currentPath, currentLocale = defaultLocale } = Astro.props;
+const { currentPath, currentLocale = defaultLocale, sectionSlug } = Astro.props;
+
+const currentSection = sectionSlug ?? "docs";
+
+function getNavForSection() {
+  if (currentSection === "docs") return config.navigation;
+  const sec = config.sections?.find((s: any) => s.slug === currentSection);
+  return sec?.navigation ?? config.navigation;
+}
+
+const sectionNav = getNavForSection();
 
-// Normalize path for comparison
 function normalizePath(path: string): string {
   return path.replace(/\/$/, '').replace(/^\//, '');
 }
@@ -19,19 +29,16 @@ function normalizePath(path: string): string {
 function isActive(page: string): boolean {
   const normalized = normalizePath(currentPath);
   const pagePath = normalizePath(page);
-  return normalized === pagePath || 
-    normalized === `docs/${pagePath}` ||
-    normalized === `${currentLocale}/docs/${pagePath}`;
+  return normalized === `${currentSection}/${pagePath}` ||
+    normalized === `${currentSection}/${currentLocale}/${pagePath}`;
 }
 
 function getPageHref(page: string): string {
-  if (currentLocale === defaultLocale) {
-    return `/docs/${page}`;
-  }
-  return `/${currentLocale}/docs/${page}`;
+  return currentLocale === defaultLocale
+    ? `/${currentSection}/${page}`
+    : `/${currentSection}/${currentLocale}/${page}`;
 }
 
-// Get page title from the page slug
 function getPageTitle(page: string): string {
   const parts = page.split('/');
   const name = parts[parts.length - 1];
@@ -41,11 +48,10 @@ function getPageTitle(page: string): string {
     .join(' ');
 }
 
-// Transform config.navigation to the format expected by MobileNavSheet
-const groups = config.navigation.map((group) => ({
+const groups = sectionNav.map((group: any) => ({
   title: getLocalizedNavGroup(group, currentLocale, defaultLocale),
   defaultOpen: true,
-  items: group.pages.map((page) => ({
+  items: group.pages.map((page: string) => ({
     title: getPageTitle(page),
     href: getPageHref(page),
     isActive: isActive(page),

package/src/components/Sidebar.astro

@@ -7,11 +7,21 @@ import { SidebarWrapper } from "./SidebarWrapper";
 interface Props {
   currentPath: string;
   currentLocale?: string;
+  sectionSlug?: string;
 }
 
-const { currentPath, currentLocale = defaultLocale } = Astro.props;
+const { currentPath, currentLocale = defaultLocale, sectionSlug } = Astro.props;
+
+const currentSection = sectionSlug ?? "docs";
+
+function getNavForSection() {
+  if (currentSection === "docs") return config.navigation;
+  const sec = config.sections?.find((s: any) => s.slug === currentSection);
+  return sec?.navigation ?? config.navigation;
+}
+
+const sectionNav = getNavForSection();
 
-// Normalize path for comparison
 function normalizePath(path: string): string {
   return path.replace(/\/$/, '').replace(/^\//, '');
 }
@@ -19,15 +29,16 @@ function normalizePath(path: string): string {
 function isActive(page: string): boolean {
   const normalized = normalizePath(currentPath);
   const pagePath = normalizePath(page);
-  const docsSlug = currentLocale === defaultLocale ? pagePath : `ko/${pagePath}`;
-  return normalized === `docs/${pagePath}` || normalized === `docs/${docsSlug}`;
+  return normalized === `${currentSection}/${pagePath}` ||
+    normalized === `${currentSection}/${currentLocale}/${pagePath}`;
 }
 
 function getPageHref(page: string): string {
-  return currentLocale === defaultLocale ? `/docs/${page}` : `/docs/ko/${page}`;
+  return currentLocale === defaultLocale
+    ? `/${currentSection}/${page}`
+    : `/${currentSection}/${currentLocale}/${page}`;
 }
 
-// Get page title from the page slug
 function getPageTitle(page: string): string {
   const parts = page.split('/');
   const name = parts[parts.length - 1];
@@ -37,11 +48,10 @@ function getPageTitle(page: string): string {
     .join(' ');
 }
 
-// Transform config.navigation to the format expected by DocsSidebar
-const groups = config.navigation.map((group) => ({
+const groups = sectionNav.map((group: any) => ({
   title: getLocalizedNavGroup(group, currentLocale, defaultLocale),
   defaultOpen: true,
-  items: group.pages.map((page) => ({
+  items: group.pages.map((page: string) => ({
     title: getPageTitle(page),
     href: getPageHref(page),
     isActive: isActive(page),

package/src/layouts/DocsLayout.astro

@@ -34,9 +34,10 @@ interface Props {
   breadcrumbs?: BreadcrumbItem[];
   readingTime?: string;
   filePath?: string;
+  sectionSlug?: string;
 }
 
-const { title, description, headings = [], prevPage, nextPage, editUrl, lastUpdated, breadcrumbs = [], readingTime, filePath } = Astro.props;
+const { title, description, headings = [], prevPage, nextPage, editUrl, lastUpdated, breadcrumbs = [], readingTime, filePath, sectionSlug } = Astro.props;
 const currentPath = Astro.url.pathname;
 
 // Get locale from path
@@ -57,14 +58,14 @@ const feedbackEndpoint = config.feedback?.endpoint;
       <!-- Desktop Sidebar -->
       <aside class="hidden lg:block w-[240px] shrink-0 border-r border-[var(--bd-border)]">
         <div class="sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto overscroll-contain pt-2 pb-8 px-4 sidebar-scroll">
-          <Sidebar currentPath={currentPath} currentLocale={currentLocale} />
+          <Sidebar currentPath={currentPath} currentLocale={currentLocale} sectionSlug={sectionSlug} />
         </div>
       </aside>
 
       <!-- Main Content -->
       <main class="flex-1 min-w-0 max-w-[768px]">
         <div class="px-4 py-8 sm:px-6 sm:py-10 lg:px-10 lg:py-10">
-          {breadcrumbs.length > 0 && <Breadcrumb items={breadcrumbs} />}
+          {breadcrumbs.length > 0 && <Breadcrumb items={breadcrumbs} sectionSlug={sectionSlug} />}
           {readingTime && (
             <div class="bd-reading-time mb-4">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -174,7 +175,7 @@ const feedbackEndpoint = config.feedback?.endpoint;
   </div>
 
   <!-- Mobile Navigation -->
-  <MobileNav currentPath={currentPath} currentLocale={currentLocale} />
+  <MobileNav currentPath={currentPath} currentLocale={currentLocale} sectionSlug={sectionSlug} />
   
   <!-- Code copy functionality -->
   <CodeCopy />

package/src/layouts/PageLayout.astro

@@ -0,0 +1,43 @@
+---
+import BaseLayout from "./BaseLayout.astro";
+import Header from "../components/Header.astro";
+import Banner from "../components/Banner.astro";
+import CodeCopy from "../components/CodeCopy.astro";
+import { defaultLocale } from "virtual:barodoc/i18n";
+import { getLocaleFromPath } from "@barodoc/core";
+
+interface Props {
+  title: string;
+  description?: string;
+}
+
+const { title, description } = Astro.props;
+const currentPath = Astro.url.pathname;
+const i18nConfig = { defaultLocale, locales: [defaultLocale] };
+const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
+---
+
+<BaseLayout title={title} description={description}>
+  <Banner />
+  <Header currentLocale={currentLocale} currentPath={currentPath} />
+
+  <div class="w-full min-w-0 min-h-[calc(100vh-3.5rem)] flex justify-center">
+    <article class="w-full max-w-[720px] px-4 py-10 sm:px-6 lg:px-8">
+      <header class="mb-8">
+        <h1 class="text-3xl sm:text-4xl font-bold tracking-tight text-[var(--bd-text-heading)] leading-tight">
+          {title}
+        </h1>
+        {description && (
+          <p class="mt-3 text-lg text-[var(--bd-text-secondary)] leading-relaxed">
+            {description}
+          </p>
+        )}
+      </header>
+
+      <div class="prose prose-gray dark:prose-invert max-w-none">
+        <slot />
+      </div>
+      <CodeCopy />
+    </article>
+  </div>
+</BaseLayout>

package/src/pages/[...page].astro

@@ -0,0 +1,45 @@
+---
+import { getCollection, render } from "astro:content";
+import PageLayout from "../layouts/PageLayout.astro";
+import config from "virtual:barodoc/config";
+
+export async function getStaticPaths() {
+  const reserved = new Set(["blog", "changelog", "docs", "rss.xml"]);
+  if (config.sections) {
+    for (const s of config.sections as any[]) {
+      reserved.add(s.slug);
+    }
+  }
+  let pages: any[] = [];
+  try {
+    pages = await getCollection("pages" as any);
+  } catch {
+    return [];
+  }
+
+  return pages
+    .filter((page) => {
+      const slug = page.slug ?? page.id;
+      const topLevel = slug.split("/")[0];
+      return !reserved.has(topLevel);
+    })
+    .map((page) => {
+      const slug = page.slug ?? page.id;
+      return {
+        params: { page: slug || undefined },
+        props: { page },
+      };
+    });
+}
+
+interface Props {
+  page: any;
+}
+
+const { page } = Astro.props;
+const { Content } = await render(page);
+---
+
+<PageLayout title={page.data.title} description={page.data.description}>
+  <Content />
+</PageLayout>

package/src/pages/blog/[...slug].astro

@@ -1,5 +1,5 @@
 ---
-import { getCollection } from "astro:content";
+import { getCollection, render } from "astro:content";
 import BlogLayout from "../../layouts/BlogLayout.astro";
 import readingTime from "reading-time";
 
@@ -12,7 +12,7 @@ export async function getStaticPaths() {
   }
 
   return posts.map((post) => ({
-    params: { slug: post.slug },
+    params: { slug: post.slug ?? post.id },
     props: { post },
   }));
 }
@@ -22,7 +22,7 @@ interface Props {
 }
 
 const { post } = Astro.props;
-const { Content } = await post.render();
+const { Content } = await render(post);
 const readTime = readingTime(post.body ?? "");
 ---
 

package/src/pages/blog/index.astro

@@ -42,7 +42,7 @@ const sortedPosts = posts.sort((a, b) => {
         <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
           {sortedPosts.map((post) => (
             <a
-              href={`/blog/${post.slug}`}
+              href={`/blog/${post.slug ?? post.id}`}
               class="group flex flex-col rounded-lg border border-[var(--bd-border)] hover:border-primary-400/50 dark:hover:border-primary-500/40 hover:shadow-[var(--bd-shadow-sm)] transition-all overflow-hidden"
             >
               {post.data.image && (

package/src/pages/changelog/index.astro

@@ -1,5 +1,5 @@
 ---
-import { getCollection } from "astro:content";
+import { getCollection, render } from "astro:content";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import Header from "../../components/Header.astro";
 import Banner from "../../components/Banner.astro";
@@ -39,7 +39,7 @@ const sorted = entries.sort((a, b) => {
       ) : (
         <div class="bd-changelog-timeline">
           {sorted.map(async (entry) => {
-            const { Content } = await entry.render();
+            const { Content } = await render(entry);
             return (
               <article class="bd-changelog-entry">
                 <div class="bd-changelog-marker">

package/src/pages/{docs → section}/[...slug].astro

@@ -1,5 +1,5 @@
 ---
-import { getCollection } from "astro:content";
+import { getCollection, render } from "astro:content";
 import DocsLayout from "../../layouts/DocsLayout.astro";
 import config from "virtual:barodoc/config";
 import { defaultLocale, locales } from "virtual:barodoc/i18n";
@@ -7,46 +7,64 @@ import { getLocalizedNavGroup } from "@barodoc/core";
 import readingTime from "reading-time";
 
 export async function getStaticPaths() {
-  const docs = await getCollection("docs");
-  
-  return docs.map((doc) => {
-    // Handle locale in slug
-    const slugParts = doc.slug.split("/");
-    const hasLocale = locales.includes(slugParts[0]);
-    
-    let locale = defaultLocale;
-    let cleanSlug = doc.slug;
-    
-    if (hasLocale) {
-      locale = slugParts[0];
-      cleanSlug = slugParts.slice(1).join("/");
+  const sections = [
+    { slug: "docs", label: "Documentation", navigation: config.navigation },
+    ...(config.sections ?? []).map((s: any) => ({
+      slug: s.slug,
+      label: s.label ?? s.slug,
+      navigation: s.navigation,
+    })),
+  ];
+  const paths: any[] = [];
+
+  for (const section of sections) {
+    let docs: any[];
+    try {
+      docs = await getCollection(section.slug as any);
+    } catch {
+      continue;
+    }
+
+    for (const doc of docs) {
+      const docId = doc.slug ?? doc.id;
+      const slugParts = docId.split("/");
+      const hasLocale = locales.includes(slugParts[0]);
+
+      let locale = defaultLocale;
+      let cleanSlug = docId;
+
+      if (hasLocale) {
+        locale = slugParts[0];
+        cleanSlug = slugParts.slice(1).join("/");
+      }
+
+      const innerPath = locale === defaultLocale
+        ? cleanSlug
+        : `${locale}/${cleanSlug}`;
+
+      paths.push({
+        params: { section: section.slug, slug: innerPath || undefined },
+        props: { doc, locale, cleanSlug, sectionSlug: section.slug, sectionNav: section.navigation },
+      });
     }
-    
-    // URL: /docs/introduction (en), /docs/ko/introduction (ko) — locale only inside slug
-    const path = locale === defaultLocale 
-      ? cleanSlug 
-      : `${locale}/${cleanSlug}`;
-    
-    return {
-      params: { slug: path || undefined },
-      props: { doc, locale, cleanSlug },
-    };
-  });
+  }
+  return paths;
 }
 
 interface Props {
-  doc: Awaited<ReturnType<typeof getCollection<"docs">>>[number];
+  doc: any;
   locale: string;
   cleanSlug: string;
+  sectionSlug: string;
+  sectionNav: typeof config.navigation;
 }
 
-const { doc, locale, cleanSlug } = Astro.props;
-const { Content, headings } = await doc.render();
+const { doc, locale, cleanSlug, sectionSlug, sectionNav } = Astro.props;
+const { Content, headings } = await render(doc);
 const readTime = readingTime(doc.body ?? "");
 
-// Find the category (navigation group) for this page
 function findCategory(slug: string): string | null {
-  for (const group of config.navigation) {
+  for (const group of sectionNav) {
     if (group.pages.includes(slug)) {
       return getLocalizedNavGroup(group, locale, defaultLocale);
     }
@@ -54,16 +72,14 @@ function findCategory(slug: string): string | null {
   return null;
 }
 
-// Get all pages in order from navigation
 function getAllPages(): string[] {
   const pages: string[] = [];
-  for (const group of config.navigation) {
+  for (const group of sectionNav) {
     pages.push(...group.pages);
   }
   return pages;
 }
 
-// Get page title from slug
 function getPageTitle(slug: string): string {
   const parts = slug.split('/');
   const name = parts[parts.length - 1];
@@ -73,32 +89,28 @@ function getPageTitle(slug: string): string {
     .join(' ');
 }
 
-// Get page href (always /docs/...; non-default locale is inside slug)
 function getPageHref(slug: string): string {
-  return `/docs/${locale === defaultLocale ? slug : `${locale}/${slug}`}`;
+  return `/${sectionSlug}/${locale === defaultLocale ? slug : `${locale}/${slug}`}`;
 }
 
-// Find prev/next pages
 const allPages = getAllPages();
 const currentIndex = allPages.indexOf(cleanSlug);
 
-const prevPage = currentIndex > 0 
+const prevPage = currentIndex > 0
   ? { title: getPageTitle(allPages[currentIndex - 1]), href: getPageHref(allPages[currentIndex - 1]) }
   : null;
 
-const nextPage = currentIndex < allPages.length - 1 
+const nextPage = currentIndex < allPages.length - 1
   ? { title: getPageTitle(allPages[currentIndex + 1]), href: getPageHref(allPages[currentIndex + 1]) }
   : null;
 
 const category = findCategory(cleanSlug);
 
-// Edit link
 const editBaseUrl = config.editLink?.baseUrl;
 const editUrl = editBaseUrl
   ? `${editBaseUrl.replace(/\/$/, "")}/${doc.id}`
   : null;
 
-// Last updated: use file modification if available
 let lastUpdated: Date | null = null;
 if (config.lastUpdated) {
   const mod = (doc.data as Record<string, unknown>).lastUpdated;
@@ -107,7 +119,6 @@ if (config.lastUpdated) {
   }
 }
 
-// Breadcrumbs: [Group, Page Title]
 const breadcrumbs: { label: string; href?: string }[] = [];
 if (category) {
   breadcrumbs.push({ label: category });
@@ -115,8 +126,8 @@ if (category) {
 breadcrumbs.push({ label: doc.data.title });
 ---
 
-<DocsLayout 
-  title={doc.data.title} 
+<DocsLayout
+  title={doc.data.title}
   description={doc.data.description}
   headings={headings}
   prevPage={prevPage}
@@ -125,7 +136,8 @@ breadcrumbs.push({ label: doc.data.title });
   lastUpdated={lastUpdated}
   breadcrumbs={breadcrumbs}
   readingTime={readTime.text}
-  filePath={`src/content/docs/${doc.id}`}
+  filePath={`src/content/${sectionSlug}/${doc.id}`}
+  sectionSlug={sectionSlug}
 >
   {category && (
     <p class="text-xs font-semibold uppercase tracking-widest text-primary-600 dark:text-primary-400 mb-3">

package/src/theme.ts

@@ -76,8 +76,8 @@ function createThemeIntegration(
         });
 
         injectRoute({
-          pattern: "/docs/[...slug]",
-          entrypoint: "@barodoc/theme-docs/pages/docs/[...slug].astro",
+          pattern: "/[section]/[...slug]",
+          entrypoint: "@barodoc/theme-docs/pages/section/[...slug].astro",
         });
 
         if (config?.blog?.enabled !== false) {
@@ -96,6 +96,11 @@ function createThemeIntegration(
           entrypoint: "@barodoc/theme-docs/pages/changelog/index.astro",
         });
 
+        injectRoute({
+          pattern: "/[...page]",
+          entrypoint: "@barodoc/theme-docs/pages/[...page].astro",
+        });
+
         updateConfig({
           integrations: [
             mdx({