kaytex support reintroduced

apps/course/package.json

@@ -6,19 +6,21 @@
     "build": "vite build",
     "package": "vite package",
     "preview": "vite preview",
+    "prepare": "svelte-kit sync",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check --ignore-path=../../.prettierignore . && TIMING=1 eslint \"src\"",
     "format": "prettier --write --ignore-path=../../.prettierignore ."
   },
   "devDependencies": {
     "@bobthered/tailwindcss-palette-generator": "^3.1.1",
-    "@floating-ui/dom": "^1.3.0",
-    "@skeletonlabs/skeleton": "^1.7.1",
+    "@floating-ui/dom": "^1.4.3",
+    "@skeletonlabs/skeleton": "^1.8.0",
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/adapter-netlify": "^2.0.7",
-    "@sveltejs/kit": "1.20.2",
+    "@sveltejs/kit": "1.21.0",
     "@types/auth0-js": "^9.21.0",
+    "@types/showdown": "2.0.1",
     "auth0-js": "^9.21.0",
     "autoprefixer": "^10.4.14",
     "buffer": "^6.0.3",
@@ -28,22 +30,15 @@
     "postcss-load-config": "^4.0.1",
     "prettier": "^2.8.8",
     "svelte": "^3.59.1",
-    "svelte-check": "^3.4.3",
+    "svelte-check": "^3.4.4",
     "svelte-preprocess": "^5.0.4",
     "tailwindcss": "^3.3.2",
-    "tslib": "^2.5.3",
+    "tslib": "^2.6.0",
     "tutors-reader-lib": "*",
     "tutors-ui": "*",
-    "typescript": "^5.1.3",
+    "typescript": "^5.1.6",
     "ui": "*",
-    "vite": "^4.3.9",
-    "@types/showdown": "2.0.1",
-    "showdown": "2.1.0",
-    "showdown-copy-code": "^1.0.2",
-    "showdown-custom-class": "^1.0.0",
-    "showdown-emoji": "^3.0.0",
-    "showdown-highlight": "^3.1.0",
-    "showdown-katex": "^0.8.0"
+    "vite": "^4.3.9"
   },
   "type": "module"
 }

apps/course/src/lib/markdown/rich-markdown.ts

@@ -0,0 +1,32 @@
+// import showdown from "showdown";
+// import showdownHighlight from "showdown-highlight";
+// import { showdownCopyCode } from "showdown-copy-code";
+// import customClassExt from "showdown-custom-class";
+// import { initRichConverter } from "tutors-reader-lib/src/utils/markdown-utils";
+
+// let converter: any;
+
+// function convertMdToHtml(md: string): string {
+//     return converter.makeHtml(md);
+// }
+
+// export async function initKaytex() {
+//     //const kaytex = await import("showdown-katex");
+//     let showdownConverter = new showdown.Converter({
+//         tables: true,
+//         emoji: true,
+//         openLinksInNewWindow: true,
+//         extensions: [
+//             showdownHighlight,
+//             customClassExt,
+//             showdownCopyCode,
+//             // kaytex.default({
+//             //     throwOnError: false,
+//             //     displayMode: true,
+//             //     errorColor: "red"
+//             // })
+//         ]
+//     });
+//     converter = showdownConverter;
+//     initRichConverter(convertMdToHtml);
+// }

apps/course/src/routes/+layout.svelte

@@ -19,13 +19,12 @@
   import { getKeys } from "../environment";
   import TutorsTerms from "$lib/support/TutorsTerms.svelte";
   import { analyticsService } from "tutors-reader-lib/src/services/analytics-service";
-  import { initMarkdownParser, initServices } from "./tutors-startup";
+  import { initServices } from "./tutors-startup";
   import Sidebars from "$lib/navigators/sidebars/Sidebars.svelte";
 
   let mounted = false;
   const themes: any = { tutors, dyslexia, halloween, valentines };
   let currentRoute = "";
-  initMarkdownParser();
 
   storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
 

apps/course/src/routes/lab/[courseid]/[...loid]/+page.svelte

@@ -4,9 +4,23 @@
   import type { PageData } from "./$types";
   import { goto, afterNavigate } from "$app/navigation";
   export let data: PageData;
