Fable でブログを再構築する pt.11
krymtkts/blog-fable Fable でブログを再構築している。
ここ 1 ヶ月ほどでやりたかったことを 3 つ進められた。エライ(低ハードル)。
PageSpeed Insights のスコア改善 #42
カラースキームの導入 #43
以下のとおり結果的に結構良いスコア叩き出すようになった。
| platform | Performance | Accessibility | Best Practices | SEO |
|---|---|---|---|---|
| Mobile | 99 | 93 | 100 | 100 |
| Desktop | 100 | 93 | 100 | 100 |
Solarized が好きなのだけど今回は Dark にしてみた。エディタやターミナルなんでも Solarized Dark にして 10 年近いのでついにブログも Dark に。 まだいい感じに色調整できてないから Accessibility をちょい下げてしまってるが、後ほど調整する。
今回やった中には、初体験でちょっと調べる必要があるものもあった。 これらはメモがてら以下に記しておく。全然 F# ネタではないけど。
いずれも上手く拡張できる様になっており楽だった。感心するわ。
Marked の Renderer を拡張する
The Renderer - Marked Documentation に示されるように Renderer オブジェクトにわたすオプションで拡張できる。
listitem(string text, boolean task, boolean checked) と checkbox(boolean checked) の組み合わせにちょっと癖があった。
どっちも定義しているとどっちも呼ばれてチェックボックスが 2 個になってしまう。
checkbox(boolean checked) 側を無効化するような書き方をして checkbox 要素を label 要素で包み込んだ。
シグネチャが checkbox(boolean checked) なもんで、こっち側は label 要素書こうにもテキスト不明でできないねんよな。
ブログの場合 checkbox 要素が単独で使用されることまずないからこうしたけど、なんかもっと良い方法がないのかは気になるところ。
let listitem =
fun text task check ->
let checkState =
match check with
| true -> "checked"
| false -> ""
// NOTE: input を label で包んで関連を持たせる
match task with
| true ->
$"""<li><label class="checkbox"><input type="checkbox" class="checkbox" disabled {checkState} />{text}</label></li>"""
| false -> $"""<li>{text}</li>"""
let checkbox =
fun _ ->
// NOTE: checkbox は list と一緒に使われる前提と考えて何も返さない
""
let mops =
!!{| heading = heading
link = link
listitem = listitem
checkbox = checkbox |}
jsOptions<Marked.MarkedExtension> (fun o ->
o.renderer <- Some <| U2.Case2 mops
o.gfm <- Some true
o.headerIds <- Some true)
Bulma の自前 style をビルドする
With node-sass | Bulma: Free, open source, and modern CSS framework based on Flexbox
概ねこの手順の通りにやればいい。
ただし以下の非推奨があって、それらは自前で最新のものに置き換える必要があった。
Sass では
@importは非推奨、@useに書き換える余談だが commit message には backquote で囲わずにこれらのキーワードを書いてたら GitHub 上でホバーしたときにその ID の方々がポップアップされて笑ってしまった
これらは Sass の最新仕様に追随するよう自前でこしらえた。
node-sass を sass に
変えるのは大したことないけど、 cli インタフェースのオプションも変わってるので、そこはケアする必要がある。
ついでに出力される CSS を圧縮するオプション --style=compressed もつける。今回のケースでは空白が消えたことで 3KB くらい節約できた。
"scripts": {
"postinstall": "dotnet tool restore",
- "css-build": "node-sass --omit-source-map-url ./sass/style.scss ./docs/blog-fable/css/style.css",
+ "css-build": "sass --style=compressed --no-source-map ./sass/style.scss ./docs/blog-fable/css/style.css",
"serve": "dotnet fsi ./dev-server.fsx",
"build": "dotnet fable src --runScript",
"dev": "npm run build dev && npm run serve"
@import を @use に
@use を使う場合は、変数のデフォルト値を書き換えるには先述の手順のとおりにはできない。
Default Values | Sass: Variables の示す通り @use <url> with (<variable>: <value>, <variable>: <value>) を使う。以下書き換えイメージ。
@charset "utf-8";
// NOTE: based on https://ethanschoonover.com/solarized/
$base03 :#002b36;
$base02 :#073642;
$base01 :#586e75;
$base00 :#657b83;
$base0 :#839496;
$base1 :#93a1a1;
$base2 :#eee8d5;
$base3 :#fdf6e3;
$yellow :#b58900;
$orange :#cb4b16;
$red :#dc322f;
$magenta :#d33682;
$violet :#6c71c4;
$blue :#268bd2;
$cyan :#2aa198;
$green :#859900;
-@import "../node_modules/bulma/bulma.sass";
-// NOTE: Solarized Dark.
-$black: $base3;
-$black-bis: $base2;
-$black-ter: $base2;
-$grey-darker: $base1;
-$grey-dark: $base1;
-$grey: $base0;
-$grey-light: $base00;
-$grey-lighter: $base01;
-$grey-lightest: $base01;
-$white-ter: $base02;
-$white-bis: $base02;
-$white: $base03;
-// NOTE: set alternative colors.
-$turquoise: $cyan;
-$purple: $violet;
+@use "../node_modules/bulma/bulma.sass" with (
+ // NOTE: Solarized Dark.
+ $black: $base3,
+ $black-bis: $base2,
+ $black-ter: $base2,
+ $grey-darker: $base1,
+ $grey-dark: $base1,
+ $grey: $base0,
+ $grey-light: $base00,
+ $grey-lighter: $base01,
+ $grey-lightest: $base01,
+ $white-ter: $base02,
+ $white-bis: $base02,
+ $white: $base03,
+ // NOTE: set alternative colors.
+ $turquoise: $cyan,
+ $purple: $violet,
+);
もうちょっと PageSpeed Insights のスコア上げられる雰囲気はあるので、そこだけ粘ってみる。 結構 Fable 製ブログも出来上がってきたし、いよいよ自ブログ移行に向けた試行をはじめられそう。