@docubook/create 1.9.1 → 1.11.3

package/README.md

@@ -2,10 +2,8 @@
 
 **DocuBook** is a documentation web project designed to provide a simple and user-friendly interface for accessing various types of documentation. This site is crafted for developers and teams who need quick access to references, guides, and essential documents.
 
-> **Note**: This application is a fork of [AriaDocs](https://github.com/nisabmohd/Aria-Docs), created by [Nisab Mohd](https://github.com/nisabmohd). DocuBook provides an alternative to the documentation solution found on [Mintlify](https://mintlify.com/), utilizing `.mdx` (Markdown + JSX) for content creation and management.
-
 [![Deploy with
-Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/gitfromwildan/docubook)
+Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/DocuBook/docubook)
 
 ## Features
 

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@docubook/create",
-  "version": "1.9.1",
-  "main": "index.js",
+  "version": "1.11.3",
+  "main": "src/index.js",
   "type": "module",
   "bin": {
-    "create": "./create.js"
+    "create": "./src/index.js"
   },
   "keywords": [
     "template",
@@ -19,11 +19,8 @@
     "chalk": "^5.3.0",
     "cli-progress": "^3.12.0",
     "commander": "^12.1.0",
-    "degit": "^2.8.4",
     "enquirer": "^2.4.1",
     "figlet": "^1.8.0",
-    "ora": "^8.1.0",
-    "prompts": "^2.4.2"
-  },
-  "packageManager": "pnpm@10.10.0"
+    "ora": "^8.1.0"
+  }
 }

package/src/cli/program.js

@@ -0,0 +1,32 @@
+import { program } from "commander";
+import chalk from "chalk";
+import { displayAsciiArt } from "../utils/display.js";
+import { collectUserInput } from "./promptHandler.js";
+import { createProject } from "../installer/projectInstaller.js";
+
+/**
+ * Initializes the CLI program
+ * @param {string} version - Package version
+ */
+export function initializeProgram(version) {
+  program
+    .version(version)
+    .description("CLI to create a new Docubook project")
+    .action(async () => {
+      try {
+        await displayAsciiArt();
+        console.log(chalk.white("DocuBook Installer\n"));
+
+        // Collect user input
+        const options = await collectUserInput();
+
+        // Create project with collected options
+        await createProject(options);
+      } catch (err) {
+        // Error handling is done in the respective modules
+        process.exit(1);
+      }
+    });
+
+  return program;
+}

package/src/cli/promptHandler.js

@@ -0,0 +1,73 @@
+import enquirer from "enquirer";
+import { detectDefaultPackageManager, getPackageManagerVersion } from "../utils/packageManager.js";
+import log from "../utils/logger.js";
+
+const { prompt } = enquirer;
+
+/**
+ * Detects if the command was run with yarn or yarn dlx
+ * @returns {boolean}
+ */
+function isYarnCommand() {
+  const userAgent = process.env.npm_config_user_agent || '';
+  return userAgent.includes('yarn') || process.argv.some(arg => arg.includes('yarn'));
+}
+
+/**
+ * Collects user input for project creation
+ * @returns {Promise<Object>} User answers
+ */
+export async function collectUserInput() {
+  // Skip installation prompt if running with yarn/yarn dlx
+  const isYarn = isYarnCommand();
+  const defaultPackageManager = detectDefaultPackageManager();
+
+  // Get initial answers (directory name and package manager)
+  const { directoryName, packageManager } = await prompt([
+    {
+      type: "input",
+      name: "directoryName",
+      message: "📁 Project name",
+      initial: "docubook",
+    },
+    {
+      type: "select",
+      name: "packageManager",
+      message: "📦 Package manager",
+      choices: ["npm", "pnpm", "yarn", "bun"],
+      initial: defaultPackageManager,
+    }
+  ]);
+
+  // Only ask about installation if not using yarn
+  let installNow = false;
+  if (packageManager !== 'yarn') {
+    const { shouldInstall } = await prompt({
+      type: "confirm",
+      name: "shouldInstall",
+      message: "🛠️  Install dependencies now?",
+      initial: true,
+    });
+    installNow = shouldInstall;
+  }
+
+  // Prepare the answers object
+  const answers = {
+    directoryName,
+    packageManager,
+    installNow
+  };
+
+  // Validate package manager is installed
+  const version = getPackageManagerVersion(packageManager);
+
+  if (!version) {
+    log.error(`${packageManager} is not installed on your system.`);
+    process.exit(1);
+  }
+
+  return {
+    ...answers,
+    version
+  };
+}

