From e495960196235e0e5adfecd143e42b822e56335e Mon Sep 17 00:00:00 2001
From: Eamonn de Leastar <edeleastar@wit.ie>
Date: Thu, 12 Dec 2024 17:55:19 +0000
Subject: [PATCH] finalised first version of sjiki code themes

---
 src/lib/runes.ts                              |  1 -
 src/lib/services/models/markdown-utils.ts     | 20 +++++++++++++++----
 .../ui/learning-objects/content/Lab.svelte    |  2 +-
 src/lib/ui/themes/LayoutMenu.svelte           | 12 +++++------
 src/lib/ui/themes/theme-controller.svelte.ts  |  5 ++---
 5 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/lib/runes.ts b/src/lib/runes.ts
index 36854e68..104364e7 100644
--- a/src/lib/runes.ts
+++ b/src/lib/runes.ts
@@ -7,7 +7,6 @@ export const layout = rune("expanded");
 export const lightMode = rune("light");
 export const currentTheme = rune("tutors");
 export const currentCodeTheme = rune("monokai");
-export const refreshCodeTheme = rune(false);
 
 export const currentLo = rune<Lo | null>(null);
 export const currentCourse = rune<Course | null>(null);
diff --git a/src/lib/services/models/markdown-utils.ts b/src/lib/services/models/markdown-utils.ts
index 60a29f77..ec567ca6 100644
--- a/src/lib/services/models/markdown-utils.ts
+++ b/src/lib/services/models/markdown-utils.ts
@@ -50,8 +50,9 @@ import solarizedDark from "shiki/themes/solarized-dark.mjs";
 import solarizedLight from "shiki/themes/solarized-light.mjs";
 import nightOwl from "shiki/themes/night-owl.mjs";
 import githubDark from "shiki/themes/github-dark.mjs";
-import catppuccinMocha from "shiki/themes/catppuccin-mocha.mjs";
-
+import dracula from "shiki/themes/dracula.mjs";
+import snazziLight from "shiki/themes/snazzy-light.mjs";
+import githubLightHighContrast from "shiki/themes/github-light-high-contrast.mjs";
 const languages = [
   js,
   ts,
@@ -77,15 +78,26 @@ const languages = [
   html
 ];
 
+export const codeThemes = [
+  monokai,
+  solarizedLight,
+  githubDark,
+  githubLightHighContrast,
+  nightOwl,
+  dracula,
+  solarizedDark,
+  snazziLight
+];
+
 const shiki = createHighlighterCoreSync({
-  themes: [monokai, nightOwl, githubDark, catppuccinMocha, solarizedDark, solarizedLight],
+  themes: codeThemes,
   langs: languages,
   engine: createJavaScriptRegexEngine()
 });
 
 let currentTheme = "monokai";
 
-export const markdownIt: any = new MarkdownIt({
+export const markdownIt = new MarkdownIt({
   html: true, // Enable HTML tags in source
   xhtmlOut: false, // Use '/' to close single tags (<br />).
   breaks: false, // Convert '\n' in paragraphs into <br>
diff --git a/src/lib/ui/learning-objects/content/Lab.svelte b/src/lib/ui/learning-objects/content/Lab.svelte
index a78f81fe..91448ef2 100644
--- a/src/lib/ui/learning-objects/content/Lab.svelte
+++ b/src/lib/ui/learning-objects/content/Lab.svelte
@@ -6,7 +6,7 @@
   import type { LiveLab } from "$lib/services/models/live-lab";
   import { fly } from "svelte/transition";
   import { slideFromLeft } from "$lib/ui/themes/animations";
-  import { currentCodeTheme, refreshCodeTheme } from "$lib/runes";
+  import { currentCodeTheme } from "$lib/runes";
 
   interface Props {
     lab: LiveLab;
diff --git a/src/lib/ui/themes/LayoutMenu.svelte b/src/lib/ui/themes/LayoutMenu.svelte
index fe26386d..2c484521 100644
--- a/src/lib/ui/themes/LayoutMenu.svelte
+++ b/src/lib/ui/themes/LayoutMenu.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { currentCodeTheme, currentLo, currentTheme, lightMode, refreshCodeTheme } from "$lib/runes";
+  import { currentCodeTheme, currentLo, currentTheme, lightMode } from "$lib/runes";
   import Menu from "$lib/ui/components/Menu.svelte";
   import { layout } from "$lib/runes";
   import MenuItem from "$lib/ui/components/MenuItem.svelte";
   import Icon from "../components/Icon.svelte";
   import { themeService } from "./theme-controller.svelte";
   import { courseService } from "$lib/services/course.svelte";
+  import { codeThemes } from "$lib/services/models/markdown-utils";
 
   function changeTheme(theme: string): void {
     themeService.setTheme(theme);
@@ -14,7 +15,6 @@
   function changeCodeTheme(codeTheme: string): void {
     themeService.setCodeTheme(codeTheme);
     courseService.refreshAllLabs(codeTheme);
-    refreshCodeTheme.value = !refreshCodeTheme.value;
   }
 
   function toggleDisplayMode(): void {
@@ -62,12 +62,12 @@
   </ul>
   <h6>Code Themes</h6>
   <ul class="list">
-    {#each themeService.codeThemes as codeTheme}
+    {#each codeThemes as codeTheme}
       <MenuItem
         type="lightMode"
-        isActive={currentCodeTheme.value === codeTheme}
-        text={codeTheme}
-        onClick={() => changeCodeTheme(codeTheme)}
+        isActive={currentCodeTheme.value === codeTheme.name}
+        text={codeTheme.displayName}
+        onClick={() => changeCodeTheme(codeTheme.name)}
       />
     {/each}
   </ul>
diff --git a/src/lib/ui/themes/theme-controller.svelte.ts b/src/lib/ui/themes/theme-controller.svelte.ts
index cbc74f8d..ee51c0d1 100644
--- a/src/lib/ui/themes/theme-controller.svelte.ts
+++ b/src/lib/ui/themes/theme-controller.svelte.ts
@@ -4,6 +4,7 @@ import { FluentIconLib } from "./icons/fluent-icons";
 import { HeroIconLib } from "./icons/hero-icons";
 import { FestiveIcons } from "./icons/festive-icons";
 import { makeItSnow, makeItStopSnowing } from "./events/festive.svelte";
+import { codeThemes } from "$lib/services/models/markdown-utils";
 
 export const themeService = {
   themes: [
@@ -16,8 +17,6 @@ export const themeService = {
     { name: "cerberus", icons: FluentIconLib }
   ] as Theme[],
 
-  codeThemes: ["monokai", "night-owl", "github-dark", "catppuccin-mocha", "solarized-dark", "solarized-light"],
-
   isSnowing: false,
 
   initDisplay(forceTheme?: string, forceMode?: string): void {
@@ -65,7 +64,7 @@ export const themeService = {
     if (!theme) {
       theme = "monokai";
     }
-    if (themeService.codeThemes.includes(theme)) {
+    if (codeThemes.find((t) => t.name === theme)) {
       currentCodeTheme.value = theme;
     } else {
       currentCodeTheme.value = "monokai";