<iframe> sizing issues with Retype & giscus

[latenitefilms]

I'm currently experimenting with using giscus as a discussion/commenting system for my Retype-powered website:

https://fcp.cafe

Unfortunately though, for some reason, when using giscus in a Retype-powered site, the automatic <iframe> resizing seems to stop working, and I have no idea why.

You can see giscus working fine in other non-Retype sites here:

• https://giscus.vercel.app
• https://laymonage.com/posts/giscus
• https://os.phil-opp.com/paging-introduction/

I've created an issue here:

https://github.com/giscus/giscus/issues/1057

Any ideas? Is anyone else here using Retype & giscus?

[geoffreymcgill]

The issue is do to the Turbo library used in Retype and how scripts are not re-instantiated on each new page request. The comment plugin will likely only work, by default, on a fresh initial page load (or hard refresh).

There might be a way to work around this limitation of Turbo, but I'm going to have to run some tests.

The issue is not related to Giscus.

[latenitefilms]

Playing with it some more (albeit in its broken state), Giscus seems really awesome, and the perfect companion to Retype.

Is wonder if Giscus could be integrated to inside Retype, or if Retype could add similar functionality built-in (i.e. their own implementation)?

I think the idea of using GitHub discussions as page comments and reactions is really great.

Thoughts @geoffreymcgill ?

[geoffreymcgill]

I'm working to try and get a Giscus sample running correctly, but this one is a challenge. I am working on it.

[latenitefilms]

Legend, thank you! HUGELY appreciated!

[geoffreymcgill]

We are still working on this issue.

[latenitefilms]

Thank you! If you need anything from me, just let me know!

[latenitefilms]

FWIW - I've decided to just disable giscus for now, as it's too confusing for users when it doesn't work properly.

Note to self, here's another option: https://utteranc.es

[geoffreymcgill]

We have Giscus working. The issue is related to a conflict/limitation of VueJS.

It's working but we need some more time to test and investigate if there are any side-effects to the change.

The fix will require an update to the retypeapp, so a new v3.0.3 release is required. As long as we don't uncover any problems with the Giscus fix, we should be able to make a new release this week.

[latenitefilms]

Incredible! You're the best @geoffreymcgill! Keep me posted on how you go.

Does GitHub Actions automatically just use v3.0.3 once it's out?

Again, HUGE thanks for all your help and support the last couple of weeks!

I'm going to move CommandPost.io away from GitBook to Retype, given how amazing it's been thus far!

[geoffreymcgill]

Does GitHub Actions automatically just use v3.0.3 once it's out?

Yes. After the release is made, on the next commit to your repo, the project will be automatically built using the latest Retype release, which will be v3.0.0.

I'm going to move CommandPost.io away from GitBook to Retype, given how amazing it's been thus far!

Awesome. We need to quote you. 😄

We would love to hear any feedback or recommendations you have on the upgrade process from GitBook to Retype.

Ideally, you would just export the .md files from GitBook and then build that folder with Retype. Some changes to the retype.yml would be required as GitBook does not export all the project details.

GitBook also exports the menu structure using a SUMMARY.md file, but using we would recommend using the Page order config.

Hope this helps.

[latenitefilms]

To be honest, I'm basically just going to copy and paste everything from one of my existing Retype sites (i.e. brawtoolbox.io), and then manually update it for CommandPost. We currently have three seperate CommandPost sites - the main website, help site and developer help site - and it's all a giant mess.

[geoffreymcgill]

I'm basically just going to copy and paste everything from one of my existing Retype sites

I believe these are the GitBook docs for syncing with GitHub:

https://docs.gitbook.com/product-tour/git-sync/enabling-github-sync

That will create .md files for each of your pages.

Then you just need to call retype start on that exported project and Retype will build and run it.

Hope this helps.

[geoffreymcgill]

Retype v3.0.3 has been released and includes the Giscus fix.

If you are using the Retype GitHub Build Action, just commit a change to your repo and your project will automatically build with the @latest Retype release.

@latenitefilms Thanks for reporting the original issue!

Hope this helps.

[geoffreymcgill]

@latenitefilms btw, the following line can be simplified to {{ include "giscus" }}. A minor change, but still nice to keep things as clean as possible. Retype will automatically assume the .md extension, as well as the default /_includes/ path.

https://github.com/CommandPost/FCPCafe/blob/dd9ae1f548675cba13e6ab7d2cfbf3fe0941bb10/docs/contribute.md?plain=1#L334

// Existing
{{ include "giscus.md" }}

// Revised
{{ include "giscus" }}

The above is also equivalent to passing the full include path:

{{ include "/_includes/giscus.md" }}

[latenitefilms]

Legend, thanks so much! Exploring now!

What does /_includes/bottom.md do? Could I just include it there?

[latenitefilms]

THANK YOU! giscus now all seems to be working, and I'm doing a whole bunch of "include" tweaks based on all the stuff you've taught me - thank you!

[geoffreymcgill]

Any content added to the /_includes/bottom.md file gets inserted into the bottom (lowest) content position on all pages.

Adding the Giscus <script> to bottom.md would include Giscus at the bottom of all pages in the project.

Hope this helps.

[latenitefilms]

Amazing, thank you!

[latenitefilms]

@geoffreymcgill - I've now combined the CommandPost Website, Developer Docs & User Guide into the one (awesome) Retype website! Works and looks great! Although, definitely pushing the boundaries of the Search Function - we have a lot of API docs in there to reference! Thanks so much for all your amazing help and support!!

https://commandpost.io