Add a client API?

First off, thanks for this project, I love it!

I don’t like a full refresh on each page change so I added barba.js in order to load the pages over AJAX instead. This obviously broke giscus, I hacked around a solution that involves changing the iframe src on page change via JS but I was wondering if there’s a better way to solve this.

I don’t know if that’s possible but will you consider adding a JS client API so that we can programmatically load the discussion?

You can see my tiny js code here and you can see it in action at https://games-on-whales.github.io/gow/

[ABeltramo]

Thank you for your patience, it works perfectly! 🎉 I feel dumb to have missed that, I just tried to see thru the Typescript since I’m just on plain JS and I missed those keys!

[laymonage]

@ABeltramo Ah, I just realized: you need to wrap the object in this format:

frame.contentWindow.postMessage({
  giscus: {
    setConfig: {
      term: term,
      repo: "games-on-whales/gow",
    }
  }
}, 'https://giscus.app')

Sorry if it doesn’t seem so intuitive. The reason is:

• The object is wrapped in the giscus key because other apps might also send messages to the window (e.g. browser extensions). The key ensures that the data is specifically intended for giscus.
• The config is wrapped in the setConfig key because there may be other types of messages that will be supported by giscus in the future. I could’ve added a property like type: 'set-config' and just put the rest of the data without wrapping it in setConfig, but I chose the current approach because it lets you namespace the data for each type of message and still be able to check the type (using if ('setConfig' in giscus)).

This is why I added a boilerplate example in the guide:

function sendMessage<T>(message: T) {
  const iframe = document.querySelector<HTMLIFrameElement>('iframe.giscus-frame');
  if (!iframe) return;
  iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
}

sendMessage({
  setConfig: {
    theme: 'https://giscus.app/themes/custom_example.css',
    reactionsEnabled: false,
  }
});

It seems to work on my website:

(Sorry for the screen glitch, screen recording doesn’t seem to work well on my linux setup.)