website: add disqus to blog posts

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

website/package-lock.json

@@ -13,6 +13,7 @@
                 "@docusaurus/preset-classic": "2.2.0",
                 "@mdx-js/react": "^1.6.22",
                 "clsx": "^1.2.1",
+                "disqus-react": "^1.1.5",
                 "postcss": "^8.4.21",
                 "rapidoc": "^9.3.4",
                 "react": "^17.0.2",
@@ -5485,6 +5486,15 @@
                 "node": ">=8"
             }
         },
+        "node_modules/disqus-react": {
+            "version": "1.1.5",
+            "resolved": "https://registry.npmjs.org/disqus-react/-/disqus-react-1.1.5.tgz",
+            "integrity": "sha512-9fdG5m6c3wJzlCDLaMheuUagMVj3s5qgUSXdekpCsvzYOKG21AiuOoqyDzA0oXrpPnYzgpnsvPYqZ+i0hJPGZw==",
+            "peerDependencies": {
+                "react": "^15.6.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+                "react-dom": "^15.6.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/dns-equal": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -16549,6 +16559,12 @@
                 "path-type": "^4.0.0"
             }
         },
+        "disqus-react": {
+            "version": "1.1.5",
+            "resolved": "https://registry.npmjs.org/disqus-react/-/disqus-react-1.1.5.tgz",
+            "integrity": "sha512-9fdG5m6c3wJzlCDLaMheuUagMVj3s5qgUSXdekpCsvzYOKG21AiuOoqyDzA0oXrpPnYzgpnsvPYqZ+i0hJPGZw==",
+            "requires": {}
+        },
         "dns-equal": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",

website/package.json

@@ -19,6 +19,7 @@
         "@docusaurus/preset-classic": "2.2.0",
         "@mdx-js/react": "^1.6.22",
         "clsx": "^1.2.1",
+        "disqus-react": "^1.1.5",
         "postcss": "^8.4.21",
         "rapidoc": "^9.3.4",
         "react": "^17.0.2",

website/src/theme/BlogPostPage/index.js

@@ -0,0 +1,76 @@
+import React from "react";
+import clsx from "clsx";
+import {
+    HtmlClassNameProvider,
+    ThemeClassNames,
+} from "@docusaurus/theme-common";
+import {
+    BlogPostProvider,
+    useBlogPost,
+} from "@docusaurus/theme-common/internal";
+import BlogLayout from "@theme/BlogLayout";
+import BlogPostItem from "@theme/BlogPostItem";
+import BlogPostPaginator from "@theme/BlogPostPaginator";
+import BlogPostPageMetadata from "@theme/BlogPostPage/Metadata";
+import TOC from "@theme/TOC";
+import { DiscussionEmbed } from "disqus-react";
+
+function BlogPostPageContent({ sidebar, children }) {
+    const { metadata, toc } = useBlogPost();
+    const { nextItem, prevItem, frontMatter } = 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
+            }
+        >
+            <BlogPostItem>{children}</BlogPostItem>
+
+            {(nextItem || prevItem) && (
+                <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
+            )}
+        </BlogLayout>
+    );
+}
+export default function BlogPostPage(props) {
+    const BlogPostContent = props.content;
+    const title = props.content.frontMatter.title;
+    const fmtId = title.replace(/^\//, "").replaceAll(/[\s\/]/gi, "-");
+    const disqusId = fmtId == "" ? "main" : fmtId;
+    return (
+        <BlogPostProvider content={props.content} isBlogPostPage>
+            <HtmlClassNameProvider
+                className={clsx(
+                    ThemeClassNames.wrapper.blogPages,
+                    ThemeClassNames.page.blogPostPage
+                )}
+            >
+                <BlogPostPageMetadata />
+                <BlogPostPageContent sidebar={props.sidebar}>
+                    <BlogPostContent />
+
+                    <DiscussionEmbed
+                        shortname="goauthentik-io"
+                        config={{
+                            url: props.siteUrl + props.route.path,
+                            identifier: disqusId,
+                            title: title,
+                        }}
+                    />
+                </BlogPostPageContent>
+            </HtmlClassNameProvider>
+        </BlogPostProvider>
+    );
+}