From a22c43650b4ed67323a9d6b72d4348f9fee0840e Mon Sep 17 00:00:00 2001
From: Mishig Davaadorj <dmishig@gmail.com>
Date: Mon, 25 Sep 2023 00:24:40 +0200
Subject: [PATCH 1/6] Implement node ci for sveltekit

---
 .github/workflows/lint-svelte-kit.yml         | 30 +++++++++++++++++++
 kit/.prettierrc                               |  1 -
 kit/package-lock.json                         | 14 +++++++++
 kit/package.json                              |  6 ++--
 kit/src/lib/CodeBlock.svelte                  |  1 +
 kit/src/lib/CopyButton.svelte                 |  2 +-
 kit/src/lib/CourseFloatingBanner.svelte       |  4 +--
 kit/src/lib/DocNotebookDropdown.svelte        |  7 +++--
 kit/src/lib/Docstring.svelte                  | 10 +++----
 kit/src/lib/Dropdown.svelte                   |  6 +---
 kit/src/lib/DropdownEntry.svelte              |  2 +-
 kit/src/lib/DropdownMenu.svelte               |  6 ++--
 kit/src/lib/FrameworkContentBlock.svelte      | 13 ++++----
 kit/src/lib/FrameworkSwitch.svelte            | 10 +++----
 kit/src/lib/FrameworkSwitchCourse.svelte      |  6 ++--
 kit/src/lib/InferenceApi.svelte               | 12 ++++----
 kit/src/lib/PipelineIcon.svelte               | 10 +++----
 .../IconImageClassification.svelte            |  8 ++---
 .../IconSentenceSimilarity.svelte             |  4 +--
 .../PipelineIcons/IconTextGeneration.svelte   |  4 +--
 kit/src/lib/TokenizersLanguageContent.svelte  |  8 ++---
 kit/src/lib/Tooltip.svelte                    |  2 +-
 kit/src/lib/pipeline.ts                       |  4 ++-
 kit/src/lib/stores.ts                         |  7 ++---
 kit/src/lib/tooltip.ts                        |  2 +-
 kit/src/lib/types.ts                          |  9 ++++++
 26 files changed, 116 insertions(+), 72 deletions(-)
 create mode 100644 .github/workflows/lint-svelte-kit.yml

diff --git a/.github/workflows/lint-svelte-kit.yml b/.github/workflows/lint-svelte-kit.yml
new file mode 100644
index 00000000..528bd0a4
--- /dev/null
+++ b/.github/workflows/lint-svelte-kit.yml
@@ -0,0 +1,30 @@
+name: SvelteKit Lint
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+
+      - name: Install dependencies
+        run: npm install ci
+        working-directory: kit
+
+      - name: Checking lint/format errors
+        run: npm run lint
+        working-directory: kit
+
+      - name: Checking type errors
+        run: npm run check
+        working-directory: kit
\ No newline at end of file
diff --git a/kit/.prettierrc b/kit/.prettierrc
index 7b1b699c..de36577e 100644
--- a/kit/.prettierrc
+++ b/kit/.prettierrc
@@ -3,6 +3,5 @@
 	"trailingComma": "es5",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
-	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/kit/package-lock.json b/kit/package-lock.json
index ecfe86f9..18048c03 100644
--- a/kit/package-lock.json
+++ b/kit/package-lock.json
@@ -14,6 +14,8 @@
 				"@tailwindcss/aspect-ratio": "^0.4.2",
 				"@tailwindcss/forms": "^0.5.6",
 				"@tailwindcss/typography": "^0.5.10",
+				"@types/js-yaml": "^4.0.6",
+				"@types/node": "^20.6.5",
 				"@typescript-eslint/eslint-plugin": "^6.7.2",
 				"autoprefixer": "^10.4.14",
 				"cheerio": "^1.0.0-rc.12",
@@ -758,12 +760,24 @@
 			"integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
 			"dev": true
 		},
+		"node_modules/@types/js-yaml": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.6.tgz",
+			"integrity": "sha512-ACTuifTSIIbyksx2HTon3aFtCKWcID7/h3XEmRpDYdMCXxPbl+m9GteOJeaAkiAta/NJaSFuA7ahZ0NkwajDSw==",
+			"dev": true
+		},
 		"node_modules/@types/json-schema": {
 			"version": "7.0.13",
 			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.13.tgz",
 			"integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==",
 			"dev": true
 		},
