From 2a3c7a356706f81a5bfb01770e86bdd345a4ceaa Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Sun, 17 Apr 2022 14:15:32 +0200
Subject: [PATCH] Switch to commento++

---
 src/components/Commento.svelte | 30 ++++++++++++++++++++++++++++++
 src/routes/[vid].svelte        |  4 ++--
 2 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Commento.svelte

diff --git a/src/components/Commento.svelte b/src/components/Commento.svelte
new file mode 100644
index 0000000..15a9cb6
--- /dev/null
+++ b/src/components/Commento.svelte
@@ -0,0 +1,30 @@
+<script>
+ export let pageId = null;
+
+ $: {
+     if (pageId) {
+         if (typeof window !== 'undefined' && !window.commento) {
+             // init empty object so commento.js script extends this with global functions
+             window.commento = { };
+             const script = document.createElement('script')
+             // Replace this with the url to your commento instance's commento.js script
+             script.src = `https://commento.nemunai.re/js/commento.js`
+             script.defer = true
+             // Set default attributes for first load
+             script.setAttribute('data-auto-init', false)
+             script.setAttribute('data-page-id', pageId)
+             script.onload = () => {
+                 // Tell commento.js to load the widget
+                 window.commento.main()
+             }
+             document.getElementsByTagName('head')[0].appendChild(script)
+         } else if (typeof window !== 'undefined' && window.commento) {
+             window.commento.reInit({
+                 pageId: pageId,
+             })
+         }
+     }
+ }
+</script>
+
+<div id="commento"></div>
diff --git a/src/routes/[vid].svelte b/src/routes/[vid].svelte
index 84709e9..8ea3248 100644
--- a/src/routes/[vid].svelte
+++ b/src/routes/[vid].svelte
@@ -16,6 +16,7 @@
  } from 'sveltestrap';
 
  import { videos } from '../stores/videos.js';
+ import Commento from '../components/Commento.svelte';
  import VideoThumb from '../components/VideoThumb.svelte';
 
  export let video_id = 0;
@@ -39,8 +40,7 @@
                 {@html $videos.idx_videos[video_id].description}
             </p>
         {/if}
-        <script defer src="https://commento.nemunai.re/js/commento.js"></script>
-        <div id="commento"></div>
+        <Commento pageId={'/videos/' + video_id} />
         </Col>
 
         <Col md="3" lg="4">