Display Lexical Words

package.json

@@ -69,5 +69,8 @@
     },
     "volta": {
         "node": "20.9.0"
+    },
+    "dependencies": {
+        "sql.js": "^1.12.0"
     }
 }

src/routes/+page.svelte

@@ -6,18 +6,24 @@
     import contents from '$lib/data/contents';
     import { isFirstLaunch, audioActive } from '$lib/data/stores';
     import { navigateToTextReference } from '$lib/navigate';
+    import config from '$lib/data/config';
+
+    onMount(async () => {
+        if (config.programType === 'DAB') {
+            await goto(`${base}/lexicon`);
+            return;
+        }
 
-    onMount(() => {
         const launchAction = contents?.features?.['launch-action'];
         if ($page.data?.audio) {
             $audioActive = $page.data.audio === '1';
         }
         if ($page.data?.ref) {
-            navigateToTextReference($page.data.ref);
+            await navigateToTextReference($page.data.ref);
         } else if (launchAction === 'contents' || ($isFirstLaunch && launchAction)) {
-            goto(`${base}/contents/1`);
+            await goto(`${base}/contents/1`);
         } else {
-            goto(`${base}/text`);
+            await goto(`${base}/text`);
         }
     });
 </script>

src/routes/lexicon/+page.js

@@ -0,0 +1,37 @@
+import { base } from '$app/paths';
+import initSqlJs from 'sql.js';
+
+export async function load({ fetch }) {
+    const SQL = await initSqlJs({
+        locateFile: (file) => `https://sql.js.org/dist/${file}`
+    });
+
+    // Fetch the database file
+    const response = await fetch(`${base}/data.sqlite`);
+    const buffer = await response.arrayBuffer();
+
+    // Load the database into sql.js
+    const db = new SQL.Database(new Uint8Array(buffer));
+    console.log('Database loaded:', db);
+
+    // Example: Running a simple query
+    const results = db.exec(
+        'SELECT id, name, homonym_index, type, num_senses, summary FROM entries'
+    );
+    const result = results[0];
+    console.log(result);
+
+    const entries = [];
+    for (let value of result.values) {
+        const entry = {};
+        for (let i = 0; i < result.columns.length; ++i) {
+            entry[result.columns[i]] = value[i];
+        }
+        entries.push(entry);
+    }
+    console.log(entries);
+
+    return {
+        entries
+    };
+}

src/routes/lexicon/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import Navbar from '$lib/components/Navbar.svelte';
+    import config from '$lib/data/config';
+
+    const { entries } = $page.data;
+</script>
+
+<div class="grid grid-rows-[auto,1fr]" style="height:100vh;height:100dvh;">
+    <div class="navbar">
+        <Navbar showBackButton={false}>
+            <!-- <div slot="left-buttons" /> -->
+            <label for="sidebar" slot="center">
+                <div class="btn btn-ghost normal-case text-xl">{config.name}</div>
+            </label>
+            <!-- <div slot="right-buttons" /> -->
+        </Navbar>
+    </div>
+    <div class="overflow-y-auto max-w-screen-md">
+        <div id="container" class="lexicon">
+            <ul>
+                {#if entries.length > 0}
+                    {#each entries as entry}
+                        <li>{entry.name}</li>
+                    {/each}
+                {:else}
+                    <li>No entries available or table 'entries' not found.</li>
+                {/if}
+            </ul>
+        </div>
+    </div>
+</div>