{
"Customization": {
"entries": {
"⚙️ The config.yaml file": {
"id": "Customization/The-config.yaml-file",
"title": "⚙️ The config.yaml file",
"order": 1,
"content": "<h1 id=\"The-config.yaml-file\" tabindex=\"-1\">The config.yaml file</h1>\n<p>The <code>config.yaml</code> file is the main configuration file for Offline Markdown Docs. It allows you to customize various aspects of your documentation, such as the title, theme, and other settings.</p>\n<h2 id=\"Configuration-Options\" tabindex=\"-1\">Configuration Options</h2>\n<pre><code class=\"language-yaml\"><span class=\"hljs-attr\">title:</span> <span class=\"hljs-string\">Offline</span> <span class=\"hljs-string\">Markdown</span> <span class=\"hljs-string\">Docs</span>\n<span class=\"hljs-attr\">theme:</span> <span class=\"hljs-string\">cyan</span> <span class=\"hljs-comment\"># Choose a theme for your documentation (e.g., cyan, blue, green, red, ...)</span>\n<span class=\"hljs-attr\">externalLink:</span> <span class=\"hljs-comment\"># Optionally, include an external link in the header</span>\n <span class=\"hljs-attr\">text:</span> <span class=\"hljs-string\">Visit</span> <span class=\"hljs-string\">on</span> <span class=\"hljs-string\">NPM</span>\n <span class=\"hljs-attr\">url:</span> <span class=\"hljs-string\">https://www.npmjs.com/package/offline-md-docs</span>\n</code></pre>\n",
"textContent": "The config.yaml file\n\nThe config.yaml file is the main configuration file for Offline Markdown Docs. It allows you to customize various aspects of your documentation, such as the title, theme, and other settings.\n\nConfiguration Options\n\ntitle: Offline Markdown Docs\ntheme: cyan # Choose a theme for your documentation (e.g., cyan, blue, green, red, ...)\nexternalLink: # Optionally, include an external link in the header\n text: Visit on NPM\n url: https://www.npmjs.com/package/offline-md-docs",
"wordCount": 70,
"readingTime": 1,
"isPage": true
},
"🔀 Custom Sort Order": {
"id": "Customization/Custom-Sort-Order",
"title": "🔀 Custom Sort Order",
"order": 3,
"content": "<h1 id=\"Custom-Sort-Order\" tabindex=\"-1\">Custom Sort Order</h1>\n<p>Entries (either folders or md files) can have a custom order assigned as follows:</p>\n<p><strong>Markdown Files</strong>\nPut this yaml metadata at the top of your file:</p>\n<pre><code class=\"language-yaml\"><span class=\"hljs-meta\">---</span>\n<span class=\"hljs-attr\">order:</span> <span class=\"hljs-number\">1</span>\n<span class=\"hljs-meta\">---\n</span></code></pre>\n<p><strong>Folder Customization</strong>\nAdd a metadata.yaml file to your folder, which contains the metadata:</p>\n<pre><code class=\"language-yaml\"><span class=\"hljs-attr\">order:</span> <span class=\"hljs-number\">1</span>\n</code></pre>\n",
"textContent": "Custom Sort Order\n\nEntries (either folders or md files) can have a custom order assigned as follows:\n\nMarkdown Files\nPut this yaml metadata at the top of your file:\n\norder: 1\n\nFolder Customization\nAdd a metadata.yaml file to your folder, which contains the metadata:\n\norder: 1",
"wordCount": 46,
"readingTime": 1,
"isPage": true
},
"🔗 Linking Between Pages": {
"id": "Customization/Linking-Between-Pages",
"title": "🔗 Linking Between Pages",
"order": 2,
"content": "<h1 id=\"Linking-between-pages\" tabindex=\"-1\">Linking between pages</h1>\n<p>You can link between different pages by using the following syntax:</p>\n<pre><code>[Link to another page](#Core-Concepts/CodeTest)\n</code></pre>\n<p>Where <code>Core-Concepts/CodeTest</code> is the slugified path to the page you want to link to.</p>\n<p>You can also link to specific headings within a page by appending <code>?h=Heading-Name</code> to the URL:</p>\n<pre><code>[Link to another page with heading](#Core-Concepts/Understanding-Core-Concepts?h=Kelp-Settings-2)\n</code></pre>\n<p>Where <code>Kelp-Settings-2</code> is the slugified version of the heading you want to link to.</p>\n<p>This link here will take you to <a href=\"#Customization/Images\">Images</a> section and this to the <a href=\"#Quickstart?h=Building-the-docs\">Building the docs</a> heading.</p>\n",
"textContent": "Linking between pages\n\nYou can link between different pages by using the following syntax:\n\nLink to another page\n\nWhere Core-Concepts/CodeTest is the slugified path to the page you want to link to.\n\nYou can also link to specific headings within a page by appending ?h=Heading-Name to the URL:\n\nLink to another page with heading\n\nWhere Kelp-Settings-2 is the slugified version of the heading you want to link to.\n\nThis link here will take you to Images section and this to the Building the docs heading.",
"wordCount": 85,
"readingTime": 1,
"isPage": true
},
"🖌️ Theming": {
"id": "Customization/Theming",
"title": "🖌️ Theming",
"order": 3,
"content": "<h1 id=\"Theming\" tabindex=\"-1\">Theming</h1>\n<p>The builder uses <a href=\"https://picocss.com/\">Pico CSS</a> under the hood, which allows you to customize the color by providing a predefined scheme, that pico provides.\nYou can find an overview over all available color schemes here: <a href=\"https://picocss.com/docs/version-picker\">https://picocss.com/docs/version-picker</a></p>\n",
"textContent": "Theming\n\nThe builder uses Pico CSS under the hood, which allows you to customize the color by providing a predefined scheme, that pico provides.\nYou can find an overview over all available color schemes here: https://picocss.com/docs/version-picker",
"wordCount": 36,
"readingTime": 1,
"isPage": true
},
"🖼️ Images": {
"id": "Customization/Images",
"title": "🖼️ Images",
"order": 2,
"content": "<h1 id=\"Images\" tabindex=\"-1\">Images</h1>\n<p>Images can be added to your documentation by placing them in a folder called <code>images</code> inside your <code>docs</code> folder.\nThese images will then be automatically included in the final build and can be referenced in your markdown files like this:</p>\n<pre><code class=\"language-markdown\">![<span class=\"hljs-string\">Alt-Text</span>](<span class=\"hljs-link\">../images/main-banner.png</span>)\n</code></pre>\n<p>Please note the <code>../</code> at the beginning of the path, is required, since this file here is located in the <code>Customization</code> subfolder of the <code>docs</code> folder.</p>\n<p>This will render the image like this:\n<img src=\"cachedImage-../images/main-banner.png\" alt=\"Alt-Text\"></p>\n<h2 id=\"Banners\" tabindex=\"-1\">Banners</h2>\n<p>You can add a bit more flair to your documentation by adding banner images to the top of your markdown files.\nTo do this, simply add an image at the very top of your markdown file, before any other content:</p>\n<pre><code class=\"language-markdown\">![<span class=\"hljs-string\">Banner-Alt-Text</span>](<span class=\"hljs-link\">../images/banner-image.png</span>)\n\n<span class=\"hljs-section\"># Your Documentation Title</span>\n\nYour documentation content goes here...\n</code></pre>\n<p>The recommended dimensions for banner images are <code>1280 x 225</code> pixels.</p>\n",
"textContent": "Images\n\nImages can be added to your documentation by placing them in a folder called images inside your docs folder.\nThese images will then be automatically included in the final build and can be referenced in your markdown files like this:\n\nAlt-Text\n\nPlease note the ../ at the beginning of the path, is required, since this file here is located in the Customization subfolder of the docs folder.\n\nThis will render the image like this:\nAlt-Text\n\nBanners\n\nYou can add a bit more flair to your documentation by adding banner images to the top of your markdown files.\nTo do this, simply add an image at the very top of your markdown file, before any other content:\n\nBanner-Alt-Text\n\nYour Documentation Title\n\nYour documentation content goes here...\n\nThe recommended dimensions for banner images are 1280 x 225 pixels.",
"wordCount": 137,
"readingTime": 1,
"isPage": true
},
"😄 Emojis": {
"id": "Customization/Emojis",
"title": "😄 Emojis",
"order": 4,
"content": "<h1 id=\"Emojis\" tabindex=\"-1\">Emojis</h1>\n<p>Emojis can be added to your documentation by using standard emoji shortcodes, like <code>:smile:</code> (😄), <code>:rocket:</code> (🚀), or <code>:tada:</code> (🎉).\nAdditionally, you can also use Unicode emojis directly in your markdown files, like this: 😄🚀🎉.</p>\n",
"textContent": "Emojis\n\nEmojis can be added to your documentation by using standard emoji shortcodes, like :smile: (:smile:), :rocket: (:rocket:), or :tada: (:tada:).\nAdditionally, you can also use Unicode emojis directly in your markdown files, like this: 😄🚀🎉.",
"wordCount": 36,
"readingTime": 1,
"isPage": true
}
},
"isPage": false,
"title": "Customization",
"order": 3
},
"👋 Welcome": {
"id": "Welcome",
"title": "👋 Welcome",
"order": 0,
"content": "<p><img src=\"cachedImage-/images/main-banner.png\" alt=\"\"></p>\n<h1 id=\"What-is-Offline-Markdown-Docs\" tabindex=\"-1\">What is Offline Markdown Docs?</h1>\n<p>Offline Markdown Docs is a CLI tool that allows you to create offline documentation from markdown files. It takes all your markdown files, processes them, and outputs a single HTML file that contains all your documentation, complete with embedded images and syntax highlighting for code blocks and much more.</p>\n<p>The created file is a <strong>standalone HTML file that can be opened in any web browser, without the need for an internet connection</strong> or any additional dependencies.</p>\n<p>Want to know how to get started? Check out the <a href=\"#Quickstart\">Quickstart</a> guide.</p>\n<h2 id=\"Features\" tabindex=\"-1\">✨ Features</h2>\n<ul>\n<li>Yields a singular .html file as it's output, that is ready for offline use (0 dependencies)\n<ul>\n<li>Embeds images as base64 (with caching to avoid duplicates)</li>\n<li>Embeds your md files</li>\n</ul>\n</li>\n<li>Syntax highlighting for code blocks</li>\n<li>Supports embedding images</li>\n<li>Supports folders to organize your docs</li>\n<li>Supports linking between different pages and headings</li>\n</ul>\n",
"textContent": "\nWhat is Offline Markdown Docs?\n\nOffline Markdown Docs is a CLI tool that allows you to create offline documentation from markdown files. It takes all your markdown files, processes them, and outputs a single HTML file that contains all your documentation, complete with embedded images and syntax highlighting for code blocks and much more.\n\nThe created file is a standalone HTML file that can be opened in any web browser, without the need for an internet connection or any additional dependencies.\n\nWant to know how to get started? Check out the Quickstart guide.\n\n✨ Features\n\nYields a singular .html file as it's output, that is ready for offline use (0 dependencies)\n Embeds images as base64 (with caching to avoid duplicates)\n Embeds your md files\nSyntax highlighting for code blocks\nSupports embedding images\nSupports folders to organize your docs\nSupports linking between different pages and headings",
"wordCount": 145,
"readingTime": 1,
"isPage": true
},
"🚀 Quickstart": {
"id": "Quickstart",
"title": "🚀 Quickstart",
"order": 1,
"content": "<p><img src=\"cachedImage-/images/main-banner.png\" alt=\"\"></p>\n<h1 id=\"Quick-Start\" tabindex=\"-1\">Quick Start</h1>\n<ol>\n<li>Create a new folder and add a <code>config.yaml</code> to it with the following content:</li>\n</ol>\n<pre><code class=\"language-yaml\"><span class=\"hljs-attr\">title:</span> <span class=\"hljs-string\">My</span> <span class=\"hljs-string\">Documentation</span> <span class=\"hljs-string\">Title</span>\n<span class=\"hljs-attr\">theme:</span> <span class=\"hljs-string\">cyan</span>\n</code></pre>\n<ol start=\"3\">\n<li>Create a new folder called <code>docs</code></li>\n<li>Start creating new markdown files in that folder to get your documentation going</li>\n<li>Run <code>npx ...</code> to open the live preview of your documentation</li>\n<li>Once happy, run <code>npx offline-md-docs build</code> to build your final html file</li>\n</ol>\n<h2 id=\"Running-a-local-dev-server\" tabindex=\"-1\">Running a local dev server</h2>\n<p>To run a local dev server, which shows you a live preview of your docs, run:</p>\n<pre><code class=\"language-sh\">npx offline-md-docs start\n</code></pre>\n<p>This will start a local dev server, which will live reload as you make changes to your markdown files:</p>\n<pre><code class=\"language-sh\">\n> offline-md-docs@1.0.51 start\n> node ./src/server.js\n\n📘 offline-md-docs v1.0.51\n\n🚀 Server running at http://localhost:3000\n👀 Watching docs/ <span class=\"hljs-keyword\">for</span> changes...\n</code></pre>\n<h2 id=\"Building-the-docs\" tabindex=\"-1\">Building the docs</h2>\n<p>To build your documentation, run:</p>\n<pre><code class=\"language-sh\">npx offline-md-docs build\n</code></pre>\n<p>This will create a new html file with your documentation in the root of your project folder:</p>\n<pre><code class=\"language-sh\">> offline-md-docs@1.0.51 build\n> node ./src/build.js\n\n📘 offline-md-docs v1.0.51\n\n📄 Processed docs with 5 pages and 2 images <span class=\"hljs-keyword\">in</span> 29 ms.\n📦 Output size: 0.60 MB\n</code></pre>\n",
"textContent": "\nQuick Start\n\nCreate a new folder and add a config.yaml to it with the following content:\n\ntitle: My Documentation Title\ntheme: cyan\n\nCreate a new folder called docs\nStart creating new markdown files in that folder to get your documentation going\nRun npx ... to open the live preview of your documentation\nOnce happy, run npx offline-md-docs build to build your final html file\n\nRunning a local dev server\n\nTo run a local dev server, which shows you a live preview of your docs, run:\n\nnpx offline-md-docs start\n\nThis will start a local dev server, which will live reload as you make changes to your markdown files:\n\noffline-md-docs@1.0.51 start\nnode ./src/server.js\n\n📘 offline-md-docs v1.0.51\n\n🚀 Server running at http://localhost:3000\n👀 Watching docs/ for changes...\n\nBuilding the docs\n\nTo build your documentation, run:\n\nnpx offline-md-docs build\n\nThis will create a new html file with your documentation in the root of your project folder:\n\noffline-md-docs@1.0.51 build\nnode ./src/build.js\n\n📘 offline-md-docs v1.0.51\n\n📄 Processed docs with 5 pages and 2 images in 29 ms.\n📦 Output size: 0.60 MB",
"wordCount": 176,
"readingTime": 1,
"isPage": true
}
}