@mgks/docmd 0.3.2 → 0.3.4

package/docs/content/containers/steps.md

@@ -1,175 +0,0 @@
----
-title: "Steps Container"
-description: "Create step-by-step instructions and tutorials with the steps container."
----
-
-# Steps Container
-
-The steps container allows you to create clear, sequential instructions and tutorials. It automatically numbers your steps and provides a clean, organized layout.
-
-## Basic Usage
-
-**Code:**
-
-```markdown
-::: steps
-
-1. **Create a new project**
-   Initialize your project with the necessary configuration files.
-
-2. **Install dependencies**
-   Run the package manager to install required libraries.
-
-3. **Start development**
-   Begin coding your application with the setup complete.
-
-   ::: button Learn_More #customization color:green
-
-:::
-```
-
-**Rendered Preview:**
-
-::: steps
-
-1. **Create a new project**
-   Initialize your project with the necessary configuration files.
-
-2. **Install dependencies**
-   Run the package manager to install required libraries.
-
-3. **Start development**
-   Begin coding your application with the setup complete.
-
-   ::: button Learn_More #customization color:green
-
-:::
-
-## Steps with Nested Containers
-
-You can include cards, callouts, and buttons inside steps for richer content:
-
-**Code:**
-
-```markdown
-::: steps
-
-1. **Plan Your Project**
-   Define the scope and requirements for your application.
-
-   ::: callout info Planning Tip
-   Consider creating user stories to better understand your requirements.
-   :::
-
-2. **Setup Development Environment**
-   Configure your local development tools and workspace.
-
-   ::: card Environment Checklist
-   - Install code editor (VS Code recommended)
-   - Setup version control (Git)
-   - Install Node.js and npm
-   - Configure linting and formatting tools
-   :::
-
-3. **Initialize Project**
-   Create the project structure and configuration files.
-
-   ::: button Create_Project external:https://github.com/new color:#2564e4
-
-4. **Start Coding**
-   Begin implementing your application features.
-
-   ::: callout success Ready to Code
-   Your development environment is now ready! Happy coding!
-   :::
-
-:::
-```
-
-**Rendered Preview:**
-
-::: steps
-
-1. **Plan Your Project**
-   Define the scope and requirements for your application.
-
-   ::: callout info Planning Tip
-   Consider creating user stories to better understand your requirements.
-   :::
-
-2. **Setup Development Environment**
-   Configure your local development tools and workspace.
-
-   ::: card Environment Checklist
-   - Install code editor (VS Code recommended)
-   - Setup version control (Git)
-   - Install Node.js and npm
-   - Configure linting and formatting tools
-   :::
-
-3. **Initialize Project**
-   Create the project structure and configuration files.
-
-   ::: button Create_Project external:https://github.com/new color:#2564e4
-
-4. **Start Coding**
-   Begin implementing your application features.
-
-   ::: callout success Ready to Code
-   Your development environment is now ready! Happy coding!
-   :::
-
-:::
-
-## Steps and Tabs Compatibility
-
-::: callout error Important Limitation
-**Steps and tabs containers are incompatible** - they cannot be nested within each other due to markdown parsing conflicts. Use them as separate sections instead.
-
-**Supported in steps:** Cards, callouts, buttons  
-**Not supported:** Tabs containers
-:::
-
-**Code:**
-
-```markdown
-## Installation Steps
-
-::: steps
-
-1. **Choose Your Platform**
-   Select the appropriate installation method for your operating system.
-
-2. **Download the Installer**
-   Get the latest version from the downloads section.
-
-3. **Run Installation**
-   Follow the setup wizard to complete installation.
-
-:::
-
-## Platform-Specific Instructions
-
-::: tabs
-== tab "Windows"
-Download the `.exe` installer and run as administrator.
-
-::: button Learn_More #customization
-
-== tab "macOS" 
-Download the `.dmg` file and drag to Applications folder.
-
-::: button Learn_More #customization
-
-:::
-```
-
-## Customization
-
-Steps containers automatically apply consistent styling and numbering. The container handles:
-
-- **Automatic numbering** - Steps are numbered sequentially
-- **Consistent spacing** - Proper spacing between steps
-- **Responsive design** - Works on all screen sizes
-- **Theme integration** - Matches your site's theme
-- **Smart list handling** - Only step items get special styling, nested lists remain normal

package/docs/content/containers/tabs.md