+		"node_modules/@types/node": {
+			"version": "20.6.5",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.5.tgz",
+			"integrity": "sha512-2qGq5LAOTh9izcc0+F+dToFigBWiK1phKPt7rNhOqJSr35y8rlIBjDwGtFSgAI6MGIhjwOVNSQZVdJsZJ2uR1w==",
+			"dev": true
+		},
 		"node_modules/@types/pug": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
diff --git a/kit/package.json b/kit/package.json
index a7b70f09..ceb60586 100644
--- a/kit/package.json
+++ b/kit/package.json
@@ -8,8 +8,8 @@
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"lint": "prettier --check --plugin prettier-plugin-svelte .",
+		"format": "prettier --write --plugin prettier-plugin-svelte ."
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
@@ -18,6 +18,8 @@
 		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/forms": "^0.5.6",
 		"@tailwindcss/typography": "^0.5.10",
+		"@types/js-yaml": "^4.0.6",
+		"@types/node": "^20.6.5",
 		"@typescript-eslint/eslint-plugin": "^6.7.2",
 		"autoprefixer": "^10.4.14",
 		"cheerio": "^1.0.0-rc.12",
diff --git a/kit/src/lib/CodeBlock.svelte b/kit/src/lib/CodeBlock.svelte
index 17405de9..2c3e72df 100644
--- a/kit/src/lib/CodeBlock.svelte
+++ b/kit/src/lib/CodeBlock.svelte
@@ -18,6 +18,7 @@
 	on:focus={handleMouseOver}
 	on:mouseout={handleMouseOut}
 	on:blur={handleMouseOut}
+	role="button"
 >
 	<div class="absolute top-2.5 right-4">
 		<CopyButton
diff --git a/kit/src/lib/CopyButton.svelte b/kit/src/lib/CopyButton.svelte
index 8bb87ca8..233c790a 100644
--- a/kit/src/lib/CopyButton.svelte
+++ b/kit/src/lib/CopyButton.svelte
@@ -33,7 +33,7 @@
 </script>
 
 <button
-	class="inline-flex items-center relative text-sm focus:text-green-500  cursor-pointer focus:outline-none
+	class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none
 		{classNames}
 		{style === 'text' ? 'mx-0.5' : ''}
 		{style === 'button' ? 'btn' : ''}
diff --git a/kit/src/lib/CourseFloatingBanner.svelte b/kit/src/lib/CourseFloatingBanner.svelte
index 3d1a6a26..31f4d505 100644
--- a/kit/src/lib/CourseFloatingBanner.svelte
+++ b/kit/src/lib/CourseFloatingBanner.svelte
@@ -4,12 +4,12 @@
 	export let chapter: number;
 	export let notebooks: { label: string; value: string }[] = [];
 	export let classNames = "";
-	export let askForHelpUrl = `https://discuss.huggingface.co/t/chapter-${chapter}-questions`
+	export let askForHelpUrl = `https://discuss.huggingface.co/t/chapter-${chapter}-questions`;
 </script>
 
 <DocNotebookDropdown options={notebooks} {classNames}>
 	<svelte:fragment slot="alwaysVisible">
-		<a href="{askForHelpUrl}" target="_blank">
+		<a href={askForHelpUrl} target="_blank">
 			<img
 				alt="Ask a Question"
 				class="!m-0"
