not much, mostly reverting to earlier code that works better

modulearn/package.json

@@ -9,7 +9,10 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-node-resolve": "^8.0.0",
-    "svelte-youtube": "https://github.com/zevaverbach/svelte-youtube.git",
+    "eslint": "^7.10.0",
+    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-svelte3": "^2.7.3",
     "rollup": "^2.3.4",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^6.0.0",
@@ -17,6 +20,8 @@
     "svelte": "^3.0.0"
   },
   "dependencies": {
+    "@sveltecasts/svelte-youtube": "git+https://github.com/zevaverbach/svelte-youtube.git",
+    "g": "^2.0.1",
     "sirv-cli": "^1.0.0"
   }
 }

modulearn/src/.eslintrc.js

@@ -0,0 +1,40 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'airbnb-base',
+  ],
+  plugins: [
+    'svelte3',
+  ],
+  parserOptions: {
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+	"import/resolver": {
+      "node": {
+		  "paths": ["../node_modules"]
+      }
+    },
+  overrides: [
+    {
+      files: ['*.svelte'],
+      processor: 'svelte3/svelte3',
+      rules: {
+        'import/first': 0,
+        'import/no-duplicates': 0,
+        'import/no-mutable-exports': 0,
+        'no-restricted-syntax': 0,
+        'arrow-parens': 0,
+        'import/no-extraneous-dependencies': 0,
+        'import/prefer-default-export': 0,
+        quotes: 0,
+      },
+    },
+  ],
+  rules: {
+    semi: 0,
+  },
+};

modulearn/src/App.svelte

@@ -1,12 +1,12 @@
 <script>
-  import Youtube from "svelte-youtube";
+  import Youtube from '@sveltecasts/svelte-youtube'
   import { onMount } from 'svelte';
 
-  import Modules from "./Modules.svelte"
+  import Modules from './Modules.svelte'
-  import { currentModule } from "./stores"
+  import currentModule from './stores'
-  import DATA from "./data"
+  import DATA from './data'
 
-  let video, position, interval;
+  let video; let position; let interval;
 
   // TODO: load data from JSON or an API
   // TODO: validate the data: overlaps? gaps? (gaps should be ok).
@@ -14,9 +14,6 @@
   //   - youtube iframes can have a start/end time, for example
   // TODO: (depends on above) enable search
 
