Report discussion metadata to the parent window.

[giscus]

Report discussion metadata to the parent window.

[laymonage]

Hey all, thanks for the input.

@sarathkcm FYI the number of comments and reactions is already a hyperlink that points to the Discussion on GitHub. I understand that it's not very obvious and it might be helpful if there's an explicit hint that says you can comment directly on GitHub. I don't mind adding this to giscus itself, but I haven't figured out how it should look like.

@cole-wilson
In regards to sending messages to the parent window, yes, it is possible. However, I don't think I can make sure to only send the event if the discussion contents change (for efficiency). The easiest way I can do this would be just to send the whole discussion data on every re-render of the top-level Giscus component. I don't know the performance implications of this (edit: maybe not that bad?), but if you would like to have it, I can add this as an opt-in feature.

I've also been thinking about adding a "headless" mode for giscus, but again, I have yet to design how it should be implemented. In the meantime, the feature I described above might be an alternative.

@samarulmeu I'm thinking about adding a way to include a custom CSS file. That way, you can pretty much completely customize how giscus looks. I'll probably add this option using a data attribute in the script tag that points to the CSS file, but as discussed in #112, I'll probably add the disclaimer that you should do this at your own risk.

Side note: once the fix for #104 lands, I will probably read non-critical options from the giscus.json file to avoid putting too many options to the script tag, but this is yet to be decided.

[laymonage]

Hey @cole-wilson and @samarulmeu, I added custom CSS support in #128. You can read this guide and this guide for more details.

Please note that this is experimental and you should only use it at your own risk. That said, I don't think there's any risk if you know what you're doing.

Note that the customization points (classes prefixed with gsc-) are subject to change. I'll try not to change them too much, but future updates may require unavoidable modifications to the HTML. If your custom theme breaks, make sure to update your CSS file. You can create a new issue to request for more customization points.

I'll take a look at reporting the discussion metadata later this weekend. Thanks for your patience!

[laymonage]

@sarathkcm @cole-wilson Hey folks, I've added an option to emit discussion metadata in #136. You can see the guide for more details. Please try it out when you have the time, and let me know if it works.

I intentionally do not include the comments data in the message because I'm afraid the message would become too big and has performance impacts. (Plus, it would become more like "real data" instead of "metadata"...). If you want the option to also include the comments in the message, please let me know. No promises, though!

P.s. if you scroll down in the guide, I've also added (#138) a feature to modify giscus' config on-the-fly using postMessage.

Hope you like it!

[laymonage]

Hey @sarathkcm, thanks for the report! Yup, that was my mistake. This line shouldn't have been removed. Glad to see that the metadata works!

I've deployed a fix in #140. I don't know if that will cause any issue with changing the theme via postMessage, though. In theory, it shouldn't, unless there's something I don't know about how Next.js handles server-side props. I guess I'll just wait and see if someone reports another issue 😄

[laymonage]

@sarathkcm Yup, that was a mistake in the docs, someone pointed it in #134. I've fixed it in #141. Thanks for confirming that it works!

[cole-wilson]

I would also really like to know about this.

[samarulmeu]

As it is somehow remotely related, I am wondering if there is a posibility to change the font of the comments to have a consistent design?

[cole-wilson]

That's great! I think custom stylesheets would really be useful, as well as a headless mode.

[samarulmeu]

@laymonage Thank you for the answer. Custom CSS will be amazing! It doesn’t look nice to brake a design of a site (using serif fonts for example) with GitHub's choice.

[samarulmeu]

@laymonage Thank you again! I was waiting for this, but unfortunately I will not be able to test it before the end of week. I will report back.

[sarathkcm]

@laymonage Love it. Thanks a lot for taking the time to do this. I too share the same sentiment that sending the whole comments data to the parent window is a little too much, and at that point, the parent window is better off accessing the GitHub APIs directly.

I have tested this on my site and works nicely (at the moment I am only making use of the URL).

I did notice however that inbuilt themes are not working how they used to work earlier. It's always the light theme even if you provide any other inbuilt theme names.

Example: https://sarathkcm.dev/blog/lazy-loading-react-native-components-from-a-server

I checked your website too, and it seems broken there as well: https://laymonage.com/posts/giscus, although it works fine on the giscus.app website.

Is this because data-theme accepts a URL now? While I don't want to complain, you might get a few bug reports related to this from the users who are unaware of the new changes.

[sarathkcm]

It seems to be working now, if you did something - wow that was fast.. Otherwise sorry for the false alarm :)

Thank you again...

[sarathkcm]

I don't know if that will cause any issue with changing the theme via postMessage

I played with that and it is working nicely; a lot better than having to remove and re-add the script and iframe.

It took me some time to figure out that the second parameter of postMessage should be the target iframe's URL, i.e - https://giscuss.app and not my site's URL, but that's just me. 😄

[samarulmeu]

@laymonage So, after some time, I managed to get the time to test the CSS custom option and it is really nice. It needs some digging for the classes, but for what I need I think that it is perfect. Let's see how it goes.

Thank you again and keep up the good work!