nobj-docfolder

A tool to generate a HTML Website out of a folder with Markdown files.

• supports arbitrary folders
• relative paths within documents
• small-footprint responsive application
  • GDPR Compliant: Will delay loading external content until cookies are accepted
• SEO tags are customizable and automatically use data from the MD file

How to Use

You need to create the following structure in a folder of your choice (let´s call it "doc")

your_project
    doc
        metadata.json
        images.json
        docroot/
            index.md
            .
            .
            image.jpg
            
            chapter_1/
                index.md
                image.png

then just type

nobj-docfolder doc/ out/

File Templates

metadata.json

The file Metadata.JSON contains

• The Documentation Project Title
• The Canonical Domain where it will be hosted
• The Default image to use
• All the META TAGS as inside the meta Array (check out it´s very simple, you just include the values of your desired META TAGS as a JSON Object)
• All the REST IF HTML TAGS inside the rest Array. You can include any other HTML that you need.

The following example would set:

• Responsive metatags
• OpenGraph tags (for SEO + share links in ie. whatsapp)
• Rest of HTML:
  • The stylesheet and Javascript (required)
  • Some other LINK tags good for seo / mobile browsing

All these are really optional except the Link to the Stylesheet and Javascript application, but with this example you have a full SEO working example.

{
  "title": "My Project Documentation",
  "canonical": "https://myproject.domain/doc",
  "domain": "myproject.domain",
  "image": "https://myproject.domain/logo.jpg",
  "meta": [
    { "charSet": "utf-8" },
    { "name": "robots", "content": "all" },
    { "lang": "en" },
    { "name": "viewport", "content": "width=device-width, maximum-scale=5, user-scalable=yes, initial-scale=1" },
    { "name": "theme-color", "content": "#fff"},
    { "name": "mobile-web-app-capable", "content": "yes" },
    { "name": "apple-mobile-web-app-capable", "content": "yes" },
    { "name": "apple-mobile-web-app-status-bar-style", "content": "white" },
    { "property": "og:type", "content": "article"},
    { "property": "og:site_name", "content": "My Site" },
    { "name": "twitter:site", "content": "@mytwitter" }
  ],
  "rest": [
    
    {"t": "link", "rel": "stylesheet", "href": "/bin/doc/lib.css?v28"},
    {"t": "script","src": "/bin/doc/lib.js?v28"}

    {"t": "link", "rel": "icon", "type": "image/x-icon", "href": "/bin/web/res/icon-1024.png"},
    {"t": "link", "rel": "apple-touch-icon","href": "/bin/web/res/icon-1024.png"},
    {"t": "link","rel": "icon","sizes": "70x70", "href": "/bin/web/res/icon-1024.png"},
    {"t": "link", "rel": "shortcut icon", "href": "/bin/web/res/icon-1024.png"},
  ]
}

images.json

This file just contains an Array of Images, using a compatible unsplash collection format.

• A random image will be picked as a decoration. It will be used when browsing the documentation in a big screen.

[
  {
    "urls": {
      "regular": "https://url_of_image"
    },
    "user": {
      "name": "Some Body",
      "links": {
        "html": "https://unsplash.com/..."
      }
    }
  },
  .
  .
  .
]