サイトのcss整備とかやります。 TOC や tag の整備。

慣れてきた。astro いいじゃない。

⛔ storybook

部品の動作確認用に最初に準備。 svelte のときにあったのだけど histoire に入れかえて消滅したので やりなおし。 と思ったら stroybook の astro component 対応がなかった。

https://github.com/storybookjs/storybook/issues/18356

• https://github.com/withastro/roadmap/issues/533

• 進行中ぽい。

こちらは、一見 storybook に空目するのだけど storyblok デス。

https://docs.astro.build/ja/guides/cms/storyblok/

✅ tailwind と DaisyUI

• https://docs.astro.build/ja/guides/integrations-guide/tailwind/

> npx astro add tailwind

• Style rendered Markdown with Tailwind Typography | Docs

class = "prose"

✅ theme-change

• https://github.com/saadeghi/daisy-blog

• https://github.com/saadeghi/theme-change

DaisyUI のデフォルトテーマを全部つっこんでみた。

ContentCollection

✅ tag

• https://docs.astro.build/ja/tutorial/5-astro-api/2/

✅ next / prev

素直に実装。

const posts = await getCollection("posts");
posts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
const index = posts.findIndex((p) => p.slug == post.slug);
let prev = index + 1 < posts.length ? posts[index + 1] : null;
let next = index > 0 ? posts[index - 1] : null;

🟩 search

サーバー使わない簡易な検索。

✅ pagination

• ページネーション

[page].astro を足したら動いた。同じディレクトリに同居できるぽい。

/src/pages/posts/[...slug].astro
/src/pages/posts/[page].astro # 👈
index.astro

✅ icon

https://www.astroicon.dev/

https://alpacat.com/blog/introduction-of-astro-icon/

npm i -D @iconify-json/mdi @iconify-json/devicon

<Icon name="devicon:astro" class="text-4xl" />

markdown

✅ TOC

• Astro で Table of Contents(目次)を実装する

• Building a table of contents from Astro's markdown headings

render 関数から見出し一覧を取得できる。 なるほどー。

const { Content, headings } = await post.render();

markdown 拡張

✅ directive / admonition ( info, warning とかの囲み)

• Contentlayer で目次を生成する　ほか #Next.js - Qiita

:::tip

admonitions is pretty great!

:::

:::note-error

エラーノート

:::

GFM

デフォルトに入っている？

✅ 外部リンクのマーカー

Add icons to external links | Docs

contents を使うと後ろに入るので、properties と css を組み合わせて前に入れた。

a[data-external]::before {
  content: attr(data-external);
}

✅🚧 linkcard

https://futabooo.com/blog/2023/link-card/

TODO: aspect比固定するべし

✅ codeblock title

いろいろ調べたけど astro では astro-expressive-code がいいです。

:::warning build時エラーに

no grammar...

preivew 時はエラーにならない。 codeblock がシンタックス違反をしているとエラーになる！

astro の markdown-sytnax-guide とかだめ。

だめなときは文法を txt 指定にすればエラーは回避できる。 :::

astro-expressive-code

https://expressive-code.com/reference/configuration/

• Markdownでリッチなコードブロックを実現する「Expressive Code」 - ろぼいんブログ

• 👀 expressive-code Expressive Code Blocks in Astro

rehype-pretty-code

• rehype-pretty-code Ryan Schachte's Blog

• rehype-pretty-code Highlight a line on code block with Astro

Prism

• mdx用？ Prism Astro でコードブロックのシンタックスハイライトをしつつタイトルも付ける | monolithic kernel

remark-flexible-code-titles

• remark-flexible-code-titles 2023年6月版 Astro.js 小ネタ集 その2 Markdownの表示カスタマイズいろいろ. Markdown のコードブロックにタイトルをつける

data-language 属性 を before で表示

rehype-pretty-code と組合せるなど。

• ソースコードの右上に言語名を表示するやつ - Object.create(null)

🟩 Starlight

https://starlight.astro.build/ja/

sidebar に category tree を作る予定。