From ab2cf6c094f77bb97f1775cc8c0642f70d57ef7a Mon Sep 17 00:00:00 2001
From: Raymond Cheng <me@raymondcheng.net>
Date: Tue, 3 Sep 2024 14:53:19 -0700
Subject: [PATCH] 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                |  1 +
 apps/docs/package.json                        |  1 +
 .../docs/src/components/BlogTagsPostsPage.tsx | 67 +++++++++++++++++++
 pnpm-lock.yaml                                |  3 +
 4 files changed, 72 insertions(+)
 create mode 100644 apps/docs/src/components/BlogTagsPostsPage.tsx

diff --git a/apps/docs/docusaurus.config.ts b/apps/docs/docusaurus.config.ts
index 0d6d36a2c..89341ec21 100644
--- a/apps/docs/docusaurus.config.ts
+++ b/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",
diff --git a/apps/docs/package.json b/apps/docs/package.json
index e2031c81c..20de58de5 100644
--- a/apps/docs/package.json
+++ b/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"
diff --git a/apps/docs/src/components/BlogTagsPostsPage.tsx b/apps/docs/src/components/BlogTagsPostsPage.tsx
new file mode 100644
index 000000000..6ff80599f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3a268066e..66213e636 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -51,6 +51,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
       prism-react-renderer:
         specifier: ^2.3.1
         version: 2.3.1(react@18.3.1)