@docubook/create 2.4.0 → 2.5.0

package/src/dist/components/ui/toggle.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-1 rounded-md text-xs font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -18,7 +18,7 @@ const toggleVariants = cva(
       size: {
         default: "h-9 px-2 min-w-9",
         sm: "h-8 px-1.5 min-w-8",
-        xs: "h-7 px-1 min-w-7",
+        xs: "h-6 px-1.5 min-w-6",
         lg: "h-10 px-2.5 min-w-10",
       },
     },
@@ -32,7 +32,7 @@ const toggleVariants = cva(
 const Toggle = React.forwardRef<
   React.ElementRef<typeof TogglePrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+  VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
   <TogglePrimitive.Root
     ref={ref}

package/src/dist/hooks/useActiveSection.ts

@@ -1,68 +1,70 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
-import { TocItem } from '@/lib/toc';
+"use client"
+
+import { useState, useCallback, useEffect, useRef } from "react"
+import { TocItem } from "@/lib/toc"
 
 export function useActiveSection(tocs: TocItem[]) {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const observerRef = useRef<IntersectionObserver | null>(null);
-  const clickedIdRef = useRef<string | null>(null);
+  const [activeId, setActiveId] = useState<string | null>(null)
+  const observerRef = useRef<IntersectionObserver | null>(null)
+  const clickedIdRef = useRef<string | null>(null)
 
   // Handle intersection observer for active section
   useEffect(() => {
-    if (typeof document === 'undefined' || !tocs.length) return;
+    if (typeof document === "undefined" || !tocs.length) return
 
     const handleIntersect = (entries: IntersectionObserverEntry[]) => {
-      if (clickedIdRef.current) return;
+      if (clickedIdRef.current) return
 
-      const visibleEntries = entries.filter(entry => entry.isIntersecting);
-      if (!visibleEntries.length) return;
+      const visibleEntries = entries.filter((entry) => entry.isIntersecting)
+      if (!visibleEntries.length) return
 
       // Find the most visible entry
       const mostVisibleEntry = visibleEntries.reduce((prev, current) => {
-        return current.intersectionRatio > prev.intersectionRatio ? current : prev;
-      }, visibleEntries[0]);
+        return current.intersectionRatio > prev.intersectionRatio ? current : prev
+      }, visibleEntries[0])
 
-      const newActiveId = mostVisibleEntry.target.id;
+      const newActiveId = mostVisibleEntry.target.id
       if (newActiveId !== activeId) {
-        setActiveId(newActiveId);
+        setActiveId(newActiveId)
       }
-    };
+    }
 
     // Initialize intersection observer
     observerRef.current = new IntersectionObserver(handleIntersect, {
-      root: null,
-      rootMargin: '0px 0px -80% 0px',
-      threshold: 0.1,
-    });
+      root: document.getElementById("scroll-container"),
+      rootMargin: "0px 0px -60% 0px",
+      threshold: 0,
+    })
 
     // Observe all headings
-    tocs.forEach(toc => {
-      const element = document.getElementById(toc.href.slice(1));
+    tocs.forEach((toc) => {
+      const element = document.getElementById(toc.href.slice(1))
       if (element) {
-        observerRef.current?.observe(element);
+        observerRef.current?.observe(element)
       }
-    });
+    })
 
     // Cleanup
     return () => {
-      observerRef.current?.disconnect();
-    };
-  }, [tocs, activeId]);
+      observerRef.current?.disconnect()
+    }
+  }, [tocs, activeId])
 
   const handleLinkClick = useCallback((id: string) => {
-    clickedIdRef.current = id;
-    setActiveId(id);
+    clickedIdRef.current = id
+    setActiveId(id)
 
     // Reset clicked state after scroll completes
     const timer = setTimeout(() => {
-      clickedIdRef.current = null;
-    }, 1000);
+      clickedIdRef.current = null
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  }, []);
+    return () => clearTimeout(timer)
+  }, [])
 
   return {
     activeId,
     setActiveId,
     handleLinkClick,
-  };
+  }
 }

