Custom blog archive page

Author: CoodingPenguin

i18n/ko/code.json

@@ -80,11 +80,11 @@
     "description": "The ARIA label for the back to top button"
   },
   "theme.blog.archive.title": {
-    "message": "게시물 목록",
+    "message": "",
     "description": "The page & hero title of the blog archive page"
   },
   "theme.blog.archive.description": {
-    "message": "게시물 목록",
+    "message": "",
     "description": "The page & hero description of the blog archive page"
   },
   "theme.blog.paginator.navAriaLabel": {

src/theme/BlogArchivePage/index.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import {translate} from '@docusaurus/Translate';
+import {PageMetadata} from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+function Year({year, posts}) {
+  return (
+    <>
+      <h3>{year} ({posts.length})</h3>
+      <ul>
+        {posts.map((post) => (
+          <li key={post.metadata.date}>
+            <Link to={post.metadata.permalink}>
+              {post.metadata.formattedDate} - {post.metadata.title}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+function YearsSection({years}) {
+  return (
+    <section className="margin-vert--lg">
+      <div className="container">
+        <div className="row">
+          {years.map((_props, idx) => (
+            <div key={idx} className="col col--4 margin-vert--lg">
+              <Year {..._props} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+function listPostsByYears(blogPosts) {
+  const postsByYear = blogPosts.reduceRight((posts, post) => {
+    const year = post.metadata.date.split('-')[0];
+    const yearPosts = posts.get(year) ?? [];
+    return posts.set(year, [post, ...yearPosts]);
+  }, new Map());
+  return Array.from(postsByYear, ([year, posts]) => ({
+    year,
+    posts,
+  }));
+}
+export default function BlogArchive({archive}) {
+  const title = translate({
+    id: 'theme.blog.archive.title',
+    message: 'Archive',
+    description: 'The page & hero title of the blog archive page',
+  });
+  const description = translate({
+    id: 'theme.blog.archive.description',
+    message: 'Archive',
+    description: 'The page & hero description of the blog archive page',
+  });
+  const years = listPostsByYears(archive.blogPosts);
+  return (
+    <>
+      <PageMetadata title={title} description={description} />
+      <Layout>
+        <header
+            className="hero hero--primary"
+            style={{
+              background: "url('https://images.unsplash.com/photo-1571607073129-606b83b78f02?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')",
+              backgroundRepeat: "no-repeat",
+              backgroundPosition: "center",
+              width: "100%"
+            }}
+        >
+          <div className="container">
+            <h1 className="hero__title">{title}</h1>
+          </div>
+        </header>
+        <main>{years.length > 0 && <YearsSection years={years} />}</main>
+      </Layout>
+    </>
+  );
+}