Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Comment widget is not rendered #1186

Open
Stvad opened this issue Sep 29, 2023 · 8 comments
Open

Comment widget is not rendered #1186

Stvad opened this issue Sep 29, 2023 · 8 comments

Comments

@Stvad
Copy link

Stvad commented Sep 29, 2023 •
edited

Hi there, I'm trying to set up giscus on my website!

Here is a test page I've added it to: https://vlad.roam.garden/Thinking-in-public-about-dance (empty space at the bottom is where giscus is supposed to be 馃)

I've tried both just adding the script tag and explicitly having an element with giscus class.
In the second case I see that some styling is applied to the div, so presumably the script has loaded, but the div has no content 馃.

Here is the content of the script tag:

<script src="https://giscus.app/client.js"
        data-repo="Stvad/comments-vlad.roam.garden"
        data-repo-id="R_kgDOKZ_GlQ"
        data-category="Announcements"
        data-category-id="DIC_kwDOKZ_Glc4CZveS"
        data-mapping="title"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="en"
        crossorigin="anonymous"
        async>
</script>

Repo: https://github.com/Stvad/comments-vlad.roam.garden

I don't see any giscus-related errors in the console
@laymonage
Copy link
Member

The script tried to load with an empty term.

image

Since you used the title mapping, it looks like your website does not set the <title> tag correctly before the giscus script loads.

image

Check your website's configuration and see if you can make it so that the initial HTML response for the page includes a <title> tag in the <head>, or make it so that the giscus script is loaded only after your website's JS code sets the title. Or, use a different mapping.

@Stvad
Copy link
Author

Stvad commented Sep 29, 2023

Thanks for the quick response!

Oh, I see - weird, it does seem that Gatsby doesn't do pre-rendering for title and only generates it dynamically - I'm surprised by this.

Also, it'd be great to display some information saying that widget is misconfigured (or print a message in console log) to make it easier to discover such issues!

@Stvad
Copy link
Author

Stvad commented Sep 29, 2023

Hmm, so I tried using specific mapping and still get an empty tag 馃

@Stvad
Copy link
Author

Stvad commented Sep 29, 2023 •
edited

If I follow the URL it's loading it gives me an instance of giscus comments: https://giscus.app/en/widget?origin=https%3A%2F%2Fvlad.roam.garden%2FThinking-in-public-about-dance&session=&theme=preferred_color_scheme&reactionsEnabled=1&emitMetadata=0&inputPosition=bottom&repo=Stvad%2Fcomments-vlad.roam.garden&repoId=R_kgDOKZ_GlQ&category=Announcements&categoryId=DIC_kwDOKZ_Glc4CZveS&strict=1&description=&backLink=https%3A%2F%2Fvlad.roam.garden%2FThinking-in-public-about-dance&term=Thinking+in+public+about+dance and adding a reaction there created the appropriate discussion. But the original page still renders an empty tag :(

@laymonage
Copy link
Member

It's probably something to do with Gatsby somehow removing elements created via other means (not via React's vDOM). If you're using React I recommend using the component library instead of the script tag: https://github.com/giscus/giscus-component

@Stvad
Copy link
Author

Stvad commented Sep 30, 2023

That does seems like a reasonable hypothesis, I see the content appearing for a second inside div and then disappearing 馃.

Will try to see if I can run the giscus script after gatsby completes react rehydration (using component is logistically complicated for this use-case :( )

Interestingly I have a similar setup with embedding Matrix Chat room view on https://vlad.roam.garden/How-to-create-a-serverless-Matrix-Chat-bot which works ok (maybe it's just slow to load and so loads after react rehydration is finished 馃槢).

@Stvad
Copy link
Author

Stvad commented Sep 30, 2023 •
edited

Ok I hacked it by having the following (explicitly defining iframe that giscus would create):

<div class="giscus">
<iframe class="giscus-frame" title="Comments" scrolling="no" allow="clipboard-write">
</iframe>
</div>

UPD: it' sufficient to just have an iframe with no src set and giscus will update it apropriately

@Stvad
Copy link
Author

Stvad commented Sep 30, 2023

ok, just noticed that the link there had a session token, which allowed anyone to comment as me 馃槄.
removed it is there a way to invalidate the session token? 馃

@Junyi-99 Junyi-99 mentioned this issue Nov 3, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Stvad @laymonage