Skip to content

Conversation

@panzerstadt
Copy link

fixes #32

because i didn't seem to see any existing methods to turn on optional features, i've opted to use environment variables to opt into using disqus.

steps to use:

  • sign up for a disqus account
  • get a disqus shortname
  • add shortname to your .env file
  • profit

note that the disqus comments are linked to your current url, so localhost:8000/post/xxx would have all your development comments, while production should have its own. this way you get to play around with disqus without messing with prod.

@daiyanze
Copy link
Contributor

daiyanze commented Mar 1, 2023

I think the functionalities itself is great. Here are some feedbacks regarding the styles an so on.

  • I guess we need to have gatsby-plugin-disqus in dependencies
  • Could I ask you to put the comment right after the article content instead of after the author component? And also adjust the width same to the article content width
  • Does the comment component get rendered right after page is opened? How do you think if we lazy load it when reader scrolls it into view?

@panzerstadt
Copy link
Author

Could I ask you to put the comment right after the article content instead of after the author component? And also adjust the width same to the article content width

done! 927fb3e

Does the comment component get rendered right after page is opened? How do you think if we lazy load it when reader scrolls it into view?

hmm does gatsby have its own way to do it? (to avoid adding another library and rolling our own)

i looked at gatsby's lazy loading recommendations and found this, but its mainly about loading it after the critical path.

here's the commit of changes for lazy loaded disqus (using react.lazy, as the official recommended plugin does not support gatsby v5 / react 18
671c22d

before: (loads together with other components, before page data)
before

after: (loads after page data has been loaded)
after

if you're looking for loading in-view (e.g. with intersection observer, i can recommend this one https://www.npmjs.com/package/react-hook-inview).

if you're ok with either/both just tell me and i'll add them in!

  • lazy loading on mount
  • lazy loading when in viewport

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Commenting function

2 participants