るりまのフロントエンドを分離したいなぁ

現状

bitclustのコマンドで静的なHTMLを生成している。 テンプレートがbitclustに内包されており、HTMLの構造についてある程度分離されているが一部のHTMLを生成する部分はRubyで書かれている。

こうしたい

bitclustにGraphQLのインターフェイスをおく。 GraphQL経由で取得した情報をもとに、フロントエンドのツールチェインを利用してHTMLを生成する。

フロントエンドを分離することで、フロントエンドのツールをより手軽に利用できるようにし、マニュアルの使い勝手を向上させる足がかりとしたい。あとフロントエンド得意な人のコントリビュートチャンスを増やしたい。

いま試していること

bitclust serverコマンドにオプションを追加し、GraphQLの口を作った

https://github.com/hanachin/bitclust/tree/graphql

こう --graphql オプションを渡すとGraphQLが生えるので

% bundle exec bitclust server --debug --port=4567 --auto --baseurl=http://localhost:4567/ --graphql

こういう感じで叩くと

% curl -s -X POST -H 'Content-Type: application/json' -d '{"query": "query ListDocs($version: ID!){ methodDatabase(version: $version){encoding,version,docs{id,title}}}","variables":{"version":"3.0.0"}}' http://localhost:4567/graphql

こんな感じで情報が取れる

{
  "data": {
    "methodDatabase": {
      "encoding": "utf-8",
      "version": "3.0.0",
      "docs": [
        {
          "id": "symref",
          "title": "Rubyで使われる記号の意味（正規表現の複雑な記号は除く）"
        },
        {
          "id": "help",
          "title": "このマニュアルのヘルプ"
        },
        {
          "id": "spec.thread",
          "title": "スレッド"
        },
        {
          "id": "news.2_4_0",
          "title": "NEWS for Ruby 2.4.0"
        },
        {
          "id": "platform.index",
          "title": "Ruby が動作するプラットフォーム"
        },
        {
          "id": "news.1=2e8=2e4",
          "title": "ruby 1.8.4 feature"
        },
        {
          "id": "ReFe",
          "title": "ReFe"
        },
        {
          "id": "spec.def",
          "title": "クラス／メソッドの定義"
        },
        {
          "id": "marshal_format",
          "title": "Marshal フォーマット"
        },
        {
          "id": "platform.Win32=2dnative",
          "title": "Win32ネイティブ版"
        },
        {
          "id": "spec.control",
          "title": "制御構造"
        },
        {
          "id": "news.2_7_0",
          "title": "NEWS for Ruby 2.7.0"
        },
        {
          "id": "spec.eval",
          "title": "Ruby プログラムの実行"
        },
        {
          "id": "spec.terminate",
          "title": "終了処理"
        },
        {
          "id": "platform.GNU",
          "title": "GNU"
        },
        {
          "id": "platform.Win32",
          "title": "Win32"
        },
        {
          "id": "glossary",
          "title": "Ruby用語集"
        },
        {
          "id": "news.3_0_0",
          "title": "NEWS for Ruby 3.0.0"
        },
        {
          "id": "news.2_5_0",
          "title": "NEWS for Ruby 2.5.0"
        },
        {
          "id": "index",
          "title": "オブジェクト指向スクリプト言語 Ruby リファレンスマニュアル"
        },
        {
          "id": "platform.Cygwin",
          "title": "Cygwin"
        },
        {
          "id": "news.index",
          "title": "Ruby変更履歴"
        },
        {
          "id": "spec.operator",
          "title": "演算子式"
        },
        {
          "id": "spec.rubycmd",
          "title": "Rubyの起動"
        },
        {
          "id": "spec.safelevel",
          "title": "セキュリティモデル"
        },
        {
          "id": "platform.MinGW",
          "title": "MinGW"
        },
        {
          "id": "platform.Unix",
          "title": "Unix"
        },
        {
          "id": "news.1=2e8=2e1",
          "title": "ruby 1.8.1 feature"
        },
        {
          "id": "spec.m17n",
          "title": "多言語化"
        },
        {
          "id": "spec.regexp",
          "title": "正規表現"
        },
        {
          "id": "platform.mingw32",
          "title": "mingw32"
        },
        {
          "id": "platform.DOSISH=2dsupport",
          "title": "DOSISH 対応"
        },
        {
          "id": "spec.commands",
          "title": "コマンド"
        },
        {
          "id": "spec.variables",
          "title": "変数と定数"
        },
        {
          "id": "pack_template",
          "title": "pack テンプレート文字列"
        },
        {
          "id": "license",
          "title": "配布条件"
        },
        {
          "id": "news.1=2e8=2e0",
          "title": "1.6.8から1.8.0への変更点(まとめ)"
        },
        {
          "id": "platform.mswin32=2dcompat",
          "title": "Win32ネイティブ版Rubyの互換性問題"
        },
        {
          "id": "news.2_0_0",
          "title": "NEWS for Ruby 2.0.0"
        },
        {
          "id": "news.2_6_0",
          "title": "NEWS for Ruby 2.6.0"
        },
        {
          "id": "spec.envvars",
          "title": "環境変数"
        },
        {
          "id": "news.1_9_0",
          "title": "ruby 1.9 feature"
        },
        {
          "id": "manual=2dpage",
          "title": "manual page"
        },
        {
          "id": "spec.lambda_proc",
          "title": "手続きオブジェクトの挙動の詳細"
        },
        {
          "id": "spec.lexical",
          "title": "字句構造"
        },
        {
          "id": "platform.GNUHurd",
          "title": "GNU Hurd"
        },
        {
          "id": "news.2_2_0",
          "title": "NEWS for Ruby 2.2.0"
        },
        {
          "id": "news.1=2e6=2e0",
          "title": "ruby 1.6 feature"
        },
        {
          "id": "news.2_1_0",
          "title": "NEWS for Ruby 2.1.0"
        },
        {
          "id": "spec.literal",
          "title": "リテラル"
        },
        {
          "id": "news.1=2e8=2e2",
          "title": "ruby 1.8.2 feature"
        },
        {
          "id": "platform.MacOSX",
          "title": "Mac OS X"
        },
        {
          "id": "news.2_3_0",
          "title": "NEWS for Ruby 2.3.0"
        },
        {
          "id": "print_format",
          "title": "sprintf フォーマット"
        },
        {
          "id": "platform.mswin32",
          "title": "mswin32"
        },
        {
          "id": "news.1=2e8=2e5",
          "title": "ruby 1.8.5 feature"
        },
        {
          "id": "spec.intro",
          "title": "はじめに"
        },
        {
          "id": "news.1=2e8=2e3",
          "title": "ruby 1.8.3 feature"
        },
        {
          "id": "spec.program",
          "title": "プログラム・文・式"
        },
        {
          "id": "spec.class",
          "title": "クラス"
        },
        {
          "id": "spec.object",
          "title": "オブジェクト"
        },
        {
          "id": "spec.call",
          "title": "メソッド呼び出し(super・ブロック付き・yield)"
        }
      ]
    }
  }
}

次ためすこと

一応口ができたので、現状のるりまが生成するHTMLを模してHTMLを生成できるかやってみる