Update Docusarus to Latest Version (#1574)

* update docs to latest 3.6.1 and fix comments to work

* fix imports

package.json

@@ -14,11 +14,12 @@
   },
   "dependencies": {
     "@algolia/client-search": "^4.22.1",
-    "@docusaurus/core": "3.1.1",
-    "@docusaurus/plugin-content-docs": "3.1.1",
-    "@docusaurus/preset-classic": "3.1.1",
-    "@docusaurus/theme-common": "3.1.1",
-    "@docusaurus/theme-mermaid": "3.1.1",
+    "@docusaurus/core": "3.6.1",
+    "@docusaurus/plugin-content-blog": "^3.6.1",
+    "@docusaurus/plugin-content-docs": "3.6.1",
+    "@docusaurus/preset-classic": "3.6.1",
+    "@docusaurus/theme-common": "3.6.1",
+    "@docusaurus/theme-mermaid": "3.6.1",
     "@giscus/react": "^3.0.0",
     "@heroicons/react": "^2.1.1",
     "@mdx-js/react": "^3.0.1",
@@ -41,7 +42,7 @@
   "devDependencies": {
     "@biomejs/biome": "^1.5.3",
     "@buf/meshtastic_protobufs.bufbuild_es": "2.0.0-20240906232734-3da561588c55.2",
-    "@docusaurus/module-type-aliases": "3.1.1",
+    "@docusaurus/module-type-aliases": "3.6.1",
     "@tailwindcss/typography": "^0.5.10",
     "@tsconfig/docusaurus": "^2.0.2",
     "@types/node": "^20.11.19",

src/components/Comments/index.tsx

@@ -0,0 +1,29 @@
+import { useColorMode } from "@docusaurus/theme-common";
+import Giscus from "@giscus/react";
+import React from "react";
+
+export default function Comments(): JSX.Element {
+  const { colorMode } = useColorMode();
+
+  return (
+    <div>
+      <Giscus
+        id="comments"
+        repo="meshtastic/discussions"
+        repoId="R_kgDONDs6gA"
+        category="Blog Post Comments"
+        categoryId="DIC_kwDONDs6gM4Cjy3h"
+        mapping="pathname"
+        strict="1"
+        reactionsEnabled="1"
+        emitMetadata="0"
+        inputPosition="top"
+        theme={colorMode}
+        lang="en"
+        loading="lazy"
+        crossorigin="anonymous"
+        async
+      />
+    </div>
+  );
+}

src/components/GiscusComponent/index.js

@@ -1,27 +0,0 @@
-import { useColorMode } from "@docusaurus/theme-common";
-import Giscus from "@giscus/react";
-import React from "react";
-
-export default function GiscusComponent() {
-  const { colorMode } = useColorMode();
-
-  return (
-    <Giscus
-      repo="meshtastic/discussions"
-      repoId="R_kgDONDs6gA"
-      category="Blog Post Comments"
-      categoryId="DIC_kwDONDs6gM4Cjy3h"
-      mapping="pathname"
-      term="specific-term" //If you didn't select "Discussion title contains a specific term", omit.
-      strict="1"
-      reactionsEnabled="1"
-      emitMetadata="0"
-      inputPosition="top"
-      theme={colorMode}
-      lang="en"
-      loading="lazy"
-      crossorigin="anonymous"
-      async
-    />
-  );
-}

src/theme/BlogPostItem/index.tsx

@@ -0,0 +1,20 @@
+import { useBlogPost } from "@docusaurus/plugin-content-blog/client";
+import type { WrapperProps } from "@docusaurus/types";
+import Comments from "@site/src/components/Comments";
+import BlogPostItem from "@theme-original/BlogPostItem";
+import type BlogPostItemType from "@theme/BlogPostItem";
+import React from "react";
+
+type Props = WrapperProps<typeof BlogPostItemType>;
+
+export default function BlogPostItemWrapper(props: Props): JSX.Element {
+  const { metadata, isBlogPostPage } = useBlogPost();
+  const { comments = true } = metadata.frontMatter;
+
+  return (
+    <>
+      <BlogPostItem {...props} />
+      {comments && isBlogPostPage && <Comments />}
+    </>
+  );
+}

src/theme/BlogPostPage/Metadata/index.js

@@ -1,37 +0,0 @@
-import { PageMetadata } from "@docusaurus/theme-common";
-import { useBlogPost } from "@docusaurus/theme-common/internal";
-import React from "react";
-
-export default function BlogPostPageMetadata() {
-  const { assets, metadata } = useBlogPost();
-  const { title, description, date, tags, authors, frontMatter } = metadata;
-  const { keywords } = frontMatter;
-  const image = assets.image ?? frontMatter.image;
-  return (
-    <PageMetadata
-      title={title}
-      description={description}
-      keywords={keywords}
-      image={image}
-    >
-      <meta property="og:type" content="article" />
-      <meta property="article:published_time" content={date} />
-      {/* TODO double check those article meta array syntaxes, see https://ogp.me/#array */}
-      {authors.some((author) => author.url) && (
-        <meta
-          property="article:author"
-          content={authors
-            .map((author) => author.url)
-            .filter(Boolean)
-            .join(",")}
-        />
-      )}
-      {tags.length > 0 && (
-        <meta
-          property="article:tag"
-          content={tags.map((tag) => tag.label).join(",")}
-        />
-      )}
-    </PageMetadata>
-  );
-}

src/theme/BlogPostPage/index.js

@@ -1,67 +0,0 @@
-import {
-  HtmlClassNameProvider,
-  ThemeClassNames,
-} from "@docusaurus/theme-common";
-import {
-  BlogPostProvider,
-  useBlogPost,
-} from "@docusaurus/theme-common/internal";
-import GiscusComponent from "@site/src/components/GiscusComponent";
-import BlogLayout from "@theme/BlogLayout";
-import BlogPostItem from "@theme/BlogPostItem";
-import BlogPostPageMetadata from "@theme/BlogPostPage/Metadata";
-import BlogPostPaginator from "@theme/BlogPostPaginator";
-import TOC from "@theme/TOC";
-import Unlisted from "@theme/Unlisted";
-import clsx from "clsx";
-import React from "react";
-function BlogPostPageContent({ sidebar, children }) {
-  const { metadata, toc } = useBlogPost();
-  const { nextItem, prevItem, frontMatter, unlisted } = metadata;
-  const {
-    hide_table_of_contents: hideTableOfContents,
-    toc_min_heading_level: tocMinHeadingLevel,
-    toc_max_heading_level: tocMaxHeadingLevel,
-  } = frontMatter;
-  return (
-    <BlogLayout
-      sidebar={sidebar}
-      toc={
-        !hideTableOfContents && toc.length > 0 ? (
-          <TOC
-            toc={toc}
-            minHeadingLevel={tocMinHeadingLevel}
-            maxHeadingLevel={tocMaxHeadingLevel}
-          />
-        ) : undefined
-      }
-    >
-      {unlisted && <Unlisted />}
-      <BlogPostItem>{children}</BlogPostItem>
-      <GiscusComponent />
-
-      {(nextItem || prevItem) && (
-        <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
-      )}
-    </BlogLayout>
-  );
-}
-
-export default function BlogPostPage(props) {
-  const BlogPostContent = props.content;
-  return (
-    <BlogPostProvider content={props.content} isBlogPostPage>
-      <HtmlClassNameProvider
-        className={clsx(
-          ThemeClassNames.wrapper.blogPages,
-          ThemeClassNames.page.blogPostPage,
-        )}
-      >
-        <BlogPostPageMetadata />
-        <BlogPostPageContent sidebar={props.sidebar}>
-          <BlogPostContent />
-        </BlogPostPageContent>
-      </HtmlClassNameProvider>
-    </BlogPostProvider>
-  );
-}