npm - @docubook/create - Versions diffs - 1.15.0 → 1.15.2 - Mend

@docubook/create 1.15.0 → 1.15.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/src/dist/contents/docs/getting-started/customize/index.mdx DELETED Viewed

@@ -1,92 +0,0 @@
----
-title: Customize
-description: This guide provides instructions on customizing our application.
-date: 29-11-2024
----
-## Markdown Options
-To customize Markdown parsing, navigate to `@lib/markdown.ts` and locate the `parseMdx` function. You can add your desired plugins in the `mdxOptions`. Here’s an example:
-```ts:lib/markdown.ts
-async function parseMdx<Frontmatter>(rawMdx: string) {
-    return await compileMDX<Frontmatter>({
-        source: rawMdx,
-        options: {
-            parseFrontmatter: true,
-            mdxOptions: {
-                // Add your plugins here
-                rehypePlugins: [Shiki],
-                remarkPlugins: [remarkGfm],
-            },
-        },
-        components,
-    });
-}
-```
-## Fonts
-Currently, this project uses the `Geist` font. If you want to use other fonts, you can change the configuration in the main layout as shown below:
-### Google Fonts
-To use a Google font, import your desired font from `next/font/google`, initialize it with options, and apply the variable to the `body`:
-```tsx:app/layout.tsx
-import { Space_Grotesk } from "next/font/google";
-const fontSans = Space_Grotesk({
-    display: "swap",
-    variable: "--font-regular",
-    weight: "400",
-    subsets: ["latin"],
-});
-export default function RootLayout({ children }) {
-    return (
-        <html lang="en">
-            <body className={`${fontSans.variable} font-regular`}>
-                {children}
-            </body>
-        </html>
-    );
-}
-```
-### Local Fonts
-To use a local font, you need to use the local font loader from Next.js. Pass the options and apply them to the `body`:
-```tsx:app/layout.tsx
-import localFont from "next/font/local";
-const geistSans = localFont({
-    src: "./fonts/GeistVF.woff",
-    variable: "--font-regular",
-    weight: "100 900",
-});
-export default function RootLayout({ children }) {
-    return (
-        <html lang="en">
-            <body className={`${geistSans.variable} font-regular`}>
-                {children}
-            </body>
-        </html>
-    );
-}
-```
-For both options, ensure that you add the variable to `tailwind.config.ts`:
-```ts:tailwind.config.ts
-{
-    // ...
-    extend: {
-        fontFamily: {
-            regular: ["var(--font-regular)"],
-        },
-    }
-}
-```

package/src/dist/contents/docs/getting-started/index.mdx DELETED Viewed

@@ -1,9 +0,0 @@
----
-title: Getting Started
-description: Set up Your Documentations with DocuBook
-date: 29-05-2025
----
-Welcome to DocuBook! This guide will help you set up and customize your documentation site quickly. Whether you're creating API references, user guides, or technical documentation, these components will help you build a professional and consistent documentation experience. Follow the steps below to get started with DocuBook and make the most of its powerful features.
-<Outlet path="getting-started" />

package/src/dist/contents/docs/getting-started/installation/index.mdx DELETED Viewed

