@docubook/create 2.0.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docubook/create",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "CLI to create DocuBook projects",
   "main": "src/index.js",
   "type": "module",

package/src/dist/app/page.tsx

@@ -15,7 +15,7 @@ export default function Home() {
   return (
     <div className="flex flex-col items-center justify-center px-2 py-8 text-center sm:py-36">
       <Link
-        href="/docs/changelog/version-1"
+        href="/docs/changelog/version-2"
         className="mb-5 sm:text-lg flex items-center gap-2 underline underline-offset-4 sm:-mt-12"
       >
         <div className="z-10 flex min-h-10 items-center justify-center max-[800px]:mt-10">
@@ -25,7 +25,7 @@ export default function Home() {
             )}
           >
             <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-100 hover:duration-300 hover:dark:text-neutral-200">
-              <span>🚀 Release v2.0.0</span>
+              <span>🚀 Release v2.2.0</span>
               <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
             </AnimatedShinyText>
           </div>

package/src/dist/components/markdown/ReleaseMdx.tsx

@@ -12,25 +12,29 @@ function Release({ version, title, date, children }: ReleaseProps) {
 
   return (
     <div className="mb-16 group">
-      <div className="mb-6">
-        <div className="flex items-center gap-3 mb-2">
-          <div className="bg-primary/10 text-primary border-2 border-primary/20 rounded-full px-4 py-1.5 text-base font-medium">
-            v{version}
-          </div>
-          {date && (
-            <div className="text-muted-foreground text-sm">
+      <div className="flex items-center gap-3 mt-6 mb-2">
+        <div
+          id={version}
+          className="inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-sm font-semibold text-primary transition-colors hover:bg-primary/15 scroll-m-20 backdrop-blur-sm"
+        >
+          v{version}
+        </div>
+        {date && (
+          <div className="flex items-center gap-3 text-sm font-medium text-muted-foreground">
+            <span className="h-1 w-1 rounded-full bg-muted-foreground/30"></span>
+            <time dateTime={date}>
               {new Date(date).toLocaleDateString('en-US', {
                 year: 'numeric',
                 month: 'long',
                 day: 'numeric'
               })}
-            </div>
-          )}
-        </div>
-        <h2 className="text-2xl font-bold text-foreground/90 mb-3">
-          {title}
-        </h2>
+            </time>
+          </div>
+        )}
       </div>
+      <h3 className="text-2xl font-bold text-foreground/90 mb-6 !mt-0">
+        {title}
+      </h3>
       <div className="space-y-8">
         {children}
       </div>

package/src/dist/components/mob-toc.tsx

@@ -41,6 +41,12 @@ export default function MobToc({ tocs }: MobTocProps) {
   // Only show on /docs pages
   const isDocsPage = useMemo(() => pathname?.startsWith('/docs'), [pathname]);
 
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
   // Toggle expanded state
   const toggleExpanded = React.useCallback((e: React.MouseEvent) => {
     e.stopPropagation();
@@ -68,7 +74,7 @@ export default function MobToc({ tocs }: MobTocProps) {
   }, [isExpanded]);
 
   // Don't render anything if not on docs page or no TOC items
-  if (!isDocsPage || !tocs?.length) return null;
+  if (!isDocsPage || !tocs?.length || !mounted) return null;
 
   const chevronIcon = isExpanded ? (
     <ChevronUp className="w-4 h-4 text-muted-foreground flex-shrink-0" />
@@ -78,51 +84,51 @@ export default function MobToc({ tocs }: MobTocProps) {
 
   return (
     <AnimatePresence>
-        <motion.div
-          ref={tocRef}
-          className="lg:hidden fixed top-16 left-0 right-0 z-50"
-          initial={{ y: -100, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          exit={{ y: -100, opacity: 0 }}
-          transition={{ duration: 0.2, ease: 'easeInOut' }}
-        >
-          <div className="w-full bg-background/95 backdrop-blur-sm border-b border-stone-200 dark:border-stone-800 shadow-sm">
-            <div className="sm:px-8 px-4 py-2">
-              <Button
-                variant="ghost"
-                size="sm"
-                className="w-full justify-between h-auto py-2 px-2 -mx-1 rounded-md hover:bg-transparent hover:text-inherit"
-                onClick={toggleExpanded}
-                aria-label={isExpanded ? 'Collapse table of contents' : 'Expand table of contents'}
-              >
-                <div className="flex items-center gap-2">
-                  <List className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-                  <span className="font-medium text-sm">On this page</span>
-                </div>
-                {chevronIcon}
-              </Button>
-
-              <AnimatePresence>
-                {isExpanded && (
-                  <motion.div
-                    ref={contentRef}
-                    className="mt-2 pb-2 max-h-[60vh] overflow-y-auto px-1 -mx-1"
-                    initial={{ opacity: 0, height: 0 }}
-                    animate={{ opacity: 1, height: 'auto' }}
-                    exit={{ opacity: 0, height: 0 }}
-                    transition={{ duration: 0.2, ease: 'easeInOut' }}
-                  >
-                    <TocObserver
-                      data={tocs}
-                      activeId={activeId}
-                      onActiveIdChange={setActiveId}
-                    />
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </div>
+      <motion.div
+        ref={tocRef}
+        className="lg:hidden fixed top-16 left-0 right-0 z-50"
+        initial={{ y: -100, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        exit={{ y: -100, opacity: 0 }}
+        transition={{ duration: 0.2, ease: 'easeInOut' }}
+      >
+        <div className="w-full bg-background/95 backdrop-blur-sm border-b border-stone-200 dark:border-stone-800 shadow-sm">
+          <div className="sm:px-8 px-4 py-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="w-full justify-between h-auto py-2 px-2 -mx-1 rounded-md hover:bg-transparent hover:text-inherit"
+              onClick={toggleExpanded}
+              aria-label={isExpanded ? 'Collapse table of contents' : 'Expand table of contents'}
+            >
+              <div className="flex items-center gap-2">
+                <List className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                <span className="font-medium text-sm">On this page</span>
+              </div>
+              {chevronIcon}
+            </Button>
+
+            <AnimatePresence>
+              {isExpanded && (
+                <motion.div
+                  ref={contentRef}
+                  className="mt-2 pb-2 max-h-[60vh] overflow-y-auto px-1 -mx-1"
+                  initial={{ opacity: 0, height: 0 }}
+                  animate={{ opacity: 1, height: 'auto' }}
+                  exit={{ opacity: 0, height: 0 }}
+                  transition={{ duration: 0.2, ease: 'easeInOut' }}
+                >
+                  <TocObserver
+                    data={tocs}
+                    activeId={activeId}
+                    onActiveIdChange={setActiveId}
+                  />
+                </motion.div>
+              )}
+            </AnimatePresence>
           </div>
-        </motion.div>
+        </div>
+      </motion.div>
     </AnimatePresence>
   );
 }

package/src/dist/lib/markdown.ts

@@ -174,19 +174,37 @@ export async function getDocsForSlug(slug: string) {
 export async function getDocsTocs(slug: string) {
   const contentPath = getDocsContentPath(slug);
   const rawMdx = await fs.readFile(contentPath, "utf-8");
-  // captures between ## - #### can modify accordingly
-  const headingsRegex = /^(#{2,4})\s(.+)$/gm;
+
+  // Regex to match code blocks (```...```), standard markdown headings (##), and <Release> tags
+  const combinedRegex = /(```[\s\S]*?```)|^(#{2,4})\s(.+)$|<Release[^>]*version="([^"]+)"/gm;
+
   let match;
   const extractedHeadings = [];
-  while ((match = headingsRegex.exec(rawMdx)) !== null) {
-    const headingLevel = match[1].length;
-    const headingText = match[2].trim();
-    const slug = sluggify(headingText);
-    extractedHeadings.push({
-      level: headingLevel,
-      text: headingText,
-      href: `#${slug}`,
-    });
+
+  while ((match = combinedRegex.exec(rawMdx)) !== null) {
+    // match[1] -> Code block content (ignore)
+    if (match[1]) continue;
+
+    // match[2] & match[3] -> Markdown headings
+    if (match[2]) {
+      const headingLevel = match[2].length;
+      const headingText = match[3].trim();
+      const slug = sluggify(headingText);
+      extractedHeadings.push({
+        level: headingLevel,
+        text: headingText,
+        href: `#${slug}`,
+      });
+    }
+    // match[4] -> Release component version
+    else if (match[4]) {
+      const version = match[4];
+      extractedHeadings.push({
+        level: 2,
+        text: `v${version}`,
+        href: `#${version}`,
+      });
+    }
   }
   return extractedHeadings;
 }

package/src/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docubook",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -32,7 +32,7 @@
     "gray-matter": "^4.0.3",
     "lucide-react": "^0.511.0",
     "next": "^16.1.6",
-    "next-mdx-remote": "^5.0.0",
+    "next-mdx-remote": "^6.0.0",
     "next-themes": "^0.4.4",
     "react": "19.2.3",
     "react-dom": "19.2.3",