@mgks/docmd 0.3.1 → 0.3.3

package/docs/theming/icons.md

@@ -1,92 +0,0 @@
----
-title: "Using Icons"
-description: "How to use Lucide icons in your docmd site navigation and content."
----
-
-# Using Icons
-
-`docmd` allows you to add visual flair and improve navigation clarity with SVG icons from the [Lucide icon library](https://lucide.dev/).
-
-## Icons in Navigation
-
-You can specify an icon for each navigation item (including parent categories) in your config file using the `icon` property:
-
-```javascript
-// ...
-navigation: [
-  { title: 'Home', path: '/', icon: 'home' },
-  {
-    title: 'User Guides',
-    icon: 'book-open', // Icon for the category
-    children: [
-      { title: 'Installation', path: '/user-guides/installation', icon: 'download' },
-      { title: 'First Steps', path: '/user-guides/first-steps', icon: 'footprints' },
-    ]
-  },
-  { title: 'API Reference', path: '/api-reference', icon: 'code' }
-]
-// ...
-```
-
-**How it Works:**
-* The `icon` value (e.g., `'home'`, `'book-open'`) uses kebab-case notation that maps to Lucide icon names.
-* During build, `docmd` converts these names to the appropriate Lucide icon SVGs.
-* The navigation template renders these icons inline for optimal performance.
-
-## Available Icons
-
-`docmd` uses the [Lucide](https://lucide.dev/) icon library, which provides a comprehensive set of beautiful, consistent open-source icons.
-
-To see all available icons and their names:
-1. Visit the [Lucide Icons Gallery](https://lucide.dev/icons/)
-2. When you find an icon you want to use, note its name (shown below each icon)
-3. Use the kebab-case version of the name in your config (e.g., `arrow-up-right` instead of `ArrowUpRight`)
-
-**Common Icon Examples:**
-* Navigation: `home`, `book-open`, `file-text`, `settings`, `users`
-* Actions: `download`, `upload-cloud`, `play`, `external-link`
-* UI Elements: `sun`, `moon`, `menu`, `x`, `search`
-* Indicators: `alert-circle`, `check-circle`, `info`
-* Directional: `chevron-right`, `chevron-down`, `arrow-left`
-
-## Icon Styling
-
-Lucide icons in `docmd` are styled using CSS. They are rendered as inline SVGs with appropriate classes for targeting:
-
-```css
-/* Example styling for navigation icons */
-.sidebar-nav .lucide-icon {
-  width: 1.2em;
-  height: 1.2em;
-  margin-right: 0.5em;
-  vertical-align: middle;
-  stroke-width: 2px; /* Adjust line thickness */
-  stroke: currentColor; /* Use current text color */
-}
-
-/* Example of targeting a specific icon */
-.sidebar-nav .icon-home {
-  color: #3498db; /* Blue color for home icon */
-}
-```
-
-The icons have the following CSS classes you can target:
-- `.lucide-icon` - Applied to all Lucide icons
-- `.icon-{name}` - Applied to specific icons, e.g., `.icon-home`
-
-You can add these styles to your custom CSS file specified in `theme.customCss` in your configuration.
-
-## Using Icons in Content
-
-To use icons directly in your Markdown content, you'll need to use HTML with inline SVGs. You can copy SVG code directly from the [Lucide website](https://lucide.dev/) and paste it into your Markdown.
-
-```html
-<!-- Example of inline SVG in Markdown -->
-<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-info">
-  <circle cx="12" cy="12" r="10"></circle>
-  <path d="M12 16v-4"></path>
-  <path d="M12 8h.01"></path>
-</svg> This is a note with an info icon.
-```
-
-A future version of `docmd` might provide shortcodes or other simplified ways to use icons directly in Markdown content.

package/docs/theming/index.md

@@ -1,19 +0,0 @@
----
-title: "Theming Your docmd Site"
-description: "Learn how to customize the appearance of your docmd site, including themes, modes, custom styles, and icons."
----
-
-# Theming Your docmd Site
-
-`docmd` allows for extensive customization of your documentation site's appearance, ensuring it aligns with your branding and provides an optimal user experience.
-
-## Core Theming Concepts:
-
-*   **[Available Themes](/theming/available-themes/):** Choose from pre-built themes to quickly change the overall look and feel.
-*   **[Light & Dark Mode](/theming/light-dark-mode/):** Understand how to set the default color mode and enable user toggling.
-*   **[Custom CSS & JS](/theming/custom-css-js/):** Inject your own CSS and JavaScript files for fine-grained control over styling and functionality.
-*   **[Using Icons](/theming/icons/):** Enhance navigation and content with SVG icons.
-*   **CSS Variables:** The default theme (`default`) is built using CSS variables, making it easier to tweak common properties like colors and fonts via your custom CSS.
-*   **Syntax Highlighting:** Code block themes are provided for both light and dark modes via `highlight.js` stylesheets, adapting to the current color mode.
-
-The goal is to provide a good-looking, accessible site out-of-the-box, with straightforward ways to adapt it to your specific needs.

package/docs/theming/light-dark-mode.md

@@ -1,114 +0,0 @@
----
-title: "Light & Dark Mode"
-description: "How to configure and manage light and dark themes in your docmd documentation."
----
-
-# Light & Dark Mode
-
-`docmd` provides built-in support for light and dark color schemes to enhance readability and user experience. Users can choose their preferred viewing mode, which improves accessibility and reduces eye strain in different lighting conditions.
-
-## Setting the Default Theme
-
-You can set the default theme for your site in the config file:
-
-```javascript
-module.exports = {
-  // ... other config ...
-  theme: {
-    name: 'default', // or 'sky', 'ruby', 'retro'
-    defaultMode: 'dark', // Can be 'light' or 'dark'
-    enableModeToggle: true, // Enable the toggle button in the UI
-    positionMode: 'bottom', // 'top' or 'bottom' - where to show the toggle
-  },
-  // ...
-};
-```
-
-* `defaultMode: 'light'`: The site will initially render with the light color scheme.
-* `defaultMode: 'dark'`: The site will initially render with the dark color scheme.
-* `enableModeToggle: true`: Shows a toggle button for users to switch modes.
-* `positionMode: 'bottom'`: Places the toggle button at the bottom of the sidebar (default).
-* `positionMode: 'top'`: Places the toggle button in the page header (top right).
-
-If `defaultMode` is not specified, it defaults to `'light'`.
-
-## How It Works
-
-The theme is controlled by a `data-theme` attribute on the `<body>` tag of your HTML pages:
-* `<body data-theme="light">` for light mode.
-* `<body data-theme="dark">` for dark mode.
-
-For the `sky` theme, the values would be `sky-light` and `sky-dark`.
-
-CSS variables in the theme files define colors, backgrounds, fonts, etc., for both modes:
-
-```css
-/* Example from main.css */
-:root {
-  --bg-color: #ffffff;
-  --text-color: #333333;
-  /* ... other light theme variables ... */
-}
-
-body[data-theme="dark"] {
-  --bg-color: #1a1a1a;
-  --text-color: #e0e0e0;
-  /* ... other dark theme variables ... */
-}
-
-body {
-  background-color: var(--bg-color);
-  color: var(--text-color);
-}
-```
-
-## User Preference Toggle
-
-When `enableModeToggle` is set to `true`, a toggle button appears that allows users to switch between light and dark modes. The position of this button is controlled by the `positionMode` setting:
-
-```javascript
-theme: {
-  defaultMode: 'light',
-  enableModeToggle: true, // Shows the toggle button
-  positionMode: 'bottom', // 'bottom' (sidebar) or 'top' (header)
-},
-```
-
-### Toggle Button Positions
-
-- **`positionMode: 'bottom'`** (default): The toggle button appears at the bottom of the sidebar
-- **`positionMode: 'top'`**: The toggle button appears in the page header (top right corner)
-
-The toggle button uses Lucide icons (`sun` and `moon`) to indicate the current mode and what will happen when clicked.
-
-### User Preference Persistence
-
-When a user selects a theme, their preference is saved in their browser's `localStorage` so it persists across sessions and page loads. The implementation uses the following logic:
-
-1. Check if the user has a saved preference in `localStorage`
-2. If not, use the `defaultMode` from the configuration
-3. When the user clicks the toggle button, update both the display and the stored preference
-
-## Syntax Highlighting Themes
-
-`docmd` also includes separate stylesheets for code block syntax highlighting that are compatible with light and dark modes:
-
-* `highlight-light.css` for light mode
-* `highlight-dark.css` for dark mode
-
-The correct syntax highlighting theme is loaded automatically based on the current theme mode. When the user toggles the mode, the appropriate syntax highlighting theme is also switched dynamically.
-
-## Customizing Theme Colors
-
-You can customize the colors for both light and dark modes by adding custom CSS to your project. See [Custom CSS & JS](/theming/custom-css-js/) for more information.
-
-```css
-/* Example of overriding theme colors in your custom CSS */
-:root {
-  --link-color: #0077cc; /* Custom link color for light mode */
-}
-
-body[data-theme="dark"] {
-  --link-color: #4da6ff; /* Custom link color for dark mode */
-}
-```

package/src/assets/css/docmd-highlight-dark.css

@@ -1 +0,0 @@
-pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}

package/src/assets/css/docmd-highlight-light.css

@@ -1 +0,0 @@
-pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}