web.dev に PR を出して Eleventy と Alex について学んだ

TL;DR

• web.dev の記事は Eleventy で生成していて {% Banner 'caution, 'body' %} といった shortcode を使える。
• web.dev は inclusive な用語になるよう alex を GitHub Actions で動かして自動チェックしている。

きっかけ

スマホで web.dev の How to use HTTPS for local development を読んでいたら、Caution と書いてある場所に何も書いてなくて、まさかと思って端末を横持ちにしたら内容が出てきた（現在は修正済み）。

ページ下部の "File a bug" から不具合報告することもできたけど、ちょっとコードを読んだら直せそうだったから、直して PR を出して、ありがたいことにマージされた（その後、別の PR でもっといい形にしてもらった）。

github.com

{% Banner %} と Eleventy の shortcode

どこをどう直せばいいかは、こういう流れで調べた。

• このページのソースを見に行って Caution 周りのコードを見たら {% Banner 'caution' %} と書いてあった。
• コード全体を Banner で検索したら、常に表示すべきところは {% Banner 'caution', 'body' %} となっていた。
• Banner.js を見つけて大体の動きを察した。

というわけで {% Banner 'caution' %} を {% Banner 'caution', 'body' %} にして PR を出した。

この書き方でなぜこういう動きをするのか、後から調べてみた。

• ビルドを受け持っていると思われる continuous-integration-workflow.yml を見たところ、ビルドは npm run build を呼び出すシンプルな形。
• package.json を見ると build は "npm-run-all clean sass gulp rollup eleventy sw-manifest" で、eleventy がそれっぽい。ここで初めて Eleventy という Static Site Generator (SSG) の存在を知った。なんとトップページの Build with Eleventy に web.dev が載っている。知ってれば知っていたやつですね。
• .eleventy.js を読んだら config.addPairedShortcode('Banner', Banner); とあった。
• さらに調べると Eleventy に shortcode という仕組みがあることが分かり、 {% Banner 'caution', 'body' %} を div に変換していることが分かった。

alex での文章チェック

PR を出した後、Netlify で自動的にステージング環境ができたのは、まぁよくある話だなと思ったんだけど、Alex Recommends Report というものが初見だった。

例えばこのような指摘が出ていたので、master を main にする的な話なんだなというのはなんとなく分かった。

special may be insensitive, use has a disability, person with a disability, people with disabilities instead

Alex と言われても macOS の say コマンドで指定する英語の男性しか思いつかなかったので、こちらもそれっぽい GitHub Actions を探したところ、alex-workflow.yml があった。ここで使っていたのが Alex Recommends という Action だった。この Action は alex というものを走らせるものだった。textlint は知っていたけど、これは特に inclusive を狙ったもののようだ。もしかして、と思って調べたら textlint-rule-alex があった。

以上、web.dev に PR を出したときに学んだことでした。