# 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/..."
      }
    }
  },
  .
  .
  .
]
``````