Remove Typescript, upgrade deps and switch to Vite

.gitignore

@@ -1,10 +1,10 @@
 .DS_Store
 
 node_modules
-static/bundle.css
-static/bundle.js
-static/bundle.js.map
-static/alltopics.json
+public/bundle.css
+public/bundle.js
+public/bundle.js.map
+public/alltopics.json
 
 # Developer tools' files
 .lite_workspace.lua

db/schema.sql

@@ -0,0 +1,47 @@
+PRAGMA foreign_keys=OFF;
+
+CREATE TABLE topics (
+	name VARCHAR(255) PRIMARY KEY, -- url-friendly slug
+	display_name VARCHAR(255), -- allow null, use name
+	parent_name VARCHAR(255), -- create a hierarchy with self-reference
+	sort_index INTEGER, -- used for sorting children of a parent
+	FOREIGN KEY (parent_name) REFERENCES topics(name)
+);
+
+CREATE TABLE creators (
+	id VARCHAR(255) PRIMARY KEY,
+	name VARCHAR(1024) NOT NULL,
+	image_url VARCHAR(1024),
+	bio TEXT,
+	occupation VARCHAR(255),
+	links TEXT
+);
+
+CREATE TABLE items (
+	id VARCHAR(255) PRIMARY KEY, -- uuid
+	name VARCHAR(1024) NOT NULL,
+	description VARCHAR(4096), -- in markdown
+	image_url VARCHAR(1024),
+	links TEXT NOT NULL, -- json array of {item_type, url, misc}
+	topics TEXT NOT NULL, -- json array of topic names
+	creators TEXT, -- json array of creator_ids
+	year varchar(32),
+	difficulty INTEGER,
+	cost TEXT,
+	rating INTEGER, -- scale of 1 to 100, divide by 10 if needed
+	tags TEXT
+);
+
+CREATE TABLE reviews (
+	item_id VARCHAR(255) NOT NULL,
+	by_item VARCHAR(255),
+	by_creator VARCHAR(255),
+	rating INTEGER, -- scale of 1 to 100, divide by 10 if needed
+	blurb TEXT,
+	url VARCHAR(1024),
+	PRIMARY KEY (item_id, by_item, by_creator),
+	FOREIGN KEY (item_id) REFERENCES items(id),
+	FOREIGN KEY (by_item) REFERENCES items(id),
+	FOREIGN KEY (by_creator) REFERENCES creators(id),
+	CHECK(by_item IS NOT NULL OR by_creator IS NOT NULL) -- one of the two must be present. Ideally both.
+)

index.html

@@ -55,8 +55,9 @@
 
 		window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => e.matches ? darkmode() : lightmode());
 	</script>
-	<script src="/static/bundle.js" defer></script>
-	<link href="/static/bundle.css" rel="stylesheet" />
+	
+	<script type="module" src='/src/main.js'></script>
+
 	<link rel="stylesheet"
 		href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.86/dist/themes/light.css" />
 	<script type="module"

package.json

@@ -2,31 +2,18 @@
   "name": "learndb",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "start": "sirv static --single --dev"
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview"
   },
   "devDependencies": {
-    "@rgossiaux/svelte-headlessui": "^1.0.1",
+    "@rgossiaux/svelte-headlessui": "^1.0.2",
     "@rgossiaux/svelte-heroicons": "^0.1.2",
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
-    "@tsconfig/svelte": "^3.0.0",
-    "rollup": "^2.3.4",
-    "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "rollup-plugin-typescript2": "^0.31.2",
-    "svelte": "^3.0.0",
-    "svelte-check": "^2.7.1",
-    "svelte-preprocess": "^4.10.6",
-    "tslib": "^2.4.0",
-    "typescript": "^4.7.2"
-  },
-  "dependencies": {
-    "sirv-cli": "^2.0.2"
+	"@sveltejs/vite-plugin-svelte": "^2.0.2",
+    "svelte": "^3.55.0",
+    "vite": "^4.0.3"
   }
 }

src/BookCard.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">
-  export let item: {name: string, creators: string, iid: number, image: string | null, rating: number};
+<script>
+  export let item;
   import { randomCover } from './utility.js';
   
 </script>

src/GenericCard.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">
-  export let item: {name: string, creators: string, iid: number};
+<script>
+  export let item;
 </script>
 
 <a class="flex flex-wrap p-2 sm:p-8 justify-between rounded break-inside-avoid sm:w-64 max-w-sm bg-primary_light text-primary hover:rounded-3xl border border-secondary ease-in-out duration-300" href="#/item/{item.iid}">

