website: add disqus to blog posts

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens Langhammer 2023-01-24 12:14:59 +01:00
parent 6a7b78abc2
commit 9437e2d3ab
No known key found for this signature in database
3 changed files with 93 additions and 0 deletions

View File

@ -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",

View File

@ -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",

View File

@ -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>
);
}