@docubook/create 2.3.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docubook/create",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "CLI to create DocuBook projects",
   "main": "src/index.js",
   "type": "module",

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

@@ -81,10 +81,7 @@ export default async function DocsPage(props: PageProps) {
   if (!res) notFound();
 
   const { title, description, image: _image, date } = res.frontmatter;
-
-  // File path for edit link
-  const filePath = `docs/${slug.join("/") || ""}/index.mdx`;
-
+  const filePath = res.filePath;
   const tocs = await getDocsTocs(pathName);
 
   return (
@@ -93,7 +90,7 @@ export default async function DocsPage(props: PageProps) {
         <MobToc tocs={tocs} />
         <DocsBreadcrumb paths={slug} />
         <Typography>
-          <h1 className="text-3xl !-mt-0.5">{title}</h1>
+          <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

package/src/dist/app/layout.tsx

@@ -1,11 +1,10 @@
 import type { Metadata } from "next";
-import { ThemeProvider } from "@/components/contexts/theme-provider";
+import { ThemeProvider } from "@/components/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 "@docsearch/css";
 import "@/styles/algolia.css";
 import "@/styles/syntax.css";
@@ -91,7 +90,6 @@ export default function RootLayout({
             {children}
           </main>
           <Footer />
-          <Toaster position="top-center" />
         </ThemeProvider>
       </body>
     </html>

package/src/dist/app/page.tsx

@@ -1,9 +1,7 @@
 import { buttonVariants } from "@/components/ui/button";
-import { page_routes } from "@/lib/routes-config";
-import { ArrowRightIcon, Terminal, AppWindow, FileText } from "lucide-react";
+import { page_routes } from "@/lib/routes";
+import { Terminal, AppWindow, FileText } 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";
 
@@ -14,23 +12,6 @@ export const metadata = getMetadata({
 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/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>🚀 Release v2.3.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">

package/src/dist/components/SearchModal.tsx

@@ -6,7 +6,7 @@ import { ArrowUpIcon, ArrowDownIcon, CornerDownLeftIcon, FileTextIcon } from "lu
 import Anchor from "./anchor";
 import { advanceSearch, cn } from "@/lib/utils";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { page_routes } from "@/lib/routes-config";
+import { page_routes } from "@/lib/routes";
 import {
   DialogContent,
   DialogHeader,

package/src/dist/components/context-popover.tsx

@@ -2,7 +2,7 @@
 
 import { usePathname, useRouter } from "next/navigation";
 import { useState, useEffect } from "react";
-import { ROUTES, EachRoute } from "@/lib/routes-config";
+import { ROUTES, EachRoute } from "@/lib/routes";
 import { cn } from "@/lib/utils";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";

package/src/dist/components/docs-menu.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ROUTES, EachRoute } from "@/lib/routes-config";
+import { ROUTES, EachRoute } from "@/lib/routes";
 import SubLink from "./sublink";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
@@ -15,7 +15,7 @@ function getCurrentContext(path: string): string | undefined {
   if (!path.startsWith('/docs')) return undefined;
 
   // Extract the first segment after /docs/
-  const match = path.match(/^\/docs\/([^\/]+)/);
+  const match = path.match(/^\/docs\/([^/]+)/);
   return match ? match[1] : undefined;
 }
 

package/src/dist/components/markdown/AccordionGroupMdx.tsx

@@ -2,7 +2,7 @@
 
 import React, { ReactNode } from "react";
 import clsx from "clsx";
-import { AccordionGroupContext } from "@/components/contexts/AccordionContext";
+import { AccordionGroupContext } from "@/components/AccordionContext";
 
 interface AccordionGroupProps {
   children: ReactNode;

package/src/dist/components/markdown/AccordionMdx.tsx

@@ -4,7 +4,7 @@ import { ReactNode, useState, useContext } from 'react';
 import { ChevronRight } from 'lucide-react';
 import * as Icons from "lucide-react";
 import { cn } from '@/lib/utils';
-import { AccordionGroupContext } from '@/components/contexts/AccordionContext';
+import { AccordionGroupContext } from '@/components/AccordionContext';
 
 type AccordionProps = {
     title: string;
@@ -42,12 +42,12 @@ const Accordion: React.FC<AccordionProps> = ({
             >
                 <ChevronRight
                     className={cn(
-                        "w-4 h-4 text-muted-foreground transition-transform duration-200 flex-shrink-0",
+                        "w-4 h-4 text-muted-foreground transition-transform duration-200 shrink-0",
                         isOpen && "rotate-90"
                     )}
                 />
-                {Icon && <Icon className="text-foreground w-4 h-4 flex-shrink-0" />}
-                <h3 className="font-medium text-base text-foreground !m-0">{title}</h3>
+                {Icon && <Icon className="text-foreground w-4 h-4 shrink-0" />}
+                <h3 className="font-medium text-base text-foreground m-0!">{title}</h3>
             </button>
 
             {isOpen && (

package/src/dist/components/markdown/CardMdx.tsx

@@ -24,13 +24,13 @@ const Card: React.FC<CardProps> = ({ title, icon, href, horizontal, children, cl
         "bg-card text-card-foreground border-border",
         "hover:bg-accent/5 hover:border-accent/30",
         "flex gap-2",
-        horizontal ? "flex-row items-center gap-1" : "flex-col space-y-1",
+        horizontal ? "flex-row items-start gap-1" : "flex-col space-y-1",
         className
       )}
     >
-      {Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" />}
-      <div className="flex-1 min-w-0 my-auto h-full">
-        <span className="text-base font-semibold text-foreground">{title}</span>
+      {Icon && <Icon className={clsx("w-5 h-5 text-primary shrink-0", horizontal && "mt-0.5")} />}
+      <div className="flex-1 min-w-0">
+        <div className="text-base font-semibold text-foreground leading-6">{title}</div>
         <div className="text-sm text-muted-foreground -mt-3">{children}</div>
       </div>
     </div>

package/src/dist/components/markdown/FileTreeMdx.tsx

@@ -24,7 +24,7 @@ const FileComponent = ({ name }: FileProps) => {
       tabIndex={-1}
     >
       <FileIcon className={`
-        h-3.5 w-3.5 flex-shrink-0 transition-colors
+        h-3.5 w-3.5 shrink-0 transition-colors
         ${isHovered ? 'text-accent' : 'text-muted-foreground'}
       `} />
       <span className="font-mono text-sm text-foreground truncate">{name}</span>
@@ -61,7 +61,7 @@ const FolderComponent = ({ name, children }: FileProps) => {
         {hasChildren ? (
           <ChevronRight
             className={`
-              h-3.5 w-3.5 flex-shrink-0 transition-transform duration-200
+              h-3.5 w-3.5 shrink-0 transition-transform duration-200
               ${isOpen ? 'rotate-90' : ''}
               ${isHovered ? 'text-foreground/70' : 'text-muted-foreground'}
             `}
@@ -71,12 +71,12 @@ const FolderComponent = ({ name, children }: FileProps) => {
         )}
         {isOpen ? (
           <FolderOpen className={`
-            h-4 w-4 flex-shrink-0 transition-colors
+            h-4 w-4 shrink-0 transition-colors
             ${isHovered ? 'text-accent' : 'text-muted-foreground'}
           `} />
         ) : (
           <FolderIcon className={`
-            h-4 w-4 flex-shrink-0 transition-colors
+            h-4 w-4 shrink-0 transition-colors
             ${isHovered ? 'text-accent/80' : 'text-muted-foreground/80'}
           `} />
         )}

package/src/dist/components/markdown/ImageMdx.tsx

@@ -69,7 +69,7 @@ export default function Image({
                             initial={{ opacity: 0 }}
                             animate={{ opacity: 1 }}
                             exit={{ opacity: 0 }}
-                            className="fixed inset-0 z-[99999] flex items-center justify-center bg-black/90 backdrop-blur-md p-4 md:p-10 cursor-zoom-out"
+                            className="fixed inset-0 z-99999 flex items-center justify-center bg-black/90 backdrop-blur-md p-4 md:p-10 cursor-zoom-out"
                             onClick={() => setIsOpen(false)}
                         >
                             {/* Close Button */}

package/src/dist/components/markdown/ReleaseMdx.tsx

@@ -32,7 +32,7 @@ function Release({ version, title, date, children }: ReleaseProps) {
           </div>
         )}
       </div>
-      <h3 className="text-2xl font-bold text-foreground/90 mb-6 !mt-0">
+      <h3 className="text-2xl font-bold text-foreground/90 mb-6 mt-0!">
         {title}
       </h3>
       <div className="space-y-8">

package/src/dist/components/markdown/TooltipsMdx.tsx

@@ -19,7 +19,7 @@ const Tooltip: React.FC<TooltipProps> = ({ text, tip }) => {
         {text}
       </span>
       {visible && (
-        <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-64 bg-popover text-popover-foreground text-sm p-3 rounded-md shadow-lg border border-border/50 break-words text-left z-50">
+        <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-64 bg-popover text-popover-foreground text-sm p-3 rounded-md shadow-lg border border-border/50 wrap-break-word text-left z-50">
           {tip}
           <span className="absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-popover rotate-45 border-b border-r border-border/50 -z-10" />
         </span>

package/src/dist/components/sublink.tsx

@@ -1,4 +1,4 @@
-import { EachRoute } from "@/lib/routes-config";
+import { EachRoute } from "@/lib/routes";
 import Anchor from "./anchor";
 import {
   Collapsible,

package/src/dist/docs/components/accordion-group.mdx

@@ -0,0 +1,68 @@
+---
+title : Accordion Group
+description: for writing multiple accordions and grouping them together
+date : 10-08-2025
+---
+
+An accordion is like a button that opens and closes information. To avoid clutter, long information can be hidden first and then revealed when clicked.
+
+<Note type="note" title="Note">
+  Group related accordions together using `<AccordionGroup>`. This creates a cohesive section of accordions that can be individually expanded or collapsed.
+</Note>
+
+## Usage
+
+<AccordionGroup>
+<Accordion title="Basic Usage">
+    example of using regular paragraph content inside the accordion component
+</Accordion>
+
+<Accordion title="With icon props" icon="MousePointerClick">
+    This accordion includes a [Lucide Icon](https://lucide.dev/icons/) because the `icon` prop is provided.
+</Accordion>
+
+<Accordion title="Expanded by Default" defaultOpen>
+    You can put other components inside Accordions.
+```jsx:helloword.jsx
+class HelloWorld {
+public static void main(String[] args) {
+        System.out.println("Hello, World!");
+        }
+}
+```
+</Accordion>
+</AccordionGroup>
+
+## Writing Markdown
+
+````plaintext
+<AccordionGroup>
+<Accordion title="Basic Usage">
+    This accordion includes a [Lucide Icon](https://lucide.dev/icons/) because the `icon` prop is provided.
+</Accordion>
+
+<Accordion title="With icon props" icon="MousePointerClick">
+    This accordion includes a Lucide icon because the `icon` prop is provided.
+</Accordion>
+
+<Accordion title="Expanded by Default" defaultOpen>
+    You can put other components inside Accordions.
+```jsx:helloword.jsx
+class HelloWorld {
+public static void main(String[] args) {
+        System.out.println("Hello, World!");
+        }
+}
+```
+</Accordion>
+</AccordionGroup>
+````
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | string | - | **Required**. The text displayed in the accordion header. |
+| `children` | ReactNode | null | The content to be displayed when the accordion is expanded. Can be plain text, markdown, or React components. |
+| `defaultOpen` | boolean | false | When true, the accordion will be expanded by default. |
+| `icon` | string | undefined | Optional. Adds a Lucide icon before the title in the accordion header. |

package/src/dist/docs/components/accordion.mdx

@@ -0,0 +1,59 @@
+---
+title: Accordion
+description: A component used to create collapsible content that can be hidden and shown again.
+date: 22-12-2024
+---
+
+## Preview
+
+### Basic Usage
+
+```plaintext
+<Accordion title="Click to expand">
+    This is a simple accordion component that can be toggled by clicking the header. The content can include any valid React nodes, including text, components, and markdown.
+</Accordion>
+```
+
+Render as :
+
+<Accordion title="Click to expand">
+    This is a simple accordion component that can be toggled by clicking the header. The content can include any valid React nodes, including text, components, and markdown.
+</Accordion>
+
+### With Code Block
+
+````plaintext
+<Accordion title="Code Block" defaultOpen={true} icon="Code">
+    ```javascript:main.js showLineNumbers {3-4}
+    function isRocketAboutToCrash() {
+        // Check if the rocket is stable
+        if (!isStable()) {
+            NoCrash(); // Prevent the crash
+        }
+    }
+    ```
+</Accordion>
+````
+
+Render as :
+
+<Accordion title="Code Block" defaultOpen={true} icon="Code">
+    ```javascript:main.js showLineNumbers {3-4}
+    function isRocketAboutToCrash() {
+        // Check if the rocket is stable
+        if (!isStable()) {
+            NoCrash(); // Prevent the crash
+        }
+    }
+    ```
+</Accordion>
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | string | - | **Required**. The text displayed in the accordion header. |
+| `children` | ReactNode | null | The content to be displayed when the accordion is expanded. Can be plain text, markdown, or React components. |
+| `defaultOpen` | boolean | false | When true, the accordion will be expanded by default. |
+| `icon` | string | undefined | Optional. Adds a Lucide icon before the title in the accordion header. |
+

package/src/dist/docs/components/button.mdx

@@ -0,0 +1,40 @@
+---
+title: Button
+description: A component used to create buttons that can be used to trigger actions or navigate to other pages.
+date: 14-12-2024
+---
+
+## Preview
+
+<Button
+  text="Learn More"
+  href="https://learn.example.com"
+  icon="MoveUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+
+## Props
+
+| Prop        | Type     | Default     | Description                                  |
+| ----------- | -------- | ----------- | -------------------------------------------- |
+| `text`      | string   | undefined   | The button text                              |
+| `href`      | string   | **required**| The URL to navigate to                       |
+| `icon`      | string   | undefined   | Lucide icon name (e.g. "MoveUpRight")       |
+| `size`      | string   | "md"        | Button size: `"sm"`, `"md"`, or `"lg"`      |
+| `target`    | string   | undefined   | Link target (e.g. "_blank")                 |
+| `variation` | string   | "primary"   | Button style: `"primary"`, `"accent"`, or `"outline"` |
+
+## Output Markdown
+
+```markdown
+<Button
+  text="Learn More"
+  href="https://learn.example.com"
+  icon="MoveUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+```

package/src/dist/docs/components/card-group.mdx

@@ -0,0 +1,47 @@
+---
+title: Card Group
+description: A component used to create card groups that can be used to display multiple cards in a compact and organized way.
+date: 20-02-2025
+---
+
+## Preview
+
+<CardGroup cols={2}>
+<Card title="Heading 1" icon="Heading1">
+  This is an example of card content with columns.
+</Card>
+<Card title="Heading 2" icon="Heading2">
+  This is an example of card content with columns.
+</Card>
+<Card title="Grid Card" icon="Grid" horizontal>
+    This is a horizontal card layout.
+</Card>
+<Card title="Horizontal Card" icon="Layout" horizontal>
+    This is a horizontal card layout.
+</Card>
+</CardGroup>
+
+## Props
+
+| Prop          | Type     | Default | Description                                             |
+| ------------- | -------- | ------- | ------------------------------------------------------- |
+| `cols`       | number | `{2}`   | By default 2 The number of columns per row                                |
+
+## Output Markdown
+
+```markdown
+<CardGroup cols={2}>
+<Card title="Heading 1" icon="Heading1">
+  This is an example of card content with columns.
+</Card>
+<Card title="Heading 2" icon="Heading2">
+  This is an example of card content with columns.
+</Card>
+<Card title="Grid Card" icon="Grid" horizontal>
+    This is a horizontal card layout.
+</Card>
+<Card title="Horizontal Card" icon="Layout" horizontal>
+    This is a horizontal card layout.
+</Card>
+</CardGroup>
+```

package/src/dist/docs/components/card.mdx

@@ -0,0 +1,68 @@
+---
+title: Cards
+description: A component used to create cards that can be used to display content in a compact and organized way.
+date: 20-02-2025
+---
+
+## Example
+
+### Card with Link and icon
+
+<Card title="Click on me" icon="Link" href="/docs/components/card-group">
+  This is how you use a card with an icon and a link. Clicking on this card
+  brings you to the Card Group page.
+</Card>
+
+### Card Horizontal
+
+<Card title="Horizontal Card" icon="Layout" horizontal>
+  This is a horizontal card layout.
+</Card>
+
+### Card Simple
+
+<Card title="Simple Card">
+  This is a simple card without an icon or link.
+</Card>
+
+
+## Props
+
+| Prop          | Type     | Default | Description                                             |
+| ------------- | -------- | ------- | ------------------------------------------------------- |
+| `title`       | string   | null    | The value of card title.                                |
+| `icon`        | string   | null  | The value of card icon render from lucide.              |
+| `href`        | string   | null  | The value of card link url.              |
+| `horizontal`   | boolean  | undefined    | horizontal layout for card. |
+
+## Output Markdown
+
+<Tabs defaultValue="link" className="pt-5 pb-1">
+  <TabsList>
+    <TabsTrigger value="link">Link & Icon</TabsTrigger>
+    <TabsTrigger value="horizontal">Horizontal</TabsTrigger>
+    <TabsTrigger value="simple">Simple</TabsTrigger>
+  </TabsList>
+  <TabsContent value="link">
+    ```markdown
+    <Card title="Click on me" icon="Link" href="/docs/getting-started/components/button">
+        This is how you use a card with an icon and a link. Clicking on this card
+        brings you to the Card Group page.
+    </Card>
+    ```
+  </TabsContent>
+  <TabsContent value="horizontal">
+    ```markdown
+    <Card title="Horizontal Card" icon="Layout" horizontal>
+        This is a horizontal card layout.
+    </Card>
+    ```
+  </TabsContent>
+  <TabsContent value="simple">
+    ```markdown
+    <Card title="Simple Card">
+        This is a simple card without an icon or link.
+    </Card>
+    ```
+  </TabsContent>
+</Tabs>

package/src/dist/docs/components/code-block.mdx

@@ -0,0 +1,67 @@
+---
+title: Code Block
+description: A component used to display code snippets with optional line numbering and line highlighting.
+date: 14-12-2024
+---
+
+## Preview
+
+```javascript:main.js showLineNumbers {3-4}
+function isRocketAboutToCrash() {
+    // Check if the rocket is stable
+    if (!isStable()) {
+        NoCrash(); // Prevent the crash
+    }
+}
+```
+
+In this example, line numbers are displayed for lines 3 and 4. You can specify which lines to highlight using the format `{2,3-5}`.
+
+## Output Markdown
+
+You can directly use the following syntax to create a code block with line numbers and highlight specific lines:
+
+````plaintext
+```javascript:main.js showLineNumbers {3-4}
+function isRocketAboutToCrash() {
+    // Check if the rocket is stable
+    if (!isStable()) {
+        NoCrash(); // Prevent the crash
+    }
+}
+```
+````
+
+## Features
+
+- **Language Title**: You can use a title for each programming language to render an icon and display a title bar. For example : `javascript:index.js`
+- **Line Numbers**: Enable line numbers by adding `showLineNumbers` after the opening backticks.
+- **Highlight Lines**: Specify lines to highlight using curly braces (e.g., `{2,3-5}`).
+- **Syntax Highlighting**: Use the appropriate language for syntax highlighting.
+
+## Language Support
+
+| **Language**         | **Title**                |
+| -------------------- | ------------------------ |
+| **javascript**       | `javascript:index.js`    |
+| **typescript**       | `typescript:index.ts`    |
+| **jsx** or **tsx**   | `jsx:index.jsx`          |
+| **python**           | `python:main.py`         |
+| **go**               | `go:main.go`             |
+| **php**              | `php:index.php`          |
+| **ruby**             | `ruby:main.rb`           |
+| **swift**            | `swift:main.swift`       |
+| **kotlin**           | `kotlin:main.kt`         |
+| **html**             | `html:index.html`        |
+| **css**              | `css:styles.css`         |
+| **sass** or **scss** | `sass:styles.sass`       |
+| **sql**              | `sql:database.sql`       |
+| **graphql**          | `graphql:database.gql`   |
+| **json**             | `json:config.json`       |
+| **yaml**             | `yaml:config.yml`        |
+| **toml**             | `toml:config.toml`       |
+| **docker**           | `docker:main.Dockerfile` |
+| **nginx**            | `nginx:config.nginx`     |
+| **gitignore**        | `gitignore:.git`         |
+| **bash**             | `bash:install.sh`        |
+| **markdown**         | `markdown:readme.md`     |

package/src/dist/docs/components/custom.mdx

@@ -0,0 +1,38 @@
+---
+title: Custom Components
+description: How to create custom components for Markdown.
+date: 14-12-2024
+---
+
+To add custom components in DocuBook, follow these steps:
+
+1. **Create Your Component**: First, create your custom component in the `@components/markdown` folder. For example, you might create a file named `Outlet.tsx`.
+
+2. **Import Your Component**: Next, open the `@lib/markdown.ts` file. This is where you'll register your custom component for use in Markdown.
+
+3. **Add Your Component to the Components Object**: In the `@lib/markdown.ts` file, import your custom component and add it to the `components` object. Here’s how to do it:
+
+```ts
+import Outlet from "@/components/markdown/outlet";
+
+// Add custom components
+const components = {
+  Outlet,
+};
+```
+
+4. **Using Your Custom Component in Markdown**: After registering your component, you can now use it anywhere in your Markdown content. For instance, if your `Outlet` component is designed to display additional information, you can use it as follows:
+
+### Markdown Example
+
+```markdown
+<Outlet>
+  This is some custom content rendered by the Outlet component!
+</Outlet>
+```
+
+### Rendered Output
+
+This will render the content inside the `Outlet` component, allowing you to create reusable and dynamic Markdown content.
+
+By following these steps, you can extend the capabilities of your Markdown documentation and create a more engaging user experience.