@@ -1,228 +0,0 @@
----
-title: "Tabs Container"
-description: "Create tabbed content sections with the tabs container for organizing related information."
----
-
-# Tabs Container
-
-The tabs container allows you to organize content into multiple tabbed sections, making it easy to present related information in a clean, organized way.
-
-## Basic Usage
-
-```markdown
-::: tabs
-
-== tab "First Tab"
-Content for the first tab goes here.
-
-== tab "Second Tab"
-Content for the second tab goes here.
-
-== tab "Third Tab"
-Content for the third tab goes here.
-
-:::
-```
-
-::: tabs
-
-== tab "First Tab"
-Content for the first tab goes here.
-
-== tab "Second Tab"
-Content for the second tab goes here.
-
-== tab "Third Tab"
-Content for the third tab goes here.
-
-:::
-
-## Tabs with Nested Content
-
-### Tabs with Buttons
-
-```markdown
-::: tabs
-
-== tab "Download"
-Get the latest version of our application.
-
-::: button Download_Here external:https://github.com/mgks/docmd/releases
-::: button Learn_More #advanced-tabs
-::: button NPM_Package external:https://www.npmjs.com/package/@mgks/docmd
-
-== tab "Documentation"
-Read our comprehensive documentation.
-
-::: button View_Getting_Started #basic-usage
-::: button API_Reference external:https://github.com/mgks/docmd/wiki
-::: button View_Examples #advanced-tabs
-
-:::
-```
-
-::: tabs
-
-== tab "Download"
-Get the latest version of our application.
-
-::: button Download_Here external:https://github.com/mgks/docmd/releases
-::: button Learn_More #advanced-tabs
-::: button NPM_Package external:https://www.npmjs.com/package/@mgks/docmd
-
-== tab "Documentation"
-Read our comprehensive documentation.
-
-::: button View_Getting_Started #basic-usage
-::: button API_Reference external:https://github.com/mgks/docmd/wiki
-::: button View_Examples #advanced-tabs
-
-:::
-
-### Tabs with Callouts
-
-```markdown
-::: tabs
-
-== tab "Getting Started"
-Welcome to our platform!
-
-::: callout info Welcome
-This is your first time here. Let's get you started!
-:::
-
-::: callout tip Pro Tip
-Check out our quick start guide for the fastest setup.
-:::
-
-== tab "Advanced Features"
-Explore advanced functionality.
-
-::: callout warning Important
-Some features require additional configuration.
-:::
-
-::: callout success Ready
-You're all set to explore advanced features!
-:::
-
-:::
-```
-
-::: tabs
-
-== tab "Getting Started"
-Welcome to our platform!
-
-::: callout info Welcome
-This is your first time here. Let's get you started!
-:::
-
-::: callout tip Pro Tip
-Check out our quick start guide for the fastest setup.
-:::
-
-== tab "Advanced Features"
-Explore advanced functionality.
-
-::: callout warning Important
-Some features require additional configuration.
-:::
-
-::: callout success Ready
-You're all set to explore advanced features!
-:::
-
-:::
-
-## Complex Nested Structure
-
-````bash
-::: tabs
-
-== tab "Nested Card Example"
-::: card Installation Guide
-
-**Download**
-Get the latest version for your platform.
-
-::: button Get_Latest external:https://github.com/mgks/docmd/releases
-
-**Install**
-Run the installer and follow the prompts.
-
-```bash
-install docmd
-```
-
-:::
-
-== tab "Callout Example"
-
-**Configure**
-Set up your preferences.
-
-::: callout warning Configuration
-Don't forget to configure your settings!
-:::
-
-:::
-````
-
-::: tabs
-
-== tab "Nested Card Example"
-::: card Installation Guide
-
-**Download**
-Get the latest version for your platform.
-
-::: button Get_Latest external:https://github.com/mgks/docmd/releases
-
-**Install**
-Run the installer and follow the prompts.
-
-```bash
-install docmd
-```
-
-:::
-
-== tab "Callout Example"
-
-**Configure**
-Set up your preferences.
-
-::: callout warning Configuration
-Don't forget to configure your settings!
-:::
-
-:::
-
-## Customization
-
-Tabs containers automatically handle:
-
-- **Responsive design** - Works on all screen sizes
-- **Theme integration** - Matches your site's theme
-- **Accessibility** - Proper ARIA labels and keyboard navigation
-- **Smooth transitions** - Elegant tab switching animations
-
-## Best Practices
-
-1. **Clear Labels** - Use descriptive tab names
-2. **Consistent Content** - Keep similar content types in each tab
-3. **Logical Order** - Arrange tabs in a logical sequence
-4. **Not Too Many** - Limit to 5-7 tabs for best usability
-5. **Mobile Friendly** - Consider mobile users when organizing content
-
-## Nesting Limitations
-
-::: callout error Important Limitation
-**Steps containers cannot be used inside tabs** due to parsing conflicts. If you need step-by-step instructions within tabs, use regular numbered lists or consider restructuring your content.
-:::
-
-- **Tabs cannot contain tabs** - This prevents infinite recursion
-- **Steps inside tabs not supported** - Use regular ordered lists instead
-- **Maximum depth** - While technically unlimited, keep it under 7 levels for readability
-- **Performance** - Very deep nesting may impact rendering performance

