search

Chronoblog / gatsby-theme-chronoblog

⏳ Chronoblog is a Gatsbyjs theme specifically designed to create a personal website. The main idea of ​​Chronoblog is to allow you not only to write a personal blog but also to keep a record of everything important that you have done.
https://chronoblog.now.sh
MIT License
130 stars 26 forks source link

Make an easy way to access post data from post-footer.mdx #42

Closed pablovgdev closed 4 years ago

pablovgdev commented 4 years ago

I'm using Disqus to add comments on my blog posts, but I need a unique identifier that allows me to know to which post a comment belongs.

A simple way to achieve this is to use the post's title, but I'd have to add a PostComments component to each blog post with its title.

What I'd like to do is to use some kind of variable referencing the post's title inside the post footer like this:

// post-comments.mdx

import { DiscussionEmbed } from "disqus-react"

export const PostComments = (props) => {
    const disqusConfig = {
        shortname: 'your-short-name',
        config: { 
            identifier: props.title, 
            title: props.title,
        },
    }
    return (
        <DiscussionEmbed {...disqusConfig} />
    );
}
// post-footer.mdx

import { PostComments } from './post-comments.mdx';

<PostComments title={post.title} />
<AuthorBanner />

I want that post.title variable to be a reference on the current post title.

Is there a simple way to achieve this?

ganevdev commented 4 years ago

Hi. Thanks for the detailed explanation.

I'm not sure how best to insert Disqus comments into the Chronoblog, I think there are several options. It is necessary to experiment/try various options, after which I will answer here and, possibly, update the documentation.

pablovgdev commented 4 years ago

Okey thanks :D

ganevdev commented 4 years ago

ok, so far, only such an idea comes to my mind, just use the usual web api, like:

location.href
location.pathname

but I'm not sure if this is the best solution =/

ganevdev commented 4 years ago

So, now through props in post-footer.mdx you can get information about the site metadata and the post.

Here is an example of how this applies to Disqus:

import { Disqus } from 'gatsby-plugin-disqus';

<AuthorBanner></AuthorBanner>
<p>&nbsp;</p>
<Disqus
    config={{
        url: props.siteMetadata.siteUrl + props.postData.fields.slug,
        title: props.postData.frontmatter.title,
        id: props.postData.id
    }}
/>

But in general, this way you can refer from post-footer.mdx to any information about the post.

This can only be done in the latest version of Chronoblog (v0.18.0)

ganevdev commented 4 years ago

https://github.com/Chronoblog/gatsby-theme-chronoblog/commit/53009211323500633b38ee125535c8075ce542d5

ganevdev commented 4 years ago

I also created an example of how to use Chronoblog and Disqus: https://github.com/Chronoblog/gatsby-starter-chronoblog-disqus

Web: https://chronoblog-disqus.now.sh/small-blog-post/