Is there a way to position giscus on a page if I can only add JS to the header? about giscus

[laymonage]

Yes, add an element with a giscus class and it’ll be placed there.

[laymonage]

Yeah the giscus script tag loads immediately instead of being in a load event listener so your script probably gets executed after giscus loads. Either make it run immediately (and put it before the giscus script tag), or add the giscus script tag dynamically: #336 (comment) (you can probably just avoid making the div.giscus element and put the dynamically created script right where the placeholder is).

[jlxq0]

Hmmm ... My approach was placing this in the header:

<script>
window.addEventListener('load', function () {
  var node_to_replace = document.querySelector('li a[title="PLACEHOLDER"]').parentElement;
  var giscus_div = document.createElement('div');
  giscus_div.className="giscus";
  node_to_replace.replaceWith(giscus_div);
})
</script>

Is that a valid approach?

It is working as in: it is replacing that PLACEHOLDER link with a div with the class giscus – however giscus is still loading at the end of the page. Maybe some kind of "race condition"?

(I should add that I cannot just add any random content to the page, and thus can't just add a div with a specific class myself. The only thing I can add in that position is links and the only thing I can influence of the links is the title, the href and the text between the a-tags.)

Edit: The site I'm playing around with is https://www.sleepless.sg/1

[jlxq0]

Sorry for not getting back earlier, @laymonage.

I'm still not sure this is the most elegant solution, but it works, as you can see on https://www.sleepless.sg/1 – and that's what counts for me. 👍

<script>
  window.addEventListener('load', function () {
    var node_to_replace = document.querySelector('li a[title="PLACEHOLDER"]').parentElement;
    var giscus_div = document.createElement('div');
    giscus_div.className="giscus";
    node_to_replace.replaceWith(giscus_div);

    let giscusAttributes = {
      "src": "https://giscus.app/client.js",
      "data-repo": "xxx",
      "data-repo-id": "xxx",
      "data-category": "Website Comments",
      "data-category-id": "xxx",
      "data-mapping": "pathname",
      "data-reactions-enabled": "1",
      "data-emit-metadata": "0",
      "data-theme": light,
      "data-lang": "en",
      "crossorigin": "anonymous",
      "async": "",
    };

    let giscusScript = document.createElement("script");
    Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
    document.body.appendChild(giscusScript);
  })
</script>

Thank you so much; I appreciate the help a lot!