added pagefind for search

.gitignore

@@ -19,3 +19,6 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+# PageFind
+public/pagefind

README.md

@@ -54,5 +54,5 @@ This website is deployed on <a href="https://vercel.com/">Vercel</a>, which is a
   <li><a href="https://www.twitch.tv/team/coworkingcrew">Coworking Crew</a> for providing resources</li>
   <li><a href="https://third-stinger-20a.notion.site/A-Coworking-Streamer-Cheat-Sheet-01ee1e5ff006410d84c339069ea6546c" target="_blank">A Coworking Streamer Cheat Sheet</a> as an amazing resource</li>
   <li><a href="https://www.twitch.tv/MohFocus">MohFocus</a> for the resources (bots and widgets)</li> 
-  <li><a href="https://www.twitch.tv/ryanpython">RyanPython</a> for building the website</li> 
+  <li><a href="https://www.twitch.tv/rythondev">RythonDev</a> for building the website</li> 
 </ul>

astro.config.mjs

@@ -2,7 +2,6 @@ import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
 import mdx from "@astrojs/mdx";
 import react from "@astrojs/react";
-
 import expressiveCode from "astro-expressive-code";
 
 // https://astro.build/config

package-lock.json

@@ -22,10 +22,11 @@
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
                 "tailwind-merge": "^2.2.1",
-                "tailwindcss": "^3.4.1"
+                "tailwindcss": "^3.4.1",
+                "typescript": "^5.4.3"
             },
             "devDependencies": {
-                "@types/react-router-dom": "^5.3.3",
+                "pagefind": "^1.0.4",
                 "prettier": "^3.2.5",
                 "prettier-plugin-tailwindcss": "^0.5.11"
             }
@@ -1475,6 +1476,71 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@pagefind/darwin-arm64": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.0.4.tgz",
+            "integrity": "sha512-2OcthvceX2xhm5XbgOmW+lT45oLuHqCmvFeFtxh1gsuP5cO8vcD8ZH8Laj4pXQFCcK6eAdSShx+Ztx/LsQWZFQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ]
+        },
+        "node_modules/@pagefind/darwin-x64": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/@pagefind/darwin-x64/-/darwin-x64-1.0.4.tgz",
+            "integrity": "sha512-xkdvp0D9Ld/ZKsjo/y1bgfhTEU72ITimd2PMMQtts7jf6JPIOJbsiErCvm37m/qMFuPGEq/8d+fZ4pydOj08HQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ]
+        },
+        "node_modules/@pagefind/linux-arm64": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/@pagefind/linux-arm64/-/linux-arm64-1.0.4.tgz",
+            "integrity": "sha512-jGBrcCzIrMnNxLKVtogaQyajVfTAXM59KlBEwg6vTn8NW4fQ6nuFbbhlG4dTIsaamjEM5e8ZBEAKZfTB/qd9xw==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@pagefind/linux-x64": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/@pagefind/linux-x64/-/linux-x64-1.0.4.tgz",
+            "integrity": "sha512-LIn/QcvcEtLEBqKe5vpSbSC2O3fvqbRCWOTIklslqSORisCsvzsWbP6j+LYxE9q0oWIfkdMoWV1vrE/oCKRxHg==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@pagefind/windows-x64": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/@pagefind/windows-x64/-/windows-x64-1.0.4.tgz",
+            "integrity": "sha512-QlBCVeZfj9fc9sbUgdOz76ZDbeK4xZihOBAFqGuRJeChfM8pnVeH9iqSnXgO3+m9oITugTf7PicyRUFAG76xeQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
         "node_modules/@pkgjs/parseargs": {
             "version": "0.11.0",
             "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -1719,12 +1785,6 @@
                 "@types/unist": "*"
             }
         },
-        "node_modules/@types/history": {
-            "version": "4.7.11",
-            "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
-            "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
-            "dev": true
-        },
         "node_modules/@types/mdast": {
             "version": "4.0.3",
             "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz",
@@ -1794,27 +1854,6 @@
                 "@types/react": "*"
             }
         },
-        "node_modules/@types/react-router": {
-            "version": "5.1.20",
-            "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
-            "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
-            "dev": true,
-            "dependencies": {
-                "@types/history": "^4.7.11",
-                "@types/react": "*"
-            }
-        },
-        "node_modules/@types/react-router-dom": {
-            "version": "5.3.3",
-            "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
-            "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
-            "dev": true,
-            "dependencies": {
-                "@types/history": "^4.7.11",
-                "@types/react": "*",
-                "@types/react-router": "*"
-            }
-        },
         "node_modules/@types/scheduler": {
             "version": "0.16.8",
             "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
@@ -5693,6 +5732,22 @@
                 "node": ">=6"
             }
         },