package/src/dist/hooks/useScrollPosition.ts

@@ -1,29 +1,31 @@
-import { useState, useCallback, useEffect } from 'react';
+"use client"
+
+import { useState, useCallback, useEffect } from "react"
 
 export function useScrollPosition(threshold = 0.5) {
-  const [isScrolled, setIsScrolled] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false)
 
   const handleScroll = useCallback(() => {
-    if (typeof window === 'undefined') return;
+    if (typeof window === "undefined") return
 
-    const scrollPosition = window.scrollY;
-    const viewportHeight = window.innerHeight;
-    const shouldBeSticky = scrollPosition > viewportHeight * threshold;
+    const scrollPosition = window.scrollY
+    const viewportHeight = window.innerHeight
+    const shouldBeSticky = scrollPosition > viewportHeight * threshold
 
-    setIsScrolled(prev => shouldBeSticky !== prev ? shouldBeSticky : prev);
-  }, [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();
+    handleScroll()
 
-    window.addEventListener('scroll', handleScroll, { passive: true });
+    window.addEventListener("scroll", handleScroll, { passive: true })
     return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [handleScroll]);
+      window.removeEventListener("scroll", handleScroll)
+    }
+  }, [handleScroll])
 
-  return isScrolled;
+  return isScrolled
 }

package/src/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docubook",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

package/src/dist/styles/algolia.css

@@ -18,31 +18,31 @@
   --docsearch-muted-color: hsl(var(--muted-foreground));
   --docsearch-container-background: rgba(0, 0, 0, 0.7);
   --docsearch-logo-color: hsl(var(--primary-foreground));
-  
+
   /* Modal */
   --docsearch-modal-width: 560px;
   --docsearch-modal-height: 600px;
   --docsearch-modal-background: hsl(var(--background));
   --docsearch-modal-shadow: 0 0 0 1px hsl(var(--border)), 0 8px 20px rgba(0, 0, 0, 0.2);
-  
+
   /* SearchBox */
   --docsearch-searchbox-height: 56px;
   --docsearch-searchbox-background: hsl(var(--input));
   --docsearch-searchbox-focus-background: hsl(var(--card));
   --docsearch-searchbox-shadow: none;
-  
+
   /* Hit (Hasil Pencarian) */
   --docsearch-hit-height: 56px;
   --docsearch-hit-color: hsl(var(--foreground));
   --docsearch-hit-active-color: hsl(var(--primary-foreground));
   --docsearch-hit-background: hsl(var(--card));
   --docsearch-hit-shadow: none;
-  
+
   /* Keys */
   --docsearch-key-gradient: none;
   --docsearch-key-shadow: none;
   --docsearch-key-pressed-shadow: none;
-  
+
   /* Footer */
   --docsearch-footer-height: 44px;
   --docsearch-footer-background: hsl(var(--background));
@@ -57,7 +57,7 @@
   background-color: hsl(var(--secondary));
   border: 1px solid hsl(var(--border));
   border-radius: 9999px;
-  width: 160px;
+  width: 260px;
   height: 40px;
   color: hsl(var(--muted-foreground));
   transition: width 0.3s ease;
