サイドにタグ検索メニューを配置

(2024-04-09)

サイドにタグ検索メニューがあると便利です。

BaseLayout.astro を書き換え

BaseLayout.astro はデフォルトでは存在しませんが、Astro のチュートリアルを実行するとその過程で作成することになります。

これがすべてのページの文字通り元になるレイアウトです。

それを以下のように書き換えました。

src/layouts/Baselayout.astro
---
import Header from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '@fontsource/noto-sans-jp';
import '../styles/global.css';
const allPosts = await Astro.glob('../pages/posts/*/*.{md,mdx}');
const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
const { pageTitle } = Astro.props;
---
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
    <style>
    </style>
  </head>
  <body>
    <div class="border border-slate-300 drop-shadow-lg">
      <Header />
      <div class="flex flex-row">
        <div class="contents-wrapper">
          <h1 class="mx-3">{pageTitle}</h1>
          <div class="mx-5">
            <slot />
          </div>
        </div>
        <!-- サイドメニュー -->
        <div class="side-menu">
          <h3>タグ検索</h3>
          <div class="flex flex-wrap">
            {tags.map((tag) => (
              <p class="m-1 border border-zinc-400 bg-indigo-50 px-2 hover:bg-indigo-200 rounded text-sm"><a href={`/tags/${tag}`}>{tag}</a></p>
            ))}
          </div>
        </div>
      </div>
      <Footer />
    </div>
  </body>
</html>

global.css の編集

global.css も以下のように書き換えました。

.contents-wrapper {
  flex: 1;
  width: 100ch;
  background: white;
  padding: 0.5em;
}
.side-menu {
  width: 20ch; /* サイドメニューの幅を設定 */
  background-color: #f4f4f4; /* サイドメニューの背景色を設定 */
  padding: 10px; /* サイドメニューの内側の余白を設定 */
  margin-left: 10px;
}

できれば上の２つも tailwind で書きたかったのですが、width が難しいのでそのまま global.css に設定しました。

うまくいったと思ったのですが、リンクで表示したページに global.css が適応されません。一旦撤退です。