Markdown based Document Site for GitHub Pages

Designed for GitHub Pages (especially for `/docs` option).
A demo: [Docs of Ark](https://sinri.github.io/Ark/)

# index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Introduction to Ark</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/marked@0.3.6"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    <script src="//unpkg.com/iview/dist/iview.min.js"></script>

    <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/github.min.css">

    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css"/>
    <style>
        .layout {
            border: 1px solid #d7dde4;
            background: #f5f7f9;
            position: relative;
            border-radius: 4px;
            overflow: hidden;
        }

        .layout-logo {
            width: 100px;
            height: 30px;
            background: #5b6270;
            border-radius: 3px;
            float: left;
            position: relative;
            top: 15px;
            left: 20px;
            line-height: 30px;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            color: white;
            text-align: center;
        }

        .layout-nav {
            width: 255px;
            margin: 0 20px 0 auto;
        }

        #markdown {
            font-size: 1.2em;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="layout">
        <Layout>
            <Header style="position: fixed;top:0;height: 60px;width: 100%">
                <i-menu mode="horizontal" theme="dark" active-name="1">
                    <div class="layout-logo">Ark</div>
                    <div class="layout-nav">
                        <menu-item name="1">
                            An universal framework for PHP 7
                        </menu-item>
                    </div>
                </i-menu>
            </Header>
            <Layout>
                <Sider hide-trigger :style="{background: '#fff', minHeight:'80vh',position:'fixed',left:0,top:'60px'}">
                    <i-menu theme="light" @on-select="onMenuSelected" width="auto">
                        <template v-for="(menuGroupItem,menuGroupKey) in menuGroupList">
                            <Submenu v-if="menuGroupItem.type=='sub-menu'" :key="menuGroupKey"
                                     :name="menuGroupItem.title">
                                <template slot="title">
                                    {{ menuGroupItem.title }}
                                </template>
                                <menu-item v-for="(menuItem,menuKey) in menuGroupItem.items" :key="menuKey"
                                           :name="menuItem.name">
                                    {{ menuItem.title }}
                                </menu-item>
                            </Submenu>
                            <menu-item v-if="menuGroupItem.type=='menu'" :key="menuGroupKey" :name="menuGroupItem.name">
                                {{ menuGroupItem.title }}
                            </menu-item>
                        </template>
                    </i-menu>
                </Sider>
                <Layout :style="{padding: '0 24px 24px',marginLeft:'200px',marginTop:'60px'}">
                    <Content :style="{margin: '24px 0',padding: '24px', minHeight: '70vh', background: '#fff'}">
                        <div id="markdown" class="markdown-body" v-html="compiledMarkdown" v-highlight></div>
                    </Content>
                    <Footer style="text-align: center">
                        Copyright 2018 <a href="mailto:e.joshua.s.e@gmail.com">Sinri Edogawa</a>
                    </Footer>
                </Layout>
            </Layout>
        </Layout>
    </div>
</div>
<script>
    Vue.directive('highlight', function (el) {
        let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block) => {
            hljs.highlightBlock(block)
        })
    });
    let app = new Vue({
        el: '#app',
        data: {
            markdownContent: '> LOADING...',
            menuGroupList: [],
        },
        computed: {
            compiledMarkdown: function () {
                return marked(this.markdownContent, {sanitize: true})
            }
        },
        methods: {
            onMenuSelected: function (name) {
                console.log("onMenuSelected", name);

                axios.get("./markdown/" + name + ".md")
                    .then((response) => {
                        this.markdownContent = response.data;
                    })
                    .catch((error) => {
                        this.markdownContent = "# Page '" + name + "' is not found";
                    });
            }
        },
        mounted: function () {
            axios.get("./menu.json")
                .then((response) => {
                    console.log(response.data);
                    let menuGroupList = [];
                    for (let k1 in response.data) {
                        if (!response.data.hasOwnProperty(k1)) continue;
                        let item1 = response.data[k1];
                        if (typeof item1 === 'string') {
                            menuGroupList.push({
                                type: 'menu',
                                name: k1,
                                title: item1,
                            });
                        } else {
                            let submenu = {
                                type: 'sub-menu',
                                title: k1,
                                items: []
                            };
                            for (let k2 in item1) {
                                if (!item1.hasOwnProperty(k2)) continue;
                                let item2 = item1[k2];
                                submenu.items.push({
                                    name: k2,
                                    title: item2,
                                });
                            }
                            menuGroupList.push(submenu);
                        }
                    }
                    this.menuGroupList = menuGroupList;
                    this.onMenuSelected('introduction');
                }).catch((error) => {
                this.markdownContent = "# Menu is not found";
            });
        }
    });
</script>
<!--
This docs index.html, menu.json and markdown files would be also a good sample for GitHub Pages, ha ha ha~
-->
</body>
</html>
```

# menu.json

```json
{
  "path": "title-of-first-level-page",
  "title-of-sub-menu": {
    "path": "title-of-second-level-page"
  }
}
```

The path might be `foo` or `foo/bar`, which would each be linked to `./markdown/foo.md` or `./markdown/foo/bar.md`. 

# Directory markdown

Your contents here stored inside as `.md` files to be referred.