
6 min read
DEVAstroで構築したBlogサイトにモバイル表示用のTabBar(タブバー)を実装する。今回は次の3つのボタンを配置する「ホームへ戻る」「Topへ戻る」「目次を表示する」。一連の実装手順についてまとめる。
Astroで構築したBlogサイトにモバイル表示用のTabBar(タブバー)を実装する。今回は次の3つのボタンを配置する「ホームへ戻る」「Topへ戻る」「目次を表示する」。一連の実装手順についてまとめる。
AstroのBlog記事に関連する記事の一覧を表示できるようにする。関連度合いを一致するタグの数で決定する。
誰にも言えないことはここに書く。
AstroのmarkdwonまたはMDXで記述したコードブロックについて、ファイル名やコードのdiffを表示できるようにする。シンタックスハイライターはShikiを使用。remarkのpluginとコードブロックのcomponentを追加する。一連の実装手順をまとめた。
「@astrojs/rss」によるrss.xmlにBlog記事の本文を追加する。MDXファイルを対象に、markdownのパース、埋め込んだcomponentタグやcode blockのサニタイズ処理を行う。一連の手順を備忘録としてまとめる。
VSCodeの拡張機能「vscode-textlint」をインストールし、4種類のファイル(.mdx / .md / .txt / .html)でtextlintによる日本語の文章校正を自動化する。mdxは設定が複雑のため詳しい手順をまとめる。校正ルールはJTF日本語標準スタイルのルールセットを用いる。
広告