@mgks/docmd 0.1.2 → 0.1.4

package/docs/content/no-style-example.md

@@ -0,0 +1,110 @@
+---
+title: "No-Style Page Example"
+description: "An example of a page using the no-style feature"
+noStyle: true
+components:
+  meta: true
+  favicon: true
+  css: true
+  theme: true
+  scripts: true
+customHead: |
+  <style>
+    body {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+      margin: 0;
+      padding: 0;
+      line-height: 1.6;
+    }
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 40px 20px;
+    }
+    .header {
+      text-align: center;
+      margin-bottom: 40px;
+    }
+    .header h1 {
+      font-size: 3rem;
+      margin-bottom: 10px;
+      color: #4a6cf7;
+    }
+    .header p {
+      font-size: 1.2rem;
+      color: #666;
+    }
+    .content {
+      background-color: #f8f9fa;
+      padding: 30px;
+      border-radius: 8px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+    }
+    .button {
+      display: inline-block;
+      padding: 12px 24px;
+      background-color: #4a6cf7;
+      color: white;
+      text-decoration: none;
+      border-radius: 4px;
+      font-weight: 600;
+      margin-top: 20px;
+    }
+    .button:hover {
+      background-color: #3a5ce4;
+    }
+    [data-theme="dark"] {
+      color-scheme: dark;
+    }
+    [data-theme="dark"] body {
+      background-color: #121212;
+      color: #e0e0e0;
+    }
+    [data-theme="dark"] .content {
+      background-color: #1e1e1e;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    }
+    [data-theme="dark"] .header p {
+      color: #aaa;
+    }
+  </style>
+bodyClass: "no-style-example"
+---
+
+<div class="container">
+  <div class="header">
+    <h1>No-Style Page Example</h1>
+    <p>This page demonstrates the no-style feature with a custom layout</p>
+  </div>
+  
+  <div class="content">
+    <h2>What is this page?</h2>
+    <p>
+      This is an example page that uses the <code>noStyle: true</code> frontmatter option to create a completely custom page layout.
+      Unlike regular documentation pages, this page doesn't use the standard docmd layout with sidebar navigation and table of contents.
+    </p>
+    
+    <h2>How does it work?</h2>
+    <p>
+      The <code>noStyle</code> option tells docmd to use a special template that only includes the components you explicitly request
+      via the <code>components</code> object in frontmatter. This gives you complete control over the page structure.
+    </p>
+    
+    <h2>Features enabled on this page:</h2>
+    <ul>
+      <li><strong>meta</strong>: Meta tags, title, and description for SEO</li>
+      <li><strong>favicon</strong>: The site favicon</li>
+      <li><strong>css</strong>: Basic CSS for markdown content</li>
+      <li><strong>theme</strong>: Theme support for light/dark mode</li>
+      <li><strong>scripts</strong>: JavaScript for functionality</li>
+    </ul>
+    
+    <h2>Custom styling</h2>
+    <p>
+      This page includes custom CSS in the <code>customHead</code> frontmatter field. This allows you to define page-specific styles
+      without affecting the rest of your site.
+    </p>
+    
+    <a href="/content/no-style-pages/" class="button">Get Back to No-Style Pages Documentation</a>
+  </div>
+</div> 

package/docs/content/no-style-pages.md

@@ -0,0 +1,202 @@
+---
+title: "No-Style Pages"
+description: "Create custom standalone pages with minimal styling and only the components you need."
+---
+
+# No-Style Pages
+
+docmd offers a "no-style" page format that gives you maximum flexibility to create custom standalone pages while still leveraging the docmd infrastructure. This is perfect for creating:
+
+- Landing pages with custom layouts
+- Welcome pages with unique designs
+- Single-page websites
+- Special marketing pages
+- Any page that needs a completely custom design
+
+## How It Works
+
+To create a no-style page, add `noStyle: true` to your page's frontmatter. This tells docmd to use a special template that only includes the components you explicitly request.
+
+By default, a no-style page will render just your content with minimal HTML structure. You can then selectively enable specific components via the `components` object in frontmatter.
+
+## HTML Support
+
+No-style pages fully support raw HTML content without any escaping or processing. You can write pure HTML in your markdown files, and it will be rendered exactly as written. This gives you complete control over the page structure and design.
+
+Unlike regular markdown pages, where HTML might be processed or escaped, no-style pages treat your content as raw HTML, making them perfect for custom layouts and designs.
+
+## Basic Example
+
+Here's a minimal example of a no-style page:
+
+```yaml
+---
+title: "Welcome"
+description: "Welcome to my project"
+noStyle: true
+components:
+  meta: true  # Include meta tags, title, description
+  css: false  # Don't include default CSS
+---
+
+<div style="text-align: center; padding: 50px;">
+  <h1>Welcome to My Project</h1>
+  <p>This is a completely custom page with only the components I need.</p>
+  <a href="/docs/" class="button">View Documentation</a>
+</div>
+```
+
+## Available Components
+
+You can control exactly which components are included in your page by setting them to `true` or `false` in the `components` object:
+
+| Component | Description | Default |
+|-----------|-------------|---------|
+| `meta` | Meta tags, title, description | `true` |
+| `siteTitle` | Include site title after page title | `true` |
+| `favicon` | Include favicon | `true` |
+| `css` | Include main CSS | `false` |
+| `highlight` | Include syntax highlighting CSS | `false` |
+| `theme` | Include theme-specific CSS | `false` |
+| `customCss` | Include custom CSS files from config | `false` |
+| `pluginStyles` | Include plugin-specific CSS | `false` |
+| `pluginHeadScripts` | Include plugin scripts in head | `false` |
+| `layout` | Use main content layout (`true`, `'full'`, or `false`) | `false` |
+| `sidebar` | Include sidebar | `false` |
+| `header` | Include page header | `false` |
+| `pageTitle` | Include page title in header | `false` |
+| `footer` | Include page footer | `false` |
+| `branding` | Include docmd branding in footer | `false` |
+| `logo` | Include logo in sidebar | `false` |
+| `navigation` | Include navigation in sidebar | `false` |
+| `themeToggle` | Include theme toggle button | `false` |
+| `toc` | Include table of contents | `false` |
+| `scripts` | Include all scripts | `false` |
+| `customJs` | Include custom JS files from config | `false` |
+| `pluginBodyScripts` | Include plugin scripts at end of body | `false` |
+
+## Layout Options
+
+The `components.layout` property has three possible values:
+
+- `false` (default): No layout wrapper, just your raw content
+- `true`: Use the main content layout with optional header and footer
+- `'full'`: Same as `true`, a full layout with content area
+
+## Sidebar Option
+
+If you set `components.sidebar: true`, the sidebar will be included with optional logo, navigation, and theme toggle button.
+
+## Custom HTML in Head and Body
+
+You can also include custom HTML in the head and body sections:
+
+```yaml
+---
+title: "Custom Page"
+noStyle: true
+customHead: |
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+  <style>
+    body { font-family: 'Roboto', sans-serif; }
+  </style>
+customScripts: |
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      console.log('Page loaded!');
+    });
+  </script>
+bodyClass: "landing-page"
+---
+```
+
+## Complete Example
+
+Here's a more complete example of a landing page:
+
+```yaml
+---
+title: "My Project"
+description: "A powerful tool for developers"
+noStyle: true
+components:
+  meta: true
+  favicon: true
+  css: true
+  theme: true
+  layout: true
+  header: true
+  pageTitle: true
+  footer: true
+  branding: true
+  scripts: true
+customHead: |
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
+  <style>
+    body { font-family: 'Poppins', sans-serif; }
+    .hero { text-align: center; padding: 80px 20px; }
+    .cta-button { display: inline-block; padding: 12px 24px; background: #4a6cf7; color: white; 
+                 text-decoration: none; border-radius: 4px; font-weight: 600; }
+  </style>
+bodyClass: "landing-page"
+---
+
+<div class="hero">
+  <h1>Welcome to My Project</h1>
+  <p>A powerful tool that helps developers build amazing things.</p>
+  <a href="/docs/" class="cta-button">Get Started</a>
+</div>
+
+<div class="features">
+  <div class="feature">
+    <h2>Easy to Use</h2>
+    <p>Simple API and clear documentation make it easy to get started.</p>
+  </div>
+  <div class="feature">
+    <h2>Powerful</h2>
+    <p>Advanced features for when you need them.</p>
+  </div>
+  <div class="feature">
+    <h2>Flexible</h2>
+    <p>Adapt to your workflow, not the other way around.</p>
+  </div>
+</div>
+```
+
+## HTML and Markdown Mixed Content
+
+No-style pages support both HTML and Markdown content. You can freely mix them in your page:
+
+```markdown
+---
+title: "Mixed Content"
+noStyle: true
+components:
+  meta: true
+  css: true
+---
+
+<div style="text-align: center">
+  <h1>My Custom Page</h1>
+</div>
+
+## Regular Markdown Heading
+
+This is regular **Markdown** content that will be processed normally.
+
+<div class="custom-section">
+  <h3>HTML Section</h3>
+  <p>This is HTML content within the page.</p>
+</div>
+
+- Markdown list item 1
+- Markdown list item 2
+```
+
+## Best Practices
+
+1. Start with minimal components and add only what you need
+2. Use the `customHead` property for page-specific styles
+3. Consider creating a separate CSS file for your custom pages
+4. Test your page in both light and dark modes if using theme support
+5. Remember that no-style pages still benefit from docmd's plugins (SEO, analytics, etc.) 

package/docs/contributing.md

@@ -58,6 +58,13 @@ To set up `docmd` for local development:
    * Follow the existing code style and formatting.
    * Consider running `npm run lint` to check for style issues (if set up).
 
+### Environment Setup
+
+To enable live change tracking for internal files during development, set the DOCMD_DEV environment variable:
+
+- **Temporarily:** Run `export DOCMD_DEV=true` in your terminal before starting the dev server.
+- **Permanently:** Add `export DOCMD_DEV=true` to your `~/.zshrc` file and run `source ~/.zshrc`.
+
 ## Pull Request Process
 
 Once you're satisfied with your changes:

package/docs/deployment.md

@@ -59,14 +59,12 @@ The most robust and automated way to deploy to GitHub Pages is using a GitHub Ac
 Create a file at `.github/workflows/deploy-docs.yml` with the following content:
 
 ```yaml
-name: Deploy docmd docs to Pages
+name: Deploy docmd docs to GitHub Pages
 
 on:
-  # Run on pushes to main branch
   push:
-    branches: ["main"]
-  # Allows manual workflow trigger from Actions tab
-  workflow_dispatch:
+    branches: ["main"]  # Your default branch
+  workflow_dispatch:   # Allows manual workflow trigger from Actions tab
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
@@ -74,46 +72,39 @@ permissions:
   pages: write
   id-token: write
 
-# Allow only one concurrent deployment
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
-
 jobs:
-  build:
+  build-and-deploy:
     runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: '20' # Or the Node.js version docmd supports/requires
+          node-version: '22'
           cache: 'npm'
+
       - name: Install docmd (globally or from devDependencies)
-        # If docmd is a dev dependency of the project being documented:
-        # run: npm ci && npm run build:docs # Assuming 'build:docs' script runs 'docmd build'
-        # If installing docmd globally for this action:
-        run: npm install -g docmd # Or your scoped package name e.g. @mgks/docmd
+        run: npm install -g @mgks/docmd
+
       - name: Build site with docmd
         run: docmd build # Assumes config.js is in the root and correctly points to srcDir/outputDir
+
       - name: Setup Pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v5
+
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
-          # This should be your outputDir path
-          path: './site' # or './docs' if you set outputDir: 'docs'
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
+          path: ./site # This should be your outputDir path
+
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4
 ```
 
 Then:

package/docs/getting-started/basic-usage.md

@@ -36,6 +36,7 @@ Create your Markdown (`.md`) files inside the `docs/` directory. You can organiz
 
 ```
 my-awesome-docs/
+├── assets/
 ├── docs/
 │   ├── index.md
 │   └── api/
@@ -47,7 +48,7 @@ my-awesome-docs/
 └── config.js
 ```
 
-Each Markdown file should start with YAML frontmatter to define metadata like the page title. See [Writing Content > Frontmatter](/writing-content/frontmatter/) for details.
+Each Markdown file should start with YAML frontmatter to define metadata like the page title. See [Content > Frontmatter](/content/frontmatter/) for details.
 
 ## 3. Preview Your Site (`docmd dev`)
 
@@ -85,4 +86,4 @@ This command:
 
 The contents of the `site/` directory are all you need to deploy your documentation. You can upload this folder to any static web hosting provider. See [Deployment](/deployment/) for more information.
 
-This covers the fundamental workflow of using `docmd`. Next, you'll want to learn more about [Writing Content](/writing-content/) and [Configuration](/configuration/).
+This covers the fundamental workflow of using `docmd`. Next, you'll want to learn more about [Content](/content/) and [Configuration](/configuration/).

package/docs/getting-started/index.md

@@ -11,11 +11,11 @@ Whether you're documenting a new open-source project, an internal tool, or just
 
 ## What You'll Learn:
 
-*   **[Installation](./installation.md):** How to install `docmd` on your system using npm.
-*   **[Basic Usage](./basic-usage.md):**
+*   **[Installation](/getting-started/installation/):** How to install `docmd` on your system using npm.
+*   **[Basic Usage](/getting-started/basic-usage/):**
     *   Initializing a new `docmd` project with `docmd init`.
     *   Adding and structuring your Markdown content.
     *   Building your static site with `docmd build`.
     *   Previewing your site with live reloading using `docmd dev`.
 
-Ready to begin? Let's start with [Installation](./installation.md).
+Ready to begin? Let's start with [Installation](/getting-started/installation/).

package/docs/getting-started/installation.md

@@ -5,7 +5,7 @@ description: "Learn how to install docmd on your system globally or as a project
 
 # Installation
 
-You can install `docmd` using npm (Node Package Manager), which comes with Node.js. If you don't have Node.js and npm installed, please visit [nodejs.org](https://nodejs.org/) to download and install them first (Node.js version 20.x or higher is recommended for `docmd`).
+You can install `docmd` using npm (Node Package Manager), which comes with Node.js. If you don't have Node.js and npm installed, please visit [nodejs.org](https://nodejs.org/) to download and install them first (Node.js version 22.x or higher is required for `docmd`).
 
 ## Global Installation (Recommended for CLI Use)
 

package/docs/index.md

@@ -1,56 +1,140 @@
 ---
-title: "Minimalist Markdown Docs Generator"
-description: "Generate beautiful, lightweight static documentation sites directly from your Markdown files with docmd. Zero clutter, just content."
+title: "Documentation. Zero Clutter. Just Content."
+description: "A lightweight static documentation site generator that transforms Markdown into beautiful, responsive documentation websites."
+noStyle: true
+components:
+  meta: true
+  favicon: true
+  css: false
+  theme: false
+  scripts: false
+customHead: |
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=PT+Mono:wght@700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/assets/css/welcome.css">
+  <script>
+    // Initialize theme from localStorage or system preference
+    function initTheme() {
+      const storedTheme = localStorage.getItem('docmd-theme');
+      if (storedTheme) {
+        document.body.setAttribute('data-theme', storedTheme);
+      } else {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        document.body.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
+      }
+    }
+
+    // Toggle theme between light and dark
+    function toggleTheme() {
+      const currentTheme = document.body.getAttribute('data-theme');
+      const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+      document.body.setAttribute('data-theme', newTheme);
+      localStorage.setItem('docmd-theme', newTheme);
+    }
+
+    // Run on page load
+    document.addEventListener('DOMContentLoaded', initTheme);
+  </script>
 ---
 
-# docmd
-
-**Generate beautiful, lightweight static documentation sites directly from your Markdown files. Zero clutter, just content.**
-
-`docmd` is a Node.js-based command-line tool that transforms a directory of Markdown files (`.md`) into a clean, fast, and themeable static website. It prioritizes simplicity for the author, leveraging standard Markdown and intuitive configuration, while producing elegant and functional documentation sites.
-
-::: callout tip
-This very documentation site is built using `docmd`!
-:::
-
-## Core Philosophy
-
-*   **Markdown First:** Your content lives in standard `.md` files with simple YAML frontmatter.
-*   **Minimal Configuration:** Sensible defaults with straightforward overrides via `config.js`.
-*   **Lightweight Build:** Fast generation process using Node.js, no complex framework dependencies for the build itself.
-*   **Beautiful Defaults:** Clean, responsive design with light/dark themes and syntax highlighting out-of-the-box.
-*   **Static Output:** Deploy the generated `site/` folder anywhere (GitHub Pages, Netlify, Vercel, etc.).
-
-## Key Features
-
-*   📝 **Standard Markdown & Frontmatter:** Write content naturally, define page metadata (title, description) easily.
-*   🎨 **Themeable:** Built-in light/dark modes, customizable via CSS variables. Uses `highlight.js` for code blocks.
-*   🧩 **Custom Containers:** Add richer components like callouts, cards, and steps using simple `::: name :::` syntax.
-*   ⚙️ **Config-Driven Navigation:** Define your site structure and sidebar navigation in `config.js`. Supports nested items.
-*   🚀 **Fast Static Build:** Node.js script quickly processes files into optimized HTML & CSS.
-*   💻 **Simple CLI:** Easy-to-use commands (`docmd build`, `docmd init`, `docmd dev`) with clear feedback.
-*   🌐 **Deploy Anywhere:** Generates a standard static `site/` directory.
-
-## Get Started Quickly
-
-1.  **Install `docmd`:**
-    ```bash
-    npm install -g @mgks/docmd
-    ```
-2.  **Initialize Your Project:**
-    ```bash
-    cd my-project-docs
-    docmd init
-    ```
-3.  **Write Your Content:**
-    Create `.md` files in the `docs/` directory.
-4.  **Preview Live:**
-    ```bash
-    docmd dev
-    ```
-5.  **Build for Production:**
-    ```bash
-    docmd build
-    ```
-
-Dive into the [Getting Started](/getting-started/installation/) guide for more details, or explore the sidebar to learn about specific features.
+<div class="header-top">
+  <button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark/light mode">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun-moon-icon lucide-sun-moon"><path d="M12 8a2.83 2.83 0 0 0 4 4 4 4 0 1 1-4-4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.9 4.9 1.4 1.4"/><path d="m17.7 17.7 1.4 1.4"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.3 17.7-1.4 1.4"/><path d="m19.1 4.9-1.4 1.4"/></svg>
+  </button>
+</div>
+
+<div class="landing-container">
+  <div class="content-side">
+    <div class="logo">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-feather-icon lucide-feather"><path d="M12.67 19a2 2 0 0 0 1.416-.588l6.154-6.172a6 6 0 0 0-8.49-8.49L5.586 9.914A2 2 0 0 0 5 11.328V18a1 1 0 0 0 1 1z"/><path d="M16 8 2 22"/><path d="M17.5 15H9"/></svg>
+      <span class="logo-text">docmd</span>
+    </div>
+
+    <h1>Beautiful Documentation.<br />Zero Clutter. Just Content.</h1>
+
+    <p class="tagline">
+      Transform your Markdown files into elegant, responsive documentation sites with zero setup.
+    </p>
+    
+    <div class="features">
+      <div class="feature">
+        <div class="feature-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-down-icon lucide-file-down"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M12 18v-6"/><path d="m9 15 3 3 3-3"/></svg>
+        </div>
+        <div class="feature-text">
+          <strong>Markdown Powered</strong>
+          Write in Markdown – get clean HTML
+        </div>
+      </div>
+
+      <div class="feature">
+        <div class="feature-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-monitor-smartphone-icon lucide-monitor-smartphone"><path d="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"/><path d="M10 19v-3.96 3.15"/><path d="M7 19h5"/><rect width="6" height="10" x="16" y="12" rx="2"/></svg>
+        </div>
+        <div class="feature-text">
+          <strong>Responsive Design</strong>
+          Looks great on any device
+        </div>
+      </div>
+
+      <div class="feature">
+        <div class="feature-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun-icon lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
+        </div>
+        <div class="feature-text">
+          <strong>Light & Dark Modes</strong>
+          Themes with auto dark mode
+        </div>
+      </div>
+
+      <div class="feature">
+        <div class="feature-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
+        </div>
+        <div class="feature-text">
+          <strong>Highly Customizable</strong>
+          Extend with plugins & containers
+        </div>
+      </div>
+    </div>
+
+    <div class="buttons">
+      <a href="/getting-started/" class="btn btn-primary">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket-icon lucide-rocket"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg>
+        Get Started
+      </a>
+      <a href="https://github.com/mgks/docmd" target="_blank" rel="noopener" class="btn btn-secondary">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg>
+        GitHub
+      </a>
+    </div>
+
+    <div class="social-links">
+      <a href="https://github.com/sponsors/mgks" target="_blank" rel="noopener" class="social-link" title="Buy me a Coffee – GitHub Sponsors">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart-handshake-icon lucide-heart-handshake"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/><path d="M12 5 9.04 7.96a2.17 2.17 0 0 0 0 3.08c.82.82 2.13.85 3 .07l2.07-1.9a2.82 2.82 0 0 1 3.79 0l2.96 2.66"/><path d="m18 15-2-2"/><path d="m15 18-2-2"/></svg>
+      </a>
+      <a href="https://twitter.com/share?url=https://docmd.mgks.dev" target="_blank" rel="noopener" class="social-link">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4.5-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg>
+      </a>
+    </div>
+  </div>
+  
+  <div class="preview-side">
+    <div class="preview-stack">
+      <div class="preview-image top">
+        <img src="/assets/images/preview-light-1.png" alt="docmd documentation preview" class="light-img">
+        <img src="/assets/images/preview-dark-1.png" alt="docmd documentation preview" class="dark-img">
+      </div>
+      <div class="preview-image middle">
+        <img src="/assets/images/preview-light-2.png" alt="docmd documentation preview" class="light-img">
+        <img src="/assets/images/preview-dark-2.png" alt="docmd documentation preview" class="dark-img">
+      </div>
+      <div class="preview-image bottom">
+        <img src="/assets/images/preview-light-3.png" alt="docmd documentation preview" class="light-img">
+        <img src="/assets/images/preview-dark-3.png" alt="docmd documentation preview" class="dark-img">
+      </div>
+    </div>
+  </div>
+</div>