Container API: render components in isolation · Issue #533 · withastro/roadmap

Body Accepted Date: 23/03/23 Reference Issues/Discussions: #462 Author: @natemoo-re Implementation PR: No PR yet. See the feat/container branch for an exploration of implementation. Summary Astro c...

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

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

⛔ storybook

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

Support for Astro components · Issue #18356 · storybookjs/storybook

Is your feature request related to a problem? Please describe Astro is a new framework focusing on mostly static sites. It has its own template syntax, very much like jsx. Describe the solution you...

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

• https://github.com/withastro/roadmap/issues/533
• 進行中ぽい。

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

StoryblokとAstro

StoryblokをCMSとして使ってコンテンツをAstroプロジェクトへ追加する

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

Astro Icon

Astro Icon simplifies working with icons in Astro

https://www.astroicon.dev/

astro-iconで手軽にいい感じのアイコンを使わせてもらおう - アルパカログ

Astroでアイコンを簡単に導入できるライブラリastro-iconを紹介します。

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

GFM

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

✅ 外部リンクのマーカー

Add icons to external links | Docs

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

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

✅🚧 linkcard

Astroでremark-link-cardをつかってリンクをカード形式で表示する

Astroでmarkdownで書いた記事をtailwindcss/typographyで表示する際にリンクをカード形式にする

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

Configuring 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

Starlight 🌟 Astroでドキュメントサイトを作る

Starlightは、Astroを使った美しく高性能なドキュメントサイトの構築を支援します。

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

sidebar に category tree を作る予定。