+  import { page } from "$app/stores";
+  import { initKaytex } from "tutors-reader-lib/src/utils/markdown-utils";
+
+  let refresh = true;
 
   onMount(async () => {
     window.addEventListener("keydown", keypressInput);
+
+    await initKaytex();
+    data.lab.convertMd();
+    const lastSegment = $page.url.pathname.substring($page.url.pathname.lastIndexOf("/") + 1);
+    if (lastSegment.startsWith("book")) {
+      data.lab.setFirstPageActive();
+    } else {
+      data.lab.setActivePage(lastSegment);
+    }
+    refresh = !refresh;
   });
 
   onDestroy(() => {
@@ -15,7 +29,7 @@
 
   afterNavigate(() => {
     const elemPage = document.querySelector("#page");
-    elemPage.scrollTop = 0;
+    if (elemPage) elemPage.scrollTop = 0;
   });
 
   async function keypressInput(e: KeyboardEvent) {
@@ -32,19 +46,11 @@
 </script>
 
 <svelte:head>
-  <!-- <script
-    src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.4/katex.min.js"
-    integrity="sha512-DAZH0Wu7q9Hnm0Fw8tRZsTeQBzIugiUy6k2r7E0KKMlC2nBvvrNSH/LVnGueCXRfDs5epP+Ieoh3L+VzSKi0Aw=="
-    crossorigin="anonymous"
-    referrerpolicy="no-referrer"
-  ></script>
   <link
     rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.4/katex.min.css"
-    integrity="sha512-nii0D5CrWiLjtPcfU3pQJifaRLxKKVut/hbsazsodCcIOERZbwLH7dQxzOKy3Ey/Fv8fXCA9+Rf+wQzqklbEJQ=="
-    crossorigin="anonymous"
-    referrerpolicy="no-referrer"
-  /> -->
+    href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css"
+    integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn"
+    crossorigin="anonymous" />
 </svelte:head>
 
 <div class="block fixed w-full mx-auto bottom-0 lg:hidden bg-primary-50-900-token z-30">
@@ -67,7 +73,9 @@
     <div id="lab-panel" class="flex-1 w-1/2 min-h-screen">
       <div class="card bg-surface-100-800-token p-8 lg:px-4 py-8 m-2 rounded-xl">
         <article class="mx-auto prose dark:prose-invert max-w-none w-[80%]">
-          {@html data.lab.content}
+          {#key refresh}
+            {@html data.lab.content}
+          {/key}
         </article>
       </div>
     </div>

apps/course/src/routes/lab/[courseid]/[...loid]/+page.ts

@@ -1,9 +1,9 @@
-import { initMarkdownParser } from "../../../tutors-startup";
 import type { PageLoad } from "./$types";
 import { courseService } from "tutors-reader-lib/src/services/course-service";
 
+export const ssr = false;
+
 export const load: PageLoad = async ({ url, params }) => {
-  initMarkdownParser();
   const lab = await courseService.readLab(params.courseid, url.pathname);
   const lastSegment = url.pathname.substring(url.pathname.lastIndexOf("/") + 1);
   if (lastSegment.startsWith("book")) {

apps/course/src/routes/note/[courseid]/[...loid]/+page.svelte

@@ -7,9 +7,7 @@
 {#if data.lo}
   <div class="min-h-screen flex w-11/12 mx-auto">
     <div class="w-full">
-      {#key data.lo}
-        <NoteCard lo="{data.lo}" />
-      {/key}
+      <NoteCard lo="{data.lo}" />
     </div>
     <div class="hidden md:block">
       <TopicNavigatorCard topic="{data.lo.parent}" />

apps/course/src/routes/note/[courseid]/[...loid]/+page.ts

@@ -1,7 +1,7 @@
 import type { PageLoad } from "./$types";
 import { courseService } from "tutors-reader-lib/src/services/course-service";
 
-
+export const ssr = false;
 
 export const load: PageLoad = async ({ url, params }) => {
   const lo = await courseService.readLo(params.courseid, url.pathname);

apps/course/src/routes/search/[courseid]/+page.ts

@@ -3,6 +3,8 @@ import { courseService } from "tutors-reader-lib/src/services/course-service";
 import type { Course } from "tutors-reader-lib/src/models/course";
 import { currentLo } from "tutors-reader-lib/src/stores/stores";
 
+export const ssr = false;
+
 export const load: PageLoad = async ({ params }) => {
   const course: Course = await courseService.readCourse(params.courseid);
   currentLo.set(course.lo);

apps/course/src/routes/talk/[courseid]/[...loid]/+page.ts

@@ -1,7 +1,7 @@
 import type { PageLoad } from "./$types";
 import { courseService } from "tutors-reader-lib/src/services/course-service";
 
-
+export const ssr = false;
 
 export const load: PageLoad = async ({ url, params }) => {
   const lo = await courseService.readLo(params.courseid, url.pathname);

apps/course/src/routes/tutors-startup.ts

@@ -6,42 +6,6 @@ import { presenceService } from "tutors-reader-lib/src/services/presence-service
 import { initFirebase } from "tutors-reader-lib/src/utils/firebase-utils";
 import { getKeys } from "../environment";
 import { goto } from "$app/navigation";
-import showdown from "showdown";
-import showdownHighlight from "showdown-highlight";
-import { showdownCopyCode } from "showdown-copy-code";
-import showdownKatex from "showdown-katex";
-//const showdownKatex = await import('showdown-katex');
-import customClassExt from "showdown-custom-class";
-import { initConverter } from "tutors-reader-lib/src/utils/markdown-utils";
-
-let converter: any;
-
-function convertMdToHtml(md: string): string {
-  return converter.makeHtml(md);
-}
-
-export function initMarkdownParser() {
-  let showdownConverter = new showdown.Converter({
-    tables: true,
-    emoji: true,
-    openLinksInNewWindow: true,
-    extensions: [
-      showdownHighlight,
-      customClassExt,
-      showdownCopyCode,
-      showdownKatex({
-        // maybe you want katex to throwOnError
-        throwOnError: false,
-        // disable displayMode
-        displayMode: false,
-        // change errorColor to blue
-        errorColor: "red"
-      })
-    ]
-  })
-  converter = showdownConverter;
-  initConverter(convertMdToHtml);
-}
 
 export async function initServices() {
   if (getKeys().firebase.apiKey !== "XXX") {

apps/course/src/routes/video/[courseid]/[...loid]/+page.ts

@@ -1,6 +1,8 @@
 import type { PageLoad } from "./$types";
 import { courseService } from "tutors-reader-lib/src/services/course-service";
 
+export const ssr = false;
+
 export const load: PageLoad = async ({ url, params }) => {
   let videoId = url.pathname;
   let videoStartEnd = url.searchParams.toString();

apps/course/src/routes/wall/[type]/[courseid]/+page.ts

@@ -2,6 +2,8 @@ import type { PageLoad } from "./$types";
 import { courseService } from "tutors-reader-lib/src/services/course-service";
 import { currentLo } from "tutors-reader-lib/src/stores/stores";
 
+export const ssr = false;
+
 export const load: PageLoad = async ({ params }) => {
   const course = await courseService.readCourse(params.courseid);
   const los = await courseService.readWall(params.courseid, params.type);