@mgks/docmd 0.1.2 → 0.1.3

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,362 @@
+: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;
+    }
+    
+    .content-side {
+      padding: 2rem 0;
+    }
+    
+    h1 {
+      font-size: 2.5rem;
+    }
+    
+    .features {
+      grid-template-columns: 1fr;
+    }
+    
+    .buttons {
+      flex-direction: column;
+    }
+    
+    .header-top {
+      right: 1.5rem;
+    }
+  }
+.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 (commented out)
   ],
 
   // 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' },

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>