refactor: add subtitle component

packages/docusaurus-playground/rlog/2019-07-19-p2p-data-sync-for-mobile.mdx

@@ -1,6 +1,7 @@
 ---
 title: Design better data tables
-description: A research log. Reliable and decentralized, pick two.
+subtitle: A research log. Reliable and decentralized, pick two.
+descrption: Description Test
 date: 2023-04-24 12:00:00
 authors:
   - name: amir
@@ -15,6 +16,8 @@ toc_min_heading_level: 2
 toc_max_heading_level: 5
 ---
 
+Summary Test
+
 <!--truncate-->
 
 Together with decanus, I've been working on the problem of data sync lately.

packages/docusaurus-playground/rlog/2019-08-02-vac-overview.mdx

@@ -10,10 +10,10 @@ categories: research
 tags: ['Something']
 ---
 
-<!--truncate-->
-
 Vac is a **modular peer-to-peer messaging stack, with a focus on secure messaging**. What does that mean? Let's unpack it a bit.
 
+<!--truncate-->
+
 ## Basic terms
 
 _messaging stack_. While the initial focus is on [data sync](https://vac.dev/p2p-data-sync-for-mobile), we are concerned with all layers in the stack. That means all the way from underlying transports, p2p overlays and routing, to initial trust establishment and semantics for things like group chat. The ultimate goal is to give application developers the tools they need to provide secure messaging for their users, so they can focus on their domain expertise.

packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Info/styles.module.scss

@@ -9,6 +9,7 @@
 
 .blogContainer {
   margin-top: 8px !important;
+  margin-bottom: 16px !important;
 }
 
 .container > div {

packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Subtitle/index.tsx

@@ -0,0 +1,16 @@
+import { Typography } from '@acid-info/lsd-react'
+import clsx from 'clsx'
+import React from 'react'
+import styles from './styles.module.scss'
+
+type SubtitleProps = {
+  content: string
+}
+
+export const Subtitle = ({ content }: SubtitleProps): JSX.Element => {
+  return (
+    <Typography variant="h6" className={clsx(styles.blogPostSubtitle)}>
+      {content}
+    </Typography>
+  )
+}

packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Subtitle/styles.module.scss

@@ -0,0 +1,13 @@
+@use '../../../../css/utils';
+@use '../../../../css/lsd';
+
+.blogPostSubtitle {
+  margin-top: 12px;
+}
+
+@include utils.responsive('lg', 'down') {
+  .blogPostSubtitle {
+    margin-top: 4px;
+    @include lsd.typography('body1');
+  }
+}

packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/styles.module.scss

@@ -1,22 +1,8 @@
 @use '../../../../css/utils';
 @use '../../../../css/lsd';
 
-.blogDescription {
-  margin-top: 16px;
-  @include lsd.typography('body2');
-}
-
-.blogPostDescription {
-  margin-top: 12px;
-}
-
 @include utils.responsive('lg', 'down') {
   .blogPostTitle {
     @include lsd.typography('h3');
   }
-
-  .blogPostDescription {
-    margin-top: 4px;
-    @include lsd.typography('body1');
-  }
 }

packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/index.tsx

@@ -8,6 +8,7 @@ import { BreadcrumbsBase } from '../../DocBreadcrumbs/index'
 import { Typography } from '@acid-info/lsd-react'
 import styles from './Title/styles.module.scss'
 import clsx from 'clsx'
+import { Subtitle } from './Subtitle'
 
 export default function BlogPostItemHeader(): JSX.Element {
   const {
@@ -19,17 +20,6 @@ export default function BlogPostItemHeader(): JSX.Element {
   const plugin = useBlogPluginData()
   const routeBasePath = plugin.routeBasePath ?? '/blog'
 
-  const _description = (
-    <Typography
-      variant="h6"
-      className={clsx(
-        isBlogPostPage ? styles.blogPostDescription : styles.blogDescription,
-      )}
-    >
-      {frontMatter.description}
-    </Typography>
-  )
-
   return (
     <header>
       {isBlogPostPage && (
@@ -49,9 +39,10 @@ export default function BlogPostItemHeader(): JSX.Element {
         />
       )}
       <BlogPostItemHeaderTitle />
-      {frontMatter?.description && isBlogPostPage && _description}
+      {(frontMatter?.subtitle as string) && isBlogPostPage && (
+        <Subtitle content={frontMatter?.subtitle as string} />
+      )}
       <BlogPostItemHeaderInfo />
-      {frontMatter?.description && !isBlogPostPage && _description}
       {isBlogPostPage && <hr className="blog-divider" />}
     </header>
   )