refactor: refactor BlogLayout

packages/logos-docusaurus-theme/src/client/theme/BlogLayout/BlogPage.context.tsx

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react'
+
+export type BlogPageContextType = {
+  type?: 'list' | 'page'
+  blogTitle?: string
+  blogDescription?: string
+}
+
+export const BlogPage = React.createContext<BlogPageContextType>({
+  type: 'list',
+  blogTitle: '',
+  blogDescription: '',
+})
+
+export const useBlogPage = () => useContext(BlogPage)

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

@@ -1,10 +1,14 @@
 import clsx from 'clsx'
 import React from 'react'
-
-import BlogLayout from '@docusaurus/theme-classic/lib/theme/BlogLayout'
 import { Props } from '@theme/BlogLayout'
 import { ensureTrailingSlash } from '../../lib/string.utils'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import { useBlogPluginData } from '@logos-theme/lib/useBlogPluginData'
+
+import { Typography } from '@acid-info/lsd-react'
+import styles from './styles.module.scss'
+import Layout from '@theme/Layout'
+import BlogSidebar from '@theme/BlogSidebar'
 
 const useIsIndexPage = (props: Props) => {
   if (typeof window === 'undefined') return false
@@ -27,14 +31,52 @@ const useIsIndexPage = (props: Props) => {
 export default function BlogLayoutWrapper(props: Props): JSX.Element {
   const { sidebar, toc, children, ...layoutProps } = props
   const isIndexPage = useIsIndexPage(props)
+  const hasSidebar = sidebar && sidebar.items.length > 0
+
+  const plugin = useBlogPluginData()
 
   return (
-    <BlogLayout
-      {...props}
+    <Layout
+      {...layoutProps}
       wrapperClassName={clsx(
         'blog-wrapper',
         isIndexPage && 'blog-wrapper--index',
       )}
-    />
+    >
+      {isIndexPage && (
+        <div className={clsx(styles.blogHeader)}>
+          {plugin?.blogTitle && (
+            <Typography variant="h3" className={clsx(styles.blogTitle)}>
+              {plugin.blogTitle}
+            </Typography>
+          )}
+          {plugin?.blogDescription && (
+            <Typography
+              variant="body2"
+              className={clsx(styles.blogDescription)}
+            >
+              {plugin.blogDescription}
+            </Typography>
+          )}
+        </div>
+      )}
+
+      <div className="container margin-vert--lg">
+        <div className="row">
+          <BlogSidebar sidebar={sidebar} />
+          <main
+            className={clsx('col', {
+              'col--7': hasSidebar,
+              'col--9 col--offset-1': !hasSidebar,
+            })}
+            itemScope
+            itemType="http://schema.org/Blog"
+          >
+            {children}
+          </main>
+          {toc && <div className="col col--2">{toc}</div>}
+        </div>
+      </div>
+    </Layout>
   )
 }

packages/logos-docusaurus-theme/src/client/theme/BlogLayout/styles.module.scss

@@ -1,7 +1,7 @@
 @use '../../css/utils';
 @use '../../css/lsd';
 
-.header {
+.blogHeader {
   display: flex;
   flex-direction: column;
   left: 0;
@@ -15,3 +15,11 @@
   border-bottom: 1px solid rgb(var(--lsd-border-primary));
   margin-bottom: 40px;
 }
+
+.blogTitle {
+  grid-column: span 24;
+}
+
+.blogDescription {
+  grid-column: span 24;
+}

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

@@ -1,28 +1,13 @@
 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}