fix(blog): Fix Disqus comments

kalecream · Feb 6, 2024 · b7c206c · b7c206c
1 parent 33c37c7
commit b7c206c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 26 deletions.
diff --git a/frontend/src/components/blog/DisqusComments.tsx b/frontend/src/components/blog/DisqusComments.tsx
diff --git a/frontend/src/pages/posts/[slug].tsx b/frontend/src/pages/posts/[slug].tsx
@@ -1,6 +1,6 @@
 import Page from '@containers/layout/BlogPage';
 import Head from 'next/head';
-import { Key, useEffect, useState } from 'react';
+import { Key, ReactFragment, useEffect, useState } from 'react';
 import { format, parseISO } from 'date-fns';
 import fs from 'fs';
 import matter from 'gray-matter';
@@ -18,8 +18,9 @@ import rehypeSlug from 'rehype-slug';
 import { useHeadsObserver } from '@hooks/useObserver';
 import getReadTime from '@utils/read-time';
 import { ReactNode } from '@mdx-js/react/lib';
-import { DisqusComments, CustomComponents } from '@components/blog';
+import { DiscussionEmbed } from 'disqus-react';
 import article from '@components/blog/articles.module.scss';
+import { CustomComponents } from '@components/blog/CustomElements';
 
 type PostPageProps = {
 	source: MDXRemoteSerializeResult;
@@ -28,7 +29,7 @@ type PostPageProps = {
 
 type HeadingProps = {
 	id: Key | any;
-	text: ReactNode;
+	text: ReactFragment | ReactNode;
 	level: string;
 };
 
@@ -117,7 +118,15 @@ const PostPage = ({ source, frontMatter }: PostPageProps): JSX.Element => {
 					<MDXRemote {...source} components={CustomComponents} />
 				</div>
 				<div className={article.comments}>
-					<DisqusComments postId={frontMatter.id} title={frontMatter.title} slug={frontMatter.slug} />
+					<DiscussionEmbed
+						shortname="sabrinamedwinter"
+						config={{
+							url: 'https://www.sabrinamedwinter.com/posts/' + frontMatter.slug,
+							identifier: frontMatter.id,
+							title: frontMatter.title,
+							language: 'en_EN',
+						}}
+					/>
 				</div>
 			</article>
 		</Page>