kouno.log

    で移動 · Enter で開く

    このサイトのCLIターミナルをnpmパッケージとして公開しました

    このサイトのCLIターミナルをnpmパッケージとして公開しました

    トップページに設置している擬似CLIターミナルを、astro-site-shell としてnpmに公開しました。

    ##インストール

    npm install astro-site-shell

    ##概要

    Astroで作ったサイトのコンテンツを、CLIっぽいインターフェースで探索できるコンポーネントです。lscdcatgrep などのコマンドが使えます。

    コレクション(記事一覧)とページをpropsで渡すだけで動きます。

    ---
    import { CliTerminal } from 'astro-site-shell';
    import { getCollection } from 'astro:content';
    
    const posts = await getCollection('posts');
    ---
    
    <CliTerminal
      prompt="you@mysite"
      pages={[{ name: 'about', url: '/about', title: 'About' }]}
      collections={[
        {
          name: 'posts',
          entries: posts.map(p => ({
            name: p.id,
            url: `/posts/${p.id}`,
            title: p.data.title,
            pubDate: p.data.pubDate,
            body: p.body,
          })),
        },
      ]}
    />

    リポジトリは h-kono-it/astro-site-shell です。