Gituhb pageを利用したRiot.js のSPA型Webページ骨子（案） #GithubPages

Introduction

久しぶりに投稿させていただきます．
先日，githubをあれこれ調査していたら，指定したブランチにgithub pagesを公開できるにという記事を発見致しました．

驚きました，ヤックデカルチャーです．

もう gh-pagesブランチを作らなくて良いのね...
しかもレポジトリ毎に作れる！!!

Purpose

さて，本題です．

github にはwiki機能もありますが，github pagesを使えるのであれば，
そちらを使ってDocumentを作成する方も多いでしょう．

そこで，SinglePageApplicationを利用して簡単にイケてるgithub pagesを作る方法を提案したいと思います．

利用するのは，，，

Riot.jsちゃんです！

2016年から2017年にかけて一時期盛り上がってましたね，私はVue.jsに魅了されていましたが．

しかし，このRiot.js，Component機能を持ちつつ軽量と，かなり使い勝手が良いです．
簡単なページ作るならこれ程要件を満たす技術はなかなかないのではないでしょうか？

ここでは，Riot.jsを使ってSPA型Webページを作成する方向けにレイアウト骨子を提案したいと思います．
Riot.jsのバージョンは現在の最新版である 3.9.0 を利用します．

Methods

以下の形にディレクトリを構築します．

docs/
    ├ public /* JS, CSS, Imageなど */
    ├ components /* Riot.jsのComponent(**.tagファイル) */
    └ index.html

index.htmlはこのようにしましょう．
また，今回は全てのライブラリを外部読み込みすることとします．
ローカルでやりたい方はnpmなどを入れて各自行ってください．

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ドキュメント</title>
    <!-- My style -->
    <link rel="stylesheet" href="public/css/style.css"/>
</head>
<body>
<!-- Main -->
<r-app />

<!-- riot tags -->
<script type="riot/tag" src="components/app.tag"></script>
<!-- ここにどんどんタグを追加する -->
<script type="riot/tag" src="components/Home.tag"></script>
<script type="riot/tag" src="components/HowToUse.tag"></script>
<script type="riot/tag" src="components/SetUp.tag"></script>
<script type="riot/tag" src="components/NotFound.tag"></script>
<script type="riot/tag" src="components/***.tag"></script>

<!-- scripts we need -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.9.0/riot+compiler.js"
        integrity="sha256-4zekzcv0RXNMJ8CmHna5ya2kDpFOH1wRH2ZTAnyllnI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/riot-route@3.1.3/dist/route+tag.min.js"></script>

<!-- my scripts -->
<script src="public/js/script.js"></script>

<!-- Initialize -->
<script>
    'use strict';

    riot.compile(function () {
        riot.mount('*'); /* componentの有効化 */
        route.start(true); /* ルーティング有効化 */
    })
</script>
</body>
</html>

app.tagはこちら
ポイントは riot-route の<router>を利用すること．
<route>のpath要素を "*" にすると何も見付からなかった時に子要素をrenderします．

※ 注意
必ず，
riot.js は riot+compiler.js ，
riot-route は route+tag.js を読み込んでください．
通常のものを読み込むと動作しない場合があります．

<r-app>
    <aside>
        <ul>
            <li><a each={ links } href="#{ url }">{ name }</a></li>
        </ul>
    </aside>
    <main>
        <router>
            <route path="/"><r-app-home /></route>
            <route path="/how_to_use"><r-app-how-to-use /></route>
            <route path="/set_up"><r-app-set-up /></route>
            <route path="*"><r-app-not-found /></route>
        </router>
    </main>

    <script>
    'use strict';

    this.links = [
        { name: "Home",       url: "" },
        { name: "How To Use", url: "how_to_use" },
        { name: "Set Up",     url: "set_up" },
    ];
    </script>
    <style scoped>
    /* scoped を付けると Component内でのみ有効となる */
    </style>
</r-app>

残りの***.tagファイルについては，app.tag を参考にタグ名を決めて処理を記述するだけです．
index.htmlでriot.mount(*)しているので全てのComponentが読み込まれるはずです．

Conclusion

ドキュメントを書くことが苦手な方もこれを機にドキュメント作成に慣れていけると良いですね！
私も頑張りたいと思います．