feat: add blog title and description

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',
       }),

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}

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;
+}