site/templates/blog-page.html

{% extends "base.html" %}

{% block title %}{{page.title}}{% endblock title %}

{% block content %}
<div class="text-align-center">
<h1 class="header">
	{{ page.title }}
</h1>
{{ page.description }}
</div>
<p class="text-align-right">
<strong><i>
		{{ page.date }}
	</i></strong>
</p>
{{ page.content | safe }}
<script src="https://giscus.app/client.js"
        data-repo="karx1/site-comments"
        data-repo-id="R_kgDOH0rjbA"
        data-category="Announcements"
        data-category-id="DIC_kwDOH0rjbM4CYkSv"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="cobalt"
        data-lang="en"
        data-loading="lazy"
        crossorigin="anonymous"
        async
        data-reload>
</script>
{% endblock content %}

{% block headext %}
<script data-reload>
    // handler for pages loaded through flamethrower
    function handleMessage(event) {
        if (event.origin !== 'https://giscus.app') return;
        if (!(typeof event.data === 'object' && event.data.giscus)) return;

        const giscusData = event.data.giscus;
        if ('error' in giscusData) {
            if (giscusData.error.includes("not installed")) {
                console.log("Hello from handler " + giscusData.error);
                sendMessage({
                    setConfig: {
                        repo: "karx1/site-comments",
                        theme: "cobalt",
                    }
                })
            }
        }
    }

    function sendMessage(message) {
        const iframe = document.querySelector("iframe.giscus-frame");
        if (!iframe) return;
        iframe.contentWindow.postMessage({ giscus: message }, "*");
        console.log("Sent message to giscus");
    }


    window.removeEventListener('message', handleMessage); // remove any old event listeners
    window.addEventListener('message', handleMessage);
</script>
{% endblock headext %}