package/docs/content/custom-containers.md

@@ -1,24 +0,0 @@
----
-title: "Custom Containers"
-description: "Enhance your documentation with special components like callouts, cards, and steps using docmd's custom container syntax."
-noStyle: true
-components:
-  meta: false
-  favicon: true
-  css: false
-  theme: false
-  scripts: false
-customHead: |
-  <script>
-    window.location.href = "https://docmd.mgks.dev/content/containers/";
-    document.addEventListener("DOMContentLoaded", function () {
-        window.location.href = "https://docmd.mgks.dev/content/containers/";
-    });
-  </script>
-bodyClass: "no-style-example"
----
-
-<div class="container">
-    Redirecting...<br/>
-    /custom-containers have moved to /containers now <a href="https://docmd.mgks.dev/content/containers/">Visit New Custom Containers Page</a>
-</div> 

package/docs/content/frontmatter.md

@@ -1,84 +0,0 @@
----
-title: "Frontmatter"
-description: "How to use YAML frontmatter to define page metadata in your docmd Markdown files."
----
-
-# Frontmatter
-
-Every Markdown (`.md`) file that `docmd` processes **must** begin with YAML frontmatter. Frontmatter is a block of YAML (YAML Ain't Markup Language) enclosed by triple-dashed lines (`---`) at the very beginning of your file. It's used to set metadata for each page.
-
-## Basic Structure
-
-```yaml
----
-title: "My Awesome Page Title"
-description: "A concise and informative description for this page, used for SEO and potentially in listings."
-# You can add other custom fields here if needed for your templates or logic
-order: 1 # Example: for custom sorting if you implement such logic
-tags:
-  - guide
-  - advanced
----
-```
-
-## Required Fields
-
-*   **`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`).
-        *   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"`
-
-## Optional Fields (Recommended)
-
-*   **`description`** (String, Optional)
-    *   **Purpose:** A brief summary of the page's content.
-    *   **Usage:**
-        *   Used for the HTML `<meta name="description">` tag, which is important for search engine optimization (SEO) and search result snippets.
-    *   **Example:** `description: "Learn how to install and configure the XYZ widget."`
-
-## Custom Fields
-
-You can include any other custom fields in your frontmatter. These fields won't be used by `docmd`'s core functionality directly but can be accessed if you decide to customize EJS templates or write plugins in the future.
-
-Examples of custom fields you *might* add (these are not built-in features):
-
-*   `author`: "Jane Doe"
-*   `date`: "2023-10-26"
-*   `order`: 2 (For custom sorting of pages within a section, if you implement logic for it)
-*   `draft`: true (To mark a page as a draft, if you implement logic to exclude drafts from builds)
-*   `tags`: ["tag1", "tag2"]
-*   `permalink`: "https://example.com/your-canonical-url/" (Sets the canonical URL for SEO purposes)
-
-## Page-Specific Behavior Fields
-
-*   **`toc`** (Boolean, Optional)
-    *   **Purpose:** Controls the visibility of the "On This Page" table of contents sidebar.
-    *   **Default:** `true` (TOC is visible if the page has headings).
-    *   **Usage:** Set to `false` to completely hide the TOC sidebar for a specific page. This is useful for landing pages or pages with minimal content.
-    *   **Example:** `toc: false`
-
-## Example Usage
-
-Consider a file named `docs/guides/installation.md`:
-
-```markdown
----
-title: "Installation Steps"
-description: "A step-by-step guide to installing our application on various platforms."
-order: 1
----
-
-# Application Installation
-
-This guide will walk you through installing our application...
-```
-
-In this example:
-*   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.
-
-Using frontmatter consistently ensures your pages are well-defined, SEO-friendly, and integrate smoothly with `docmd`'s navigation and theming systems.

package/docs/content/images.md