@@ -71,8 +71,8 @@
 
 .docsearch .DocSearch-Search-Icon {
   color: var(--docsearch-muted-color);
-  width: 1rem;
-  height: 1rem;
+  width: 1.2rem;
+  height: 1.2rem;
 }
 
 .docsearch .DocSearch-Button-Placeholder {
@@ -85,7 +85,8 @@
 
 .docsearch .DocSearch-Button-Key {
   background: var(--docsearch-primary-color);
-  color: var(--docsearch-logo-color); /* Menggunakan variabel yg relevan */
+  color: var(--docsearch-logo-color);
+  /* Menggunakan variabel yg relevan */
   border-radius: 6px;
   font-size: 14px;
   font-weight: 500;
@@ -155,6 +156,7 @@
     background: none;
     border: none;
   }
+
   .docsearch .DocSearch-Button-Placeholder,
   .docsearch .DocSearch-Button-Key {
     display: none;

package/src/dist/styles/{syntax.css → override.css}

@@ -1,19 +1,23 @@
 /* Modern Blue Theme */
 /* Light Mode */
 .keyword {
-  color: #1d4ed8; /* Darker blue for better contrast */
+  color: #1d4ed8;
+  /* Darker blue for better contrast */
 }
 
 .function {
-  color: #0369a1; /* Deep blue */
+  color: #0369a1;
+  /* Deep blue */
 }
 
 .punctuation {
-  color: #4b5563; /* Slate gray */
+  color: #4b5563;
+  /* Slate gray */
 }
 
 .comment {
-  color: #6b7280; /* Muted gray */
+  color: #6b7280;
+  /* Muted gray */
   font-style: italic;
 }
 
@@ -22,28 +26,34 @@
 .annotation,
 .boolean,
 .number {
-  color: #0d9488; /* Teal for better distinction */
+  color: #0d9488;
+  /* Teal for better distinction */
 }
 
 .tag {
-  color: #1d4ed8; /* Matching keyword color */
+  color: #1d4ed8;
+  /* Matching keyword color */
 }
 
 .attr-name {
-  color: #0284c7; /* Sky blue */
+  color: #0284c7;
+  /* Sky blue */
 }
 
 .attr-value {
-  color: #2563eb; /* Primary blue */
+  color: #2563eb;
+  /* Primary blue */
 }
 
 /* Dark Mode */
 .dark .keyword {
-  color: #60a5fa; /* Soft blue */
+  color: #60a5fa;
+  /* Soft blue */
 }
 
 .dark .function {
-  color: #38bdf8; /* Sky blue */
+  color: #38bdf8;
+  /* Sky blue */
 }
 
 .dark .string,
@@ -51,47 +61,33 @@
 .dark .annotation,
 .dark .boolean,
 .dark .number {
-  color: #2dd4bf; /* Teal */
+  color: #2dd4bf;
+  /* Teal */
 }
 
 .dark .tag {
-  color: #60a5fa; /* Matching keyword color */
+  color: #60a5fa;
+  /* Matching keyword color */
 }
 
 .dark .attr-name {
-  color: #7dd3fc; /* Lighter blue */
+  color: #7dd3fc;
+  /* Lighter blue */
 }
 
 .dark .attr-value {
-  color: #3b82f6; /* Brighter blue */
+  color: #3b82f6;
+  /* Brighter blue */
 }
 
 .dark .comment {
-  color: #9ca3af; /* Lighter gray for dark mode */
+  color: #9ca3af;
+  /* Lighter gray for dark mode */
 }
 
 .dark .punctuation {
-  color: #9ca3af; /* Lighter gray for dark mode */
-}
-
-.youtube {
-  position: relative;
-  padding-bottom: 56.25%; /* Rasio aspek 16:9 */
-  height: 0;
-  overflow: hidden;
-  background: #000; /* Latar belakang hitam untuk memadukan player */
-  border-radius: 8px; /* Sudut melengkung */
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Bayangan lembut */
-}
-
-.youtube iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: none;
-  border-radius: 8px; /* Sudut melengkung pada iframe */
+  color: #9ca3af;
+  /* Lighter gray for dark mode */
 }
 
 /* ======================================================================== */
@@ -111,7 +107,7 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  background-color: hsl(var(--muted)); 
+  background-color: hsl(var(--muted));
   padding: 0.5rem 1rem;
   border-bottom: 1px solid hsl(var(--border));
   color: hsl(var(--muted-foreground));
@@ -125,10 +121,12 @@
   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));
 }
