@docubook/create 2.3.0 → 2.5.0

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;

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

@@ -1,134 +0,0 @@
-"use client";
-
-import { List, ChevronDown, ChevronUp } from "lucide-react";
-import TocObserver from "./toc-observer";
-import * as React from "react";
-import { useRef, useMemo } from "react";
-import { usePathname } from "next/navigation";
-import { Button } from "./ui/button";
-import { motion, AnimatePresence } from "framer-motion";
-import { useActiveSection } from "@/hooks";
-import { TocItem } from "@/lib/toc";
-
-interface MobTocProps {
-  tocs: TocItem[];
-}
-
-const useClickOutside = (ref: React.RefObject<HTMLElement | null>, callback: () => void) => {
-  const handleClick = React.useCallback((event: MouseEvent) => {
-    if (ref.current && !ref.current.contains(event.target as Node)) {
-      callback();
-    }
-  }, [ref, callback]);
-
-  React.useEffect(() => {
-    document.addEventListener('mousedown', handleClick);
-    return () => {
-      document.removeEventListener('mousedown', handleClick);
-    };
-  }, [handleClick]);
-};
-
-export default function MobToc({ tocs }: MobTocProps) {
-  const pathname = usePathname();
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  const tocRef = useRef<HTMLDivElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  // Use custom hooks
-  const { activeId, setActiveId } = useActiveSection(tocs);
-
-  // 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();
-    setIsExpanded(prev => !prev);
-  }, []);
-
-  // Close TOC when clicking outside
-  useClickOutside(tocRef, () => {
-    if (isExpanded) {
-      setIsExpanded(false);
-    }
-  });
-
-  // Handle body overflow when TOC is expanded
-  React.useEffect(() => {
-    if (isExpanded) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = '';
-    }
-
-    return () => {
-      document.body.style.overflow = '';
-    };
-  }, [isExpanded]);
-
-  // Don't render anything if not on docs page or no TOC items
-  if (!isDocsPage || !tocs?.length || !mounted) return null;
-
-  const chevronIcon = isExpanded ? (
-    <ChevronUp className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-  ) : (
-    <ChevronDown className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-  );
-
-  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>
-        </div>
-      </motion.div>
-    </AnimatePresence>
-  );
-}

package/src/dist/components/search.tsx

@@ -1,55 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { Dialog } from "@/components/ui/dialog";
-import { SearchTrigger } from "@/components/SearchTrigger";
-import { SearchModal } from "@/components/SearchModal";
-import DocSearchComponent from "@/components/DocSearch";
-import { DialogTrigger } from "@radix-ui/react-dialog";
-
-interface SearchProps {
-  /**
-   * Specify which search engine to use.
-   * @default 'default'
-   */
-  type?: "default" | "algolia";
-}
-
-export default function Search({ type = "default" }: SearchProps) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  // The useEffect below is ONLY for the 'default' type, which is correct.
-  // DocSearch handles its own keyboard shortcut.
-  useEffect(() => {
-    if (type === 'default') {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if ((event.ctrlKey || event.metaKey) && event.key === "k") {
-          event.preventDefault();
-          setIsOpen((open) => !open);
-        }
-      };
-
-      window.addEventListener("keydown", handleKeyDown);
-      return () => {
-        window.removeEventListener("keydown", handleKeyDown);
-      };
-    }
-  }, [type]);
-
-  if (type === "algolia") {
-    // Just render the component without passing any state props
-    return <DocSearchComponent />;
-  }
-
-  // Logic for 'default' search
-  return (
-    <div>
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogTrigger asChild>
-          <SearchTrigger />
-        </DialogTrigger>
-        <SearchModal isOpen={isOpen} setIsOpen={setIsOpen} />
-      </Dialog>
-    </div>
-  );
-}