commit 999d7e294bc3d4e8d9c680d6139f5bf10c8aa2ca
parent 326e061f123a3fe65ce83ad688c3ff4b300c8b4e
Author: Agastya Chandrakant <me@hanabi.in>
Date: Sun, 15 Dec 2019 01:44:46 +0530
Moving to disqus plugin as mentioned in #2
Diffstat:
3 files changed, 156 insertions(+), 169 deletions(-)
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -10,6 +10,12 @@ module.exports = {
homeName: `サナ`,
},
plugins: [
+ {
+ resolve: `gatsby-plugin-disqus`,
+ options: {
+ shortname: `sana137`,
+ },
+ },
`gatsby-transformer-remark`,
{
resolve: `gatsby-transformer-remark`,
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
"dependencies": {
"gatsby": "^2.13.73",
"gatsby-image": "^2.2.10",
+ "gatsby-plugin-disqus": "^1.1.4",
"gatsby-plugin-feed": "^2.3.11",
"gatsby-plugin-manifest": "^2.2.6",
"gatsby-plugin-offline": "^2.2.7",
@@ -45,7 +46,7 @@
"develop": "gatsby develop",
"deploy": "gatsby build && gh-pages -d public",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
- "start": "npm run develop",
+ "start": "gatsby develop",
"serve": "gatsby serve",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \""
},
diff --git a/src/templates/blogPost.js b/src/templates/blogPost.js
@@ -3,53 +3,25 @@ import { graphql, Link } from 'gatsby';
import Footer from '../components/footer';
import TinyHeader from '../components/tinyHeader';
import moment from 'moment';
+import { Disqus, CommentCount } from 'gatsby-plugin-disqus';
+
import 'katex/dist/katex.min.css';
-class BlogPostTemplate extends React.Component {
- componentDidMount() {
- const pathSlug = this.props.pageContext.pathSlug;
- var disqus_config = function() {
- this.page.url = 'https://sana137.in';
- this.page.identifier = { pathSlug };
- };
- (function() {
- // DON'T EDIT BELOW THIS LINE
- var d = document,
- s = d.createElement('script');
- s.src = 'https://sana137.disqus.com/embed.js';
- s.setAttribute('data-timestamp', +new Date());
- (d.head || d.body).appendChild(s);
- })();
- if (disqus_config); // only to avoid warning 'disqus_thread' was never used.
- }
- render() {
- const { data, pageContext } = this.props;
- const {
- author: twitterHandle,
- cover,
- date,
- description,
- name,
- next,
- photo,
- prev,
- tags,
- } = pageContext;
- const tempTags = [...tags];
- const newTags = [];
- while (tempTags.length > 1) {
- let tag = tempTags.shift().toLowerCase();
- newTags.push(
- <Link
- to={`/tags/${tag}`}
- style={{ textTransform: `capitalize` }}
- key={tag}
- >
- {tag}
- </Link>
- );
- newTags.push(' • ');
- }
+function BlogPostTemplate({ data, pageContext }) {
+ const {
+ author: twitterHandle,
+ cover,
+ date,
+ description,
+ name,
+ next,
+ photo,
+ prev,
+ tags,
+ } = pageContext;
+ const tempTags = [...tags];
+ const newTags = [];
+ while (tempTags.length > 1) {
let tag = tempTags.shift().toLowerCase();
newTags.push(
<Link
@@ -60,141 +32,149 @@ class BlogPostTemplate extends React.Component {
{tag}
</Link>
);
- const title = data.markdownRemark.frontmatter.title;
- const html = data.markdownRemark.html;
- return (
- <div className={'post-template'}>
- <div className={'site-wrapper'}>
- <TinyHeader />
- <main id={'site-main'} className={'site-main outer'}>
- <div className={'inner'}>
- <article className={'post-full post'}>
- <header className={'post-full-header'}>
- <section className={'post-full-meta'}>
- <time className={'post-full-meta-date'} dateTime={date}>
- {new Date(date).toDateString()}
- </time>
- </section>
- <h1 className={'post-full-title'}>{title}</h1>
- <span>{newTags}</span>
- </header>
- {cover && (
- <figure
- className={'post-full-image'}
- style={{ backgroundImage: `url(${cover})` }}
- />
- )}
- <section className={'post-full-content'}>
- <div
- className={'post-content'}
- dangerouslySetInnerHTML={{ __html: html }}
- />
+ newTags.push(' • ');
+ }
+ let tag = tempTags.shift().toLowerCase();
+ newTags.push(
+ <Link to={`/tags/${tag}`} style={{ textTransform: `capitalize` }} key={tag}>
+ {tag}
+ </Link>
+ );
+ const title = data.markdownRemark.frontmatter.title;
+ const html = data.markdownRemark.html;
+ const disqusConfig = {
+ url: window.location.href,
+ identifier: window.location.pathname,
+ title: title,
+ };
+ return (
+ <div className={'post-template'}>
+ <div className={'site-wrapper'}>
+ <TinyHeader />
+ <main id={'site-main'} className={'site-main outer'}>
+ <div className={'inner'}>
+ <article className={'post-full post'}>
+ <header className={'post-full-header'}>
+ <section className={'post-full-meta'}>
+ <time className={'post-full-meta-date'} dateTime={date}>
+ {new Date(date).toDateString()}
+ </time>
</section>
- <footer className={'post-full-footer'}>
- <section className={'author-card'}>
- <a
- href={`https://www.twitter.com/${twitterHandle}`}
- className={'author-profile-image'}
- >
- <img
- src={photo}
- className={'avatar-wrapper'}
- alt={name}
- />
- </a>
- <AuthorCardContent name={name} description={description} />
- </section>
- <ReadMore />
- </footer>
- <section className={'post-full-comments'}>
- <div id="disqus_thread"></div>
+ <h1 className={'post-full-title'}>{title}</h1>
+ <span>{newTags}</span>
+ </header>
+ {cover && (
+ <figure
+ className={'post-full-image'}
+ style={{ backgroundImage: `url(${cover})` }}
+ />
+ )}
+ <section className={'post-full-content'}>
+ <div
+ className={'post-content'}
+ dangerouslySetInnerHTML={{ __html: html }}
+ />
+ </section>
+ <footer className={'post-full-footer'}>
+ <section className={'author-card'}>
+ <a
+ href={`https://www.twitter.com/${twitterHandle}`}
+ className={'author-profile-image'}
+ >
+ <img src={photo} className={'avatar-wrapper'} alt={name} />
+ </a>
+ <AuthorCardContent name={name} description={description} />
</section>
- </article>
- </div>
- </main>
- <aside className={'read-next outer'}>
- <div className={'inner'}>
- <div className={'read-next-feed'}>
- {next && (
- <article className={'post-card post'}>
+ <ReadMore />
+ </footer>
+ <section className={'post-full-comments'}>
+ <Disqus config={disqusConfig} />
+ </section>
+ </article>
+ </div>
+ </main>
+ <aside className={'read-next outer'}>
+ <div className={'inner'}>
+ <div className={'read-next-feed'}>
+ {next && (
+ <article className={'post-card post'}>
+ <Link
+ className={'post-card-image-link'}
+ to={next.frontmatter.path}
+ >
+ <div
+ className={'post-card-image'}
+ style={{
+ backgroundImage: `url(${next.frontmatter.cover})`,
+ }}
+ />
+ </Link>
+ <div className={'post-card-content'}>
<Link
- className={'post-card-image-link'}
+ className={'post-card-content-link'}
to={next.frontmatter.path}
>
- <div
- className={'post-card-image'}
- style={{
- backgroundImage: `url(${next.frontmatter.cover})`,
- }}
- />
+ <header className={'post-card-header'}>
+ <span className={'post-card-tags'}>
+ {next.frontmatter.tags
+ ? next.frontmatter.tags[0] + ' • '
+ : ''}
+ {moment(next.frontmatter.date).fromNow()}
+ </span>
+ <h2 className={'post-card-title'}>
+ {next.frontmatter.title}
+ </h2>
+ </header>
+ <section className={'post-card-excerpt'}>
+ <p>{next.frontmatter.excerpt}</p>
+ </section>
</Link>
- <div className={'post-card-content'}>
- <Link
- className={'post-card-content-link'}
- to={next.frontmatter.path}
- >
- <header className={'post-card-header'}>
- <span className={'post-card-tags'}>
- {next.frontmatter.tags
- ? next.frontmatter.tags[0] + ' • '
- : ''}
- {moment(next.frontmatter.date).fromNow()}
- </span>
- <h2 className={'post-card-title'}>
- {next.frontmatter.title}
- </h2>
- </header>
- <section className={'post-card-excerpt'}>
- <p>{next.frontmatter.excerpt}</p>
- </section>
- </Link>
- </div>
- </article>
- )}
- {prev && (
- <article className={'post-card post'}>
+ </div>
+ </article>
+ )}
+ {prev && (
+ <article className={'post-card post'}>
+ <Link
+ className={'post-card-image-link'}
+ to={prev.frontmatter.path}
+ >
+ <div
+ className={'post-card-image'}
+ style={{
+ backgroundImage: `url(${prev.frontmatter.cover})`,
+ }}
+ />
+ </Link>
+ <div className={'post-card-content'}>
<Link
- className={'post-card-image-link'}
+ className={'post-card-content-link'}
to={prev.frontmatter.path}
>
- <div
- className={'post-card-image'}
- style={{
- backgroundImage: `url(${prev.frontmatter.cover})`,
- }}
- />
+ <header className={'post-card-header'}>
+ <span className={'post-card-tags'}>
+ {prev.frontmatter.tags
+ ? prev.frontmatter.tags[0] + ' • '
+ : ''}
+ {moment(prev.frontmatter.date).fromNow()}
+ </span>
+ <h2 className={'post-card-title'}>
+ {prev.frontmatter.title}
+ </h2>
+ </header>
+ <section className={'post-card-excerpt'}>
+ <p>{prev.frontmatter.excerpt}</p>
+ </section>
</Link>
- <div className={'post-card-content'}>
- <Link
- className={'post-card-content-link'}
- to={prev.frontmatter.path}
- >
- <header className={'post-card-header'}>
- <span className={'post-card-tags'}>
- {prev.frontmatter.tags
- ? prev.frontmatter.tags[0] + ' • '
- : ''}
- {moment(prev.frontmatter.date).fromNow()}
- </span>
- <h2 className={'post-card-title'}>
- {prev.frontmatter.title}
- </h2>
- </header>
- <section className={'post-card-excerpt'}>
- <p>{prev.frontmatter.excerpt}</p>
- </section>
- </Link>
- </div>
- </article>
- )}
- </div>
+ </div>
+ </article>
+ )}
</div>
- </aside>
- <Footer />
- </div>
+ </div>
+ </aside>
+ <Footer />
</div>
- );
- }
+ </div>
+ );
}
export const query = graphql`
query($pathSlug: String!) {
