tutors-sdk · edeleastar · Dec 6, 2024 · Nov 22, 2024 · Nov 23, 2024 · Nov 23, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,28 +12,27 @@
     "lint": "prettier --check . && eslint ."
   },
   "devDependencies": {
-    "@auth/core": "^0.37.3",
-    "@auth/sveltekit": "^1.7.3",
-    "@floating-ui/dom": "^1.6.12",
+    "@auth/core": "^0.37.4",
+    "@auth/sveltekit": "^1.7.4",
     "@iconify/svelte": "^4.0.2",
     "@iktakahiro/markdown-it-katex": "^4.0.1",
-    "@skeletonlabs/skeleton": "^2.10.3",
-    "@skeletonlabs/tw-plugin": "^0.4.0",
+    "@skeletonlabs/skeleton": "^3.0.0-next.9",
+    "@skeletonlabs/skeleton-svelte": "^1.0.0-next.14",
     "@supabase/supabase-js": "^2.46.1",
-    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/adapter-auto": "^3.3.1",
     "@sveltejs/adapter-netlify": "^4.3.6",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@sveltejs/kit": "^2.8.4",
+    "@sveltejs/vite-plugin-svelte": "^4.0.2",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
-    "@types/eslint": "^9.6.0",
-    "@types/node": "^22.9.0",
+    "@types/eslint": "^9.6.1",
+    "@types/node": "^22.10.0",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.7.0",
+    "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.36.0",
+    "eslint-plugin-svelte": "^2.46.0",
     "file-saver": "^2.0.5",
-    "globals": "^15.0.0",
+    "globals": "^15.12.0",
     "highlight.js": "^11.10.0",
     "markdown-it": "^14.1.0",
     "markdown-it-anchor": "^9.2.0",
@@ -47,14 +46,14 @@
     "markdown-it-table-of-contents": "^0.8.0",
     "partysocket": "^1.0.2",
     "pdfjs-dist": "^4.8.69",
-    "prettier": "^3.3.2",
-    "prettier-plugin-svelte": "^3.2.6",
-    "prettier-plugin-tailwindcss": "^0.6.5",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.0.0",
-    "tailwindcss": "^3.4.9",
-    "typescript": "^5.0.0",
-    "typescript-eslint": "^8.0.0",
-    "vite": "^5.0.3"
+    "prettier": "^3.4.0",
+    "prettier-plugin-svelte": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "svelte": "^5.2.8",
+    "svelte-check": "^4.1.0",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.16.0",
+    "vite": "^5.4.11"
   }
 }
diff --git a/src/app.css b/src/app.css
diff --git a/src/app.html b/src/app.html
@@ -16,6 +16,7 @@
       href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
+    <script src="https://cdn.jsdelivr.net/npm/@tsparticles/preset-snow@3/tsparticles.preset.snow.bundle.min.js"></script>
   </head>
 
   <body data-theme="tutors">

diff --git a/src/app.postcss b/src/app.postcss
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
+html,
+body {
+  @apply h-full overflow-hidden;
+}
diff --git a/src/lib/runes.ts b/src/lib/runes.ts
@@ -2,10 +2,22 @@ import type { Lo, Course } from "$lib/services/models/lo-types";
 import { rune } from "./services/utils/runes.svelte";
 
 export const transitionKey = rune("");
+
 export const layout = rune("expanded");
+export const lightMode = rune("light");
+export const currentTheme = rune("tutors");
 
 export const currentLo = rune<Lo | null>(null);
 export const currentCourse = rune<Course | null>(null);
 export const courseUrl = rune("");
 export const currentLabStepIndex = rune(0);
-export const currentTheme = rune("tutors");
+
+export const cardHeight = rune("380px");
+export const headingText = rune("!text-lg font-semibold");
+export const cardWidths = rune("w-60 h-[21rem]");
+export const iconHeight = rune("140");
+export const imageHeight = rune("h-32");
+export const textSize = rune("text-base");
+export const avatarWidth = rune("w-12");
+
+export const animationDelay = rune(200);
diff --git a/src/lib/services/connect.svelte.ts b/src/lib/services/connect.svelte.ts
@@ -74,8 +74,16 @@ export const tutorsConnectService: TutorsConnectService = {
     }
   },
 
