タグ検索を追加

astro.config.ts

@@ -4,6 +4,7 @@ import tailwind from '@astrojs/tailwind'
 import sitemap from '@astrojs/sitemap'
 import mdx from '@astrojs/mdx'
 import remarkLinkCard from 'remark-link-card'
+import preact from '@astrojs/preact'
 
 const { SITE_URL } = loadEnv(process.env.NODE_ENV!, process.cwd(), '')
 
@@ -36,5 +37,5 @@ export default defineConfig({
   markdown: {
     remarkPlugins: [remarkLinkCard],
   },
-  integrations: [tailwind(), sitemap(), mdx()],
+  integrations: [tailwind(), sitemap(), mdx(), preact()],
 })

package.json

@@ -18,11 +18,13 @@
   "dependencies": {
     "@astrojs/check": "^0.3.1",
     "@astrojs/mdx": "^2.0.1",
+    "@astrojs/preact": "^3.0.1",
     "@astrojs/sitemap": "^3.0.3",
     "@astrojs/tailwind": "^5.0.3",
     "@tailwindcss/typography": "^0.5.10",
     "astro": "^4.0.4",
     "polished": "^4.2.2",
+    "preact": "^10.19.3",
     "remark-link-card": "^1.3.1",
     "satori": "^0.10.11",
     "sharp": "^0.33.0",

src/components/blog/BlogListSection.astro

@@ -1,17 +1,27 @@
 ---
 import type { CollectionEntry } from 'astro:content'
 import BlogList from './BlogList.astro'
-import Section from '../common/Section.astro'
+import Section from '@/components/common/Section.astro'
 
 interface Props {
-  title: string
+  title?: string
   blogs: CollectionEntry<'blogs'>[]
 }
 
 const { title, blogs } = Astro.props
 ---
 
-<Section background="secondary">
-  <Fragment slot="title">{title}</Fragment>
-  <BlogList blogs={blogs} />
-</Section>
+<Fragment>
+  {
+    title ? (
+      <Section background="secondary">
+        <Fragment slot="title">{title}</Fragment>
+        <BlogList blogs={blogs} />
+      </Section>
+    ) : (
+      <Section background="secondary">
+        <BlogList blogs={blogs} />
+      </Section>
+    )
+  }
+</Fragment>

src/components/blog/ListViewTab.astro

@@ -0,0 +1,48 @@
+---
+interface Props {
+  current: Item['path']
+}
+
+interface Item {
+  path: '/blog/' | '/blog/tags/'
+  text: string
+}
+
+const items: Item[] = [
+  {
+    path: '/blog/',
+    text: 'ブログ一覧',
+  },
+  {
+    path: '/blog/tags/',
+    text: 'タグ一覧',
+  },
+]
+
+const { current } = Astro.props
+---
+
+<div class="bg-dot bg-dot-white flex justify-center">
+  <div class="w-full max-w-padded-container">
+    <ul class="flex gap-2 px-8 pt-3">
+      {
+        items.map((item) => (
+          <li class:list={[]}>
+            <a
+              class:list={[
+                'whitespace-nowrap rounded-t-xl border-x-2 border-t-2 border-secondary px-2 py-1',
+                {
+                  'bg-white': item.path !== current,
+                  'bg-secondary': item.path === current,
+                },
+              ]}
+              href={item.path}
+            >
+              {item.text}
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+</div>

src/components/blog/author/AuthorAboutSection.astro

@@ -1,6 +1,6 @@
 ---
 import type { CollectionEntry } from 'astro:content'
-import Section from '../../common/Section.astro'
+import Section from '@/components/common/Section.astro'
 import InlineLink from '@/components/common/InlineLink.astro'
 
 interface Props {

src/components/blog/icon/TagIcon.preact.tsx

@@ -0,0 +1,20 @@
+import type { ClientTag } from '@/content/config'
+
+interface Props {
+  tag: Pick<ClientTag, 'name' | 'image' | 'fullSizeImage'>
+
+  size: number
+  fullSizeImage?: boolean
+}
+
+export default function TagIcon({ tag, size }: Props) {
+  return (
+    <img
+      src={tag.image}
+      alt={`${tag.name} のアイコン`}
+      class={`aspect-square ${tag.fullSizeImage ? 'rounded-full' : ''}`}
+      width={size}
+      height={size}
+    />
+  )
+}

src/components/blog/tag/TagAboutSection.astro

@@ -1,6 +1,6 @@
 ---
 import type { CollectionEntry } from 'astro:content'
-import Section from '../../common/Section.astro'
+import Section from '@/components/common/Section.astro'
 import InlineLink from '@/components/common/InlineLink.astro'
 
 interface Props {