package/src/dist/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Wildan Nursahidan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/dist/README.md

@@ -0,0 +1,37 @@
+# DocuBook
+
+**DocuBook** is a documentation web project designed to provide a simple and user-friendly interface for accessing various types of documentation. This site is crafted for developers and teams who need quick access to references, guides, and essential documents.
+
+[![Deploy with
+Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/DocuBook/docubook)
+
+## Features
+
+- **Easy Navigation**: Simple layout for quick navigation between pages.
+- **Quick Search**: Easily find documentation using a search function.
+- **Responsive Theme**: Responsive design optimized for devices ranging from desktops to mobile.
+- **Markdown Content**: Support for markdown-based documents.
+- **SEO Friendly**: Optimized structure for search visibility, enhancing accessibility on search engines.
+
+## Installation
+
+```bash
+npx @docubook/create@latest
+```
+
+#### command output
+
+```bash
+? Enter a name for your project directory: (docubook)
+
+Creating a new Docubook project in /path/your/docubook from the main branch...
+✔ Docubook project successfully created in /path/your/docubook!
+
+Next steps:
+1. Navigate to your project directory:
+   cd docubook
+2. Install dependencies:
+   npm install
+3. Start the development server:
+   npm run dev
+```

package/src/dist/app/docs/[[...slug]]/page.tsx

@@ -0,0 +1,105 @@
+import { notFound } from "next/navigation";
+import { getDocsForSlug, getDocsTocs } from "@/lib/markdown";
+import DocsBreadcrumb from "@/components/docs-breadcrumb";
+import Pagination from "@/components/pagination";
+import Toc from "@/components/toc";
+import { Typography } from "@/components/typography";
+import EditThisPage from "@/components/edit-on-github";
+import { formatDate2 } from "@/lib/utils";
+import docuConfig from "@/docu.json";
+import MobToc from "@/components/mob-toc";
+
+const { meta } = docuConfig;
+
+type PageProps = {
+  params: {
+    slug: string[];
+  };
+};
+
+// Function to generate metadata dynamically
+export async function generateMetadata({ params: { slug = [] } }: PageProps) {
+  const pathName = slug.join("/");
+  const res = await getDocsForSlug(pathName);
+
+  if (!res) {
+    return {
+      title: "Page Not Found",
+      description: "The requested page was not found.",
+    };
+  }
+
+  const { title, description, image } = res.frontmatter;
+
+  // Absolute URL for og:image
+  const ogImage = image
+    ? `${meta.baseURL}/images/${image}`
+    : `${meta.baseURL}/images/og-image.png`;
+
+  return {
+    title: `${title}`,
+    description,
+    openGraph: {
+      title,
+      description,
+      url: `${meta.baseURL}/docs/${pathName}`,
+      type: "article",
+      images: [
+        {
+          url: ogImage,
+          width: 1200,
+          height: 630,
+          alt: title,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      images: [ogImage],
+    },
+  };
+}
+
+export default async function DocsPage({ params: { slug = [] } }: PageProps) {
+  const pathName = slug.join("/");
+  const res = await getDocsForSlug(pathName);
+
+  if (!res) notFound();
+
+  const { title, description, image, date } = res.frontmatter;
+
+  // File path for edit link
+  const filePath = `contents/docs/${slug.join("/") || ""}/index.mdx`;
+
+  const tocs = await getDocsTocs(pathName);
+
+  return (
+    <div className="flex items-start gap-10">
+      <div className="flex-[4.5] pt-5">
+        <MobToc tocs={tocs} />
+        <DocsBreadcrumb paths={slug} />
+        <Typography>
+          <h1 className="text-3xl !-mt-0.5">{title}</h1>
+          <p className="-mt-4 text-muted-foreground text-[16.5px]">{description}</p>
+          <div>{res.content}</div>
+          <div
+            className={`my-8 flex items-center border-b-2 border-dashed border-x-muted-foreground ${
+                docuConfig.repository?.editLink ? "justify-between" : "justify-end"
+            }`}
+            >
+            {docuConfig.repository?.editLink && <EditThisPage filePath={filePath} />}
+            {date && (
+                <p className="text-[13px] text-muted-foreground">
+                Published on {formatDate2(date)}
+                </p>
+            )}
+            </div>
+          <Pagination pathname={pathName} />
+        </Typography>
+      </div>
+      <Toc path={pathName} />
+    </div>
+  );
+}

package/src/dist/app/docs/layout.tsx

@@ -0,0 +1,16 @@
+import { Leftbar } from "@/components/leftbar";
+
+export default function DocsLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="flex items-start gap-8">
+      <Leftbar key="leftbar" />
+      <div className="flex-[5.25] px-1">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/dist/app/error.tsx

@@ -0,0 +1,44 @@
+"use client"; // Error components must be Client Components
+
+import { Button, buttonVariants } from "@/components/ui/button";
+import Link from "next/link";
+import { useEffect } from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="min-h-[87vh] px-2 sm:py-28 py-36 flex flex-col gap-4 items-center">
+      <div className="text-center flex flex-col items-center justify-center w-fit gap-2">
+        <h2 className="text-7xl font-bold pr-1">Oops!</h2>
+        <p className="text-muted-foreground text-md font-medium">
+          Something went wrong {":`("}
+        </p>
+        <p>
+          We&apos;re sorry, but an error occurred while processing your request.
+        </p>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button
+          onClick={
+            // Attempt to recover by trying to re-render the segment
+            () => reset()
+          }
+        >
+          Reload page
+        </Button>
+        <Link href="/" className={buttonVariants({})}>
+          Back to homepage
+        </Link>
+      </div>
+    </div>
+  );
+}

package/src/dist/app/layout.tsx

@@ -0,0 +1,96 @@
+import type { Metadata } from "next";
+import { ThemeProvider } from "@/components/contexts/theme-provider";
+import { Navbar } from "@/components/navbar";
+import { GeistSans } from "geist/font/sans";
+import { GeistMono } from "geist/font/mono";
+import { Footer } from "@/components/footer";
+import docuConfig from "@/docu.json";
+import { Toaster } from "@/components/ui/sonner";
+import "@/styles/globals.css";
+
+const { meta } = docuConfig;
+
+// Default Metadata
+const defaultMetadata: Metadata = {
+  metadataBase: new URL(meta.baseURL),
+  description: meta.description,
+  title: meta.title,
+  icons: {
+    icon: meta.favicon,
+  },
+  openGraph: {
+    title: meta.title,
+    description: meta.description,
+    images: [
+      {
+        url: new URL("/images/og-image.png", meta.baseURL).toString(),
+        width: 1200,
+        height: 630,
+        alt: String(meta.title),
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+};
+
+// Dynamic Metadata Getter
+export function getMetadata({
+  title,
+  description,
+  image,
+}: {
+  title?: string;
+  description?: string;
+  image?: string;
+}): Metadata {
+  const ogImage = image ? new URL(`/images/${image}`, meta.baseURL).toString() : undefined;
+
+  return {
+    ...defaultMetadata,
+    title: title ? `${title}` : defaultMetadata.title,
+    description: description || defaultMetadata.description,
+    openGraph: {
+      ...defaultMetadata.openGraph,
+      title: title || defaultMetadata.openGraph?.title,
+      description: description || defaultMetadata.openGraph?.description,
+      images: ogImage ? [
+        {
+          url: ogImage,
+          width: 1200,
+          height: 630,
+          alt: String(title || defaultMetadata.openGraph?.title),
+        },
+      ] : defaultMetadata.openGraph?.images,
+    },
+  };
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${GeistSans.variable} ${GeistMono.variable} font-regular antialiased`}
+        suppressHydrationWarning
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Navbar />
+          <main className="sm:container mx-auto w-[90vw] h-auto scroll-smooth">
+            {children}
+          </main>
+          <Footer />
+          <Toaster position="top-center" />
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/src/dist/app/not-found.tsx

@@ -0,0 +1,19 @@
+import { buttonVariants } from "@/components/ui/button";
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div className="min-h-[87vh] px-2 sm:py-28 py-36 flex flex-col gap-4 items-center">
+      <div className="text-center flex flex-col items-center justify-center w-fit gap-2">
+        <h2 className="text-7xl font-bold pr-1">404</h2>
+        <p className="text-muted-foreground text-md font-medium">
+          Page not found {":("}
+        </p>
+        <p>Oops! The page you&apos;re looking for doesn&apos;t exist.</p>
+      </div>
+      <Link href="/" className={buttonVariants({})}>
+        Back to homepage
+      </Link>
+    </div>
+  );
+}

package/src/dist/app/page.tsx

@@ -0,0 +1,96 @@
+import { buttonVariants } from "@/components/ui/button";
+import { page_routes } from "@/lib/routes-config";
+import { ArrowRightIcon, FileJson, GitCommitHorizontal, SquarePlay } from "lucide-react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import AnimatedShinyText from "@/components/ui/animated-shiny-text";
+import { getMetadata } from "@/app/layout";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export const metadata = getMetadata({
+  title: "Home",
+});
+
+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/getting-started/changelog"
+        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">
+          <div
+            className={cn(
+              "group rounded-full border border-black/5 bg-black/5 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-accent dark:border-white/5 dark:bg-transparent dark:hover:bg-accent",
+            )}
+          >
+            <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>🚀 New Version - Release v1.11.0</span>
+              <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
+            </AnimatedShinyText>
+          </div>
+        </div>
+      </Link>
+    <div className="w-full max-w-[800px] pb-8">
+        <h1 className="mb-4 text-2xl font-bold sm:text-5xl">DocuBook Starter Templates</h1>
+        <p className="mb-8 sm:text-xl text-muted-foreground">
+            Get started by editing app/page.tsx . Save and see your changes instantly.{' '}
+            <Link className="text-primary underline" href="https://www.docubook.pro/docs/getting-started/introduction" target="_blank">
+            Read Documentations
+            </Link>
+        </p>
+    </div>
+      <div className="flex flex-row items-center gap-6 mb-10">
+        <Link
+          href={`/docs${page_routes[0].href}`}
+          className={buttonVariants({
+            className: "px-6 bg-accent text-white hover:bg-primary dark:bg-accent dark:hover:bg-primary",
+            size: "lg",
+          })}
+        >
+          Get Started
+        </Link>
+        <Link
+          href="https://www.youtube.com/channel/UCWRCKHQCS-LCjd2WfDJCvRg?sub_confirmation=1"
+          target="_blank"
+          className={buttonVariants({
+            variant: "secondary",
+            className: "px-6 bg-gray-200 text-gray-900 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
+            size: "lg",
+          })}
+        >
+          Subscribe Now
+        </Link>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 py-12">
+        <Card className="px-2 py-6">
+          <CardHeader className="flex flex-row justify-center items-center gap-3">
+            <FileJson className="size-6 text-primary" />
+            <CardTitle className="text-xl">docu.json</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p>Edit the docu.json file to change the content in the header, footer and sidebar.</p>
+          </CardContent>
+        </Card>
+        <Card className="px-2 py-6">
+          <CardHeader className="flex flex-row justify-center items-center gap-3">
+            <GitCommitHorizontal className="size-6 text-primary" />
+            <CardTitle className="text-xl">CHANGELOG.md</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p>Manage changes to each version of your application in the CHANGELOG.md file.</p>
+          </CardContent>
+        </Card>
+        <Card className="px-2 py-6">
+          <CardHeader className="flex flex-row justify-center items-center gap-3">
+            <SquarePlay className="size-6 text-primary" />
+            <CardTitle className="text-xl">Docu Play</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p>Easy to write interactive markdown content with a playground.</p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/src/dist/components/GithubStart.tsx

@@ -0,0 +1,44 @@
+'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;