-  deleteCourseVisit(courseId: string) {
-    this.profile.deleteCourseVisit(courseId);
+  async favouriteCourse(courseId: string) {
+    await this.profile.favouriteCourse(courseId);
+  },
+
+  async unfavouriteCourse(courseId: string) {
+    await this.profile.unfavouriteCourse(courseId);
+  },
+
+  async deleteCourseVisit(courseId: string) {
+    await this.profile.deleteCourseVisit(courseId);
   },
 
   getCourseVisits(): Promise<CourseVisit[]> {

diff --git a/src/lib/services/models/course-utils.ts b/src/lib/services/models/course-utils.ts
@@ -1,4 +1,4 @@
-import { addIcon } from "$lib/ui/themes/styles/icon-lib.svelte";
+import { themeService } from "$lib/ui/themes/theme-controller.svelte";
 import type { Composite, Course, IconNav, Lo, LoType, Topic } from "./lo-types";
 import { filterByType, setShowHide } from "./lo-utils";
 
@@ -51,7 +51,7 @@ export function createCompanions(course: Course) {
   if (course.properties.companions) {
     for (const [key, value] of Object.entries(course.properties.companions)) {
       const companion: any = value;
-      addIcon(key, companion.icon);
+      themeService.addIcon(key, companion.icon);
       course.companions.bar.push({
         link: companion.link,
         type: key,

diff --git a/src/lib/services/models/live-lab.ts b/src/lib/services/models/live-lab.ts
@@ -9,8 +9,8 @@ function getKeyIndex(map: Map<string, string>, targetKey: string) {
 }
 
 function truncate(input: string) {
-  if (input?.length > 16) {
-    return input.substring(0, 15) + "...";
+  if (input?.length > 24) {
+    return input.substring(0, 20) + "...";
   }
   return input;
 }
@@ -77,7 +77,7 @@ export class LiveLab {
       const prevTitle = prevChapter ? truncate(this.chaptersTitles.get(prevChapter.shortTitle)) : "";
       if (prevTitle) number = this.autoNumber ? prevChapter.shortTitle + ": " : "";
       this.horizontalNavbarHtml = prevChapter
-        ? `<a class="btn btn-sm capitalize" href="${this.url}/${encodeURI(prevChapter.shortTitle)}"> <span aria-hidden="true">&larr;</span>&nbsp; ${number}${prevTitle} </a>`
+        ? `<a class="btn btn-sm text-base capitalize" href="${this.url}/${encodeURI(prevChapter.shortTitle)}"> <span aria-hidden="true">&larr;</span>&nbsp; ${number}${prevTitle} </a>`
         : "";
 
       number = "";
@@ -87,7 +87,7 @@ export class LiveLab {
       // @ts-ignore
       const nextTitle = nextChapter ? truncate(this.chaptersTitles.get(nextChapter.shortTitle)) : "";
       this.horizontalNavbarHtml += nextChapter
-        ? `<a class="ml-auto btn btn-sm capitalize" style="margin-left: auto" href="${this.url}/${encodeURI(
+        ? `<a class="ml-auto btn btn-sm capitalize text-base" style="margin-left: auto" href="${this.url}/${encodeURI(
             nextChapter.shortTitle
           )}"> ${number}${nextTitle} &nbsp;<span aria-hidden="true">&rarr;</span></a>`
         : "";

diff --git a/src/lib/services/models/lo-types.ts b/src/lib/services/models/lo-types.ts
@@ -54,6 +54,13 @@ export type IconNavBar = {
   bar: IconNav[];
 };
 
+export type IconLib = Record<string, IconType>;
+
+export type Theme = {
+  name: string;
+  icons: IconLib;
+};
+
 export interface LearningRecord {
   date: Date;
   pageLoads: number;

diff --git a/src/lib/services/models/markdown-utils.ts b/src/lib/services/models/markdown-utils.ts
@@ -93,9 +93,12 @@ function filter(src: string, url: string): string {
   let filtered = replaceAll(src, "./img\\/", `img/`);
   filtered = replaceAll(filtered, "img\\/", `https://${url}/img/`);
   filtered = replaceAll(filtered, "./archives\\/", `archives/`);
-  filtered = replaceAll(filtered, "archives\\/", `https://${url}/archives/`);
-  filtered = replaceAll(filtered, "./archive\\/(?!refs)", `archive/`);
-  filtered = replaceAll(filtered, "archive\\/(?!refs)", `https://${url}/archive/`);
+
+  //filtered = replaceAll(filtered, "archives\\/", `https://${url}/archives/`);
+  filtered = replaceAll(filtered, "(?<!/)archives\\/", `https://${url}/archives/`);
+
+  // filtered = replaceAll(filtered, "./archive\\/(?!refs)", `archive/`);
+  filtered = replaceAll(filtered, "(?<!/)archive\\/(?!refs)", `https://${url}/archive/`);
   filtered = replaceAll(filtered, "\\]\\(\\#", `](https://${url}#/`);
   return filtered;
 }

diff --git a/src/lib/services/profiles/localStorageProfile.ts b/src/lib/services/profiles/localStorageProfile.ts
@@ -5,13 +5,17 @@ import type { CourseVisit, ProfileStore } from "../types.svelte";
 export const localStorageProfile: ProfileStore = {
   courseVisits: [] as CourseVisit[],
 
-  reload(): void {},
-  save(): void {},
-
-  logCourseVisit(course: Course) {
+  reload(): void {
     if (browser && localStorage.courseVisits) {
       this.courseVisits = JSON.parse(localStorage.courseVisits);
     }
+  },
+  save(): void {
+    if (browser) localStorage.courseVisits = JSON.stringify(this.courseVisits);
+  },
+
+  logCourseVisit(course: Course) {
+    this.reload();
     const visit = this.courseVisits.find((c) => c.id === course.courseId);
     if (visit) {
       visit.visits++;
@@ -31,18 +35,36 @@ export const localStorageProfile: ProfileStore = {
       }
       this.courseVisits.unshift(courseVisit);
     }
-    if (browser) localStorage.courseVisits = JSON.stringify(this.courseVisits);
+    this.save();
   },
 
   deleteCourseVisit(courseId: string) {
+    this.reload();
     this.courseVisits = this.courseVisits.filter((c) => c.id !== courseId);
     if (browser) localStorage.courseVisits = JSON.stringify(this.courseVisits);
+    this.save();
   },
 
   getCourseVisits(): Promise<CourseVisit[]> {
-    if (browser && localStorage.courseVisits) {
-      this.courseVisits = JSON.parse(localStorage.courseVisits);
-    }
+    this.reload();
     return this.courseVisits;
+  },
+
+  favouriteCourse(courseId: string) {
+    this.reload();
+    const courseVisit = this.courseVisits.find((c) => c.id === courseId);
+    if (courseVisit) {
+      courseVisit.favourite = true;
+    }
+    this.save();
+  },
+
+  unfavouriteCourse(courseId: string) {
+    this.reload();
+    const courseVisit = this.courseVisits.find((c) => c.id === courseId);
+    if (courseVisit) {
+      courseVisit.favourite = false;
+    }
+    this.save();
   }
 };
diff --git a/src/lib/services/profiles/supabaseProfile.svelte.ts b/src/lib/services/profiles/supabaseProfile.svelte.ts
@@ -63,5 +63,23 @@ export const supabaseProfile: ProfileStore = {
   async getCourseVisits(): Promise<CourseVisit[]> {
     await this.reload();
     return this.courseVisits;
+  },
+
+  async favouriteCourse(courseId: string) {
+    await this.reload();
+    const course = this.courseVisits.find((c) => c.id === courseId);
+    if (course) {
+      course.favourite = true;
+    }
+    await this.save();
+  },
+
+  async unfavouriteCourse(courseId: string) {
+    await this.reload();
+    const course = this.courseVisits.find((c) => c.id === courseId);
+    if (course) {
+      course.favourite = false;
+    }
+    await this.save();
   }
 };
diff --git a/src/lib/services/types.svelte.ts b/src/lib/services/types.svelte.ts
@@ -18,6 +18,7 @@ export type CourseVisit = {
   credits: string;
   visits?: number;
   private: boolean;
+  favourite: boolean;
 };
 
 export interface LoUser {
@@ -43,6 +44,19 @@ export class LoRecord {
   }
 }
 
+export interface CardDetails {
+  route: string;
+  title: string;
+  type: string;
+  subtitle1?: string;
+  subtitle2?: string;
+  summary?: string;
+  icon?: IconType;
+  img?: string;
+  student?: LoUser;
+  video?: string;
+}
+
 export interface CourseService {
   courses: Map<string, Course>;
   labs: Map<string, LiveLab>;
@@ -62,6 +76,8 @@ export interface ProfileStore {
   reload(): void;
   save(): void;
   logCourseVisit(course: Course): void;
+  favouriteCourse(courseId: string): void;
+  unfavouriteCourse(courseId: string): void;
   deleteCourseVisit(courseId: string): void;
   getCourseVisits(): Promise<CourseVisit[]>;
 }
@@ -81,6 +97,8 @@ export interface TutorsConnectService {
   courseVisit(course: Course, user: TutorsId): void;
   deleteCourseVisit(courseId: string): void;
   getCourseVisits(): Promise<CourseVisit[]>;
+  favouriteCourse(courseId: string): void;
+  unfavouriteCourse(courseId: string): void;
 
   learningEvent(params: Record<string, string>): void;
   startTimer(): void;

diff --git a/src/lib/ui/TutorsShell.svelte b/src/lib/ui/TutorsShell.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Footer from "$lib/ui/navigators/footers/Footer.svelte";
+  import SecondaryNavigator from "$lib/ui/navigators/SecondaryNavigator.svelte";
+  import { currentCourse, transitionKey } from "$lib/runes";
+  import type { Snippet } from "svelte";
+  import MainNavigator from "./navigators/MainNavigator.svelte";
+
+  type Props = { children: Snippet };
+  let { children }: Props = $props();
+</script>
+
+<div class="grid h-screen grid-rows-[auto_1fr_auto]">
+  <header class="sticky top-0 bg-surface-100 dark:bg-surface-950">
+    <MainNavigator />
+    {#if currentCourse?.value}
+      <SecondaryNavigator />
+    {/if}
+  </header>
+  <main class="mt-2 overflow-y-auto">
+    {@render children()}
+  </main>
+  <footer class="hidden lg:block">
+    <Footer />
+  </footer>
+</div>
diff --git a/src/lib/ui/animations.ts b/src/lib/ui/animations.ts