svelte-migrate: updated files

src/lib/components/Commento.svelte

@@ -0,0 +1,37 @@
+<script>
+ import { tick } from 'svelte';
+
+ export let pageId = null;
+
+ async function changePageId(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) {
+         await tick();
+         window.commento.reInit({
+             pageId: pageId,
+         })
+     }
+ }
+
+ $: {
+     if (pageId) {
+         changePageId(pageId);
+     }
+ }
+</script>
+
+<div id="commento"></div>

src/lib/components/Header.svelte

@@ -0,0 +1,29 @@
+<script>
+ import {
+     Icon,
+     Nav,
+     Navbar,
+     NavbarBrand,
+     NavItem,
+     NavLink,
+ } from 'sveltestrap';
+
+ export { className as class };
+ let className = '';
+</script>
+
+<Navbar class={className} color="dark" dark expand="xs">
+    <NavbarBrand href=".">
+        Maatma Videos
+    </NavbarBrand>
+    <Nav navbar>
+        <NavItem>
+            <NavLink
+                href="/maatma/"
+            >
+                <Icon name="signpost-fill" />
+                Retour à Maatma
+            </NavLink>
+        </NavItem>
+    </Nav>
+</Navbar>

src/lib/components/VideoThumb.svelte

@@ -0,0 +1,18 @@
+<script>
+ import { goto } from '$app/navigation';
+
+ import {
+     Card,
+     CardHeader,
+     CardTitle,
+ } from 'sveltestrap';
+
+ export let video = {};
+</script>
+
+<Card style="cursor: pointer" class="mb-3" on:click={() => {goto(video.id)}}>
+    <img src={video.thumb} alt={video.title} class="card-img-top">
+    <CardHeader>
+        <CardTitle>{video.title}</CardTitle>
+    </CardHeader>
+</Card>

src/lib/stores/videos.js

@@ -0,0 +1,27 @@
+import { derived, writable } from 'svelte/store';
+
+export const videos = writable(null);
+
+export async function refresh_videos() {
+  const response = await fetch('videos.json', {headers: {'Accept': 'application/json'}});
+  if (response.ok) {
+    const data = await response.json();
+    videos.set(data);
+    return data;
+  } else {
+    throw new Error("Unable to retrieve the videos");
+  }
+}
+
+export const idx_videos = derived(
+  videos,
+  ($videos) => {
+    const idx_videos = {};
+
+    for (const v of $videos) {
+      idx_videos[v.id] = v;
+    }
+
+    return idx_videos;
+  }
+);