@mgks/docmd 0.1.2 → 0.1.4

package/.github/workflows/deploy-docmd.yml

@@ -23,11 +23,11 @@ jobs:
       - name: Set up Node.js ⚙️
         uses: actions/setup-node@v4
         with:
-          node-version: '22' # Use Node.js 22
+          node-version: '22'
           cache: 'npm'
 
       - name: Install Dependencies 📦
-        run: npm ci # Use ci for cleaner installs in CI
+        run: npm ci
 
       - name: Build docmd's Own Docs 🛠️
         run: node ./bin/docmd.js build

package/README.md

@@ -11,7 +11,7 @@
 
 <p align="center">
   <a href="https://www.npmjs.com/package/@mgks/docmd"><img src="https://img.shields.io/npm/v/@mgks/docmd.svg" alt="npm version"></a>
-  <a href="https://www.npmjs.com/package/@mgks/docmd"><img src="https://img.shields.io/npm/dm/@mgks/docmd.svg" alt="npm downloads"></a>
+  <a href="https://www.npmjs.com/package/@mgks/docmd"><img src="https://img.shields.io/npm/d18m/@mgks/docmd.svg" alt="npm downloads"></a>
   <a href="https://github.com/mgks/docmd/blob/main/LICENSE"><img src="https://img.shields.io/github/license/mgks/docmd.svg" alt="license"></a>
 </p>
 
@@ -24,6 +24,8 @@ Docmd (`docmd`) is a Node.js command-line tool dedicated to generating beautiful
 - 🚀 **Fast & Lightweight** - Static site generation with minimal JS
 - 🧩 **Custom Components** - Callouts, cards, steps, and more
 - 🔌 **Built-in Plugins** - SEO, Analytics, and Sitemap support
+- 🎭 **No-Style Pages** - Create custom standalone pages with complete HTML control
+- 🖌️ **Custom Styling** - Add custom CSS/JS and HTML directly in frontmatter
 - 💻 **Simple CLI** - Easy `init`, `dev`, and `build` commands
 - 🌐 **Deploy Anywhere** - Deploy the generated sites anywhere (GitHub Pages, Netlify, Vercel, etc.).
 

package/assets/css/welcome.css

