2022-10-09

2022/10/08 の続きで jekyll のお試しを継続。今日確認したいことは

  • 検索ができるか
  • タグ一覧が作れるか

Web Scratch のソースを見ながら試していく。

検索は sidebar.html で作られている。jekyll の _includes の仕組みを理解する必要がありそう。

Includes を使って、サイトデザインを自身で作成すればめんどくさいけどなんとでもなりそう。めんどいけど。 theme の jekyll default の minima をやめて Tailwind の UI components 使えばきれいにできる（？

_config.yml の theme: minima をコメントアウトすると jekyll serve 時に以下が表示されるようになり、 livereload も効かなくなる。 素の HTML になって script タグなども落ちるからだろうと思う。

     Build Warning: Layout 'post' requested in _posts/2022-10-08-welcome-to-jekyll.md does not exist.
     Build Warning: Layout 'post' requested in _posts/2022-10-09-dev-note.md does not exist.
     Build Warning: Layout 'default' requested in 404.html does not exist.
     Build Warning: Layout 'page' requested in about.markdown does not exist.
     Build Warning: Layout 'home' requested in index.markdown does not exist.

なので、まず _layouts を掘って、そこに必要そうな Layouts を作ってみることを試す。

livereload は、_layouts/default.html を作ると head タグ内に以下が inject されて機能することが分かった。

<script src="http://127.0.0.1:35729/livereload.js?snipver=1&amp;port=35729"></script>

minima を外して、 layouts を作って殺風景な HTML を作った。昨日は jekyll で技術ノートをやっていけるか不安だったが、やっていけそうな気がしてきた。CSS の修飾は後からでもつけられるだろう。

HTML の修飾

markdown parser が出力する HTML に class を付けることは Kramdown では Block Attributes でできるようだけど、素の md で書きたいからそれは避けたい。

出力された HTML に class をつけられないとなると、 tailwind が使えないので困っていたがが抜け道があった。 @tailwindcss/typography

The official Tailwind CSS Typography plugin provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don’t control, like HTML rendered from Markdown, or pulled from a CMS.

これを使って修飾することにする。

ボツ

tailwind とかち合ってしまうので、以下はボツとした。

jekyll の code highlighter の default は rouge で以下のコマンドで CSS を出力できる。

$ bundle exec rougify style github > assets/css/rouge-style-github.css

使用可能な style は以下のコマンドで確認できる。

$ bundle exec rougify help style

_config.yml に highlighter: rouge を記述しないと、出力される html に class が付かなかった。

参考

jekyll

vim

ノートの編集中に vim コマンドの検索をした。結局 help がうまく引けないのが上達の妨げになっている気がする。 dib や ciw を help で引くのってどうしたら良いのだろうか。

flutter

flutter が skia をやめるという話を拾った https://twitter.com/stakemura/status/1579043113355870208

Impeller という新しい rendering runtime を採用しようとしている話らしい