refactor: wrap BlogListPage and BlogPostItemHeaderTitle

packages/logos-docusaurus-theme/src/client/css/blog.scss

@@ -61,6 +61,10 @@
   }
 }
 
+.blog-wrapper--index h2[itemprop='headline'] {
+  @include lsd.typography('h6');
+}
+
 .blog-wrapper > .container > .row > main {
   margin-top: 16px;
   max-width: unset;
@@ -150,10 +154,6 @@
       }
     }
   }
-
-  .blog-post-title {
-    @include lsd.typography('h3');
-  }
 }
 
 .blog-archive-page {

packages/logos-docusaurus-theme/src/client/theme/BlogListPage/index.tsx

@@ -1,57 +1,8 @@
+import BlogListPage from '@docusaurus/theme-classic/lib/theme/BlogListPage'
 import React from 'react'
-import clsx from 'clsx'
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
-import {
-  PageMetadata,
-  HtmlClassNameProvider,
-  ThemeClassNames,
-} from '@docusaurus/theme-common'
-import BlogLayout from '@theme/BlogLayout'
-import BlogListPaginator from '@theme/BlogListPaginator'
-import SearchMetadata from '@theme/SearchMetadata'
-import BlogPostItems from '@theme/BlogPostItems'
 import { BlogPageContext } from '../BlogLayout/BlogPage.context'
 
-function BlogListPageMetadata(props) {
-  const { metadata } = props
-  const {
-    siteConfig: { title: siteTitle },
-  } = useDocusaurusContext()
-  const { blogDescription, blogTitle, permalink } = metadata
-  const isBlogOnlyMode = permalink === '/'
-  const title = isBlogOnlyMode ? siteTitle : blogTitle
-  return (
-    <>
-      <PageMetadata title={title} description={blogDescription} />
-      <SearchMetadata tag="blog_posts_list" />
-    </>
-  )
-}
-function BlogListPageContent(props) {
-  const { metadata, items, sidebar } = props
-  return (
-    <BlogLayout sidebar={sidebar}>
-      <BlogPostItems items={items} />
-      <BlogListPaginator metadata={metadata} />
-    </BlogLayout>
-  )
-}
-
-export function BlogListPage(props) {
-  return (
-    <HtmlClassNameProvider
-      className={clsx(
-        ThemeClassNames.wrapper.blogPages,
-        ThemeClassNames.page.blogListPage,
-      )}
-    >
-      <BlogListPageMetadata {...props} />
-      <BlogListPageContent {...props} />
-    </HtmlClassNameProvider>
-  )
-}
-
-export default function BlogListPageWrapper(props): JSX.Element {
+export default function BlogListPageWrapper(props) {
   return (
     <BlogPageContext.Provider value={{ type: 'list', props }}>
       <BlogListPage {...props} />

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

@@ -1,25 +1,10 @@
 import React from 'react'
-import clsx from 'clsx'
-import Link from '@docusaurus/Link'
-import { useBlogPost } from '@docusaurus/theme-common/internal'
-
-export default function BlogPostItemHeaderTitle({ className }) {
-  const { metadata, isBlogPostPage } = useBlogPost()
-  const { permalink, title } = metadata
-  const TitleHeading = isBlogPostPage ? 'h1' : 'h6'
+import Title from '@docusaurus/theme-classic/lib/theme/BlogPostItem/Header/Title'
 
+export default function TitleWrapper(props) {
   return (
-    <TitleHeading
-      className={clsx(isBlogPostPage && 'blog-post-title', className)}
-      itemProp="headline"
-    >
-      {isBlogPostPage ? (
-        title
-      ) : (
-        <Link itemProp="url" to={permalink}>
-          {title}
-        </Link>
-      )}
-    </TitleHeading>
+    <>
+      <Title {...props} />
+    </>
   )
 }