@@ -147,7 +145,7 @@
   width: 3rem;
   padding-top: 1rem;
   text-align: right;
-  color: var(--line-number-color); 
+  color: var(--line-number-color);
   user-select: none;
 }
 
@@ -155,7 +153,7 @@
   position: absolute;
   left: 0;
   right: 0;
-  background: hsl(var(--primary) / 0.1); 
+  background: hsl(var(--primary) / 0.1);
   border-left: 2px solid hsl(var(--primary));
   pointer-events: none;
 }
@@ -167,13 +165,58 @@
 .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));
+}
+
+/* ======================================================================== */
+/* Custom styling for youtube blocks */
+/* ======================================================================== */
+.youtube {
+  position: relative;
+  padding-bottom: 56.25%;
+  /* Aspect Ratio 16:9 */
+  height: 0;
+  overflow: hidden;
+  background: #000;
+  /* Black background to blend the player */
+  border-radius: 8px;
+  /* Rounded corners */
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  /* Soft shadow */
+}
+
+.youtube iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 8px;
+  /* Rounded corners on iframe */
+}
+
+/* Hide main navbar and footer when docs layout is active */
+body:has(.docs-layout) #main-navbar,
+body:has(.docs-layout) #main-footer {
+  display: none;
+}
+
+/* Remove container constraints for docs pages */
+body:has(.docs-layout) #main-content {
+  max-width: none;
+  width: 100%;
+  padding: 0;
+  margin: 0;
 }

package/src/dist/tailwind.config.ts

@@ -1,113 +1,14 @@
-import type { Config } from "tailwindcss";
-import tailwindAnimate from "tailwindcss-animate";
-import typography from "@tailwindcss/typography";
+import typography from "@tailwindcss/typography"
 
 const config = {
-	darkMode: "class",
-	content: [
-		"./pages/**/*.{ts,tsx}",
-		"./components/**/*.{ts,tsx}",
-		"./app/**/*.{ts,tsx}",
-		"./src/**/*.{ts,tsx}",
-	],
-	prefix: "",
-	theme: {
-		container: {
-			center: true,
-			padding: '2rem',
-			screens: {
-				'2xl': '1440px'
-			}
-		},
-		extend: {
-			colors: {
-				border: 'hsl(var(--border))',
-				input: 'hsl(var(--input))',
-				ring: 'hsl(var(--ring))',
-				background: 'hsl(var(--background))',
-				foreground: 'hsl(var(--foreground))',
-				primary: {
-					DEFAULT: 'hsl(var(--primary))',
-					foreground: 'hsl(var(--primary-foreground))'
-				},
-				secondary: {
-					DEFAULT: 'hsl(var(--secondary))',
-					foreground: 'hsl(var(--secondary-foreground))'
-				},
-				destructive: {
-					DEFAULT: 'hsl(var(--destructive))',
-					foreground: 'hsl(var(--destructive-foreground))'
-				},
-				muted: {
-					DEFAULT: 'hsl(var(--muted))',
-					foreground: 'hsl(var(--muted-foreground))'
-				},
-				accent: {
-					DEFAULT: 'hsl(var(--accent))',
-					foreground: 'hsl(var(--accent-foreground))'
-				},
-				popover: {
-					DEFAULT: 'hsl(var(--popover))',
-					foreground: 'hsl(var(--popover-foreground))'
-				},
-				card: {
-					DEFAULT: 'hsl(var(--card))',
-					foreground: 'hsl(var(--card-foreground))'
-				},
-				sidebar: {
-					DEFAULT: 'hsl(var(--sidebar-background))',
-					foreground: 'hsl(var(--sidebar-foreground))',
-					primary: 'hsl(var(--sidebar-primary))',
-					'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-					accent: 'hsl(var(--sidebar-accent))',
-					'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-					border: 'hsl(var(--sidebar-border))',
-					ring: 'hsl(var(--sidebar-ring))'
-				}
-			},
-			borderRadius: {
-				lg: 'var(--radius)',
-				md: 'calc(var(--radius) - 2px)',
-				sm: 'calc(var(--radius) - 4px)'
-			},
-			fontFamily: {
-				code: ["var(--font-geist-mono)"],
-				regular: ["var(--font-geist-sans)"]
-			},
-			keyframes: {
-				'accordion-down': {
-					from: {
-						height: '0'
-					},
-					to: {
-						height: 'var(--radix-accordion-content-height)'
-					}
-				},
-				'accordion-up': {
-					from: {
-						height: 'var(--radix-accordion-content-height)'
-					},
-					to: {
-						height: '0'
-					}
-				},
-				'shiny-text': {
-					'0%, 90%, 100%': {
-						'background-position': 'calc(-100% - var(--shiny-width)) 0'
-					},
-					'30%, 60%': {
-						'background-position': 'calc(100% + var(--shiny-width)) 0'
-					}
-				}
-			},
-			animation: {
-				'accordion-down': 'accordion-down 0.2s ease-out',
-				'accordion-up': 'accordion-up 0.2s ease-out',
-				'shiny-text': 'shiny-text 8s infinite'
-			}
-		}
-	},
-	plugins: [tailwindAnimate, typography],
-} satisfies Config;
+    darkMode: ["class"],
+    content: [
+        "./app/**/*.{ts,tsx}",
+        "./components/**/*.{ts,tsx}",
+        "./contents/**/*.{md,mdx}",
+        "../../packages/ui/src/**/*.{ts,tsx}",
+    ],
+    plugins: [typography],
+}
 