-  
-  onMount(() => positionUpdater())
-
   const positionUpdater = () => {
     interval = setInterval(() => {
       position = video.position()
@@ -45,6 +42,8 @@
     }
   }
 
+  onMount(() => positionUpdater())
+
 </script>
 
 <main>
@@ -53,6 +52,13 @@
 </main>
 
 <style>
+  @media (prefers-color-scheme: dark) {
+    :global(body) {
+      background-color: #222;
+      color: #ddd;
+    }
+  }
+
   main {
     text-align: center;
     padding: 1em;
@@ -60,13 +66,6 @@
     margin: 0 auto;
   }
 
-  h1 {
-    color: #ff3e00;
-    text-transform: uppercase;
-    font-size: 4em;
-    font-weight: 100;
-  }
-
   @media (min-width: 640px) {
     main {
         max-width: none;

modulearn/src/Module.svelte

@@ -1,32 +1,37 @@
 <script>
   import { createEventDispatcher } from 'svelte';
-  import { currentModule } from "./stores.js"
+  import currentModule from "./stores"
 
   const dispatcher = createEventDispatcher()
 
   export let module
-  let class_
+  let klass
-  $: class_ = $currentModule === module.name ? "current" : ""
+  $: klass = $currentModule === module.name ? "current" : ""
 
   // TODO: add checkboxes for 'want to watch'
   // TODO: gray out watched modules
-
 </script>
 
-<div on:click={() => dispatcher("selectModule", {module})} class="{class_}">I want to {module.outcome}.</div>
+<div on:click={() => dispatcher("selectModule", { module })} class="{klass}"><span>I want to {module.outcome}.</span></div>
 
 
 <style>
-  div {
+  @media (prefers-color-scheme: light) {
-    padding: .3em;
+    div.current span { background-color: yellow;}
+    div span:hover { background-color: lightgrey; }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    div.current span { background-color: blue; }
+    div span:hover {
+      background-color: lavender;
+      color: #222;
+    }
+  }
+
+  div { padding: .3em; }
+  span {
     cursor: pointer;
+    padding: .3em;
   }
-  div.current {
-    background-color: yellow;
-  }
-
-  div:hover {
-    background-color: lightgrey;
-  }
-
 </style>

modulearn/src/Modules.svelte

@@ -1,7 +1,6 @@
 <script>
   export let modules
   import Module from "./Module.svelte"
-
 </script>
 
 <span style="float: left">

modulearn/src/data.js

@@ -1,67 +1,67 @@
 export default {
-  platform: "YouTube",
+  platform: 'YouTube',
-  uid: "ZPxuohy5SoU",
+  uid: 'ZPxuohy5SoU',
   prereqs: [
-    "I know Python to some extent.",
+    'I know Python to some extent.',
-    "I know data science and ETL to some extent."
+    'I know data science and ETL to some extent.',
   ],
   outcomes: [
-    "I know how to use Kedro in a basic way."
+    'I know how to use Kedro in a basic way.',
   ],
   modules: [
     {
-      name: "Intro: Tom Goldenberg",
+      name: 'Intro: Tom Goldenberg',
       start: 29,
       end: 116,
-      outcome: "know who Tom Goldenberg is"
+      outcome: 'know who Tom Goldenberg is',
     },
     {
-      name: "Intro: QuantumBlack",
+      name: 'Intro: QuantumBlack',
       start: 116,
       end: 177,
-      outcome: "know something about QuantumBlack"
+      outcome: 'know something about QuantumBlack',
     },
     {
-      name: "Intro: Agenda",
+      name: 'Intro: Agenda',
       start: 177,
       end: 242,
-      outcome: "know what the agenda is"
+      outcome: 'know what the agenda is',
     },
     {
-      name: "Intro: Kedro",
+      name: 'Intro: Kedro',
       start: 242,
       end: 523,
-      outcome: "know what Kedro is"
+      outcome: 'know what Kedro is',
     },
     {
-      name: "Intro: kedro-viz",
+      name: 'Intro: kedro-viz',
       start: 523,
       end: 558,
-      outcome: "know what kedro-viz is"
+      outcome: 'know what kedro-viz is',
     },
     {
-      name: "Intro: MLFlow",
+      name: 'Intro: MLFlow',
       start: 558,
       end: 871,
-      outcome: "know what MLFlow is"
+      outcome: 'know what MLFlow is',
     },
     {
-      name: "installing Kedro and prereqs",
+      name: 'installing Kedro and prereqs',
       start: 871,
       end: 939,
-      outcome: "have pandas/conda and kedro installed"
+      outcome: 'have pandas/conda and kedro installed',
     },
     {
-      name: "create a virtual environment",
+      name: 'create a virtual environment',
       start: 939,
       end: 1038,
-      outcome: "have an activated virtual environment for playing with kedro (`kedro info` produces something)"
+      outcome: 'have an activated virtual environment for playing with kedro (`kedro info` produces something)',
     },
     {
-      name: "create a kedro project",
+      name: 'create a kedro project',
       start: 1038,
       end: 1175,
-      outcome: "create a new kedro project"
+      outcome: 'create a new kedro project',
     },
   ],
-}
+};

modulearn/src/main.js

@@ -1,7 +1,7 @@
 import App from './App.svelte';
 
 const app = new App({
-	target: document.body,
+  target: document.body,
 });
 
 export default app;

modulearn/src/stores.js

@@ -1,4 +1,5 @@
-import { writable } from 'svelte/store'
+import { writable } from 'svelte/store';
 
-export const currentModule = writable(null)
+const currentModule = writable(null);
 
+export default currentModule