@@ -1,84 +0,0 @@
----
-title: Installation
-description: Installation guide for our application.
-date: 17-02-2025
----
-Setting up DocuBook is straightforward, with options to clone the repository or use the convenient `npx` command. DocuBook requires [Node.js](https://nodejs.org/) version 18 or higher for optimal performance.
-## Clone Repository
-To get started, you can clone the DocuBook repository directly from GitHub.
-<Stepper>
-  <StepperItem title="Step 1: Clone the DocuBook Repository">
-    Begin by cloning the DocuBook repository from GitHub:
-    ```bash
-    git clone --branch main https://github.com/DocuBook/docubook.git
-    ```
-  </StepperItem>
-  <StepperItem title="Step 2: Access the Project Directory">
-    After cloning, navigate into the project directory to start setting up:
-    ```bash
-    cd docubook
-    ```
-  </StepperItem>
-  <StepperItem title="Step 3: Install Required Dependencies">
-    Install all necessary project dependencies with npm:
-    ```bash
-    npm install
-    ```
-  </StepperItem>
-  <StepperItem title="Step 4: Launch the Development Server">
-    Finally, start the development server to view the project locally:
-    ```bash
-    npm run dev
-    ```
-  </StepperItem>
-</Stepper>
-## Quick Setup with CLI
-For a faster setup, use the `cli` command to create a new DocuBook project in one step:
-<Tabs defaultValue="npm" className="pt-5 pb-1">
-  <TabsList>
-    <TabsTrigger value="npm">npm</TabsTrigger>
-    <TabsTrigger value="pnpm">pnpm</TabsTrigger>
-    <TabsTrigger value="bun">bun</TabsTrigger>
-    <TabsTrigger value="yarn">yarn</TabsTrigger>
-  </TabsList>
-  <TabsContent value="npm">
-    ```shell
-    npx @docubook/create@latest
-    ```
-  </TabsContent>
-  <TabsContent value="pnpm">
-    ```shell
-    pnpm dlx @docubook/create@latest
-    ```
-  </TabsContent>
-  <TabsContent value="bun">
-    ```shell
-    bunx @docubook/create@latest
-    ```
-  </TabsContent>
-  <TabsContent value="yarn">
-    ```shell
-    yarn dlx @docubook/create@latest
-    ```
-  </TabsContent>
-</Tabs>
-With this setup, you’ll have a ready-to-use DocuBook instance to start building your documentation.

package/src/dist/contents/docs/getting-started/project-structure/index.mdx DELETED Viewed

@@ -1,87 +0,0 @@
----
-title: Project Structure
-description: This section provides an overview of Project Structure.
-date: 29-11-2024
----
-## app
-This folder contains the main application code for Next.js, managing layouts, routing, and specific content pages. It is organized to support both the `docs` sections, with dedicated pages and layouts for each section.
-```
-app                         // Main Next.js application folder
-├── page.tsx                // Hero page - the entry point of the app showcasing key content
-├── layout.tsx              // Main layout file, applies global navigation and footer
-└── docs
-    ├── layout.tsx          // Documentation layout with sidebar, providing easy navigation across doc pages
-    └── [[...slug]]         // Catch-all route to handle nested documentation pages, allowing flexible doc structure
-```
-## components
-This folder contains all reusable components used throughout the project. It’s structured to categorize components, making it easy to locate and manage UI elements, Markdown customizations, and navigation.
-```
-components                    // Reusable components
-├── ui                        // ShadCN components, includes standardized UI elements like buttons, forms, and modals
-├── markdown                  // Custom Markdown components for rendering rich Markdown content
-│   ├── CodeBlock.tsx         // Component for rendering syntax-highlighted code blocks
-│   ├── Image.tsx             // Component for handling responsive images in Markdown
-│   └── Table.tsx             // Component to render tables with consistent styling
-└── navbar.tsx                // Main navigation component for the site header, managing links and responsive behavior
-```
-## styles
-This folder contains global and component-specific CSS files, allowing for project-wide styling consistency and customizations.
-```
-styles                        // CSS files
-├── globals.css               // Global CSS file, includes Tailwind base, utilities, and custom global styles
-├── syntax.css                // Syntax highlighting styles, providing consistent code block appearance across the site
-└── overrides.css             // Additional custom styles that override specific component or plugin defaults
-```
-## contents
-This folder stores all Markdown content for the documentation and blog sections, with clear organization by content type. Each Markdown file represents a single piece of content, with frontmatter used for metadata.
-```
-contents                      // Markdown content for blogs and documentation
-├── docs                      // Documentation content, structured to support nested sections and pages
-│   ├── getting-started       // Main Folder at the Contents
-│       └─── installation     // Subfolder for tutorial-style content
-|            └── index.mdx    // Step-by-step tutorial on a specific topic
-```
-## public
-This folder holds all static assets, such as images, videos, fonts, and icons. These files are directly accessible via URL, so it’s important to avoid sensitive or private content here.
-```
-public                        // Publicly accessible assets
-├── images                    // Image assets, used across various parts of the app
-│   ├── og-image.png          // Default opengraph image for thumbnail
-│   └── docu.svg              // Your site Logo
-├── favicon.ico               // Favicon for the app
-└── videos                    // Video files for media content, if any
-```
-## lib
-This folder contains helper functions and utilities used across the application, such as Markdown parsing and routing logic. These utilities help keep the codebase clean and organized by separating out common functionality.
-```
-lib                           // Utility or helper functions
-├── changelog.ts              // Change log for the app, used to display recent changes and updates
-├── markdown.ts               // Markdown parsing logic, converts Markdown to HTML and adds custom components
-├── routes-config.ts          // Routing configuration for docs, maps URLs to content files for dynamic routing
-└── utils.tsx                 // General utility functions used across the app, such as data formatting and validation helpers
-```
-## Additional
-- **`package.json`**: Contains metadata about the project, dependencies, and scripts for building and running the application.
-- **`tailwind.config.ts`**: Configures Tailwind CSS, allowing customization of theme colors, fonts, and responsive breakpoints specific to this project.
-This structure organizes your project in a way that supports scalability and maintainability, making it easier to navigate and work on different sections of the application.

package/src/dist/contents/docs/getting-started/theme-colors/coffee/index.mdx DELETED Viewed

@@ -1,165 +0,0 @@
----
-title: Coffee
-description: A warm, minimalistic design inspired by early computing. This theme is a replica of the "Coffee" theme from the `shiki-twoslash` package.
-date: 2025-05-30
----
-## Styles
-<Note type="note" title="note">
-  You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
-</Note>
-<Tabs defaultValue="globals" className="pt-5 pb-1">
-  <TabsList>
-    <TabsTrigger value="globals">globals.css</TabsTrigger>
-    <TabsTrigger value="syntax">syntax.css</TabsTrigger>
-  </TabsList>
-  <TabsContent value="globals">
-    ```css:globals.css
-/* Rich Coffee Theme */
-@layer base {
-    :root {
-        --background: 35 40% 96%;
-        --foreground: 25 25% 10%;
-        --card: 0 0% 100%;
-        --card-foreground: 25 25% 10%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 25 25% 10%;
-        --primary: 25 60% 40%;
-        --primary-foreground: 0 0% 100%;
-        --secondary: 35 30% 90%;
-        --secondary-foreground: 25 25% 10%;
-        --muted: 35 20% 94%;
-        --muted-foreground: 25 15% 35%;
-        --accent: 30 50% 38%;
-        --accent-foreground: 0 0% 100%;
-        --destructive: 5 85% 45%;
-        --destructive-foreground: 0 0% 100%;
-        --border: 30 15% 85%;
-        --input: 30 15% 88%;
-        --ring: 25 60% 40%;
-        --radius: 0.5rem;
-        --chart-1: 25 60% 45%;
-        --chart-2: 30 55% 45%;
-        --chart-3: 35 50% 42%;
-        --chart-4: 20 45% 38%;
-        --chart-5: 40 45% 40%;
-        --line-number-color: rgba(0, 0, 0, 0.08);
-    }
-    .dark {
-        --background: 30 10% 6%;
-        --foreground: 35 20% 94%;
-        --card: 30 10% 8%;
-        --card-foreground: 35 20% 94%;
-        --popover: 30 10% 8%;
-        --popover-foreground: 35 20% 94%;
-        --primary: 30 45% 52%;
-        --primary-foreground: 30 10% 6%;
-        --secondary: 30 12% 14%;
-        --secondary-foreground: 35 20% 94%;
-        --muted: 30 10% 16%;
-        --muted-foreground: 30 15% 60%;
-        --accent: 28 40% 48%;
-        --accent-foreground: 0 0% 100%;
-        --destructive: 5 80% 55%;
-        --destructive-foreground: 0 0% 100%;
-        --border: 30 10% 20%;
-        --input: 30 10% 20%;
-        --ring: 30 45% 52%;
-        --chart-1: 30 45% 52%;
-        --chart-2: 28 40% 50%;
-        --chart-3: 32 45% 50%;
-        --chart-4: 25 35% 46%;
-        --chart-5: 35 40% 48%;
-        --line-number-color: rgba(255, 255, 255, 0.12);
-    }
-}
-```
-</TabsContent>
-  <TabsContent value="syntax">
-    ```css:syntax.css
-/* Rich Coffee Theme - Syntax Highlighting */
-/* Light Mode */
-.keyword {
-  color: hsl(25 60% 35%); /* Rich coffee brown */
-}
-.function {
-  color: hsl(30 55% 38%); /* Warm coffee brown */
-}
-.punctuation {
-  color: hsl(30 15% 55%); /* Muted brown */
-}
-.comment {
-  color: hsl(25 15% 45%); /* Muted brown */
-  font-style: italic;
-  opacity: 0.9;
-}
-.string,
-.constant,
-.annotation,
-.boolean,
-.number {
-  color: hsl(32 50% 40%); /* Warm brown with hint of orange */
-}
-.tag {
-  color: hsl(25 65% 30%); /* Dark rich coffee */
-}
-.attr-name {
-  color: hsl(28 55% 38%); /* Warm brown */
-}
-.attr-value {
-  color: hsl(35 55% 35%); /* Slightly orange brown */
-}
-/* Dark Mode */
-.dark .keyword {
-  color: hsl(30 50% 65%); /* Light warm brown */
-}
-.dark .function {
-  color: hsl(28 55% 68%); /* Light warm brown */
-}
-.dark .string,
-.dark .constant,
-.dark .annotation,
-.dark .boolean,
-.dark .number {
-  color: hsl(35 50% 72%); /* Light warm brown with hint of orange */
-}
-.dark .tag {
-  color: hsl(30 50% 75%); /* Light warm brown */
-}
-.dark .attr-name {
-  color: hsl(28 45% 70%); /* Light warm brown */
-}
-.dark .attr-value {
-  color: hsl(35 50% 70%); /* Light warm brown with hint of orange */
-}
-.dark .comment {
-  color: hsl(30 15% 65%); /* Light brown-gray */
-  opacity: 0.8;
-}
-.dark .punctuation {
-  color: hsl(30 15% 70%); /* Light brown-gray */
-  opacity: 0.9;
-}
-```
-</TabsContent>
-</Tabs>

package/src/dist/contents/docs/getting-started/theme-colors/default/index.mdx DELETED Viewed

@@ -1,160 +0,0 @@
----
-title: Default Theme
-description: This page explains the Modern Blue theme colors used in DocuBook, which is a default theme provided by DocuBook.
-date: 2025-05-20
----
-## Styles
-<Note type="note" title="note">
-  You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
-</Note>
-<Tabs defaultValue="globals" className="pt-5 pb-1">
-  <TabsList>
-    <TabsTrigger value="globals">globals.css</TabsTrigger>
-    <TabsTrigger value="syntax">syntax.css</TabsTrigger>
-  </TabsList>
-  <TabsContent value="globals">
-    ```css:globals.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);
-        }
-    .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);
-        }
-}
-```
-</TabsContent>
-  <TabsContent value="syntax">
-    ```css:syntax.css
-/* Modern Blue Theme */
-/* Light Mode */
-.keyword {
-  color: #1d4ed8; /* Darker blue for better contrast */
-}
-.function {
-  color: #0369a1; /* Deep blue */
-}
-.punctuation {
-  color: #4b5563; /* Slate gray */
-}
-.comment {
-  color: #6b7280; /* Muted gray */
-  font-style: italic;
-}
-.string,
-.constant,
-.annotation,
-.boolean,
-.number {
-  color: #0d9488; /* Teal for better distinction */
-}
-.tag {
-  color: #1d4ed8; /* Matching keyword color */
-}
-.attr-name {
-  color: #0284c7; /* Sky blue */
-}
-.attr-value {
-  color: #2563eb; /* Primary blue */
-}
-/* Dark Mode */
-.dark .keyword {
-  color: #60a5fa; /* Soft blue */
-}
-.dark .function {
-  color: #38bdf8; /* Sky blue */
-}
-.dark .string,
-.dark .constant,
-.dark .annotation,
-.dark .boolean,
-.dark .number {
-  color: #2dd4bf; /* Teal */
-}
-.dark .tag {
-  color: #60a5fa; /* Matching keyword color */
-}
-.dark .attr-name {
-  color: #7dd3fc; /* Lighter blue */
-}
-.dark .attr-value {
-  color: #3b82f6; /* Brighter blue */
-}
-.dark .comment {
-  color: #9ca3af; /* Lighter gray for dark mode */
-}
-.dark .punctuation {
-  color: #9ca3af; /* Lighter gray for dark mode */
-}
-```
-</TabsContent>
-</Tabs>