+        "node_modules/pagefind": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/pagefind/-/pagefind-1.0.4.tgz",
+            "integrity": "sha512-oRIizYe+zSI2Jw4zcMU0ebDZm27751hRFiSOBLwc1OIYMrsZKk+3m8p9EVaOmc6zZdtqwwdilNUNxXvBeHcP9w==",
+            "dev": true,
+            "bin": {
+                "pagefind": "lib/runner/bin.cjs"
+            },
+            "optionalDependencies": {
+                "@pagefind/darwin-arm64": "1.0.4",
+                "@pagefind/darwin-x64": "1.0.4",
+                "@pagefind/linux-arm64": "1.0.4",
+                "@pagefind/linux-x64": "1.0.4",
+                "@pagefind/windows-x64": "1.0.4"
+            }
+        },
         "node_modules/parse-entities": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz",
@@ -7916,6 +7971,18 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/typescript": {
+            "version": "5.4.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz",
+            "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==",
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        },
         "node_modules/ultrahtml": {
             "version": "1.5.3",
             "resolved": "https://registry.npmjs.org/ultrahtml/-/ultrahtml-1.5.3.tgz",

package.json

@@ -5,7 +5,7 @@
     "scripts": {
         "dev": "astro dev --open",
         "start": "astro dev",
-        "build": "astro build",
+        "build": "astro build && pagefind --site dist && copy -r dist/pagefind public/",
         "preview": "astro preview",
         "astro": "astro"
     },
@@ -24,10 +24,11 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "tailwind-merge": "^2.2.1",
-        "tailwindcss": "^3.4.1"
+        "tailwindcss": "^3.4.1",
+        "typescript": "^5.4.3"
     },
     "devDependencies": {
-        "@types/react-router-dom": "^5.3.3",
+        "pagefind": "^1.0.4",
         "prettier": "^3.2.5",
         "prettier-plugin-tailwindcss": "^0.5.11"
     }

src/components/blocks/BlogPostPreview.astro

@@ -35,7 +35,7 @@ const { title, tagline, pubDate, url } = Astro.props;
 
 <a
 	href={url}
-	class="hover:no-underline hover:-translate-y-1 shadow-xl transition-all duration-300"
+	class="no-target-blank hover:no-underline hover:-translate-y-1 shadow-xl transition-all duration-300"
 >
 	<div class="bg-[#303338] text-white
     px-5 py-3

src/components/blocks/Hero.astro

@@ -42,7 +42,7 @@ const items = [
 ];
 ---
 
-<div class="relative w-fit mt-20 z-50">
+<div class="relative w-fit mt-20 z-50" data-pagefind-ignore>
 	<HeroTitle />
 
 	<div class="max-w-5xl mx-auto px-8 pt-10">

src/components/blocks/TableOfContent.astro

