From 6c4c50ea59021da25fa2888e616456a0d59fc956 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Wed, 21 Jun 2023 22:52:44 +0900
Subject: [PATCH] feat: add blog title and description

---
 .../docusaurus-playground/docusaurus.config.js  |  2 ++
 .../src/client/theme/BlogPostItems/index.tsx    | 16 ++++++++++++++++
 .../theme/BlogPostItems/styles.module.scss      | 17 +++++++++++++++++
 3 files changed, 35 insertions(+)
 create mode 100644 packages/logos-docusaurus-theme/src/client/theme/BlogPostItems/styles.module.scss

diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js
index e2e0fcb..8ed3f61 100644
--- a/packages/docusaurus-playground/docusaurus.config.js
+++ b/packages/docusaurus-playground/docusaurus.config.js
@@ -63,6 +63,8 @@ const config = {
         routeBasePath: '/rlog',
         path: 'rlog',
         blogTitle: 'Rlog - Vac Research Log',
+        blogDescription:
+          'Vac builds public good protocols for the decentralized web.',
         blogSidebarCount: 0,
         authorsMapPath: 'authors.yml',
       }),
diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItems/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItems/index.tsx
index 9d91dad..d392f2d 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItems/index.tsx
+++ b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItems/index.tsx
@@ -1,12 +1,28 @@
 import React from 'react'
 import { BlogPostProvider } from '@docusaurus/theme-common/internal'
 import BlogPostItem from '@theme/BlogPostItem'
+import { Typography } from '@acid-info/lsd-react'
+import clsx from 'clsx'
+import styles from './styles.module.scss'
+import { useBlogPluginData } from '../../lib/useBlogPluginData'
+
 export default function BlogPostItems({
   items,
   component: BlogPostItemComponent = BlogPostItem,
 }) {
+  const plugin = useBlogPluginData()
+
   return (
     <>
+      <div className={clsx(styles.header)}>
+        {plugin?.blogTitle && (
+          <Typography variant="h3">{plugin.blogTitle}</Typography>
+        )}
+        {plugin?.blogDescription && (
+          <Typography variant="body2">{plugin.blogDescription}</Typography>
+        )}
+      </div>
+
       {items.map(({ content: BlogPostContent }) => (
         <BlogPostProvider
           key={BlogPostContent.metadata.permalink}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItems/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItems/styles.module.scss
new file mode 100644
index 0000000..7f49d4b
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItems/styles.module.scss
@@ -0,0 +1,17 @@
+@use '../../css/utils';
+@use '../../css/lsd';
+
+.header {
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  gap: 8px;
+
+  width: 100%;
+  max-width: var(--container-max-width);
+
+  padding-top: 16px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgb(var(--lsd-border-primary));
+  margin-bottom: 40px;
+}