-export default config;
+export default config

package/src/dist/components/GithubStart.tsx

@@ -1,44 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import Link from 'next/link';
-
-const GitHubStarButton: React.FC = () => {
-  const [stars, setStars] = useState<number | null>(null);
-
-  useEffect(() => {
-    fetch('https://api.github.com/repos/gitfromwildan/docubook')
-      .then((res) => res.json())
-      .then((data) => {
-        if (data.stargazers_count !== undefined) {
-          setStars(data.stargazers_count);
-        }
-      })
-      .catch((error) => console.error('Failed to fetch stars:', error));
-  }, []);
-
-  const formatStars = (count: number) =>
-    count >= 1000 ? `${(count / 1000).toFixed(1)}K` : `${count}`;
-
-  return (
-    <Link
-      href="https://github.com/gitfromwildan/docubook"
-      target="_blank"
-      rel="noopener noreferrer"
-      className="inline-flex items-center rounded-full px-3 py-1.5 text-sm font-medium text-muted-foreground border no-underline"
-    >
-      <svg
-        height="16"
-        width="16"
-        viewBox="0 0 16 16"
-        aria-hidden="true"
-        className="fill-current mr-1.5"
-      >
-        <path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 005.47 7.59c.4.07.55-.17.55-.38v-1.32c-2.22.48-2.69-1.07-2.69-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.06-.49.06-.49.81.06 1.23.83 1.23.83.72 1.23 1.89.88 2.35.67.07-.52.28-.88.5-1.08-1.77-.2-3.64-.88-3.64-3.93 0-.87.31-1.58.82-2.14-.08-.2-.36-1.01.08-2.12 0 0 .67-.21 2.2.82a7.7 7.7 0 012.01-.27 7.7 7.7 0 012.01.27c1.53-1.03 2.2-.82 2.2-.82.44 1.11.16 1.92.08 2.12.51.56.82 1.27.82 2.14 0 3.06-1.87 3.73-3.65 3.93.29.25.54.73.54 1.48v2.2c0 .21.15.46.55.38A8 8 0 0016 8c0-4.42-3.58-8-8-8z" />
-      </svg>
-      {stars !== null ? formatStars(stars) : '...'}
-    </Link>
-  );
-};
-
-export default GitHubStarButton;