@@ -1,205 +0,0 @@
----
-title: "Images"
-description: "Learn how to add and customize images in your docmd documentation"
----
-
-# Images in docmd
-
-Adding images to your documentation enhances visual understanding and makes your content more engaging. This guide covers everything you need to know about using images in docmd.
-
-## Basic Image Syntax
-
-The standard Markdown syntax for images works in docmd:
-
-```markdown
-![Alt text](/path/to/image.jpg "Optional title")
-```
-
-Where:
-- `Alt text` is the alternative text displayed if the image cannot be loaded
-- `/path/to/image.jpg` is the path to your image file
-- `"Optional title"` is a tooltip shown when hovering over the image (optional)
-
-## Image Organization
-
-We recommend organizing your images in a dedicated directory structure:
-
-```
-docs/
-  └── images/
-      ├── getting-started/
-      │   └── installation.png
-      ├── features/
-      │   └── example.jpg
-      └── logo.svg
-```
-
-## Referencing Images
-
-### Relative Paths
-
-Use relative paths to reference images within your documentation:
-
-```markdown
-![Installation Screenshot](../images/getting-started/installation.png)
-```
-
-### Absolute Paths
-
-For images stored in your site's assets directory:
-
-```markdown
-![Logo](/assets/images/logo.png)
-```
-
-## Image Styling
-
-docmd provides several ways to style your images using attribute syntax:
-
-### Image Alignment
-
-You can align images using special class names:
-
-```markdown
-![Left-aligned image](/path/to/image.jpg){.align-left}
-![Center-aligned image](/path/to/image.jpg){.align-center}
-![Right-aligned image](/path/to/image.jpg){.align-right}
-```
-
-### Image Size
-
-Control image dimensions with size classes:
-
-```markdown
-![Small image](/path/to/image.jpg){.size-small}
-![Medium image](/path/to/image.jpg){.size-medium}
-![Large image](/path/to/image.jpg){.size-large}
-```
-
-Or specify custom dimensions:
-
-```markdown
-![Custom size](/path/to/image.jpg){width=300 height=200}
-```
-
-### Image Borders and Shadows
-
-Add borders or shadows to your images:
-
-```markdown
-![Image with border](/path/to/image.jpg){.with-border}
-![Image with shadow](/path/to/image.jpg){.with-shadow}
-![Image with border and shadow](/path/to/image.jpg){.with-border .with-shadow}
-```
-
-Note: Make sure there's a space between multiple classes in the attribute syntax.
-
-### Responsive Images
-
-All images in docmd are responsive by default, automatically scaling to fit their container.
-
-## Image Captions
-
-Add captions to your images using the figure syntax:
-
-```markdown
-<figure>
-  <img src="/path/to/image.jpg" alt="Description of image">
-  <figcaption>This is the caption for the image</figcaption>
-</figure>
-```
-
-## Image Galleries and Lightbox
-
-docmd includes built-in lightbox functionality for image galleries. When users click on an image in a gallery, it opens in a full-screen lightbox view.
-
-### Basic Gallery
-
-Create simple image galleries by grouping images in a grid layout:
-
-```markdown
-<div class="image-gallery">
-  <img src="/path/to/image1.jpg" alt="Image 1">
-  <img src="/path/to/image2.jpg" alt="Image 2">
-  <img src="/path/to/image3.jpg" alt="Image 3">
-</div>
-```
-
-### Gallery with Captions
-
-For galleries with captions, use figure elements inside the gallery:
-
-```markdown
-<div class="image-gallery">
-  <figure>
-    <img src="/path/to/image1.jpg" alt="Image 1">
-    <figcaption>Caption for Image 1</figcaption>
-  </figure>
-  <figure>
-    <img src="/path/to/image2.jpg" alt="Image 2">
-    <figcaption>Caption for Image 2</figcaption>
-  </figure>
-</div>
-```
-
-### Zoom Effect
-
-Add a zoom effect to gallery images when hovering:
-
-```markdown
-<div class="image-gallery zoom">
-  <img src="/path/to/image1.jpg" alt="Image 1">
-  <img src="/path/to/image2.jpg" alt="Image 2">
-</div>
-```
-
-### Individual Lightbox Images
-
-You can also enable lightbox functionality for individual images:
-
-```markdown
-![Image with lightbox](/path/to/image.jpg){.lightbox}
-```
-
-## Image Optimization Best Practices
-
-For optimal performance:
-
-1. **Use appropriate formats**:
-   - JPEG for photographs
-   - PNG for images with transparency
-   - SVG for icons and logos
-   - WebP for better compression (with fallbacks)
-
-2. **Optimize file sizes**:
-   - Compress images before adding them to your documentation
-   - Consider using tools like ImageOptim, TinyPNG, or Squoosh
-
-3. **Provide responsive images**:
-   - Use the HTML `<picture>` element for advanced responsive image scenarios
-
-4. **Specify dimensions**:
-   - Always include width and height attributes to prevent layout shifts
-
-## Examples
-
-### Basic Image
-
-![docmd preview](/assets/images/docmd-preview.png "docmd Documentation Generator")
-
-### Image with Border and Shadow
-
-![preview with styling](/assets/images/docmd-preview.png){.with-border .with-shadow}
-
-### Responsive Image Gallery
-
-<div class="image-gallery">
-  <figure>
-    <img src="/assets/images/docmd-preview.png" alt="Feature 1">
-    <figcaption>Feature One</figcaption>
-  </figure>
-  <figure>
-    <img src="/assets/images/docmd-preview.png" alt="Feature 2">
-    <figcaption>Feature Two</figcaption>
-  </figure>
-</div>