Implement Giscus comment/like React component for blog #2
Conversation
There was a problem hiding this comment.
Looks great! Do you have access to the internal repo https://github.com/WATonomous/infra-config ? Can you open a pull request in there?
| mapping="pathname" | ||
| reactionsEnabled="1" | ||
| emitMetadata="0" | ||
| theme="dark" |
There was a problem hiding this comment.
Can we set this dynamically? Example:
watcloud-website/components/ui/sonner.tsx
Line 11 in f9c283f
There was a problem hiding this comment.
Do you have any context as to how the darkMode variable is set? I am trying to do this but it seems to always be set as true. Also, would something like a useEffect() be able to update the comments component to change theme even after the page is rendered?
There was a problem hiding this comment.
This variable should be set according to the setting near the footer on every page:
There was a problem hiding this comment.
Yeah, even if I load the page with light mode the variable is still showing up as true not sure why
There was a problem hiding this comment.
Interesting, perhaps try this approach instead? I do remember one of these approaches didn't work as expected during development, but didn't look too deeply into it.
watcloud-website/components/assets.tsx
Lines 202 to 203 in f9c283f
There was a problem hiding this comment.
This seemed to work. I'll create a new PR once I have access to the infra-config repo. Thanks for the help!
| @@ -27,6 +27,7 @@ | |||
| "homepage": "https://github.com/WATonomous/infra-config#readme", | |||
| "description": "A website for WATcloud", | |||
| "dependencies": { | |||
| "@giscus/react": "^3.0.0", | |||
There was a problem hiding this comment.
Are there no changes in package-lock.json?
There was a problem hiding this comment.
Yes there was I'll add it
| @@ -64,6 +65,7 @@ | |||
| "react-dom": "^18.2.0", | |||
| "react-hook-form": "^7.49.2", | |||
| "sha512crypt-node": "^1.0.2", | |||
| "sharp": "^0.33.4", | |||
There was a problem hiding this comment.
I think it was just needed for me to be able to deploy locally. I'll remove it from the dependencies.
| repoId= {process.env.NEXT_PUBLIC_REPO_ID} | ||
| category="Announcements" | ||
| categoryId= {process.env.NEXT_PUBLIC_CATEGORY_ID} | ||
| mapping="pathname" |
There was a problem hiding this comment.
Is this what determines which discussion the comments are placed in?
There was a problem hiding this comment.
Yes, it creates a thread in the category specified based off of the path like 'blog/hello-world' for example. It might be a good idea to host and pull the comments on a separate repo.
There was a problem hiding this comment.
Ah cool, let's experiment with that in our preview environment in https://github.com/WATonomous/infra-config
|
Oh I see, you don't yet have access to the internal repo. Could you fill out the onboarding form and enable the |
Create a React component to be added to blog posts on the website Closes #2 (Replacement)
Created a React component to be added to blog pages to integrate the Giscus comment/like system (Project #2). The repo will have to be setup with Giscus to add the env variables.
Tested locally on fork and will look like the image seen below: