feat: 시리즈 컴포넌트

yongsk0066 · Jun 11, 2024 · 1ba40e9 · 1ba40e9
1 parent b0187f0
commit 1ba40e9
Show file tree

Hide file tree

Showing 4 changed files with 509 additions and 222 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.7.0",
-    "@astrojs/lit": "^4.0.1",
-    "@astrojs/mdx": "^3.0.1",
-    "@astrojs/react": "^3.4.0",
+    "@astrojs/lit": "4.2.0",
+    "@astrojs/mdx": "3.1.0",
+    "@astrojs/react": "3.5.0",
     "@astrojs/rss": "^4.0.6",
     "@astrojs/sitemap": "^3.1.5",
     "@astrojs/tailwind": "^5.1.0",
@@ -27,7 +27,7 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@webcomponents/template-shadowroot": "^0.2.1",
-    "astro": "^4.9.2",
+    "astro": "4.10.2",
     "clsx": "^2.1.1",
     "fs-extra": "^11.1.1",
     "jsdom": "^24.0.0",

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -20,9 +20,13 @@ type Props = CollectionEntry<"blog">;
 
 const post = Astro.props;
 
-// const seriesPosts = (await getCollection("blog"))
-//   .filter((_post) => _post.data.series === post.data.series)
-//   .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
+const seriesPosts = (
+  await getCollection("blog", ({ id }) => {
+    return !id.startsWith("en/");
+  })
+)
+  .filter((_post) => _post.data.series === post.data.series)
+  .sort((a, b) => a.data.date.valueOf() - b.data.date.valueOf());
 
 const { Content } = await post.render();
 ---
@@ -37,21 +41,7 @@ const { Content } = await post.render();
       <BackToPrev href="/blog"> 돌아가기 </BackToPrev>
     </div>
     <!-- series -->
-    <!-- <div class="animate flex items-center gap-1.5" >
-      <div class="font-base text-sm">
-        {post.data.series}
-      </div>
-      &bull;
-      <div>
-        <ul>
-          {
-            seriesPosts.map((seriesPost) => {
-              return seriesPost.slug;
-            })
-          }
-        </ul>
-      </div>
-    </div> -->
+    <div class="animate flex items-center gap-1.5"></div>
     <div class="space-y-1 my-10">
       <div class="animate flex items-center gap-1.5">
         <div class="font-base text-sm">
@@ -65,10 +55,50 @@ const { Content } = await post.render();
       <div class="animate text-3xl font-bold text-black dark:text-white">
         {post.data.title}
       </div>
+      {
+        seriesPosts.length > 1 && (
+          <div class="animate text-zinc-500">
+            <div class="text-base mt-8 text-zinc-600 text-bold">
+              [ {post.data.series} ] 시리즈
+            </div>
+            <ul class="flex flex-col gap-y-2.5 my-3 border-l-2 border-zinc-300">
+              {seriesPosts.map((seriesPost) => {
+                const link = `/${seriesPost.collection}/${seriesPost.slug}`;
+                return (
+                  <li class="text-sm indent-2 underline hover:text-zinc-800">
+                    <a href={link} rel="noopener noreferrer" target="_blank">
+                      {seriesPost.data.title}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        )
+      }
     </div>
     <article class="animate break-all hyphens-auto">
       <Content />
     </article>
+    {
+      seriesPosts.length > 1 && (
+        <div class="animate text-zinc-500">
+          <div class="text-base mt-8 text-zinc-600 text-bold">
+            [ {post.data.series} ] 시리즈 더보기
+          </div>
+          <ul class="flex flex-col gap-y-2.5 my-3 border-l-2 border-zinc-300">
+            {seriesPosts.map((seriesPost) => {
+              const link = `/${seriesPost.collection}/${seriesPost.slug}`;
+              return (
+                <li class="text-sm indent-2 underline hover:text-zinc-800">
+                  <a href={link}>{seriesPost.data.title}</a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )
+    }
     <Comments />
   </Container>
 </PageLayout>