@@ -0,0 +1,378 @@
+:root {
+    --primary-color: #047bf1;
+    --primary-hover: #026ed9;
+    --text-color: #333;
+    --text-light: #666;
+    --bg-color: #fff;
+    --bg-secondary: #f8f9fa;
+    --border-color: #eaeaea;
+    --shadow-color: rgba(0, 0, 0, 0.08);
+    --container-padding: 5rem;
+  }
+  
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --primary-color: #047bf1;
+      --primary-hover: #026ed9;
+      --text-color: #e0e0e0;
+      --text-light: #aaa;
+      --bg-color: #121212;
+      --bg-secondary: #1e1e1e;
+      --border-color: #333;
+      --shadow-color: rgba(0, 0, 0, 0.3);
+    }
+  }
+  
+  [data-theme="light"] {
+    --primary-color: #047bf1;
+    --primary-hover: #026ed9;
+    --text-color: #333;
+    --text-light: #666;
+    --bg-color: #fff;
+    --bg-secondary: #f8f9fa;
+    --border-color: #eaeaea;
+    --shadow-color: rgba(0, 0, 0, 0.35);
+
+}
+  
+  [data-theme="dark"] {
+    --primary-color: #1955b6;
+    --primary-hover: #084dbd;
+    --text-color: #e0e0e0;
+    --text-light: #aaa;
+    --bg-color: #121212;
+    --bg-secondary: #1e1e1e;
+    --border-color: #333;
+    --shadow-color: rgba(0, 0, 0, 0.87);
+
+}
+  
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    line-height: 1.5;
+    color: var(--text-color);
+    background-color: var(--bg-color);
+    height: 100vh;
+    display: flex;
+    overflow: hidden;
+  }
+  
+  .landing-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding: 0 var(--container-padding);
+    max-width: 1600px;
+    margin: 0 auto;
+  }
+  
+  .content-side {
+    flex: 1;
+    padding: 3rem 2rem 3rem 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+}
+  
+  .preview-side {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    position: relative;
+    overflow: visible;
+  }
+  
+  .header-top {
+    position: absolute;
+    top: 2rem;
+    right: 3rem;
+    z-index: 100;
+
+}
+  
+  .theme-toggle {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .theme-toggle:hover {
+    background: var(--border-color);
+  }
+  
+  .logo {
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
+  }
+  
+  .logo svg {
+    height: 48px;
+    width: auto;
+  }
+  
+  .logo-text {
+    font-family: 'PT Mono', monospace;
+    font-weight: 700;
+    font-size: 2em;
+    margin-left: .25em;
+
+}
+  
+  h1 {
+    font-size: 3rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    letter-spacing: -0.02em;
+  }
+  
+  .tagline {
+    font-size: 1.25rem;
+    color: var(--text-light);
+    margin-bottom: 2rem;
+    font-weight: 400;
+  }
+  
+  .features {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+  }
+  
+  .feature {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+  
+  .feature-icon {
+    background-color: var(--primary-color);
+    color: white;
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  
+  .feature-text {
+    font-size: 0.9rem;
+  }
+  
+  .feature-text strong {
+    display: block;
+    margin-bottom: 0.25rem;
+  }
+  
+  .buttons {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
+  
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 1rem;
+    text-decoration: none;
+    transition: all 0.2s ease;
+  }
+  
+  .btn-primary {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+  }
+  
+  .btn-primary:hover {
+    background-color: var(--primary-hover);
+  }
+  
+  .btn-secondary {
+    background-color: var(--bg-secondary);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+  }
+  
+  .btn-secondary:hover {
+    background-color: var(--border-color);
+  }
+  
+  .social-links {
+    display: flex;
+    gap: 1rem;
+    padding: 0 .25em;
+
+}
+  
+  .social-link {
+    color: var(--text-light);
+    transition: color 0.2s ease;
+  }
+  
+  .social-link:hover {
+    color: var(--primary-color);
+  }
+  
+  .preview-stack {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    transform: translateX(15%);
+    perspective: 1000px;
+
+}
+  
+  .preview-image {
+    position: absolute;
+    width: 100%;
+    max-width: 700px;
+    height: 400px;
+    border-radius: 20px;
+    box-shadow: 0 25px 50px -12px var(--shadow-color);
+    transition: all 0.3s ease;
+    overflow: hidden;
+
+}
+  
+  .preview-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: left top;
+    border-radius: 8px;
+    pointer-events: none;
+  }
+  
+  .preview-image.top {
+    z-index: 3;
+    transform: rotate(3deg) translateY(-10%) translateX(7%);
+
+}
+  
+  .preview-image.middle {
+    z-index: 2;
+    transform: rotate(-3deg) translateY(1%) translateX(-2%);
+
+}
+  
+  .preview-image.bottom {
+    z-index: 1;
+    transform: rotate(-8deg) translateY(10%) translateX(-10%);
+
+}
+  
+  body[data-theme="light"] .preview-image .light-img {
+    display: block;
+  }
+  
+  body[data-theme="light"] .preview-image .dark-img {
+    display: none;
+  }
+  
+  body[data-theme="dark"] .preview-image .light-img {
+    display: none;
+
+}
+  
+  body[data-theme="dark"] .preview-image .dark-img {
+    display: block;
+  }
+  
+  @media (max-width: 1400px) {
+    :root {
+      --container-padding: 3rem;
+    }
+    
+    .preview-stack {
+      transform: translateX(15%);
+    }
+  }
+  
+  @media (max-width: 1200px) {
+    :root {
+      --container-padding: 2rem;
+    }
+    
+    .preview-side {
+      display: none;
+    }
+    
+    .content-side {
+      max-width: 100%;
+      padding: 3rem 0;
+    }
+    
+    .header-top {
+      right: 2rem;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    :root {
+      --container-padding: 1.5rem;
+    }
+    body {
+      overflow: auto;
+    }
+    
+    .content-side {
+      padding: 2rem 0;
+    }
+    
+    h1 {
+      font-size: 2.5rem;
+    }
+    
+    .features {
+      grid-template-columns: 1fr;
+    }
+    
+    .buttons {
+      flex-direction: column;
+    }
+    
+    .header-top {
+      padding: 1rem 0;
+      text-align: center;
+      right: 1rem;
+    }
+    h1 {
+      font-size: 2.5rem;
+    }
+    .tagline{
+      font-size: 1em;
+      font-weight: 500;
+    }
+    .landing-container {
+      padding: 1rem;
+      flex-direction: column;
+    }
+  }
+.social-links .lucide-heart-handshake {
+    color: rgb(205, 39, 39);
+
+}

package/config.js

@@ -31,7 +31,7 @@ module.exports = {
 
   // Custom JavaScript Files
   customJs: [               // Array of paths to custom JS files, loaded at end of body
-    '/assets/js/docmd-image-lightbox.js', // Image lightbox functionality
+     '/assets/js/docmd-image-lightbox.js', // Image lightbox functionality
   ],
 
   // Plugins Configuration (Object format)
@@ -77,7 +77,8 @@ module.exports = {
   // Navigation Structure (Sidebar)
   // Icons are kebab-case names from Lucide Icons (https://lucide.dev/)
   navigation: [
-      { title: 'Home', path: '/', icon: 'home' },
+      { title: 'Welcome', path: '/', icon: 'feather' },
+      { title: 'Overview', path: '/overview', icon: 'home' },
       {
         title: 'Getting Started',
         icon: 'rocket',
@@ -96,6 +97,8 @@ module.exports = {
           { title: 'Markdown Syntax', path: '/content/markdown-syntax', icon: 'code-2' },
           { title: 'Images', path: '/content/images', icon: 'image' },
           { title: 'Custom Containers', path: '/content/custom-containers', icon: 'box' },
+          { title: 'No-Style Pages', path: '/content/no-style-pages', icon: 'layout' },
+          { title: 'No-Style Example', path: '/content/no-style-example', icon: 'sparkles' },
         ],
       },
       { title: 'Configuration', path: '/configuration', icon: 'settings' },
@@ -124,7 +127,9 @@ module.exports = {
       { title: 'Deployment', path: '/deployment', icon: 'upload-cloud' },
       { title: 'Contributing', path: '/contributing', icon: 'users-2' },
 
-      { title: 'GitHub', path: 'https://github.com/mgks/docmd', icon: 'github', external: true }
+      { title: 'GitHub', path: 'https://github.com/mgks/docmd', icon: 'github', external: true },
+      { title: 'Discussions', path: 'https://github.com/mgks/docmd/discussions', icon: 'message-square', external: true },
+      { title: 'Issues', path: 'https://github.com/mgks/docmd/issues', icon: 'badge-alert', external: true }
   ],
 
   // Footer Configuration

package/docs/cli-commands.md

@@ -85,8 +85,7 @@ This provides a fast feedback loop, allowing you to see your changes almost inst
     *   **Description:** Preserves existing asset files instead of updating them. Use this flag if you've customized any of the default assets and want to keep your modifications.
     *   **Example:** `docmd dev --preserve`
 
-*   `-p, --port <port_number>` (Future Option)
-    *   **Description:** While not yet implemented, a future version might allow specifying a custom port for the development server. Currently, it defaults to port 3000 or the next available port if 3000 is in use.
+**Note:** The development server starts on port 3000 by default. If port 3000 is already in use, the server will automatically try the next available port (3001, 3002, etc.) until it finds an open port.
 
 ## Global Options (Apply to all commands)
 

package/docs/configuration.md

@@ -24,7 +24,7 @@ module.exports = {
   outputDir: 'site',
 
   theme: {
-    name: 'default',        // Name of the built-in theme to use (e.g., 'default', 'classic')
+    name: 'sky',            // Name of the built-in theme to use (e.g., 'sky', 'default')
     defaultMode: 'light',   // 'light' or 'dark'
     enableModeToggle: true, // Show UI button to toggle light/dark modes
     customCss: [            // Array of paths to your custom CSS files
@@ -37,20 +37,32 @@ module.exports = {
     // '/js/extra-functionality.js', // Loaded at the end of the body
   ],
 
-  plugins: [
-    // Example: Enable built-in SEO enhancements
-    // ['seo', {
-    //   defaultDescription: 'A fantastic site about interesting things.',
-    //   openGraph: { defaultImage: '/assets/images/og-social-default.png' },
-    //   twitter: { cardType: 'summary_large_image', siteUsername: '@MyProject' }
-    // }],
-
-    // Example: Enable Google Analytics (Universal Analytics)
-    // ['analytics-google-ua', { trackingId: 'UA-XXXXXXXXX-Y' }],
+  plugins: {
+    // SEO Plugin Configuration
+    seo: {
+      defaultDescription: 'A fantastic site about interesting things.',
+      openGraph: { 
+        defaultImage: '/assets/images/og-social-default.png'
+      },
+      twitter: { 
+        cardType: 'summary_large_image', 
+        siteUsername: '@MyProject' 
+      }
+    },
 
-    // Example: Enable Google Analytics 4
-    // ['analytics-google-v4', { measurementId: 'G-XXXXXXXXXX' }],
-  ],
+    // Google Analytics 4
+    analytics: {
+      googleV4: { 
+        measurementId: 'G-XXXXXXXXXX' 
+      }
+    },
+    
+    // Sitemap generation
+    sitemap: {
+      defaultChangefreq: 'weekly',
+      defaultPriority: 0.8
+    }
+  },
 
   navigation: [
     { title: 'Home', path: '/', icon: 'home' }, // Icon names correspond to SVGs
@@ -137,15 +149,15 @@ Configures the visual theme of your site.
 *   **Paths:** Should be relative to the `outputDir` root (e.g., `'/js/my-analytics-alternative.js'`).
 *   **Example:** `customJs: ['/assets/js/interactive-component.js']`
 
-## `plugins` (Array)
-*   **Type:** `Array`
-*   **Default:** `[]`
-*   **Description:** An array to configure and enable plugins. `docmd` will ship with some core "local" plugins (like SEO and Analytics) that you can enable here. Future versions might support third-party plugins.
-*   **Format:** Each item in the array is typically another array: `['plugin-name', { pluginOptions }]` or a direct `require()` for local project plugins (advanced usage).
+## `plugins` (Object)
+*   **Type:** `Object`
+*   **Default:** `{}`
+*   **Description:** An object to configure and enable plugins. `docmd` ships with core plugins like SEO, Analytics, and Sitemap that you can configure here.
+*   **Format:** Each key in the object represents a plugin name, and its value is an object containing the plugin's configuration options.
 *   **Built-in Plugin Examples:**
-    *   `['seo', { defaultDescription: '...', openGraph: { ... }, ... }]`
-    *   `['analytics-google-ua', { trackingId: 'UA-...' }]`
-    *   `['analytics-google-v4', { measurementId: 'G-...' }]`
+    *   `seo: { defaultDescription: '...', openGraph: { ... }, ... }`
+    *   `analytics: { googleV4: { measurementId: 'G-XXXXXXXXXX' } }`
+    *   `sitemap: { defaultChangefreq: 'weekly', defaultPriority: 0.8 }`
 *   **See Also:** [Plugins](/plugins/)
 
 ## `navigation` (Array of Objects)

package/docs/content/frontmatter.md

@@ -26,7 +26,7 @@ tags:
 *   **`title`** (String, Required)
     *   **Purpose:** This is the primary title of the page.
     *   **Usage:**
-        *   Used for the HTML `<title>` tag (e.g., `Page Title | Site Title`).
+        *   Used for the HTML `<title>` tag (e.g., `Page Title : Site Title`).
         *   Often used as the main heading (`<h1>`) on the page by default (though themes can customize this).
         *   Used as the display text for links in the navigation sidebar if the path matches.
     *   **Example:** `title: "Installation Guide"`
@@ -68,7 +68,7 @@ This guide will walk you through installing our application...
 ```
 
 In this example:
-*   The browser tab will show "Installation Steps | Your Site Title".
+*   The browser tab will show "Installation Steps : Your Site Title".
 *   The `<meta name="description">` will be set.
 *   The `order: 1` field is available if you later want to sort "guides" pages by this value.
 

package/docs/content/index.md

@@ -9,9 +9,10 @@ docmd uses Markdown files to create beautiful documentation. This section covers
 
 ## Available Guides
 
-- [**Frontmatter**](/content/frontmatter) - Learn how to add metadata to your pages
-- [**Markdown Syntax**](/content/markdown-syntax) - Basic and advanced Markdown features
-- [**Images**](/content/images) - How to add and style images in your documentation
-- [**Custom Containers**](/content/custom-containers) - Special content blocks like callouts and cards
+- [**Frontmatter**](/content/frontmatter/) - Learn how to add metadata to your pages
+- [**Markdown Syntax**](/content/markdown-syntax/) - Basic and advanced Markdown features
+- [**Images**](/content/images/) - How to add and style images in your documentation
+- [**Custom Containers**](/content/custom-containers/) - Special content blocks like callouts and cards
+- [**noStyle Pages**](/content/no-style-pages/) - Create custom standalone pages with complete HTML control
 
 Choose a topic from the sidebar to get started.

package/docs/content/markdown-syntax.md

@@ -51,7 +51,7 @@ You can use all standard Markdown elements:
     ```markdown
     [Link Text](https://www.example.com)
     [Link with Title](https://www.example.com "Link Title")
-    [Relative Link to another page](../section/other-page.md)
+    [Relative Link to another page](../section/other-page/)
     ```
     *Note: For internal links to other documentation pages, use relative paths to the `.md` files. `docmd` will convert these to the correct HTML paths during the build.*
 
@@ -152,7 +152,7 @@ Because `markdown-it` is configured with `html: true`, you can embed raw HTML di
 </div>
 ```
 
-For most formatting needs, standard Markdown and `docmd`'s [Custom Containers](./custom-containers.md) should suffice.
+For most formatting needs, standard Markdown and `docmd`'s [Custom Containers](/content/custom-containers/) should suffice.
 
 # Advanced Markdown Capabilities
 
@@ -264,7 +264,7 @@ $$
 ## Container Extensions
 
 Beyond standard Markdown, docmd provides custom containers for enhanced formatting. 
-These are detailed in the [Custom Containers](./custom-containers.md) guide, and include:
+These are detailed in the [Custom Containers](/content/custom-containers/) guide, and include:
 
 ::: callout info
 Use containers for callouts, cards, and steps to structure your documentation.
@@ -274,4 +274,4 @@ Use containers for callouts, cards, and steps to structure your documentation.
 
 Markdown provides a powerful yet simple way to write and format documentation. With docmd's extensions and customizations, you can create rich, beautiful documentation that's easy to maintain.
 
-For more examples and practical applications, check the rest of the documentation or browse the source of this page by viewing its Markdown file.
+For more examples and practical applications, check the rest of the documentation or browse the source of this page by viewing its Markdown file.