src/Review.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">
-    export let review: any;
+<script>
+    export let review;
 </script>
 
 <style>

src/TopicMasonryGrid.svelte

@@ -1,6 +1,6 @@
-<script lang="ts">
+<script>
     export let topicname = null; // undefined for top level
-    let topic: {display_name: string, parent_id: string, name: string};
+    let topic;
     export let alltopics;
     let map = new Map();
 

src/VideoCard.svelte

@@ -1,7 +1,7 @@
-<script lang="ts">
+<script>
   // import ButtonGroup from "./ButtonGroup.svelte";
   // import { oEmdedProviders } from "./oEmbedProviders.js"
-  export let item: {image: string | null, name: string, creators: string, iid: number };
+  export let item;
   let oEmded_image_ytb_url = null;
 
   function oEmded_image(item){

static/index.html

@@ -1,86 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<script src="//cdn.tailwindcss.com/?plugins=forms,typography,aspect-ratio,line-clamp"></script>
-		<script>
-			tailwind.config = {
-				theme: {
-					extend: {
-						colors: {
-
-							primary: '#1e3a8a', //blue-900
-							primary_light: '#FAFAFA', //neutral-50
-							neutral_light: '#e5e5e5', // neutral-200
-							neutral_dark: '#262626', // neutral-800
-							secondary: '#6B21A8', // purple-800
-							// primary_medium: '#60A5FA', //blue-400
-							gradOne: '#DBEAFE', //blue-100
-							gradTwo: '#F3E8FF', //purple-100
-						},
-					},
-					fontFamily: {
-							sans: ['Gentium Plus', 'sans'],
-							serif: ['Libre Franklin','serif']
-					}
-				}
-			}
-
-		function darkmode(){
-			return;
-      tailwind.config.theme.extend.colors.primary = '#787A91';
-      tailwind.config.theme.extend.colors.primary_light = '#262626';
-      tailwind.config.theme.extend.colors.neutral_light = '#737373';
-      tailwind.config.theme.extend.colors.neutral_dark = '#FAFAFA';
-      tailwind.config.theme.extend.colors.secondary = '#FAFAFA';
-      tailwind.config.theme.extend.colors.gradOne = '#444444';
-      tailwind.config.theme.extend.colors.gradTwo = '#171717';
-      tailwind.config.theme.extend.colors.primary_medium = '#141E61';
-    }
-
-		function lightmode(){
-      tailwind.config.theme.extend.colors.primary = '#1E3A8A';
-      tailwind.config.theme.extend.colors.primary_light = '#FAFAFA';
-      tailwind.config.theme.extend.colors.neutral_light = '#e5e5e5';
-      tailwind.config.theme.extend.colors.neutral_dark = '#262626';
-      tailwind.config.theme.extend.colors.secondary = '#6B21A8';
-      tailwind.config.theme.extend.colors.gradOne = '#DBEAFE';
-      tailwind.config.theme.extend.colors.gradTwo = '#F3E8FF';
-      tailwind.config.theme.extend.colors.primary_medium = '#60A5FA';
-    }
-
-		window.matchMedia("(prefers-color-scheme: dark)").matches ? darkmode() : lightmode();
-		
-		window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",   e => e.matches ? darkmode() : lightmode() );
-		</script>	
-    
-        <script src="/bundle.js" defer></script>
-		<link href="/bundle.css" rel="stylesheet" />
-		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/themes/light.css" />
-		<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/shoelace.js"></script>
-		<script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
-		<title>LearnAwesome</title>
-
-		<!-- fonts  -->
-		<link rel="preconnect" href="https://fonts.googleapis.com">
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-		<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400;500&display=swap" rel="stylesheet">
-
-		<!-- fonts Gentium Plus -->
-		<link rel="preconnect" href="https://fonts.googleapis.com">
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-		<link href="https://fonts.googleapis.com/css2?family=Gentium+Plus:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> 
-
-		<!-- Neutralino.js client. This file is gitignored, 
-        because `neu update` typically downloads it.
-        Avoid copy-pasting it. 
-        -->
-		<script src="/neutralino.js"></script>
-		<!-- Your app's source files -->
-		<script src="/neutra.js"></script>
-	</head>
-	<body class="max-w-none mx-auto h-full bg-gradient-to-r from-gradOne to-gradTwo text-nutral_dark font-serif">
-		<div class="h-full" id="app"></div>
-	</body>
-</html>

vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+})