@@ -17,7 +17,11 @@ const { headings } = Astro.props;
 			if (heading.depth === 1) return;
 			const margin = `${heading.depth - 1.5}rem`;
 			return (
-                <div style={{ marginLeft: margin }} class="mb-2 pl-0">
+				<div
+					style={{ marginLeft: margin }}
+					class="mb-2 pl-0"
+					data-pagefind-ignore
+				>
 					<a
 						href={`#${heading.slug}`}
 						class="no-target-blank text-white hover:no-underline hover:text-blue-400 transition-colors duration-150 line-clamp-1"

src/components/blocks/navBar.astro

@@ -1,11 +1,11 @@
 ---
 import VerticalNav from "./verticalNav.astro";
+import SearchModal from "../ui/SearchModal.astro";
 ---
 
 <div
-	transition:persist
-	transition:name="navbar"
 	class="w-full backdrop-blur fixed top-0 text-white bg-secondary/75 z-[60] text-lg py-3 h-[var(--header-height)]"
+	data-pagefind-ignore
 >
 	<div
 		class="mx-auto relative px-3 lg:px-8 max-w-7xl flex flex-row justify-between items-center gap-3"
@@ -37,6 +37,7 @@ import VerticalNav from "./verticalNav.astro";
 		<div
 			class="flex-1 flex items-center text-xl select-none ml-10 lg:ml-0"
 			transition:name="cowo-logo"
+			transition:persist
 		>
 			<a
 				href="/"
@@ -46,7 +47,12 @@ import VerticalNav from "./verticalNav.astro";
 			</a>
 		</div>
 		<!-- Navigation Links -->
-		<div class="hidden lg:flex items-center gap-8" id="navbar-links">
+		<div
+			class="hidden lg:flex items-center gap-8"
+			id="navbar-links"
+			transition:persist
+			transition:name="navbar"
+		>
 			<a
 				class="no-target-blank hover:text-black hover:bg-white rounded-md transition-colors duration-300 px-2 py-1 text-white hover:no-underline"
 				href="/get-started/introduction">Get started</a
@@ -68,8 +74,10 @@ import VerticalNav from "./verticalNav.astro";
 				href="/credits">Credits</a
 			>
 		</div>
-		<!-- Theme Toggle (COMING SOON) -->
+		<!-- Search bar -->
-		<div class="flex lg:flex-1 justify-end"></div>
+		<div class="flex lg:flex-1 justify-end relative">
+			<SearchModal id="dialog" open="Open modal" />
+		</div>
 	</div>
 </div>
 <aside
@@ -80,51 +88,23 @@ import VerticalNav from "./verticalNav.astro";
 	<VerticalNav showHome={true} />
 </aside>
 
+<style is:global>
+	:root {
+		--pagefind-ui-scale: 1;
+		--pagefind-ui-primary: #fff;
+		--pagefind-ui-text: #fff;
+		--pagefind-ui-background: #272727;
+		--pagefind-ui-border: #505050;
+		--pagefind-ui-tag: #fff;
+		--pagefind-ui-border-width: 1px;
+		--pagefind-ui-border-radius: 10px;
+		--pagefind-ui-image-border-radius: 2px;
+		--pagefind-ui-image-box-ratio: 2 / 1;
+		--pagefind-ui-font: system-ui;
+	}
+</style>
+
 <script>
-	function updateDarkModeIcon() {
-		const darkModeToggle = document.querySelector("#theme-toggle");
-		const isDarkMode = localStorage.getItem("theme") === "dark";
-		const moonSVG = `
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
-				<path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
-			</svg>
-			`;
-		const sunSVG = `
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
-				<path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
-			</svg>
-			`;
-
-		if (darkModeToggle) {
-			if (isDarkMode) {
-				darkModeToggle.innerHTML = moonSVG;
-			} else {
-				darkModeToggle.innerHTML = sunSVG;
-			}
-		}
-	}
-	const darkModeToggle = document.querySelector("#theme-toggle");
-
-	if (!localStorage.getItem("theme")) {
-		localStorage.setItem("theme", "dark");
-	}
-
-	if (darkModeToggle) {
-		darkModeToggle.addEventListener("click", () => {
-			const isDarkMode = localStorage.getItem("theme") === "dark";
-
-			if (isDarkMode) {
-				localStorage.setItem("theme", "light");
-				document.documentElement.setAttribute("data-theme", "light");
-			} else {
-				localStorage.setItem("theme", "dark");
-				document.documentElement.setAttribute("data-theme", "dark");
-			}
-
-			updateDarkModeIcon();
-		});
-	}
-
 	// JavaScript for toggling the menu
 	document.addEventListener("DOMContentLoaded", function () {
 		const menuToggle = document.querySelector("#menu-toggle");
@@ -145,4 +125,15 @@ import VerticalNav from "./verticalNav.astro";
 			});
 		});
 	});
+	window.addEventListener("DOMContentLoaded", (event) => {
+		// @ts-ignore
+		new PagefindUI({
+			element: "#search",
+			showSubResults: false,
+			showEmptyFilters: false,
+			debounceTimeoutMs: 0,
+			showImages: false,
+			autofocus: false,
+		});
+	});
 </script>

src/components/blocks/verticalNav.astro

@@ -66,7 +66,7 @@ const { showHome } = Astro.props;
 ---
 
 <div class="relative">
