website: add disqus to blog posts

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
2023-01-24 12:14:59 +01:00
parent 6a7b78abc2
commit 9437e2d3ab
3 changed files with 93 additions and 0 deletions
--- a/website/src/theme/BlogPostPage/index.js
+++ b/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>
+    );
+}