@docubook/create 1.16.0 → 2.0.0-beta.1

package/src/dist/hooks/useScrollPosition.ts

@@ -2,27 +2,28 @@ import { useState, useCallback, useEffect } from 'react';
 
 export function useScrollPosition(threshold = 0.5) {
   const [isScrolled, setIsScrolled] = useState(false);
-  
+
   const handleScroll = useCallback(() => {
     if (typeof window === 'undefined') return;
-    
+
     const scrollPosition = window.scrollY;
     const viewportHeight = window.innerHeight;
     const shouldBeSticky = scrollPosition > viewportHeight * threshold;
-    
+
     setIsScrolled(prev => shouldBeSticky !== prev ? shouldBeSticky : prev);
   }, [threshold]);
 
   // Add scroll event listener
   useEffect(() => {
     // Initial check
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     handleScroll();
-    
+
     window.addEventListener('scroll', handleScroll, { passive: true });
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
   }, [handleScroll]);
-  
+
   return isScrolled;
 }

package/src/dist/lib/markdown.ts

@@ -8,7 +8,7 @@ import rehypeSlug from "rehype-slug";
 import rehypeCodeTitles from "rehype-code-titles";
 import { page_routes, ROUTES } from "./routes-config";
 import { visit } from "unist-util-visit";
-import type { Node } from "unist";
+import type { Node, Parent } from "unist";
 import matter from "gray-matter";
 
 // Type definitions for unist-util-visit