-	<nav id="vertical-nav-component" class="flex flex-col">
+	<nav id="vertical-nav-component" class="flex flex-col" data-pagefind-ignore>
 		{
 			showHome && (
 				<div class="mb-2">

src/components/ui/SearchModal.astro

@@ -0,0 +1,55 @@
+---
+const { id } = Astro.props;
+---
+
+<style>
+	dialog::backdrop {
+		position: fixed;
+		top: 0px;
+		right: 0px;
+		bottom: 0px;
+		left: 0px;
+		background: rgba(0, 0, 0, 0.5);
+	}
+</style>
+
+<button
+	onclick={`window.${id}.showModal()`}
+	class="text-sm flex bg-[#101010] w-60 px-2 py-2 border border-gray-600 border-solid text-left rounded-lg group"
+>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 20 20"
+		fill="currentColor"
+		class="w-5 h-5"
+	>
+		<path
+			fill-rule="evenodd"
+			d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
+			clip-rule="evenodd"></path>
+	</svg>
+	<span class="ml-3 text-gray-400 group-hover:text-white">Search...</span>
+</button>
+
+<dialog
+	id=`${id}`
+	class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-[#141414] border-2 border-solid border-[#505050] text-white rounded-lg w-1/2 h-5/6 px-10 py-10"
+>
+	<form method="dialog">
+		<button class="absolute top-3 right-3"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="currentColor"
+				class="w-6 h-6"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
+					clip-rule="evenodd"></path>
+			</svg>
+		</button>
+	</form>
+	<div id="search" class="mt-10" transition:name="search" transition:persist>
+	</div>
+</dialog>

src/layouts/BlogsLayout.astro

@@ -15,16 +15,6 @@ import VerticalNav from "../components/blocks/verticalNav.astro";
 				</aside>
 			</div>
 			<div class="lg:col-span-8 pt-8">
-				<!-- <div class="flex flex-col lg:grid lg:grid-cols-10">
-                    <div class="col-span-8 pr-10 pb-10 pt-8">
-                        <slot />
-                    </div>
-                    <div
-                        class="col-span-2 pt-8 lg:block lg:sticky lg:px-4 lg:-mx-4 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
-                    >
-                        <TableOfContent headings={headings} />
-                    </div>
-                </div> -->
 				<slot />
 			</div>
 		</div>

src/layouts/Layout.astro

@@ -20,6 +20,8 @@ const { title, description } = Astro.props;
 		<meta name="theme-color" content="#2B2D31" />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+		<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
+		<script src="/pagefind/pagefind-ui.js" is:inline></script>
 		<script is:inline src="/_vercel/insights/script.js"></script>
 		<ViewTransitions />
 		<meta name="generator" content={Astro.generator} />
@@ -30,6 +32,14 @@ const { title, description } = Astro.props;
 			<NavBar />
 			<slot />
 		</div>
+		<script>
+			// make all <a> attributes have target="_blank" except for Table of Contents
+			document
+				.querySelectorAll("a:not(.no-target-blank)")
+				.forEach((el) => {
+					el.setAttribute("target", "_blank");
+				});
+		</script>
 
 		<style is:global>
 			:root {
@@ -56,10 +66,6 @@ const { title, description } = Astro.props;
 				font-family: system-ui;
 			}
 
-			body {
-				height: 100vh;
-			}
-
 			code {
 				font-family:
 					Menlo,
@@ -148,33 +154,5 @@ const { title, description } = Astro.props;
 				@apply ml-5 list-outside list-decimal leading-7;
 			}
 		</style>
-		<script is:inline>
-			const theme = (() => {
-				if (
-					typeof localStorage !== "undefined" &&
-					localStorage.getItem("theme")
-				) {
-					return localStorage.getItem("theme");
-				}
-				if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-					return "dark";
-				}
-				return "light";
-			})();
-
-			if (theme === "light") {
-				document.documentElement.classList.remove("dark");
-			} else {
-				document.documentElement.classList.add("dark");
-			}
-			window.localStorage.setItem("theme", theme);
-
-			// make all <a> attributes have target="_blank" except for Table of Contents
-			document
-				.querySelectorAll("a:not(.no-target-blank)")
-				.forEach((el) => {
-					el.setAttribute("target", "_blank");
-				});
-		</script>
 	</body>
 </html>

src/pages/blog/index.astro

@@ -15,7 +15,7 @@ const allPosts = await getCollection("posts");
 		{
 			allPosts.map((post) => (
 				<BlogPost
-					url={`blog/posts/${post.slug}/`}
+					url={`/blog/posts/${post.slug}/`}
 					title={post.data.heading}
 					tagline={post.data.subheading}
 					pubDate={post.data.pubDate}

src/pages/get-started/introduction.md

@@ -77,9 +77,9 @@ Ultimately, co-working streams cater to a specific need for some viewers. They o
 
 ## What is a task widget?
 
-<a href="../guide/widgets#task-widgets" class="no-target-blank"><img src="/images/widgets/multitask.webp" alt="Multi Task Widget" loading="lazy"></a>
+<a href="../guide/stream-widgets#task-widgets" class="no-target-blank"><img src="/images/widgets/multitask.webp" alt="Multi Task Widget" loading="lazy"></a>
 
-If you want to add a task widget to your own stream, check it out in the <a href="../guide/widgets#task-widgets" class="no-target-blank">Widgets section</a>!
+If you want to add a task widget to your own stream, check it out in the <a href="../guide/stream-widgets#task-widgets" class="no-target-blank">Widgets section</a>!
 
 A task widget is a widget where users can use commands such as:
 - !task [current task]

tsconfig.json

@@ -2,6 +2,12 @@
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    "jsxImportSource": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
   }
 }