diff --git a/kit/src/lib/DocNotebookDropdown.svelte b/kit/src/lib/DocNotebookDropdown.svelte
index 70941926..6a1c0e66 100644
--- a/kit/src/lib/DocNotebookDropdown.svelte
+++ b/kit/src/lib/DocNotebookDropdown.svelte
@@ -25,7 +25,10 @@
 			// correct calculation of dropdownEl's width; othwrwise, the width can count in negative (empty) spaces
 			let dropdownWidth = 0;
 			for (let i = 0; i < dropdownEl.children.length; i++) {
-				dropdownWidth += dropdownEl.children.item(i).clientWidth;
+				const child = dropdownEl.children.item(i);
+				if (child) {
+					dropdownWidth += child.clientWidth;
+				}
 			}
 			const bufferMargin = 20;
 			if (h1Widht - spanWidth < dropdownWidth + bufferMargin) {
@@ -44,7 +47,7 @@
 <svelte:window on:resize={onResize} />
 
 <div class="flex space-x-1 {classNames}" bind:this={dropdownEl}>
-	<slot name="alwaysVisible"/>
+	<slot name="alwaysVisible" />
 	{#if googleColabOptions.length === 1}
 		<a href={googleColabOptions[0].value} target="_blank">
 			<img
diff --git a/kit/src/lib/Docstring.svelte b/kit/src/lib/Docstring.svelte
index fcb73db7..e14b7d66 100644
--- a/kit/src/lib/Docstring.svelte
+++ b/kit/src/lib/Docstring.svelte
@@ -42,9 +42,8 @@
 	onMount(() => {
 		const { hash } = window.location;
 		hashlink = hash.substring(1);
-		const hashlinksEls =
-			parametersElement.querySelectorAll<HTMLAnchorElement>('[href^="#"]');
-		const hashlinks = [...hashlinksEls].map(el => el.id);
+		const hashlinksEls = parametersElement.querySelectorAll<HTMLAnchorElement>('[href^="#"]');
+		const hashlinks = [...hashlinksEls].map((el) => el.id);
 		const containsAnchor = hashlinks.includes(hashlink);
 		collapsed = !containsAnchor && parametersElement.clientHeight > 500;
 		onHashChange();
@@ -86,8 +85,9 @@
 			containerEl.classList.remove(...bgHighlightClass.split(" "));
 		}
 		if (hashlink === anchor) {
-			containerEl = document.getElementById(hashlink)?.closest(".docstring");
-			if (containerEl) {
+			const _containerEl = document.getElementById(hashlink)?.closest(".docstring");
+			if (_containerEl) {
+				containerEl = _containerEl as HTMLElement;
 				containerEl.classList.add(...bgHighlightClass.split(" "));
 			}
 		}
diff --git a/kit/src/lib/Dropdown.svelte b/kit/src/lib/Dropdown.svelte
index a620925d..c4f4b624 100644
--- a/kit/src/lib/Dropdown.svelte
+++ b/kit/src/lib/Dropdown.svelte
@@ -19,11 +19,7 @@
 	let isOpen = false;
 </script>
 
-<div
-	class="relative {classNames} {useDeprecatedJS ? 'v2-dropdown' : ''}"
-	bind:this={element}
-	selected-value={selectedValue || undefined}
->
+<div class="relative {classNames} {useDeprecatedJS ? 'v2-dropdown' : ''}" bind:this={element}>
 	<!-- Button -->
 	<button
 		class="
diff --git a/kit/src/lib/DropdownEntry.svelte b/kit/src/lib/DropdownEntry.svelte
index f49a33f1..61f94302 100644
--- a/kit/src/lib/DropdownEntry.svelte
+++ b/kit/src/lib/DropdownEntry.svelte
@@ -18,7 +18,7 @@
 
 <li>
 	<a
-		class="flex items-center hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer px-3 py-1.5 whitespace-nowrap 
+		class="flex items-center hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer px-3 py-1.5 whitespace-nowrap
 			{classNames}
 			{underline ? 'hover:underline' : ''}
 			{useDeprecatedJS ? 'v2-dropdown-entry' : ''}"
diff --git a/kit/src/lib/DropdownMenu.svelte b/kit/src/lib/DropdownMenu.svelte
index 54446a7f..8b7f81f1 100644
--- a/kit/src/lib/DropdownMenu.svelte
+++ b/kit/src/lib/DropdownMenu.svelte
@@ -18,9 +18,9 @@
 
 		if (!forceAlignement) {
 			const docWidth = document.documentElement.clientWidth;
-			const domRect = element?.getBoundingClientRect() || {};
-			const left = domRect["left"] ?? 0;
-			const width = domRect["width"] ?? 0;
+			const domRect = element?.getBoundingClientRect();
+			const left = domRect?.["left"] ?? 0;
+			const width = domRect?.["width"] ?? 0;
 			alignement = left + width > docWidth ? "right" : "left";
 		}
 
diff --git a/kit/src/lib/FrameworkContentBlock.svelte b/kit/src/lib/FrameworkContentBlock.svelte
index 8338915f..8d75845d 100644
--- a/kit/src/lib/FrameworkContentBlock.svelte
+++ b/kit/src/lib/FrameworkContentBlock.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import type { SvelteComponent } from "svelte";
 	import type { Framework } from "./types";
 
 	import { onMount } from "svelte";
@@ -15,19 +14,21 @@
 	let containerEl: HTMLDivElement;
 	let hashLinks = new Set();
 
-	const FRAMEWORK_CONFIG: Record<Framework, { Icon: typeof SvelteComponent; label: string }> = {
+	type SvelteComponent = typeof IconPytorch;
+
+	const FRAMEWORK_CONFIG: Record<Framework, { Icon: SvelteComponent; label: string }> = {
 		pytorch: {
 			Icon: IconPytorch,
-			label: "Pytorch"
+			label: "Pytorch",
 		},
 		tensorflow: {
 			Icon: IconTensorflow,
-			label: "TensorFlow"
+			label: "TensorFlow",
 		},
 		jax: {
 			Icon: IconJax,
-			label: "JAX"
-		}
+			label: "JAX",
+		},
 	};
 	const { Icon, label } = FRAMEWORK_CONFIG[framework];
 	const localStorageKey = `hf_doc_framework_${framework}_is_hidden`;
diff --git a/kit/src/lib/FrameworkSwitch.svelte b/kit/src/lib/FrameworkSwitch.svelte
index 28d3b402..51bc40c6 100644
--- a/kit/src/lib/FrameworkSwitch.svelte
+++ b/kit/src/lib/FrameworkSwitch.svelte
@@ -14,27 +14,27 @@
 			classNames: "",
 			icon: IconPytorch,
 			name: "Pytorch",
-			group: "group1"
+			group: "group1",
 		},
 		{
 			id: "tf",
 			classNames: "",
 			icon: IconTensorflow,
 			name: "TensorFlow",
-			group: "group2"
+			group: "group2",
 		},
 		{
 			id: "stringapi",
 			classNames: "text-blue-600",
 			name: "String API",
-			group: "group1"
+			group: "group1",
 		},
 		{
 			id: "readinstruction",
 			classNames: "text-blue-600",
 			name: "ReadInstruction",
-			group: "group2"
-		}
+			group: "group2",
+		},
 	];
 
 	function changeGroup(_group: string) {
diff --git a/kit/src/lib/FrameworkSwitchCourse.svelte b/kit/src/lib/FrameworkSwitchCourse.svelte
index 322a27f0..51fecb1c 100644
--- a/kit/src/lib/FrameworkSwitchCourse.svelte
+++ b/kit/src/lib/FrameworkSwitchCourse.svelte
@@ -11,14 +11,14 @@
 			id: "pt",
 			classNames: "bg-red-50 dark:bg-transparent text-red-600",
 			icon: IconPytorch,
-			name: "Pytorch"
+			name: "Pytorch",
 		},
 		{
 			id: "tf",
 			classNames: "bg-orange-50 dark:bg-transparent text-yellow-600",
 			icon: IconTensorflow,
-			name: "TensorFlow"
-		}
+			name: "TensorFlow",
+		},
 	] as const;
 </script>
 
