til/src/theme/BlogListPage/index.js

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';
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}>
      <h1>Posts</h1>
      <p>( 22/11/28 ) I'm using these posts to make chronological thoughts, ideas, opinions and 'today I learned(s)' for  items that don't necessarily need to reference at a later point like my <a href="https://davidawindham.com/til/docs">docs</a>, <a href="https://davidawindham.com/til/lists">lists</a>, and <a href="https://davidawindham.com/til/notes">notes</a>. And because it's faster than writing posts for my <a href="https://davidawindham.com/desk">desk page</a>, I tend to use it more often for jotting down quick posts or drafting longer posts that'll end up on my <a href="https://davidawindham.com/desk">desk</a>.</p>
      <hr/>
      <br/>
      <BlogPostItems items={items} />
      <BlogListPaginator metadata={metadata} />
    </BlogLayout>
  );
}
export default function BlogListPage(props) {
  return (
    <HtmlClassNameProvider
      className={clsx(
        ThemeClassNames.wrapper.blogPages,
        ThemeClassNames.page.blogListPage,
      )}>
      <BlogListPageMetadata {...props} />
      <BlogListPageContent {...props} />
    </HtmlClassNameProvider>
  );
}