Zenn
Open3

Astroの知見をまとめる

Prettier
Astro
Starlight
MonoMono
npm create astro@latest

Astroをインストールした際に、自動作成されたコンポーネントはタブのインデントが結構深いので、個人的にはもう少し浅くしたい

Prettierをインストールしてスクリプトを実行したが、*.astroファイルのみにだけ適応されない

$ npm run format

> proper-parallax@0.0.1 format
> prettier --write "src/**/*.{js,jsx,ts,tsx,scss,astro}"

[error] No parser could be inferred for file ".../src/components/BaseHead.astro".
[error] No parser could be inferred for file ".../components/Footer.astro".
[error] No parser could be inferred for file ".../src/components/FormattedDate.astro".
[error] No parser could be inferred for file ".../src/components/Header.astro".
[error] No parser could be inferred for file ".../src/components/HeaderLink.astro".
src/consts.ts 242ms (unchanged)
src/content/config.ts 16ms (unchanged)
src/env.d.ts 3ms (unchanged)
：
[error] No files matching the pattern were found: "astro".

Astroは日本語ドキュメントがあり、「エディタのセットアップ」を確認してみるとastro用のプラグインがあるのでインストールして.prettierrcに追加してみる

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "plugins": ["prettier-plugin-astro"],
  "overrides": [
  {
    "files": "*.astro",
    "options": {
      "parser": "astro"
      }
    }
  ]
}

できた 🎉

$ npm run format

> proper-parallax@0.0.1 format
> prettier --write "src/**/*.{js,jsx,ts,tsx,scss,astro}"

src/components/BaseHead.astro 310ms
src/components/Footer.astro 114ms
src/components/FormattedDate.astro 11ms
src/components/Header.astro 68ms
src/components/HeaderLink.astro 14ms
：
MonoMono

Starlightを用いたドキュメント作成する際のポイント

AstroのフレームワークであるStarlightを使用する際に最初に詰まったポイント

Cannot read properties of undefined (reading 'schema') エラー

結論

src/content/config.tsファイルにてStarlight用のschemaを定義する

config.ts
import { defineCollection, z } from 'astro:content';
import { docsSchema } from "@astrojs/starlight/schema";

// 下記はAstro生成時に定義した内容
const astroBlog = defineCollection({
  type: 'content',
  ...
});

// 今回追加した内容 🚀
const docs = defineCollection({
  type: 'content',
  schema: docsSchema()
});

export const collections = { 'blog': astroBlog, 'docs': docs };

経緯

Starlightのドキュメント通りにインストールを行い、src/pages配下にindex.astroファイルを作成した

index.astro
---
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
---

<StarlightPage frontmatter={{ title: '私のカスタムページ' }}>
  <p>これはカスタムコンポーネントを用いたカスタムページです</p>
</StarlightPage>

すると、下記のエラーが出力された

11:58:43 [ERROR] Cannot read properties of undefined (reading 'schema')
  Stack trace:
    at getUserDocsSchema ({ユーザーディレクトリ}node_modules\@astrojs\starlight\utils\starlight-page.ts:213:26)
    [...] See full stack trace in the browser, or rerun with --verbose.

補足

深くまで調査できていないが、Starlightカスタムコンポーネントを利用する際は、docs用のschemaが必要らしい

Starlightはもともとsrc/content/docsファイル内のmd/mdxファイルをページとしてサポートするのがデフォルトなので、それが理由かもしれない

MonoMono

AstroでStarlightコンポーネントを使用する

Starlightを用いて表示するページで、Astroコンポーネントを利用する場合

components\pages\docs\index.astro
---
import { Aside } from '@astrojs/starlight/components';
---
<Aside type="danger">パスワードは誰にも教えないでください。</Aside>

というAstroコンポーネントを

pages\docs\index.astro
---
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';

import TestComponent from '@/components/pages/note/index.astro';
---

<StarlightPage frontmatter={{ title: 'はじめに' }}>
  <p>これはカスタムコンポーネントを用いたカスタムページです:</p>
  <TestComponent />
</StarlightPage>

のようにして利用できる