@docubook/flame 1.7.2 → 2.0.0-alpha.1

package/template/docs/guide/components.mdx

@@ -1,256 +1,74 @@
 ---
 title: Components
-description: Built-in MDX components available in DocuBook Flame.
-date: 2026-05-25
+description: The directive syntax for built-in components — callouts, tabs, cards, code blocks, and more.
 ---
 
-DocuBook Flame includes pre-built MDX components you can use directly in your docs.
+Components are **directives**, not JSX — content stays plain markdown. A few to get you started; the full reference lives at [docubook.pro/docs/components](https://www.docubook.pro/docs/components/accordion).
 
-> For full documentation and live examples, visit [docubook.pro/docs/components](https://www.docubook.pro/docs/components/accordion).
+## Callout
 
-## Note
-
-Display messages with different severity levels.
-
-```jsx:filename.mdx
-<Note type="tip" title="Tip">
-  This is a tip to suggests a helpful.
-</Note>
-<Note type="info" title="Info">
-  This is a general note to convey information to the user.
-</Note>
-<Note type="danger" title="Danger">
-  This is a danger alert to notify the user of a critical issue.
-</Note>
-<Note type="warning">
-  This note uses default title and default icon from its type.
-</Note>
-<Note type="success" title="Success">
-  This is a success message to inform the user of successful actions.
-</Note>
-```
-
-## Tabs
-
-Organize content into switchable sections.
-
-````jsx:filename.mdx
-<Tabs className="pt-5 pb-1">
-  <Tab title="Java">
-    ```java:HelloWorld.java
-    // HelloWorld.java
-    public class HelloWorld {
-        public static void main(String[] args) {
-            System.out.println("Hello, World!");
-        }
-    }
-    ```
-  </Tab>
-  <Tab title="TypeScript">
-    ```typescript:helloWorld.ts
-    // helloWorld.ts
-    function helloWorld(): void {
-        console.log("Hello, World!");
-    }
-    helloWorld();
-    ```
-  </Tab>
-</Tabs>
-````
-
-## Card
-
-Display content in a compact card layout.
-
-```jsx:filename.mdx
-<Card title="Card with Link and icon" 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>
+```md
+:::tip{title="Optional title"}
+Callout content.
+:::
 ```
 
-## Card Group
+Variants: `tip`, `info`, `warning`, `danger`, `success`.
 
-Group multiple cards in a grid.
+## Code block with title
 
-```jsx:filename.mdx
-<Cards 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>
-</Cards>
+````md
+```javascript:app.js showLineNumbers {2-3}
+const docs = "markdown";
+console.log(docs);
 ```
-
-## Accordion
-
-````markdown:filename.mdx
-<Accordions>
-<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="With Code Block">
-    You can put other components inside Accordions.
-```jsx:helloword.jsx
-class HelloWorld {
-public static void main(String[] args) {
-        System.out.println("Hello, World!");
-        }
-}
-```
-</Accordion>
-</Accordions>
 ````
 
-## Steps / Stepper
-
-Display step-by-step instructions.
-
-````jsx:filename.mdx
-<Steps>
-  <Step title="Step 1: Clone the DocuBook Repository">
-    ```bash
-    git clone https://github.com/DocuBook/docubook.git
-    ```
-  </Step>
-  <Step title="Step 2: Access the Project Directory">
-    ```bash
-    cd docubook
-    ```
-  </Step>
-  <Step title="Step 3: Install Required Dependencies">
-    ```bash
-    pnpm install
-    ```
-  </Step>
-</Steps>
-````
-
-## Button
-
-Styled buttons with icons.
-
-```jsx
-<Button
-  text="Learn More"
-  href="https://example.com"
-  icon="MoveUpRight"
-  size="md"
-  variant="secondary"
-  target="_blank"
-/>
-```
-
-## File Tree
-
-Display hierarchical file structures.
-
-```jsx
-<Files>
-  <Folder name="src">
-    <File name="App.tsx" />
-    <File name="index.tsx" />
-    <Folder name="components">
-      <File name="Button.tsx" />
-    </Folder>
-  </Folder>
-  <File name="package.json" />
-</Files>
-```
-
-## Code Block
-
-Syntax-highlighted code with title and line highlighting.
+The `:filename` suffix adds a title bar; `showLineNumbers` and `{2-3}` enable line numbers and highlighting.
 
-````jsx
-```ts:server.ts {3-5}
-import { serve } from "bun";
+## Tabs
 
-serve({
-  port: 3000,
-  fetch: () => new Response("Hello!"),
-});
-```
+````md
+::::tabs
+:::tab{title="Bun"}
+bun run dev
+:::
+:::tab{title="Node"}
+npm run dev
+:::
+::::
 ````
 
-## Image
-
-Responsive images with optional caption.
-
-```markdown:filename.mdx
-![Alt text for the image](https://via.placeholder.com/150)
+## Card group
+
+```md
+::::cards{cols="2"}
+:::card{title="First" icon="Heading1"}
+Card content.
+:::
+:::card{title="Second" icon="Heading2"}
+Card content.
+:::
+::::
 ```
 
-## Link
-
-Styled links with external indicator.
+## Mermaid
 
-```markdown:filename.mdx
-[Visit OpenAI](https://www.openai.com)
+```mermaid
+flowchart LR
+    A --> B
 ```
 
-## Keyboard
-
-Display keyboard shortcuts.
+## Tooltip
 
-```tsx
-{/* Windows style (default) */}
-<Kbd show="ctrl" /> + <Kbd show="v" />
-
-{/* Mac style */}
-<Kbd show="cmd" type="mac" /> + <Kbd show="v" type="mac" />
+```md
+Inline :tooltip[hover me]{tip="Extra details"}.
 ```
 
-Renders as:
-- Windows: <Kbd show="ctrl" type="window" /> + <Kbd show="v" type="window" />
-- Mac: <Kbd show="cmd" type="mac" /> + <Kbd show="v" type="mac" />
-
-## Tooltips
-
-Hover tooltips for inline content.
+## Youtube
 
-```markdown:filename.mdx
-This a tooltip <Tooltip text="Hover me show on top" tip="npx @docubook/cli@latest" side="top" /> and <Tooltip text="Hover me show on bottom" tip="npx @docubook/cli@latest" side="bottom" /> thanks you.
+```md
+::youtube{videoId="OPM2t54T-Vo"}
 ```
 
-## YouTube
-
-Embed YouTube videos.
-
-```markdown:filename.mdx
-<Youtube videoId="OPM2t54T-Vo" />
-```
-
-> Usage
-> for example the youtube URL show this https://www.youtube.com/watch?v=OPM2t54T-Vo 
-> the ID is `OPM2t54T-Vo`
-
-## Release Note
-
-Display changelog entries.
-
-```markdown:filename.mdx
-<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
-  <Changes type="added">
-    - New feature to improve accessibility
-    - Keyboard navigation support for dialog components
-  </Changes>
-  <Changes type="fixed">
-    - Bug fix for mobile menu
-    - Fixed loading issues on documentation pages
-  </Changes>
-</Release>
-```
+> All directives render server-side to static HTML — no runtime JavaScript unless the component needs it.

package/template/docs/guide/routing.mdx

@@ -1,9 +1,9 @@
 ---
 title: Routing
-description: How Flame maps MDX files to static HTML pages.
+description: How Flame maps markdown files to static pages.
 ---
 
-Flame uses **filesystem-based routing** — every `.mdx` file in `docs/` compiles to a matching `.html` path:
+Flame uses **filesystem-based routing** — every markdown file in `docs/` compiles to a matching `.html` path:
 
 ```
 docs/
@@ -16,10 +16,12 @@ docs/
     └── routing.mdx                 → /docs/guide/routing.html
 ```
 
-## Auto-routing
+## Add a page
 
-When `routes: []` in `docu.json`, Flame automatically scans `docs/` at build time and generates the sidebar from the directory structure.
+1. Create `docs/guide/faq.mdx`
+2. Add frontmatter: `title` and `description`
+3. Write markdown — the page appears in the sidebar and search automatically
 
-## Manual routes
+## Sidebar order
 
-Define `routes` in `docu.json` for a custom sidebar. Add `context` groups with icons for multi-section documentation. See this project's `docu.json` for examples.
+When `routes: []`, Flame scans `docs/` and builds the sidebar from the directory structure. Define `routes` in `docu.json` for a custom order and grouped sections — see this project's `docu.json` for a working example.

package/template/docs/index.mdx

@@ -1,15 +1,16 @@
 ---
-title: DocuBook Flame 🔥
-description: An open-source alternative to Mintlify or GitBook — MDX-powered documentation, static HTML output.
+title: My Docs
+description: Documentation powered by DocuBook Flame.
 ---
 
-**@docubook/flame** is a static site generator for documentation. Write in MDX, compile to flat static HTML — no server required. Runs on **Bun**, **Node.js**, and **Deno**.
+Welcome to **My Docs** — a static documentation site built with [DocuBook Flame](https://www.docubook.pro/).
+
+Flame compiles the markdown in `docs/` into flat static HTML. No server, no database, no runtime — deploy anywhere.
 
 ```mermaid
-flowchart LR
-    A[Your .mdx content] --> B[flame build]
-    B --> C[Static HTML + assets]
-    C --> D[Vercel / Netlify / GitHub Pages / S3]
+flowchart TD
+    A["docs/*.md"] --> B["flame build"]
+    B --> C["Static HTML + assets"]
+    C --> D["Vercel · Netlify · GitHub Pages · S3"]
 ```
 
-Check the sidebar for guides on getting started, configuration, components, routing, and deployment.

package/template/docu.json

@@ -7,6 +7,9 @@
     "favicon": "/docs/assets/images/favicon.ico",
     "ogImage": "/docs/assets/images/og.png"
   },
+  "sidebar": {
+    "context": "separator"
+  },
   "themes": {
     "colors": "default"
   },
@@ -71,13 +74,10 @@
     "social": []
   },
   "repo": {
-    "url": "",
+    "url": "https://github.com/DocuBook/docubook",
     "path": "blob/main/{filePath}",
     "edit": false
   },
-  "sidebar": {
-    "context": "dropdown"
-  },
   "routes": [
     {
       "title": "Getting Started",