docs: copy BlogTagsPostsPage from Docusaurus

* We want the ability to modify the default blog theme with a custom
  BlogTagsPostsPage
* This copies the source into our repo and replaces the page in the
  build.
* Update the title header to just be a capitalized tag

apps/docs/docusaurus.config.ts

@@ -51,6 +51,7 @@ const config: Config = {
             "https://github.com/opensource-observer/oso/tree/main/apps/docs/",
           blogSidebarTitle: "All posts",
           blogSidebarCount: "ALL",
+          blogTagsPostsComponent: "@site/src/components/BlogTagsPostsPage.tsx",
         },
         theme: {
           customCss: "./src/css/custom.css",

apps/docs/package.json

@@ -29,6 +29,7 @@
     "@mdx-js/react": "^3.0.1",
     "@plasmicapp/react-web": "^0.2.350",
     "clsx": "^2.1.1",
+    "lodash": "^4.17.21",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

apps/docs/src/components/BlogTagsPostsPage.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import clsx from "clsx";
+import _ from "lodash";
+import Translate from "@docusaurus/Translate";
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from "@docusaurus/theme-common";
+import Link from "@docusaurus/Link";
+import BlogLayout from "@theme/BlogLayout";
+import BlogListPaginator from "@theme/BlogListPaginator";
+import SearchMetadata from "@theme/SearchMetadata";
+import type { Props } from "@theme/BlogTagsPostsPage";
+import BlogPostItems from "@theme/BlogPostItems";
+import Heading from "@theme/Heading";
+
+function BlogTagsPostsPageMetadata({ tag }: Props): JSX.Element {
+  const title = _.capitalize(tag.label);
+  console.log(tag);
+  return (
+    <>
+      <PageMetadata title={title} description={tag.description} />
+      <SearchMetadata tag="blog_tags_posts" />
+    </>
+  );
+}
+
+function BlogTagsPostsPageContent({
+  tag,
+  items,
+  sidebar,
+  listMetadata,
+}: Props): JSX.Element {
+  const title = _.capitalize(tag.label);
+  return (
+    <BlogLayout sidebar={sidebar}>
+      <header className="margin-bottom--xl">
+        <Heading as="h1">{title}</Heading>
+        {tag.description && <p>{tag.description}</p>}
+        <Link href={tag.allTagsPath}>
+          <Translate
+            id="theme.tags.tagsPageLink"
+            description="The label of the link targeting the tag list page"
+          >
+            View All Tags
+          </Translate>
+        </Link>
+      </header>
+      <BlogPostItems items={items} />
+      <BlogListPaginator metadata={listMetadata} />
+    </BlogLayout>
+  );
+}
+export default function BlogTagsPostsPage(props: Props): JSX.Element {
+  return (
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogTagPostListPage,
+      )}
+    >
+      <BlogTagsPostsPageMetadata {...props} />
+      <BlogTagsPostsPageContent {...props} />
+    </HtmlClassNameProvider>
+  );
+}