diff --git a/kit/src/lib/InferenceApi.svelte b/kit/src/lib/InferenceApi.svelte
index b43324d5..d7b746f0 100644
--- a/kit/src/lib/InferenceApi.svelte
+++ b/kit/src/lib/InferenceApi.svelte
@@ -13,29 +13,29 @@
 		{
 			id: "python",
 			icon: IconPython,
-			label: "Python"
+			label: "Python",
 		},
 		{
 			id: "js",
 			icon: IconJs,
-			label: "JavaScript"
+			label: "JavaScript",
 		},
 		{
 			id: "curl",
 			icon: IconCurl,
-			label: "cURL"
-		}
+			label: "cURL",
+		},
 	];
 
 	export let python = false;
 	export let js = false;
 	export let curl = false;
 
-	const snippetExists = {python, js, curl};
+	const snippetExists = { python, js, curl };
 </script>
 
 <div class="flex space-x-2 items-center my-1.5 mr-8 h-7 !pl-0 -mx-3 md:mx-0">
-	{#each LANGUAGES_CONFIG.filter(c => snippetExists[c.id]) as language}
+	{#each LANGUAGES_CONFIG.filter((c) => snippetExists[c.id]) as language}
 		<div
 			class="flex items-center border rounded-lg px-1.5 py-1 leading-none select-none text-smd
 			{$selectedInferenceLang === language.id
diff --git a/kit/src/lib/PipelineIcon.svelte b/kit/src/lib/PipelineIcon.svelte
index f8388c6b..6364b02d 100644
--- a/kit/src/lib/PipelineIcon.svelte
+++ b/kit/src/lib/PipelineIcon.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import type { SvelteComponent } from "svelte";
 	import { PIPELINE_DATA } from "./pipeline";
 
 	import IconAudioClassification from "./PipelineIcons/IconAudioClassification.svelte";
@@ -36,7 +35,9 @@
 	export let classNames = "";
 	export let pipeline = "";
 
-	const ICON_COMPONENTS: Record<string, typeof SvelteComponent> = {
+	type SvelteComponent = typeof IconTextClassification;
+
+	const ICON_COMPONENTS: Record<string, SvelteComponent> = {
 		/// Keep same order as in huggingface_hub/Types.ts
 		/// for easy mapping.
 		"text-classification": IconTextClassification,
@@ -72,10 +73,7 @@
 	};
 
 	const PIPELINE_TAG_ICO_CLASS = Object.fromEntries(
-		Object.entries(PIPELINE_DATA).map(([tagType, data]) => [
-			tagType,
-			`tag-ico-${data.color}`,
-		])
+		Object.entries(PIPELINE_DATA).map(([tagType, data]) => [tagType, `tag-ico-${data.color}`])
 	);
 </script>
 
diff --git a/kit/src/lib/PipelineIcons/IconImageClassification.svelte b/kit/src/lib/PipelineIcons/IconImageClassification.svelte
index 663fb081..fa83eb20 100644
--- a/kit/src/lib/PipelineIcons/IconImageClassification.svelte
+++ b/kit/src/lib/PipelineIcons/IconImageClassification.svelte
@@ -15,12 +15,8 @@
 	preserveAspectRatio="xMidYMid meet"
 	viewBox="0 0 32 32"
 >
-	<polygon
-		points="4 20 4 22 8.586 22 2 28.586 3.414 30 10 23.414 10 28 12 28 12 20 4 20"
-	/>
-	<path
-		d="M19,14a3,3,0,1,0-3-3A3,3,0,0,0,19,14Zm0-4a1,1,0,1,1-1,1A1,1,0,0,1,19,10Z"
-	/>
+	<polygon points="4 20 4 22 8.586 22 2 28.586 3.414 30 10 23.414 10 28 12 28 12 20 4 20" />
+	<path d="M19,14a3,3,0,1,0-3-3A3,3,0,0,0,19,14Zm0-4a1,1,0,1,1-1,1A1,1,0,0,1,19,10Z" />
 	<path
 		d="M26,4H6A2,2,0,0,0,4,6V16H6V6H26V21.17l-3.59-3.59a2,2,0,0,0-2.82,0L18,19.17,11.8308,13l-1.4151,1.4155L14,18l2.59,2.59a2,2,0,0,0,2.82,0L21,19l5,5v2H16v2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4Z"
 	/>
diff --git a/kit/src/lib/PipelineIcons/IconSentenceSimilarity.svelte b/kit/src/lib/PipelineIcons/IconSentenceSimilarity.svelte
index b9decc7f..16dfd7ba 100644
--- a/kit/src/lib/PipelineIcons/IconSentenceSimilarity.svelte
+++ b/kit/src/lib/PipelineIcons/IconSentenceSimilarity.svelte
@@ -23,7 +23,5 @@
 	<path
 		d="M28 12h-6a2.002 2.002 0 0 1-2-2V4a2.002 2.002 0 0 1 2-2h6a2.002 2.002 0 0 1 2 2v6a2.002 2.002 0 0 1-2 2zm-6-8v6h6.001L28 4z"
 	/>
-	<path
-		d="M7 12a5 5 0 1 1 5-5a5.006 5.006 0 0 1-5 5zm0-8a3 3 0 1 0 3 3a3.003 3.003 0 0 0-3-3z"
-	/>
+	<path d="M7 12a5 5 0 1 1 5-5a5.006 5.006 0 0 1-5 5zm0-8a3 3 0 1 0 3 3a3.003 3.003 0 0 0-3-3z" />
 </svg>
diff --git a/kit/src/lib/PipelineIcons/IconTextGeneration.svelte b/kit/src/lib/PipelineIcons/IconTextGeneration.svelte
index 7843decf..fa0153e0 100644
--- a/kit/src/lib/PipelineIcons/IconTextGeneration.svelte
+++ b/kit/src/lib/PipelineIcons/IconTextGeneration.svelte
@@ -18,9 +18,7 @@
 	<path
 		d="M16.2607 8.08202L14.468 6.28928C14.3063 6.12804 14.0873 6.03749 13.859 6.03749C13.6307 6.03749 13.4117 6.12804 13.25 6.28928L5.6375 13.904V16.9125H8.64607L16.2607 9.30002C16.422 9.13836 16.5125 8.91935 16.5125 8.69102C16.5125 8.4627 16.422 8.24369 16.2607 8.08202V8.08202ZM8.1953 15.825H6.725V14.3547L11.858 9.22118L13.3288 10.6915L8.1953 15.825ZM14.0982 9.92262L12.6279 8.45232L13.8606 7.21964L15.3309 8.68994L14.0982 9.92262Z"
 	/>
-	<path
-		d="M6.18125 9.84373H7.26875V6.03748H8.9V4.94998H4.55V6.03748H6.18125V9.84373Z"
-	/>
+	<path d="M6.18125 9.84373H7.26875V6.03748H8.9V4.94998H4.55V6.03748H6.18125V9.84373Z" />
 	<path
 		d="M4.55 11.475H2.375V2.775H11.075V4.95H12.1625V2.775C12.1625 2.48658 12.0479 2.20997 11.844 2.00602C11.64 1.80208 11.3634 1.6875 11.075 1.6875H2.375C2.08658 1.6875 1.80997 1.80208 1.60602 2.00602C1.40207 2.20997 1.2875 2.48658 1.2875 2.775V11.475C1.2875 11.7634 1.40207 12.04 1.60602 12.244C1.80997 12.4479 2.08658 12.5625 2.375 12.5625H4.55V11.475Z"
 	/>
diff --git a/kit/src/lib/TokenizersLanguageContent.svelte b/kit/src/lib/TokenizersLanguageContent.svelte
index 36f116b9..cc60e9c4 100644
--- a/kit/src/lib/TokenizersLanguageContent.svelte
+++ b/kit/src/lib/TokenizersLanguageContent.svelte
@@ -13,18 +13,18 @@
 		{
 			id: "python",
 			icon: IconPython,
-			label: "Python"
+			label: "Python",
 		},
 		{
 			id: "rust",
 			icon: IconRust,
-			label: "Rust"
+			label: "Rust",
 		},
 		{
 			id: "node",
 			icon: IconNode,
-			label: "Node"
-		}
+			label: "Node",
+		},
 	];
 
 	export let python = false;
diff --git a/kit/src/lib/Tooltip.svelte b/kit/src/lib/Tooltip.svelte
index 92185bb4..6e6267fb 100644
--- a/kit/src/lib/Tooltip.svelte
+++ b/kit/src/lib/Tooltip.svelte
@@ -6,7 +6,7 @@
 
 <div
 	class="
-		absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow 
+		absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow
 		{position}
 		{classNames}
 	"
diff --git a/kit/src/lib/pipeline.ts b/kit/src/lib/pipeline.ts
index b28483a5..c7624c85 100644
--- a/kit/src/lib/pipeline.ts
+++ b/kit/src/lib/pipeline.ts
@@ -1,4 +1,6 @@
-export const PIPELINE_DATA = {
+import type { Pipeline } from "./types";
+
+export const PIPELINE_DATA: Record<string, Pipeline> = {
 	"text-classification": {
 		name: "Text Classification",
 		subtasks: [
diff --git a/kit/src/lib/stores.ts b/kit/src/lib/stores.ts
index 46785565..a385b7f3 100644
--- a/kit/src/lib/stores.ts
+++ b/kit/src/lib/stores.ts
@@ -17,12 +17,9 @@ export enum AccordianState {
 	CLOSED = "CLOSED",
 	HASHASHLINK = "HASHASHLINK",
 }
-const frameworks: { [key in Framework]?: Writable<AccordianState> } = {};
+const frameworks: Partial<Record<Framework, Writable<AccordianState>>> = {};
 export function getFrameworkStore(key: Framework): Writable<AccordianState> {
-	if (!frameworks[key]) {
-		frameworks[key] = writable<AccordianState>(AccordianState.OPEN);
-	}
-	return frameworks[key];
+	return (frameworks[key] = frameworks[key] || writable<AccordianState>(AccordianState.OPEN));
 }
 
 // used for Question.svelte
diff --git a/kit/src/lib/tooltip.ts b/kit/src/lib/tooltip.ts
index 1dd09918..6b2b3e6e 100644
--- a/kit/src/lib/tooltip.ts
+++ b/kit/src/lib/tooltip.ts
@@ -3,7 +3,7 @@ import Tooltip from "./TooltipFromAction.svelte";
 const id = "docstring-tooltip";
 
 export function tooltip(element: HTMLElement, txt: string): any {
-	let tooltipComponent;
+	let tooltipComponent: any;
 	function mouseOver(event: MouseEvent) {
 		cleanPrevious();
 		tooltipComponent = new Tooltip({
diff --git a/kit/src/lib/types.ts b/kit/src/lib/types.ts
index 6334751f..799406ca 100644
--- a/kit/src/lib/types.ts
+++ b/kit/src/lib/types.ts
@@ -7,3 +7,12 @@ export type TokenizersLanguage = "python" | "rust" | "node";
 export type CourseFramework = "pt" | "tf";
 
 export type InferenceSnippetLang = "python" | "js" | "curl";
+
+export interface Pipeline {
+	name: string;
+	subtasks?: { type: string; name: string }[];
+	modality: string;
+	color: string;
+	hideInModels?: boolean;
+	hideInDatasets?: boolean;
+}

From d4ced4eee360e8ab88c006d00dfcb27cb818b4f6 Mon Sep 17 00:00:00 2001
From: Mishig Davaadorj <dmishig@gmail.com>
Date: Mon, 25 Sep 2023 16:25:56 +0200
Subject: [PATCH 2/6] only run on `kit` dir

---
 .github/workflows/lint-svelte-kit.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/lint-svelte-kit.yml b/.github/workflows/lint-svelte-kit.yml
index 528bd0a4..fcb44a84 100644
--- a/.github/workflows/lint-svelte-kit.yml
+++ b/.github/workflows/lint-svelte-kit.yml
@@ -1,6 +1,8 @@
 name: SvelteKit Lint
 on:
   pull_request:
+    paths:
+      - "kit/**"
   push:
     branches:
       - main

From c17f52dcaaf502d0aadc5125f7216995c697c81e Mon Sep 17 00:00:00 2001
From: Mishig Davaadorj <dmishig@gmail.com>
Date: Tue, 26 Sep 2023 17:21:00 +0200
Subject: [PATCH 3/6] format preprocess.js file

---
 kit/preprocess.js | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/kit/preprocess.js b/kit/preprocess.js
index bc55952a..65bebeeb 100644
--- a/kit/preprocess.js
+++ b/kit/preprocess.js
@@ -364,7 +364,7 @@ export const mdsvexPreprocess = {
 			// 	content = addCourseImports(content);
 			// }
 			content = markKatex(content, markedKatex);
-			content = escapeSvelteConditionals(content)
+			content = escapeSvelteConditionals(content);
 			const processed = await _mdsvexPreprocess.markup({ content, filename });
 			processed.code = renderKatex(processed.code, markedKatex);
 			processed.code = headingWithAnchorLink(processed.code);
@@ -472,11 +472,11 @@ function escapeSvelteSpecialChars() {
 	}
 
 	function onHtml(node) {
-		if(node.value === "<!--HF DOCBUILD BODY START-->"){
+		if (node.value === "<!--HF DOCBUILD BODY START-->") {
 			hfDocBodyStart = true;
 			hfDocBodyEnd = false;
 		}
-		if(node.value === "<!--HF DOCBUILD BODY END-->"){
+		if (node.value === "<!--HF DOCBUILD BODY END-->") {
 			hfDocBodyEnd = true;
 		}
 		const RE_TAG_NAME = /<\/?(\w+)/;
@@ -485,20 +485,22 @@ function escapeSvelteSpecialChars() {
 			const tagName = match[1];
 			if (!validTags.includes(tagName)) {
 				node.value = node.value.replaceAll("<", "&#60;");
-			}else if(hfDocBodyStart && !hfDocBodyEnd && htmlTags.includes(tagName)){
+			} else if (hfDocBodyStart && !hfDocBodyEnd && htmlTags.includes(tagName)) {
 				const REGEX_VALID_START_END_TAG = /^<(\w+)[^>]*>.*<\/\1>$/s;
-				if(!REGEX_VALID_START_END_TAG.test(node.value.trim())){
+				if (!REGEX_VALID_START_END_TAG.test(node.value.trim())) {
 					return;
 				}
 				const $ = cheerio.load(node.value);
 				// Go through each text node in the HTML and replace "{" with "&#123;"
-				$('*').contents().each((index, element) => {
-					if (element.type === 'text') {
-						element.data = element.data.replaceAll("{", "&#123;");
-					}
-				});
+				$("*")
+					.contents()
+					.each((index, element) => {
+						if (element.type === "text") {
+							element.data = element.data.replaceAll("{", "&#123;");
+						}
+					});
 				// Update the remark HTML node with the modified HTML
-				node.value = $('body').html();
+				node.value = $("body").html();
 			}
 		}
 	}
@@ -605,12 +607,12 @@ function headingWithAnchorLink(code) {
 	});
 }
 
-function escapeSvelteConditionals(code){
+function escapeSvelteConditionals(code) {
 	const REGEX_SVELTE_IF_START = /(\{#if[^}]+\})/g;
 	const SVELTE_ELSE = "{:else}";
 	const SVELTE_IF_END = "{/if}";
-	code = code.replace(REGEX_SVELTE_IF_START, '\n\n$1\n\n');
+	code = code.replace(REGEX_SVELTE_IF_START, "\n\n$1\n\n");
 	code = code.replaceAll(SVELTE_ELSE, `\n\n${SVELTE_ELSE}\n\n`);
 	code = code.replaceAll(SVELTE_IF_END, `\n\n${SVELTE_IF_END}\n\n`);
 	return code;
-}
\ No newline at end of file
+}

From 92c66bd30b6bc4fd807f4b1f55fd9d882dff1eaa Mon Sep 17 00:00:00 2001
From: Mishig Davaadorj <dmishig@gmail.com>
Date: Tue, 26 Sep 2023 17:21:37 +0200
Subject: [PATCH 4/6] run when lint workflow updates

---
 .github/workflows/lint-svelte-kit.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/lint-svelte-kit.yml b/.github/workflows/lint-svelte-kit.yml
index fcb44a84..447b84c3 100644
--- a/.github/workflows/lint-svelte-kit.yml
+++ b/.github/workflows/lint-svelte-kit.yml
@@ -3,6 +3,7 @@ on:
   pull_request:
     paths:
       - "kit/**"
+      - ".github/workflows/lint-svelte-kit.yml"
   push:
     branches:
       - main

From c1f77268f1e2a89396dbda506b08b0c28d9a6ed5 Mon Sep 17 00:00:00 2001
From: Mishig Davaadorj <dmishig@gmail.com>
Date: Tue, 26 Sep 2023 17:22:52 +0200
Subject: [PATCH 5/6] chore

---
 kit/src/lib/CodeBlock.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/kit/src/lib/CodeBlock.svelte b/kit/src/lib/CodeBlock.svelte
index 2c3e72df..17405de9 100644
--- a/kit/src/lib/CodeBlock.svelte
+++ b/kit/src/lib/CodeBlock.svelte
@@ -18,7 +18,6 @@
 	on:focus={handleMouseOver}
 	on:mouseout={handleMouseOut}
 	on:blur={handleMouseOut}
-	role="button"
 >
 	<div class="absolute top-2.5 right-4">
 		<CopyButton

From 73c55564c26884456054ac052d1acefeb8925421 Mon Sep 17 00:00:00 2001
From: Mishig Davaadorj <dmishig@gmail.com>
Date: Wed, 27 Sep 2023 00:07:12 +0200
Subject: [PATCH 6/6] More parsing fixes

---
 kit/preprocess.js | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/kit/preprocess.js b/kit/preprocess.js
index 65bebeeb..903182d5 100644
--- a/kit/preprocess.js
+++ b/kit/preprocess.js
@@ -461,35 +461,42 @@ let hfDocBodyEnd = false;
 function escapeSvelteSpecialChars() {
 	return transform;
 
+	function isWithinDocBody(node) {
+		if (node.value === "<!--HF DOCBUILD BODY START-->") {
+			hfDocBodyStart = true;
+			hfDocBodyEnd = false;
+		}
+		if (node.value === "<!--HF DOCBUILD BODY END-->") {
+			hfDocBodyEnd = true;
+		}
+		return hfDocBodyStart && !hfDocBodyEnd;
+	}
+
 	function transform(tree) {
 		visit(tree, "text", onText);
 		visit(tree, "html", onHtml);
 	}
 
 	function onText(node) {
+		if (!isWithinDocBody(node)) {
+			return;
+		}
 		node.value = node.value.replaceAll("{", "&#123;");
 		node.value = node.value.replaceAll("<", "&#60;");
 	}
 
 	function onHtml(node) {
-		if (node.value === "<!--HF DOCBUILD BODY START-->") {
-			hfDocBodyStart = true;
-			hfDocBodyEnd = false;
-		}
-		if (node.value === "<!--HF DOCBUILD BODY END-->") {
-			hfDocBodyEnd = true;
+		if (!isWithinDocBody(node)) {
+			return;
 		}
 		const RE_TAG_NAME = /<\/?(\w+)/;
 		const match = node.value.match(RE_TAG_NAME);
+		const REGEX_VALID_START_END_TAG = /^<(\w+)[^>]*>.*<\/\1>$/s;
 		if (match) {
 			const tagName = match[1];
 			if (!validTags.includes(tagName)) {
 				node.value = node.value.replaceAll("<", "&#60;");
-			} else if (hfDocBodyStart && !hfDocBodyEnd && htmlTags.includes(tagName)) {
-				const REGEX_VALID_START_END_TAG = /^<(\w+)[^>]*>.*<\/\1>$/s;
-				if (!REGEX_VALID_START_END_TAG.test(node.value.trim())) {
-					return;
-				}
+			} else if (htmlTags.includes(tagName) && REGEX_VALID_START_END_TAG.test(node.value.trim())) {
 				const $ = cheerio.load(node.value);
 				// Go through each text node in the HTML and replace "{" with "&#123;"
 				$("*")