Jekyllのフロントエンドを作り始めた

Jekyllはmarkdown形式で書けて、Githubに内容をプッシュするだけで公開できるのでとても便利なんだけど、いちいち日付からファイル名をつけたり先頭部にあれこれ情報を書く必要があって面倒だ。そこでブラウザ上で動くフロントエンドを作ることにした。ただしそれ専用にサーバプロセスを起動するのも面倒なので、ApacheのCGIで動かせるようににした。

tyfkda/JekyllEditor

フロントエンドはAngularJS1.5。バックエンドは開発時にはRubyのSinatra、リリース時にはApacheのCGIを使う。

バックエンドにAPIを用意してフロントエンドから叩く。操作をCRUDに対応させてRailsのようなURL規約で扱いたいが、CGIで動かしたいのでAPIのエンドポイントは固定にして、操作対象をクエリ文字列として指定することにした。しかしRuby標準のCGIモジュールがPOSTの場合にクエリ文字列を受け取れないという問題があって、しかたがないので自作した。

Github pagesでのJekyllのmarkdownはkramdownとRougeが使われるとのことで、エディタのプレビューでもそれぞれのgemを使って変換してやる：

require 'kramdown'
require 'rouge'

def convert_markdown_to_html(contents)
  Kramdown::Document.new(contents, {
      syntax_highlighter: 'rouge',
      syntax_highlighter_opts: {
        default_lang: 'ruby',
        formatter: Rouge::Formatters::HTML,
        'bold_every' => 8, 'css' => :class
      },

      'auto_ids'       => true,
      'toc_levels'     => '1..6',
      'entity_output'  => 'as_char',
      'smart_quotes'   => 'lsquo,rsquo,ldquo,rdquo',
      'input'          => "GFM",
      'hard_wrap'      => false,
      'footnote_nr'    => 1,
    }).to_html
end

あとはドラッグドロップで画像をリポジトリに追加＆記事に埋め込めるようにしたい（Qiitaと同様に）。

記事を編集した結果をリポジトリにコミット・プッシュするのもフロントエンドからできると便利かもだけど、その辺は未定。