@@ -16,6 +16,7 @@ interface Element extends Node {
   type: string;
   tagName?: string;
   properties?: Record<string, unknown> & {
+    className?: string[];
     raw?: string;
   };
   children?: Node[];
@@ -77,6 +78,49 @@ const components = {
   AccordionGroup
 };
 
+// helper function to handle rehype code titles, since by default we can't inject into the className of rehype-code-titles
+const handleCodeTitles = () => (tree: Node) => {
+  visit(tree, "element", (node: Element, index: number | null, parent: Parent | null) => {
+    // Ensure the visited node is valid
+    if (!parent || index === null || node.tagName !== 'div') {
+      return;
+    }
+
+    // Check if this is the title div from rehype-code-titles
+    const isTitleDiv = node.properties?.className?.includes('rehype-code-title');
+    if (!isTitleDiv) {
+      return;
+    }
+
+    // Find the next <pre> element, skipping over other nodes like whitespace text
+    let nextElement = null;
+    for (let i = index + 1; i < parent.children.length; i++) {
+      const sibling = parent.children[i];
+      if (sibling.type === 'element') {
+        nextElement = sibling as Element;
+        break;
+      }
+    }
+
+    // If the next element is a <pre>, move the title to it
+    if (nextElement && nextElement.tagName === 'pre') {
+      const titleNode = node.children?.[0] as TextNode;
+      if (titleNode && titleNode.type === 'text') {
+        if (!nextElement.properties) {
+          nextElement.properties = {};
+        }
+        nextElement.properties['data-title'] = titleNode.value;
+        
+        // Remove the original title div
+        parent.children.splice(index, 1);
+        
+        // Return the same index to continue visiting from the correct position
+        return index; 
+      }
+    }
+  });
+};
+
 // can be used for other pages like blogs, Guides etc
 async function parseMdx<Frontmatter>(rawMdx: string) {
   return await compileMDX<Frontmatter>({
@@ -87,6 +131,7 @@ async function parseMdx<Frontmatter>(rawMdx: string) {
         rehypePlugins: [
           preProcess,
           rehypeCodeTitles,
+          handleCodeTitles,
           rehypePrism,
           rehypeSlug,
           rehypeAutolinkHeadings,

package/src/dist/package.json

@@ -1,62 +1,67 @@
 {
   "name": "docubook",
-  "version": "1.16.0",
+  "version": "2.0.0-beta.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "eslint ."
   },
   "dependencies": {
-    "@docsearch/css": "3",
+    "@docsearch/css": "^3.9.0",
     "@docsearch/react": "^3.9.0",
-    "@radix-ui/react-accordion": "^1.2.0",
-    "@radix-ui/react-avatar": "^1.1.0",
-    "@radix-ui/react-collapsible": "^1.1.0",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-scroll-area": "^1.2.0",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-toggle": "^1.1.2",
-    "@radix-ui/react-toggle-group": "^1.1.2",
-    "algoliasearch": "^5.35.0",
-    "class-variance-authority": "^0.7.0",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "algoliasearch": "^5.46.3",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "1.0.0",
-    "framer-motion": "^12.4.1",
-    "geist": "^1.3.1",
+    "cmdk": "^1.1.1",
+    "framer-motion": "^12.26.2",
+    "geist": "^1.5.1",
     "gray-matter": "^4.0.3",
-    "install": "^0.13.0",
     "lucide-react": "^0.511.0",
-    "next": "^14.2.6",
+    "next": "16.1.3",
     "next-mdx-remote": "^5.0.0",
-    "next-themes": "^0.3.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "next-themes": "^0.4.4",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-icons": "^5.5.0",
     "rehype-autolink-headings": "^7.1.0",
-    "rehype-code-titles": "^1.2.0",
-    "rehype-prism-plus": "^2.0.0",
+    "rehype-code-titles": "^1.2.1",
+    "rehype-prism-plus": "^2.0.1",
     "rehype-slug": "^6.0.0",
-    "remark-gfm": "^4.0.0",
-    "sonner": "^1.4.3",
-    "tailwind-merge": "^2.5.2",
+    "remark-gfm": "^4.0.1",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.14",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^8",
-    "eslint-config-next": "^14.2.6",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.10",
-    "typescript": "^5"
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/node": "^20.19.30",
+    "@types/react": "19.2.8",
+    "@types/react-dom": "19.2.3",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "16.1.3",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
+  },
+  "overrides": {
+    "@types/react": "19.2.8",
+    "@types/react-dom": "19.2.3"
   }
 }

package/src/dist/postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 };

package/src/dist/styles/globals.css

@@ -1,69 +1,189 @@
-@import "@docsearch/css";
-@import "./algolia.css";
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
-@import url("./syntax.css");
-/* Modern Blue Theme */
-@layer base {
-    :root {
-        --background: 210 40% 98%;
-        --foreground: 220 30% 15%;
-        --card: 0 0% 100%;
-        --card-foreground: 220 30% 15%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 220 30% 15%;
-        --primary: 210 81% 56%; /* #2281E3 */
-        --primary-foreground: 0 0% 100%;
-        --secondary: 210 30% 90%;
-        --secondary-foreground: 220 30% 15%;
-        --muted: 210 20% 92%;
-        --muted-foreground: 220 15% 50%;
-        --accent: 200 100% 40%;
-        --accent-foreground: 0 0% 100%;
-        --destructive: 0 85% 60%;
-        --destructive-foreground: 0 0% 100%;
-        --border: 210 20% 85%;
-        --input: 210 20% 85%;
-        --ring: 210 81% 56%;
-        --radius: 0.5rem;
-        --chart-1: 210 81% 56%;
-        --chart-2: 200 100% 40%;
-        --chart-3: 220 76% 60%;
-        --chart-4: 190 90% 50%;
-        --chart-5: 230 86% 45%;
-        --line-number-color: rgba(0, 0, 0, 0.05);
+@custom-variant dark (&:is(.dark *));
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+
+  @media (width >=--theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+
+  @media (width >=1440px) {
+    max-width: 1440px;
+  }
+}
+
+@theme {
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-sidebar: hsl(var(--sidebar-background));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --font-code: var(--font-geist-mono);
+  --font-regular: var(--font-geist-sans);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-shiny-text: shiny-text 8s infinite;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
     }
 
-    .dark {
-        --background: 220 25% 10%;
-        --foreground: 210 30% 96%;
-        --card: 220 25% 15%;
-        --card-foreground: 210 30% 96%;
-        --popover: 220 25% 15%;
-        --popover-foreground: 210 30% 96%;
-        --primary: 210 100% 65%;
-        --primary-foreground: 220 25% 10%;
-        --secondary: 215 25% 20%;
-        --secondary-foreground: 210 30% 96%;
-        --muted: 215 20% 25%;
-        --muted-foreground: 215 20% 65%;
-        --accent: 200 100% 60%;
-        --accent-foreground: 0 0% 100%;
-        --destructive: 0 85% 70%;
-        --destructive-foreground: 0 0% 100%;
-        --border: 215 20% 25%;
-        --input: 215 20% 25%;
-        --ring: 210 100% 65%;
-        --chart-1: 210 100% 65%;
-        --chart-2: 200 100% 60%;
-        --chart-3: 220 90% 70%;
-        --chart-4: 190 100% 65%;
-        --chart-5: 230 90% 60%;
-        --line-number-color: rgba(255, 255, 255, 0.1);
+    to {
+      height: 0;
     }
+  }
+
+  @keyframes shiny-text {
+
+    0%,
+    90%,
+    100% {
+      background-position: calc(-100% - var(--shiny-width)) 0;
+    }
+
+    30%,
+    60% {
+      background-position: calc(100% + var(--shiny-width)) 0;
+    }
+  }
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@utility animate-shine {
+  --animate-shine: shine var(--duration) infinite linear;
+  animation: var(--animate-shine);
+  background-size: 200% 200%;
+}
+
+/* Modern Blue Theme */
+@layer base {
+  :root {
+    --background: 210 40% 98%;
+    --foreground: 220 30% 15%;
+    --card: 0 0% 100%;
+    --card-foreground: 220 30% 15%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 220 30% 15%;
+    --primary: 210 81% 56%;
+    /* #2281E3 */
+    --primary-foreground: 0 0% 100%;
+    --secondary: 210 30% 90%;
+    --secondary-foreground: 220 30% 15%;
+    --muted: 210 20% 92%;
+    --muted-foreground: 220 15% 50%;
+    --accent: 200 100% 40%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 85% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 210 20% 85%;
+    --input: 210 20% 85%;
+    --ring: 210 81% 56%;
+    --radius: 0.5rem;
+    --chart-1: 210 81% 56%;
+    --chart-2: 200 100% 40%;
+    --chart-3: 220 76% 60%;
+    --chart-4: 190 90% 50%;
+    --chart-5: 230 86% 45%;
+    --line-number-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .dark {
+    --background: 220 25% 10%;
+    --foreground: 210 30% 96%;
+    --card: 220 25% 15%;
+    --card-foreground: 210 30% 96%;
+    --popover: 220 25% 15%;
+    --popover-foreground: 210 30% 96%;
+    --primary: 210 100% 65%;
+    --primary-foreground: 220 25% 10%;
+    --secondary: 215 25% 20%;
+    --secondary-foreground: 210 30% 96%;
+    --muted: 215 20% 25%;
+    --muted-foreground: 215 20% 65%;
+    --accent: 200 100% 60%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 85% 70%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 215 20% 25%;
+    --input: 215 20% 25%;
+    --ring: 210 100% 65%;
+    --chart-1: 210 100% 65%;
+    --chart-2: 200 100% 60%;
+    --chart-3: 220 90% 70%;
+    --chart-4: 190 100% 65%;
+    --chart-5: 230 90% 60%;
+    --line-number-color: rgba(255, 255, 255, 0.1);
+  }
 }
 
 @layer base {
@@ -76,66 +196,66 @@
   }
 }
 
-.prose {
-  margin: 0 !important;
-}
+@layer utilities {
+  .prose {
+    margin: 0 !important;
+  }
 
-pre {
-  padding: 2px 0 !important;
-  width: inherit !important;
-  overflow-x: auto;
-}
+  pre {
+    padding: 2px 0 !important;
+    width: inherit !important;
+    overflow-x: auto;
+  }
 
-pre>code {
-  display: grid;
-  max-width: inherit !important;
-  padding: 14px 0 !important;
-}
+  pre>code {
+    display: grid;
+    max-width: inherit !important;
+    padding: 14px 0 !important;
+    border: 0 !important;
+  }
 
-.code-line {
-  padding: 0.75px 16px;
-  @apply border-l-2 border-transparent
-}
+  .code-line {
+    padding: 0.75px 16px;
+    @apply border-l-2 border-transparent;
+  }
 
-.line-number::before {
-  display: inline-block;
-  width: 1rem;
-  margin-right: 22px;
-  margin-left: -2px;
-  color: rgb(110, 110, 110);
-  content: attr(line);
-  font-size: 13.5px;
-  text-align: right;
-}
+  .line-number::before {
+    display: inline-block;
+    width: 1rem;
+    margin-right: 22px;
+    margin-left: -2px;
+    color: rgb(110, 110, 110);
+    content: attr(line);
+    font-size: 13.5px;
+    text-align: right;
+  }
 
-.highlight-line {
-  @apply bg-primary/5 border-l-2 border-primary/30;
-}
+  .highlight-line {
+    @apply bg-primary/5 border-l-2 border-primary/30;
+  }
 
-.rehype-code-title {
-  @apply px-2 -mb-8 w-full text-sm pb-5 font-medium mt-5 font-code;
-}
+  .rehype-code-title {
+    @apply px-2 -mb-8 w-full text-sm pb-5 font-medium mt-5 font-code;
+  }
 
-.highlight-comp>code {
-  background-color: transparent !important;
+  .highlight-comp>code {
+    background-color: transparent !important;
+  }
 }
 
 @layer utilities {
-    .animate-shine {
-      --animate-shine: shine var(--duration) infinite linear;
-      animation: var(--animate-shine);
-      background-size: 200% 200%;
+
+  @keyframes shine {
+    0% {
+      background-position: 0% 0%;
+    }
+
+    50% {
+      background-position: 100% 100%;
     }
 
-    @keyframes shine {
-      0% {
-        background-position: 0% 0%;
-      }
-      50% {
-        background-position: 100% 100%;
-      }
-      100% {
-        background-position: 0% 0%;
-      }
+    100% {
+      background-position: 0% 0%;
     }
-  }
+  }
+}

package/src/dist/styles/syntax.css

@@ -93,3 +93,87 @@
   border: none;
   border-radius: 8px; /* Sudut melengkung pada iframe */
 }
+
+/* ======================================================================== */
+/* Custom styling for code blocks */
+/* ======================================================================== */
+
+.code-block-container {
+  position: relative;
+  margin: 1.5rem 0;
+  border: 1px solid hsl(var(--border));
+  overflow: hidden;
+  font-size: 0.875rem;
+  border-radius: 0.75rem;
+}
+
+.code-block-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background-color: hsl(var(--muted)); 
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid hsl(var(--border));
+  color: hsl(var(--muted-foreground));
+  font-family: monospace;
+  font-size: 0.8rem;
+}
+
+.code-block-actions {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.75rem;
+  z-index: 10;
+}
+.code-block-actions button {
+  color: hsl(var(--muted-foreground));
+  transition: color 0.2s ease-in-out;
+}
+.code-block-actions button:hover {
+  color: hsl(var(--foreground));
+}
+
+
+.code-block-body pre[class*="language-"] {
+  margin: 0 !important;
+  padding: 0 !important;
+  background: transparent !important;
+}
+
+.line-numbers-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3rem;
+  padding-top: 1rem;
+  text-align: right;
+  color: var(--line-number-color); 
+  user-select: none;
+}
+
+.line-highlight {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: hsl(var(--primary) / 0.1); 
+  border-left: 2px solid hsl(var(--primary));
+  pointer-events: none;
+}
+
+.code-block-body pre[data-line-numbers="true"] .line-highlight {
+  padding-left: 3.5rem;
+}
+
+.code-block-body::-webkit-scrollbar {
+  height: 8px;
+}
+.code-block-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+.code-block-body::-webkit-scrollbar-thumb {
+  background: hsl(var(--border));
+  border-radius: 4px;
+}
+.code-block-body::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted));
+}