website: add disqus to blog posts
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
parent
6a7b78abc2
commit
9437e2d3ab
16
website/package-lock.json
generated
16
website/package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
76
website/src/theme/BlogPostPage/index.js
Normal file
76
website/src/theme/BlogPostPage/index.js
Normal 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>
|
||||
);
|
||||
}
|
Reference in a new issue