added the option to link older site comments

content/posts/2017/scala-day-4-a-challenge.md

@@ -9,6 +9,7 @@ tags:
   - "Development"
   - "slsw"
 description: "The last day of my journey with Scala is said to be a challenge"
+disqusId: "24"
 ---
 
 The book doesn't offer a day 4, my school, however, does. Or rather, it wants us to "create" a day 4. The main objective of day 4 is to "create a [smart](https://en.wikipedia.org/wiki/SMART_criteria) goal which fits the language and challenges you". For this purpose I came up with the following goal:

src/components/Post/Comments/Comments.tsx

@@ -7,9 +7,10 @@ import { useSiteMetadata } from "@/hooks";
 interface Props {
   postTitle: string;
   postSlug: string;
+  disqusId?: string;
 }
 
-const Comments: React.FC<Props> = ({ postTitle, postSlug }: Props) => {
+const Comments: React.FC<Props> = ({ postTitle, postSlug, disqusId }: Props) => {
   const { url, disqusShortname } = useSiteMetadata();
 
   if (!disqusShortname) {
@@ -21,7 +22,7 @@ const Comments: React.FC<Props> = ({ postTitle, postSlug }: Props) => {
       shortname={disqusShortname}
       config={{
         url: url + postSlug,
-        identifier: postTitle,
+        identifier: disqusId ?? postTitle,
         title: postTitle,
       }}
     />

src/components/Post/Post.tsx

@@ -14,7 +14,7 @@ interface Props {
 const Post: React.FC<Props> = ({ post }: Props) => {
   const { html } = post;
   const { tagSlugs, slug } = post.fields;
-  const { tags, title, date } = post.frontmatter;
+  const { tags, title, date, disqusId } = post.frontmatter;
 
   return (
     <div className={styles.post}>
@@ -29,7 +29,7 @@ const Post: React.FC<Props> = ({ post }: Props) => {
       </div>
 
       <div className={`${styles.comments} hideInPrintView`}>
-        <Comments postSlug={slug} postTitle={post.frontmatter.title} />
+        <Comments disqusId={disqusId} postSlug={slug} postTitle={post.frontmatter.title} />
       </div>
     </div>
   );

src/templates/PostTemplate/PostTemplate.tsx

@@ -45,6 +45,7 @@ export const query = graphql`
         tags
         title
         socialImage
+        disqusId
       }
     }
   }

src/types/frontmatter.ts

@@ -6,6 +6,7 @@ interface Frontmatter {
   description?: string;
   tags?: Array<string>;
   socialImage?: string;
+  disqusId?: string;
 }
 
 export default Frontmatter;