Astro.js 小ネタ集その1 ビルドログとMarkdownのスタイリング

初めに

自分のブログサイトは Astro.js + Vercel でサイトを構築＆公開しております。

立ち上げの時点での顛末については以下の Zenn の記事をご覧いただければ幸いです。

https://zenn.dev/asopitech/articles/20230221-213231_1

Markdown形式で記事を書きつつ、Astro.js そのものの構造について理解を深めてまいりましたが、サイトを立ち上げていろいろと見た目や機能などぼちぼち整備を進めているところでございます。

主な記事はMarkdown形式なのでメインのコンテンツである記事を作成することについてはまったく問題はないです。というかそのあたりの機能がそろっていたので Astro.js はかなり強力なSSGであります。ただし、やはり見た目の部分や機能の部分は当然のことながら、自前で実装するといか手を入れていく必要がございます。

ところが、この Astro.js はとにかくかなりの機能をプラグインで揃えておりまして、VueやReact, Svelteにも対応できるしTailwindは積んでるしMarkdownやMDXもできるってわけで各種フレームワーク、ライブラリの組み合わせが爆発的に多いわけでございまして。

なんせ本格的なHTML+CSSはもう何十年振りなもんでさらにはハイカラなTailwind CSSを本格的に触るってなことでいろいろと四苦八苦しながら汗かき汗かきサイトをなんとか仕上げているところでございます。

正直、細かすぎてどう記事に切り出したもんか困っているのではございますが、そこそこノウハウがたまってきたのでこれまでの振り返りを含めてまとめて見たいと思った次第でございます。

それでは本日もよろしくお願いいたします。

技術スタック

自分のブログサイトのざっくりな技術スタックは以下のような感じです。

Astro.js
Tailwind CSS
Alpine.js
Vercel

Astro.jsが様々な技術スタックのハブでありプラグイン集であり統合ビルダーであるのでどこまで技術スタックにカウントするか微妙ではありまして… 特に MarkdownからのHTMLの生成については、Markdown → HTML にremark、HTML→HTMLの整形にrehype、コードブロックのシンタックスハイライトにShiki、HTMLの色付けは Tailwind プラグイン@tailwindcss/typography のように多重のフレームワークが折り重なっており、remark,rehype,shikiそれぞれに設定やらプラグインでの追加機能などが盛りだくさんでございます。

さらに今回は超シンプルなUIライブラリとしてAlpine.jsを採用してみてます。ブログ記事メインのサイトでがっつりの機能はいらないので鬼シンプルにAlpine.jsを初採用してみましたのでそのあたりもご確認いただければと。

また、すでに Google アナリティクスのJSを仕込む記事も上げておりますので、以下の記事もよろしくお願いします。

https://asopi.tech/blog/20230507_3

それでは細かいネタをご紹介いたします。

1. ビルドのログを細かく出す。

ビルド時のエラーメッセージというかエラーの進捗状況をより詳しく出すには --verbose を渡します。

$ npm run build - --verbose

はい、こんな感じで npm runから中のコマンドに引数渡すには-です。

2. Markdown で生成した後のHTMLにTailwind CSSを適応する

MarkdownのドキュメントはあとからHTMLが生成されてくるため、直接 Tailwindのクラスを当てることはできません。ベースの整形は Tailwind CSS の公式プラグイン @tailwindcss/typography がやってくれます。

https://tailwindcss.com/docs/typography-plugin

まずはこのプラグインのセットアップから開始します。

2-1. @tailwindcss/typography

Tailwind CSSのプラグインをセットアップ。

$ npm install -D @tailwindcss/typography

Tailwindの設定ファイルにプラグインを追加します。

module.exports = {
// ...
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

で、Markdown記事のレイアウトを指定するastroファイルでproseクラスを指定します。

...
<article class="prose">
    <slot/>
</article>
...

proseクラス指定のみでその下のMarkdownから生成されるHTMLにはがばっとスタイルが当たります。だいたい、これでOKです。

で、proseに対してさらにカスタマイズを加えたい場合は次の手順となります。

2-2. prose でざっくり指定

prose-xxで様々なカスタマイズが可能です。

カラーテーマ: prose-gray (default), prose-slate, prose-zinc, prose-neutral, prose-stone
文字サイズ: prose-sm, prose-base (default), prose-lg, prose-xl, prose-2xl
ダークモード: dark:prose-invert

でさらにMarkdownで生成されるHTML要素に対してカスタマイズは以下のように記述できます。

...
<article class="prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600">
    <slot/>
</article>
...

このように prose- の後ろに要素名を指定することでそのタグに対して一括で装飾が可能です。使用可能な要素のリストは以下の公式ドキュメントをご覧ください。

https://tailwindcss.com/docs/typography-plugin#element-modifiers

要素名ではなく、いつものクラス名でスタイルを当てたい場合は、以下の @layer component 定義でどうにかします。

2-3. @layer component でがっつり

remark,rehypeのプラグインでしっかり組まれたHTMLが生成されることも多々あります。そのような場合には prose-h1 程度じゃ太刀打ちできないので以下のようにカスタムのコンポーネントを追加することになります。

<style>
@tailwind components;

@layer components {
    .remark-code-container > .remark-code-title+pre {
        @apply mt-0 rounded-t-none;
    }

    .remark-code-title {
        @apply text-base text-gray-200 dark:text-gray-800 bg-slate-900 dark:bg-slate-100 pl-3 rounded-t-lg font-bold;
    }
}

</style>
...
<article class="prose">
    <slot/>
</article>
...

こんな感じで@layer components {}内にクラスを定義することでいつも通りのCSSが利用可能です。

2-4. Markdown にHTML直貼り

そして、さらにガッツリCSSというかデザイン当てたい場合には、HTMLをMarkdownに直書きしたいです… が、@tailwindcss/typographyが邪魔なのでコイツを無効にする必要があります。

<div class="not-prose">
...
</div>

このように not-prose クラスをつけるとその中身は@tailwindcss/typographyが効かなくなります。これでOKです。

このサイトの広告枠の箇所もMarkdownにアフィリエイトタグを直貼りしてます。

今回はここまでといたします。引き続きよろしくお願いいたします。

個人ブログでも記事をあげています。こちらもあわせてご覧ください！

Astro.js、Tailwind CSSの入門にぜひ！

ITごった煮はてブ版

あそぴテック技術ぶろぐ