show descriptions for blog items

yuheiy · Mar 23, 2024 · 25c2e59 · 25c2e59
1 parent 9f89422
commit 25c2e59
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 37 deletions.
diff --git a/src/components/DetailsList.astro b/src/components/DetailsList.astro
@@ -8,20 +8,26 @@ export interface DetailsListItem {
 
 interface Props {
   items: DetailsListItem[];
+  clampDescription?: boolean | undefined;
 }
 
-const { items } = Astro.props;
+const { items, clampDescription } = Astro.props;
 ---
 
-<ol class="space-y-10">
+<ol class="space-y-12">
   {
     items.map((item) => (
-      <li class="space-y-[0.125rem]">
-        {item.meta && <p class="text-sm text-dynamic-muted" set:html={item.meta} />}
+      <li>
+        {item.meta && <p class="mb-1 text-sm text-dynamic-muted" set:html={item.meta} />}
         <p>
           <a href={item.link} set:html={item.title} />
         </p>
-        {item.description && <p class="text-sm text-dynamic-muted" set:html={item.description} />}
+        {item.description && (
+          <p
+            class:list={['mt-2 text-sm text-dynamic-muted', clampDescription && 'line-clamp-3']}
+            set:html={item.description}
+          />
+        )}
       </li>
     ))
   }

diff --git a/src/lib/get-blog-description.ts b/src/lib/get-blog-description.ts
@@ -0,0 +1,15 @@
+import type { CollectionEntry } from 'astro:content';
+import { invariant } from 'outvariant';
+
+export async function getBlogDescription(entry: CollectionEntry<'blog'>) {
+  const {
+    remarkPluginFrontmatter: { description },
+  } = await entry.render();
+
+  invariant(
+    typeof description === 'string' || typeof description === 'undefined',
+    'Invariant failed',
+  );
+
+  return description;
+}
diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro
@@ -1,8 +1,8 @@
 ---
 import { getCollection } from 'astro:content';
-import { invariant } from 'outvariant';
 import PageHeader from '../components/PageHeader.astro';
 import Layout from '../layouts/Layout.astro';
+import { getBlogDescription } from '../lib/get-blog-description';
 import { renderDateToHtml } from '../lib/render-date-to-html';
 
 export async function getStaticPaths() {
@@ -15,18 +15,13 @@ export async function getStaticPaths() {
 type Props = Awaited<ReturnType<typeof getStaticPaths>>[number]['props'];
 
 const { entry } = Astro.props;
-const { Content, remarkPluginFrontmatter } = await entry.render();
-
-invariant(
-  typeof remarkPluginFrontmatter.description === 'string' ||
-    typeof remarkPluginFrontmatter.description === 'undefined',
-  'Invariant failed',
-);
+const description = await getBlogDescription(entry);
+const { Content } = await entry.render();
 ---
 
 <Layout
   title={entry.data.title}
-  description={remarkPluginFrontmatter.description}
+  description={description}
   ogImage={entry.data.ogImage?.src}
   ogType="article"
   twitterCard={entry.data.twitterCard}

diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -3,25 +3,32 @@ import { getCollection } from 'astro:content';
 import DetailsList from '../components/DetailsList.astro';
 import PageHeader from '../components/PageHeader.astro';
 import Layout from '../layouts/Layout.astro';
+import { getBlogDescription } from '../lib/get-blog-description';
 import { renderDateToHtml } from '../lib/render-date-to-html';
 
 const title = 'ブログ';
 
 const blogEntries = (await getCollection('blog'))
   .toSorted((a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf())
   .toReversed();
+
+const allBlogItems = await Promise.all(
+  blogEntries.map(async (entry) => {
+    const description = await getBlogDescription(entry);
+    return {
+      title: entry.data.title,
+      link: `/${entry.slug}`,
+      meta: renderDateToHtml(entry.data.pubDate),
+      description,
+    };
+  }),
+);
 ---
 
 <Layout title={title}>
   <PageHeader title={title} />
 
   <main class="wrapper">
-    <DetailsList
-      items={blogEntries.map((entry) => ({
-        title: entry.data.title,
-        link: `/${entry.slug}`,
-        meta: renderDateToHtml(entry.data.pubDate),
-      }))}
-    />
+    <DetailsList items={allBlogItems} clampDescription />
   </main>
 </Layout>
diff --git a/src/pages/feed.ts b/src/pages/feed.ts
@@ -3,6 +3,7 @@ import type { APIContext } from 'astro';
 import { getCollection } from 'astro:content';
 import { invariant } from 'outvariant';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+import { getBlogDescription } from '../lib/get-blog-description';
 
 export async function GET(context: APIContext) {
   const blogEntries = (await getCollection('blog'))
@@ -17,19 +18,12 @@ export async function GET(context: APIContext) {
     site: context.site,
     items: await Promise.all(
       blogEntries.map(async (entry) => {
-        const { remarkPluginFrontmatter } = await entry.render();
-
-        invariant(
-          typeof remarkPluginFrontmatter.description === 'string' ||
-            typeof remarkPluginFrontmatter.description === 'undefined',
-          'Invariant failed',
-        );
-
+        const description = await getBlogDescription(entry);
         return {
           link: `/${entry.slug}`,
           title: entry.data.title,
           pubDate: entry.data.pubDate,
-          description: remarkPluginFrontmatter.description,
+          description,
         };
       }),
     ),

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,6 +6,7 @@ import type { DetailsListItem } from '../components/DetailsList.astro';
 import PageHeader from '../components/PageHeader.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 import Layout from '../layouts/Layout.astro';
+import { getBlogDescription } from '../lib/get-blog-description';
 import { renderDateToHtml } from '../lib/render-date-to-html';
 import { renderYearMonthRangeToHtml } from '../lib/render-year-month-range-to-html';
 
@@ -113,6 +114,18 @@ const projectItems = [
 const blogEntries = (await getCollection('blog'))
   .toSorted((a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf())
   .toReversed();
+
+const latestBlogItems = await Promise.all(
+  blogEntries.slice(0, 3).map(async (entry) => {
+    const description = await getBlogDescription(entry);
+    return {
+      title: entry.data.title,
+      link: `/${entry.slug}`,
+      meta: renderDateToHtml(entry.data.pubDate),
+      description,
+    };
+  }),
+);
 ---
 
 <Layout isHome description={SITE_DESCRIPTION}>
@@ -160,13 +173,7 @@ const blogEntries = (await getCollection('blog'))
         最近のブログ
       </h2>
 
-      <DetailsList
-        items={blogEntries.slice(0, 3).map((entry) => ({
-          title: entry.data.title,
-          link: `/${entry.slug}`,
-          meta: renderDateToHtml(entry.data.pubDate),
-        }))}
-      />
+      <DetailsList items={latestBlogItems} clampDescription />
     </section>
   </main>
 </Layout>