From 84065f34ca4170298a4a5cf3665eb4c6e957a383 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Thu, 20 Feb 2025 21:19:54 +1100
Subject: [PATCH] fix: refactoring and error handling

---
 desktop/components/LibrarySearch.vue    | 157 +++++++++--------
 desktop/error.vue                       |  89 ++++++++++
 desktop/layouts/default.vue             |  77 +++++++-
 desktop/layouts/mini.vue                |   2 +-
 desktop/package.json                    |   1 +
 desktop/pages/error/index.vue           |  66 -------
 desktop/pages/library.vue               |  27 ++-
 desktop/pages/library/[id]/index.vue    | 167 +++++++++---------
 desktop/pages/library/index.vue         |  11 +-
 desktop/pages/store/index.vue           |   3 +-
 desktop/plugins/global-error-handler.ts |   3 +
 desktop/yarn.lock                       | 222 +++++++++++++++++++++++-
 12 files changed, 577 insertions(+), 248 deletions(-)
 create mode 100644 desktop/error.vue
 delete mode 100644 desktop/pages/error/index.vue

diff --git a/desktop/components/LibrarySearch.vue b/desktop/components/LibrarySearch.vue
index a73542e7..14399bf2 100644
--- a/desktop/components/LibrarySearch.vue
+++ b/desktop/components/LibrarySearch.vue
@@ -1,7 +1,11 @@
 <template>
   <div>
-    <div class="relative mb-3 transition-transform duration-300 hover:scale-105 active:scale-95">
-      <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+    <div
+      class="relative mb-3 transition-transform duration-300 hover:scale-105 active:scale-95"
+    >
+      <div
+        class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
+      >
         <MagnifyingGlassIcon class="h-5 w-5 text-zinc-400" aria-hidden="true" />
       </div>
       <input
@@ -12,11 +16,7 @@
       />
     </div>
 
-    <TransitionGroup 
-      name="list" 
-      tag="ul" 
-      class="flex flex-col gap-y-1.5"
-    >
+    <TransitionGroup name="list" tag="ul" class="flex flex-col gap-y-1.5">
       <NuxtLink
         v-for="nav in filteredNavigation"
         :key="nav.id"
@@ -31,7 +31,9 @@
         :href="nav.route"
       >
         <div class="flex items-center w-full gap-x-3">
-          <div class="flex-none transition-transform duration-300 hover:-rotate-2">
+          <div
+            class="flex-none transition-transform duration-300 hover:-rotate-2"
+          >
             <img
               class="size-8 object-cover bg-zinc-900 rounded-lg transition-all duration-300 shadow-sm"
               :src="icons[nav.id]"
@@ -39,23 +41,16 @@
             />
           </div>
           <div class="flex flex-col flex-1">
-            <p class="truncate text-xs font-display leading-5 flex-1 font-semibold">
+            <p
+              class="truncate text-xs font-display leading-5 flex-1 font-semibold"
+            >
               {{ nav.label }}
             </p>
-            <p 
-              class="text-[11px] font-medium"
-              :class="[
-                games[nav.id].status.value.type === GameStatusEnum.Installed ? 'text-green-500' : 
-                games[nav.id].status.value.type === GameStatusEnum.Downloading ? 'text-blue-500' :
-                games[nav.id].status.value.type === GameStatusEnum.Running ? 'text-green-500' :
-                'text-zinc-500'
-              ]"
+            <p
+              class="text-xs font-medium"
+              :class="[gameStatusTextStyle[games[nav.id].status.value.type]]"
             >
-              {{ 
-                games[nav.id].status.value.type === GameStatusEnum.Downloading ? 'Downloading' :
-                games[nav.id].status.value.type === GameStatusEnum.Running ? 'Running' :
-                games[nav.id].status.value.type ? 'Installed' : 'Not Installed'
-              }}
+              {{ gameStatusText[games[nav.id].status.value.type] }}
             </p>
           </div>
         </div>
@@ -65,86 +60,102 @@
 </template>
 
 <script setup lang="ts">
-import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid';
+import { MagnifyingGlassIcon } from "@heroicons/vue/20/solid";
 import { invoke } from "@tauri-apps/api/core";
 import { GameStatusEnum, type Game, type GameStatus } from "~/types";
-import { TransitionGroup } from 'vue';
-import { listen } from '@tauri-apps/api/event';
+import { TransitionGroup } from "vue";
+import { listen } from "@tauri-apps/api/event";
+
+// Style information
+const gameStatusTextStyle: { [key in GameStatusEnum]: string } = {
+  [GameStatusEnum.Installed]: "text-green-500",
+  [GameStatusEnum.Downloading]: "text-blue-500",
+  [GameStatusEnum.Running]: "text-green-500",
+  [GameStatusEnum.Remote]: "text-zinc-500",
+  [GameStatusEnum.Queued]: "text-blue-500",
+  [GameStatusEnum.Updating]: "text-blue-500",
+  [GameStatusEnum.Uninstalling]: "text-zinc-100",
+  [GameStatusEnum.SetupRequired]: "text-yellow-500",
+};
+const gameStatusText: { [key in GameStatusEnum]: string } = {
+  [GameStatusEnum.Remote]: "Not installed",
+  [GameStatusEnum.Queued]: "Queued",
+  [GameStatusEnum.Downloading]: "Downloading...",
+  [GameStatusEnum.Installed]: "Installed",
+  [GameStatusEnum.Updating]: "Updating...",
+  [GameStatusEnum.Uninstalling]: "Uninstalling...",
+  [GameStatusEnum.SetupRequired]: "Setup required",
+  [GameStatusEnum.Running]: "Running",
+};
 
 const router = useRouter();
 
-const searchQuery = ref('');
+const searchQuery = ref("");
 
-
-let libraryDownloadError = false;
-
-const games: { [key: string]: { game: Game, status: Ref<GameStatus, GameStatus> } } = {};
+const games: {
+  [key: string]: { game: Game; status: Ref<GameStatus, GameStatus> };
+} = {};
 const icons: { [key: string]: string } = {};
 
-const rawGames: Ref<Game[], Game[]> = ref([])
+const rawGames: Ref<Game[], Game[]> = ref([]);
 
 async function calculateGames() {
-  try {
-    rawGames.value = await invoke("fetch_library");
-    for (const game of rawGames.value) {
-      if (games[game.id]) continue;
-      games[game.id] = await useGame(game.id);
-    }
-    for (const game of rawGames.value) {
-      if (icons[game.id]) continue;
-      icons[game.id] = await useObject(game.mIconId);
-    }
+  rawGames.value = await invoke("fetch_library");
+  for (const game of rawGames.value) {
+    if (games[game.id]) continue;
+    games[game.id] = await useGame(game.id);
   }
-  catch (e) {
-    console.log(e)
-    libraryDownloadError = true;
-    return new Array();
+  for (const game of rawGames.value) {
+    if (icons[game.id]) continue;
+    icons[game.id] = await useObject(game.mIconId);
   }
 }
 
 await calculateGames();
 
-const navigation = computed(() => rawGames.value.map((game) => {
-  const status = games[game.id].status;
+const navigation = computed(() =>
+  rawGames.value.map((game) => {
+    const status = games[game.id].status;
 
-  const isInstalled = computed(
-    () =>
-      status.value.type == GameStatusEnum.Installed ||
-      status.value.type == GameStatusEnum.SetupRequired
-  );
+    const isInstalled = computed(
+      () =>
+        status.value.type == GameStatusEnum.Installed ||
+        status.value.type == GameStatusEnum.SetupRequired
+    );
 
-  const item = {
-    label: game.mName,
-    route: `/library/${game.id}`,
-    prefix: `/library/${game.id}`,
-    isInstalled,
-    id: game.id,
-  };
-  return item;
-})
+    const item = {
+      label: game.mName,
+      route: `/library/${game.id}`,
+      prefix: `/library/${game.id}`,
+      isInstalled,
+      id: game.id,
+    };
+    return item;
+  })
+);
+const { currentNavigation, recalculateNavigation } = useCurrentNavigationIndex(
+  navigation.value
 );
-const { currentNavigation, recalculateNavigation } = useCurrentNavigationIndex(navigation.value);
-
 
 const filteredNavigation = computed(() => {
-  if (!searchQuery.value) return navigation.value.map((e, i) => ({...e, index: i}));
+  if (!searchQuery.value)
+    return navigation.value.map((e, i) => ({ ...e, index: i }));
   const query = searchQuery.value.toLowerCase();
-  return navigation.value.filter(nav => 
-    nav.label.toLowerCase().includes(query)
-  ).map((e, i) => ({...e, index: i}));
+  return navigation.value
+    .filter((nav) => nav.label.toLowerCase().includes(query))
+    .map((e, i) => ({ ...e, index: i }));
 });
 
 listen("update_library", async (event) => {
   console.log("Updating library");
   let oldNavigation = navigation.value[currentNavigation.value];
-  await calculateGames()
+  await calculateGames();
   recalculateNavigation();
   if (oldNavigation !== navigation.value[currentNavigation.value]) {
-    console.log("Triggered")
-    router.push("/library")
+    console.log("Triggered");
+    router.push("/library");
   }
-})
-
+});
 </script>
 
 <style scoped>
@@ -163,4 +174,4 @@ listen("update_library", async (event) => {
 .list-leave-active {
   position: absolute;
 }
-</style> 
\ No newline at end of file
+</style>
diff --git a/desktop/error.vue b/desktop/error.vue
new file mode 100644
index 00000000..c8de2f79
--- /dev/null
+++ b/desktop/error.vue
@@ -0,0 +1,89 @@
+<template>
+  <NuxtLayout name="default">
+    <div
+      class="grid min-h-full grid-cols-1 grid-rows-[1fr,auto,1fr] lg:grid-cols-[max(50%,36rem),1fr]"
+    >
+      <header
+        class="mx-auto w-full max-w-7xl px-6 pt-6 sm:pt-10 lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8"
+      >
+        <Logo class="h-10 w-auto sm:h-12" />
+      </header>
+      <main
+        class="mx-auto w-full max-w-7xl px-6 py-24 sm:py-32 lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:px-8"
+      >
+        <div class="max-w-lg">
+          <p class="text-base font-semibold leading-8 text-blue-600">
+            {{ error?.statusCode }}
+          </p>
+          <h1
+            class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
+          >
+            Oh no!
+          </h1>
+          <p
+            v-if="message"
+            class="mt-3 font-bold text-base leading-7 text-red-500"
+          >
+            {{ message }}
+          </p>
+          <p class="mt-6 text-base leading-7 text-zinc-400">
+            An error occurred while responding to your request. If you believe
+            this to be a bug, please report it. Try signing in and see if it
+            resolves the issue.
+          </p>
+          <div class="mt-10">
+            <!-- full app reload to fix errors -->
+            <a
+              href="/store"
+              class="text-sm font-semibold leading-7 text-blue-600"
+              ><span aria-hidden="true">&larr;</span> Back to store</a
+            >
+          </div>
+        </div>
+      </main>
+      <footer class="self-end lg:col-span-2 lg:col-start-1 lg:row-start-3">
+        <div class="border-t border-zinc-700 bg-zinc-900 py-10">
+          <nav
+            class="mx-auto flex w-full max-w-7xl items-center gap-x-4 px-6 text-sm leading-7 text-zinc-400 lg:px-8"
+          >
+            <NuxtLink href="/docs">Documentation</NuxtLink>
+            <svg
+              viewBox="0 0 2 2"
+              aria-hidden="true"
+              class="h-0.5 w-0.5 fill-zinc-600"
+            >
+              <circle cx="1" cy="1" r="1" />
+            </svg>
+            <a href="https://discord.gg/NHx46XKJWA" target="_blank"
+              >Support Discord</a
+            >
+          </nav>
+        </div>
+      </footer>
+      <div
+        class="hidden lg:relative lg:col-start-2 lg:row-start-1 lg:row-end-4 lg:block"
+      >
+        <img
+          src="@/assets/wallpaper.jpg"
+          alt=""
+          class="absolute inset-0 h-full w-full object-cover"
+        />
+      </div>
+    </div>
+  </NuxtLayout>
+</template>
+
+<script setup lang="ts">
+import type { NuxtError } from "#app";
+
+const props = defineProps({
+  error: Object as () => NuxtError,
+});
+
+const statusCode = props.error?.statusCode;
+const message =
+  props.error?.statusMessage ||
+  props.error?.message ||
+  "An unknown error occurred.";
+const showSignIn = statusCode ? statusCode == 403 || statusCode == 401 : false;
+</script>
diff --git a/desktop/layouts/default.vue b/desktop/layouts/default.vue
index 025a7cfc..b46858db 100644
--- a/desktop/layouts/default.vue
+++ b/desktop/layouts/default.vue
@@ -1,9 +1,76 @@
 <template>
-  <div class="flex flex-col bg-zinc-900 overflow-hidden">
-    <Header class="select-none" />
-    <div class="relative grow overflow-y-auto">
-      <slot />
-    </div>
+  <div class="flex flex-col bg-zinc-900 overflow-hidden h-screen">
+    <NuxtErrorBoundary>
+      <Header class="select-none" />
+      <div class="relative grow overflow-y-auto">
+        <slot />
+      </div>
+      <template #error="{ error }">
+        <MiniHeader />
+        <div class="relative grow overflow-y-auto bg-zinc-950">
+          <div
+            class="grid min-h-full grid-cols-1 grid-rows-[1fr,auto,1fr] lg:grid-cols-[max(50%,36rem),1fr]"
+          >
+            <header
+              class="mx-auto w-full max-w-7xl px-6 pt-6 sm:pt-10 lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8"
+            >
+              <Logo class="h-10 w-auto sm:h-12" />
+            </header>
+            <main
+              class="mx-auto w-full max-w-7xl px-6 py-24 sm:py-32 lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:px-8"
+            >
+              <div class="max-w-lg">
+                <h1
+                  class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
+                >
+                  Unrecoverable error
+                </h1>
+                <p class="mt-6 text-base leading-7 text-zinc-400">
+                  Drop encountered an error that it couldn't handle. Please
+                  restart the application and file a bug report.
+                </p>
+              </div>
+            </main>
+            <footer
+              class="self-end lg:col-span-2 lg:col-start-1 lg:row-start-3"
+            >
+              <div class="border-t border-blue-600 bg-zinc-900 py-10">
+                <nav
+                  class="mx-auto flex w-full max-w-7xl items-center gap-x-4 px-6 text-sm leading-7 text-zinc-400 lg:px-8"
+                >
+                  <a href="#">Documentation</a>
+                  <svg
+                    viewBox="0 0 2 2"
+                    aria-hidden="true"
+                    class="h-0.5 w-0.5 fill-zinc-700"
+                  >
+                    <circle cx="1" cy="1" r="1" />
+                  </svg>
+                  <a href="#">Troubleshooting</a>
+                  <svg
+                    viewBox="0 0 2 2"
+                    aria-hidden="true"
+                    class="h-0.5 w-0.5 fill-zinc-700"
+                  >
+                    <circle cx="1" cy="1" r="1" />
+                  </svg>
+                  <NuxtLink to="/setup/server">Switch instance</NuxtLink>
+                </nav>
+              </div>
+            </footer>
+            <div
+              class="hidden lg:relative lg:col-start-2 lg:row-start-1 lg:row-end-4 lg:block"
+            >
+              <img
+                src="@/assets/wallpaper.jpg"
+                alt=""
+                class="absolute inset-0 h-full w-full object-cover"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+    </NuxtErrorBoundary>
   </div>
 </template>
 
diff --git a/desktop/layouts/mini.vue b/desktop/layouts/mini.vue
index 4519a777..31aa1407 100644
--- a/desktop/layouts/mini.vue
+++ b/desktop/layouts/mini.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col bg-zinc-950 overflow-hidden">
+  <div class="flex flex-col bg-zinc-950 overflow-hidden h-screen">
     <MiniHeader />
     <div class="relative grow overflow-y-auto">
       <slot />
diff --git a/desktop/package.json b/desktop/package.json
index c1424210..5fcc8411 100644
--- a/desktop/package.json
+++ b/desktop/package.json
@@ -21,6 +21,7 @@
     "@tauri-apps/plugin-os": "~2",
     "@tauri-apps/plugin-shell": ">=2.0.0",
     "markdown-it": "^14.1.0",
+    "micromark": "^4.0.1",
     "nuxt": "^3.13.0",
     "scss": "^0.2.4",
     "vue": "latest",
diff --git a/desktop/pages/error/index.vue b/desktop/pages/error/index.vue
deleted file mode 100644
index d50e70c2..00000000
--- a/desktop/pages/error/index.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <div
-    class="grid min-h-full grid-cols-1 grid-rows-[1fr,auto,1fr] lg:grid-cols-[max(50%,36rem),1fr]"
-  >
-    <header
-      class="mx-auto w-full max-w-7xl px-6 pt-6 sm:pt-10 lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8"
-    >
-      <Logo class="h-10 w-auto sm:h-12" />
-    </header>
-    <main
-      class="mx-auto w-full max-w-7xl px-6 py-24 sm:py-32 lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:px-8"
-    >
-      <div class="max-w-lg">
-        <h1
-          class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
-        >
-          Unrecoverable error
-        </h1>
-        <p class="mt-6 text-base leading-7 text-zinc-400">
-          Drop encountered an error that it couldn't handle. Please restart the
-          application and file a bug report.
-        </p>
-      </div>
-    </main>
-    <footer class="self-end lg:col-span-2 lg:col-start-1 lg:row-start-3">
-      <div class="border-t border-blue-600 bg-zinc-900 py-10">
-        <nav
-          class="mx-auto flex w-full max-w-7xl items-center gap-x-4 px-6 text-sm leading-7 text-zinc-400 lg:px-8"
-        >
-          <a href="#">Documentation</a>
-          <svg
-            viewBox="0 0 2 2"
-            aria-hidden="true"
-            class="h-0.5 w-0.5 fill-zinc-700"
-          >
-            <circle cx="1" cy="1" r="1" />
-          </svg>
-          <a href="#">Troubleshooting</a>
-          <svg
-            viewBox="0 0 2 2"
-            aria-hidden="true"
-            class="h-0.5 w-0.5 fill-zinc-700"
-          >
-            <circle cx="1" cy="1" r="1" />
-          </svg>
-          <NuxtLink to="/setup/server">Switch instance</NuxtLink>
-        </nav>
-      </div>
-    </footer>
-    <div
-      class="hidden lg:relative lg:col-start-2 lg:row-start-1 lg:row-end-4 lg:block"
-    >
-      <img
-        src="@/assets/wallpaper.jpg"
-        alt=""
-        class="absolute inset-0 h-full w-full object-cover"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: "mini",
-});
-</script>
diff --git a/desktop/pages/library.vue b/desktop/pages/library.vue
index 45243457..ca8b8762 100644
--- a/desktop/pages/library.vue
+++ b/desktop/pages/library.vue
@@ -7,16 +7,31 @@
       <LibrarySearch />
     </div>
     <div class="grow overflow-y-auto">
-      <NuxtPage :libraryDownloadError="libraryDownloadError" />
+      <NuxtErrorBoundary>
+        <NuxtPage />
+        <template #error="{ error }">
+          <main
+            class="grid min-h-full w-full place-items-center px-6 py-24 sm:py-32 lg:px-8"
+          >
+            <div class="text-center">
+              <p class="text-base font-semibold text-blue-600">Error</p>
+              <h1
+                class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
+              >
+                Failed to load library
+              </h1>
+              <p class="mt-6 text-base leading-7 text-zinc-400">
+                Drop couldn't load your library: "{{ error }}".
+              </p>
+            </div>
+          </main>
+        </template>
+      </NuxtErrorBoundary>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-
-let libraryDownloadError = false;
-
-</script>
+<script setup lang="ts"></script>
 
 <style scoped>
 .list-move,
diff --git a/desktop/pages/library/[id]/index.vue b/desktop/pages/library/[id]/index.vue
index 4d094ae0..96b51ea9 100644
--- a/desktop/pages/library/[id]/index.vue
+++ b/desktop/pages/library/[id]/index.vue
@@ -3,22 +3,30 @@
     class="mx-auto w-full relative flex flex-col justify-center pt-72 overflow-hidden"
   >
     <div class="absolute inset-0 z-0">
-      <img 
-        :src="bannerUrl" 
-        class="w-full h-[24rem] object-cover blur-sm scale-105" 
+      <img
+        :src="bannerUrl"
+        class="w-full h-[24rem] object-cover blur-sm scale-105"
+      />
+      <div
+        class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-zinc-900/80 to-transparent opacity-90"
+      />
+      <div
+        class="absolute inset-0 bg-gradient-to-r from-zinc-900/95 via-zinc-900/80 to-transparent opacity-90"
       />
-      <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-zinc-900/80 to-transparent opacity-90" />
-      <div class="absolute inset-0 bg-gradient-to-r from-zinc-900/95 via-zinc-900/80 to-transparent opacity-90" />
     </div>
 
     <div class="relative z-10">
       <div class="px-8 pb-4">
-        <h1 class="text-5xl text-zinc-100 font-bold font-display drop-shadow-lg mb-8">
+        <h1
+          class="text-5xl text-zinc-100 font-bold font-display drop-shadow-lg mb-8"
+        >
           {{ game.mName }}
         </h1>
-        
+
         <div class="flex flex-row gap-x-4 items-stretch mb-8">
-          <div class="transition-transform duration-300 hover:scale-105 active:scale-95 shadow-xl">
+          <div
+            class="transition-transform duration-300 hover:scale-105 active:scale-95 shadow-xl"
+          >
             <GameStatusButton
               @install="() => installFlow()"
               @launch="() => launch()"
@@ -45,84 +53,54 @@
         <div class="grid grid-cols-[2fr,1fr] gap-8">
           <div class="space-y-6">
             <div class="bg-zinc-800/50 rounded-xl p-6 backdrop-blur-sm">
-              <h2 class="text-xl font-display font-semibold text-zinc-100 mb-4">About</h2>
-              <div class="max-h-48 overflow-y-auto custom-scrollbar">
-                <p class="text-zinc-400">
-                  {{ game.mDescription || "No description available." }}
-                </p>
-              </div>
-            </div>
-
-            <div class="bg-zinc-800/50 rounded-xl p-6 backdrop-blur-sm">
-              <h2 class="text-xl font-display font-semibold text-zinc-100 mb-4">Installation</h2>
-              <dl class="grid grid-cols-1 gap-4 text-sm">
-                <div>
-                  <dt class="text-zinc-400">Status</dt>
-                  <dd class="text-zinc-200 font-medium flex items-center gap-x-2">
-                    <span 
-                      class="size-2 rounded-full"
-                      :class="{
-                        'bg-green-500': status.type === GameStatusEnum.Installed || status.type === GameStatusEnum.Running,
-                        'bg-yellow-500': status.type === GameStatusEnum.SetupRequired,
-                        'bg-blue-500 animate-pulse': status.type === GameStatusEnum.Downloading,
-                        'bg-zinc-500': status.type === GameStatusEnum.Remote
-                      }"
-                    />
-                    {{ 
-                      status.type === GameStatusEnum.Installed ? 'Installed' :
-                      status.type === GameStatusEnum.Running ? 'Running' :
-                      status.type === GameStatusEnum.SetupRequired ? 'Setup Required' :
-                      status.type === GameStatusEnum.Downloading ? 'Downloading' :
-                      'Not Installed'
-                    }}
-                  </dd>
-                </div>
-              </dl>
+              <div
+                v-html="htmlDescription"
+                class="prose prose-invert prose-blue overflow-y-auto custom-scrollbar max-w-none"
+              ></div>
             </div>
           </div>
 
-          
           <div class="space-y-6">
             <div class="bg-zinc-800/50 rounded-xl p-6 backdrop-blur-sm">
-              <h2 class="text-xl font-display font-semibold text-zinc-100 mb-4">Game Images</h2>
-              <div class="relative pb-8">
+              <h2 class="text-xl font-display font-semibold text-zinc-100 mb-4">
+                Game Images
+              </h2>
+              <div class="relative">
                 <div v-if="mediaUrls.length > 0">
-                  <div 
+                  <div
                     class="relative aspect-video rounded-lg overflow-hidden cursor-pointer group"
                   >
-                    <div 
+                    <div
                       class="absolute inset-0"
                       @click="fullscreenImage = mediaUrls[currentImageIndex]"
                     >
-                      <TransitionGroup 
-                        name="slide" 
-                        tag="div" 
-                        class="h-full"
-                      >
-                        <img 
-                          v-for="(url, index) in mediaUrls" 
+                      <TransitionGroup name="slide" tag="div" class="h-full">
+                        <img
+                          v-for="(url, index) in mediaUrls"
                           :key="url"
-                          :src="url" 
+                          :src="url"
                           class="absolute inset-0 w-full h-full object-cover"
                           v-show="index === currentImageIndex"
                         />
                       </TransitionGroup>
                     </div>
 
-                    <div class="absolute inset-0 flex items-center justify-between px-4 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                    <div
+                      class="absolute inset-0 flex items-center justify-between px-4 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
+                    >
                       <div class="pointer-events-auto">
-                        <button 
+                        <button
                           v-if="mediaUrls.length > 1"
-                          @click.stop="previousImage()" 
+                          @click.stop="previousImage()"
                           class="p-2 rounded-full bg-zinc-900/50 text-zinc-100 hover:bg-zinc-900/80 transition-all duration-300 hover:scale-110"
                         >
                           <ChevronLeftIcon class="size-5" />
                         </button>
                       </div>
                       <div class="pointer-events-auto">
-                        <button 
+                        <button
                           v-if="mediaUrls.length > 1"
-                          @click.stop="nextImage()" 
+                          @click.stop="nextImage()"
                           class="p-2 rounded-full bg-zinc-900/50 text-zinc-100 hover:bg-zinc-900/80 transition-all duration-300 hover:scale-110"
                         >
                           <ChevronRightIcon class="size-5" />
@@ -130,14 +108,20 @@
                       </div>
                     </div>
 
-                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
-                    <div class="absolute bottom-4 right-4 flex items-center gap-x-2 text-white opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                    <div
+                      class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
+                    />
+                    <div
+                      class="absolute bottom-4 right-4 flex items-center gap-x-2 text-white opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
+                    >
                       <ArrowsPointingOutIcon class="size-5" />
                       <span class="text-sm font-medium">View Fullscreen</span>
                     </div>
                   </div>
 
-                  <div class="absolute -bottom-2 left-1/2 -translate-x-1/2 flex gap-x-2">
+                  <div
+                    class="absolute -bottom-2 left-1/2 -translate-x-1/2 flex gap-x-2"
+                  >
                     <button
                       v-for="(_, index) in mediaUrls"
                       :key="index"
@@ -146,19 +130,21 @@
                       :class="[
                         currentImageIndex === index
                           ? 'bg-zinc-100 scale-125'
-                          : 'bg-zinc-600 hover:bg-zinc-500'
+                          : 'bg-zinc-600 hover:bg-zinc-500',
                       ]"
                     />
                   </div>
                 </div>
 
-                <div 
-                  v-else 
+                <div
+                  v-else
                   class="aspect-video rounded-lg overflow-hidden bg-zinc-900/50 flex flex-col items-center justify-center text-center px-4"
                 >
-                  <PhotoIcon class="size-12 text-zinc-700 mb-2" />
-                  <p class="text-zinc-600 font-medium">No images available</p>
-                  <p class="text-zinc-700 text-sm">Game screenshots will appear here when available</p>
+                  <PhotoIcon class="size-12 text-zinc-500 mb-2" />
+                  <p class="text-zinc-400 font-medium">No images available</p>
+                  <p class="text-zinc-500 text-sm">
+                    Game screenshots will appear here when available
+                  </p>
                 </div>
               </div>
             </div>
@@ -385,7 +371,7 @@
     </template>
   </ModalTemplate>
 
-  <Transition 
+  <Transition
     enter="transition ease-out duration-300"
     enter-from="opacity-0"
     enter-to="opacity-100"
@@ -393,54 +379,56 @@
     leave-from="opacity-100"
     leave-to="opacity-0"
   >
-    <div 
-      v-if="fullscreenImage" 
-      class="fixed inset-0 z-50 bg-black/95 flex items-center justify-center" 
+    <div
+      v-if="fullscreenImage"
+      class="fixed inset-0 z-50 bg-black/95 flex items-center justify-center"
       @click="fullscreenImage = null"
     >
-      <div 
+      <div
         class="relative w-full h-full flex items-center justify-center"
         @click.stop
       >
-        <button 
+        <button
           class="absolute top-4 right-4 p-2 rounded-full bg-zinc-900/50 text-zinc-100 hover:bg-zinc-900 transition-colors"
           @click.stop="fullscreenImage = null"
         >
           <XMarkIcon class="size-6" />
         </button>
 
-        <button 
+        <button
           v-if="mediaUrls.length > 1"
-          @click.stop="previousImage()" 
+          @click.stop="previousImage()"
           class="absolute left-4 p-3 rounded-full bg-zinc-900/50 text-zinc-100 hover:bg-zinc-900 transition-colors"
         >
           <ChevronLeftIcon class="size-6" />
         </button>
-        <button 
+        <button
           v-if="mediaUrls.length > 1"
-          @click.stop="nextImage()" 
+          @click.stop="nextImage()"
           class="absolute right-4 p-3 rounded-full bg-zinc-900/50 text-zinc-100 hover:bg-zinc-900 transition-colors"
         >
           <ChevronRightIcon class="size-6" />
         </button>
 
-        <TransitionGroup 
-          name="slide" 
+        <TransitionGroup
+          name="slide"
           tag="div"
           class="w-full h-full flex items-center justify-center"
           @click.stop
         >
-          <img 
+          <img
             v-for="(url, index) in mediaUrls"
             v-show="currentImageIndex === index"
             :key="url"
-            :src="url" 
+            :src="url"
             class="max-h-[90vh] max-w-[90vw] object-contain"
             :alt="`${game.mName} screenshot ${index + 1}`"
           />
         </TransitionGroup>
 
-        <div class="absolute bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 rounded-full bg-zinc-900/50 backdrop-blur-sm">
+        <div
+          class="absolute bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 rounded-full bg-zinc-900/50 backdrop-blur-sm"
+        >
           <p class="text-zinc-100 text-sm font-medium">
             {{ currentImageIndex + 1 }} / {{ mediaUrls.length }}
           </p>
@@ -476,6 +464,7 @@ import { BuildingStorefrontIcon } from "@heroicons/vue/24/outline";
 import { XCircleIcon } from "@heroicons/vue/24/solid";
 import { invoke } from "@tauri-apps/api/core";
 import { GameStatusEnum } from "~/types";
+import { micromark } from "micromark";
 
 const route = useRoute();
 const router = useRouter();
@@ -491,7 +480,11 @@ const remoteUrl: string = await invoke("gen_drop_url", {
 const bannerUrl = await useObject(game.value.mBannerId);
 
 // Get all available images
-const mediaUrls = await Promise.all(game.value.mImageCarousel.map((id) => useObject(id)));
+const mediaUrls = await Promise.all(
+  game.value.mImageCarousel.map((id) => useObject(id))
+);
+
+const htmlDescription = micromark(game.value.mDescription);
 
 const installFlowOpen = ref(false);
 const versionOptions = ref<
@@ -522,8 +515,7 @@ const installVersionIndex = ref(0);
 const installDir = ref(0);
 async function install() {
   try {
-    if (!versionOptions.value)
-      throw new Error("Versions have not been loaded");
+    if (!versionOptions.value) throw new Error("Versions have not been loaded");
     installLoading.value = true;
     await invoke("download_game", {
       gameId: game.value.id,
@@ -585,7 +577,8 @@ function nextImage() {
 }
 
 function previousImage() {
-  currentImageIndex.value = (currentImageIndex.value - 1 + mediaUrls.length) % mediaUrls.length;
+  currentImageIndex.value =
+    (currentImageIndex.value - 1 + mediaUrls.length) % mediaUrls.length;
 }
 
 const fullscreenImage = ref<string | null>(null);
diff --git a/desktop/pages/library/index.vue b/desktop/pages/library/index.vue
index e95d9dc4..a23a7993 100644
--- a/desktop/pages/library/index.vue
+++ b/desktop/pages/library/index.vue
@@ -1,17 +1,14 @@
 <template>
-    <div v-if="libraryDownloadError" class="mx-auto pt-10 text-center text-gray-500">
-        Library Failed to update
-    </div>
 
     <div class="h-full flex flex-col items-center justify-center">
         <div class="text-center">
             <div class="flex flex-col items-center gap-y-4">
-                <div class="p-4 rounded-xl bg-zinc-800/50 backdrop-blur-sm">
-                    <RocketLaunchIcon class="size-12 text-zinc-600" />
+                <div class="p-4 rounded-xl bg-zinc-700/50 backdrop-blur-sm">
+                    <RocketLaunchIcon class="size-12 text-zinc-400" />
                 </div>
                 <div>
                     <h3 class="text-xl font-display font-semibold text-zinc-100">Select a game</h3>
-                    <p class="mt-1 text-sm text-zinc-500">Choose a game from your library to view details</p>
+                    <p class="mt-1 text-sm text-zinc-400">Choose a game from your library to view details</p>
                 </div>
             </div>
         </div>
@@ -19,6 +16,4 @@
 </template>
 <script setup lang="ts">
 import { RocketLaunchIcon } from '@heroicons/vue/24/outline';
-
-const props = defineProps<{ libraryDownloadError: boolean }>();
 </script>
\ No newline at end of file
diff --git a/desktop/pages/store/index.vue b/desktop/pages/store/index.vue
index 64d8a3eb..66b0586f 100644
--- a/desktop/pages/store/index.vue
+++ b/desktop/pages/store/index.vue
@@ -1,2 +1,3 @@
 <template></template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+</script>
diff --git a/desktop/plugins/global-error-handler.ts b/desktop/plugins/global-error-handler.ts
index b7bcd45b..c0b91ead 100644
--- a/desktop/plugins/global-error-handler.ts
+++ b/desktop/plugins/global-error-handler.ts
@@ -1,8 +1,11 @@
 export default defineNuxtPlugin((nuxtApp) => {
   // Also possible
+  /*
   nuxtApp.hook("vue:error", (error, instance, info) => {
+    
     console.error(error, info);
     const router = useRouter();
     router.replace(`/error`);
   });
+  */
 });
diff --git a/desktop/yarn.lock b/desktop/yarn.lock
index 2c770d17..3bb9a634 100644
--- a/desktop/yarn.lock
+++ b/desktop/yarn.lock
@@ -1411,6 +1411,13 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
+"@types/debug@^4.0.0":
+  version "4.1.12"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.12.tgz#a155f21690871953410df4b6b6f53187f0500917"
+  integrity sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==
+  dependencies:
+    "@types/ms" "*"
+
 "@types/estree@*", "@types/estree@1.0.6", "@types/estree@^1.0.0":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
@@ -1441,6 +1448,11 @@
   resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-2.0.0.tgz#d43878b5b20222682163ae6f897b20447233bdfd"
   integrity sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==
 
+"@types/ms@*":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-2.1.0.tgz#052aa67a48eccc4309d7f0191b7e41434b90bb78"
+  integrity sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==
+
 "@types/node@*":
   version "22.7.4"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-22.7.4.tgz#e35d6f48dca3255ce44256ddc05dee1c23353fcc"
@@ -2068,6 +2080,11 @@ chalk@^5.3.0:
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.3.0.tgz#67c20a7ebef70e7f3970a01f90fa210cb6860385"
   integrity sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==
 
+character-entities@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
+  integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
+
 chokidar@^3.5.1, chokidar@^3.5.3, chokidar@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
@@ -2458,13 +2475,20 @@ debug@^3.1.0, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.3.2:
+debug@^4.0.0, debug@^4.3.2:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
   integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
   dependencies:
     ms "^2.1.3"
 
+decode-named-character-reference@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz#daabac9690874c394c81e4162a0304b35d824f0e"
+  integrity sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==
+  dependencies:
+    character-entities "^2.0.0"
+
 deep-equal@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -2523,6 +2547,11 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
 
+dequal@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
 destr@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/destr/-/destr-2.0.3.tgz#7f9e97cb3d16dbdca7be52aca1644ce402cfe449"
@@ -2548,6 +2577,13 @@ devalue@^5.0.0:
   resolved "https://registry.yarnpkg.com/devalue/-/devalue-5.1.1.tgz#a71887ac0f354652851752654e4bd435a53891ae"
   integrity sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==
 
+devlop@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/devlop/-/devlop-1.1.0.tgz#4db7c2ca4dc6e0e834c30be70c94bbc976dc7018"
+  integrity sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==
+  dependencies:
+    dequal "^2.0.0"
+
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
@@ -3812,6 +3848,190 @@ methods@^1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
+micromark-core-commonmark@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-2.0.2.tgz#6a45bbb139e126b3f8b361a10711ccc7c6e15e93"
+  integrity sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    devlop "^1.0.0"
+    micromark-factory-destination "^2.0.0"
+    micromark-factory-label "^2.0.0"
+    micromark-factory-space "^2.0.0"
+    micromark-factory-title "^2.0.0"
+    micromark-factory-whitespace "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-chunked "^2.0.0"
+    micromark-util-classify-character "^2.0.0"
+    micromark-util-html-tag-name "^2.0.0"
+    micromark-util-normalize-identifier "^2.0.0"
+    micromark-util-resolve-all "^2.0.0"
+    micromark-util-subtokenize "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-factory-destination@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz#8fef8e0f7081f0474fbdd92deb50c990a0264639"
+  integrity sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==
+  dependencies:
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-factory-label@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz#5267efa97f1e5254efc7f20b459a38cb21058ba1"
+  integrity sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==
+  dependencies:
+    devlop "^1.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-factory-space@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz#36d0212e962b2b3121f8525fc7a3c7c029f334fc"
+  integrity sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==
+  dependencies:
+    micromark-util-character "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-factory-title@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz#237e4aa5d58a95863f01032d9ee9b090f1de6e94"
+  integrity sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==
+  dependencies:
+    micromark-factory-space "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-factory-whitespace@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz#06b26b2983c4d27bfcc657b33e25134d4868b0b1"
+  integrity sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==
+  dependencies:
+    micromark-factory-space "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-util-character@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-character/-/micromark-util-character-2.1.1.tgz#2f987831a40d4c510ac261e89852c4e9703ccda6"
+  integrity sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==
+  dependencies:
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-util-chunked@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz#47fbcd93471a3fccab86cff03847fc3552db1051"
+  integrity sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==
+  dependencies:
+    micromark-util-symbol "^2.0.0"
+
+micromark-util-classify-character@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz#d399faf9c45ca14c8b4be98b1ea481bced87b629"
+  integrity sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==
+  dependencies:
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-util-combine-extensions@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz#2a0f490ab08bff5cc2fd5eec6dd0ca04f89b30a9"
+  integrity sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==
+  dependencies:
+    micromark-util-chunked "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-util-decode-numeric-character-reference@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz#fcf15b660979388e6f118cdb6bf7d79d73d26fe5"
+  integrity sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==
+  dependencies:
+    micromark-util-symbol "^2.0.0"
+
+micromark-util-encode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz#0d51d1c095551cfaac368326963cf55f15f540b8"
+  integrity sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==
+
+micromark-util-html-tag-name@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz#e40403096481986b41c106627f98f72d4d10b825"
+  integrity sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==
+
+micromark-util-normalize-identifier@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz#c30d77b2e832acf6526f8bf1aa47bc9c9438c16d"
+  integrity sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==
+  dependencies:
+    micromark-util-symbol "^2.0.0"
+
+micromark-util-resolve-all@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz#e1a2d62cdd237230a2ae11839027b19381e31e8b"
+  integrity sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==
+  dependencies:
+    micromark-util-types "^2.0.0"
+
+micromark-util-sanitize-uri@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz#ab89789b818a58752b73d6b55238621b7faa8fd7"
+  integrity sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==
+  dependencies:
+    micromark-util-character "^2.0.0"
+    micromark-util-encode "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+
+micromark-util-subtokenize@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.4.tgz#50d8ca981373c717f497dc64a0dbfccce6c03ed2"
+  integrity sha512-N6hXjrin2GTJDe3MVjf5FuXpm12PGm80BrUAeub9XFXca8JZbP+oIwY4LJSVwFUCL1IPm/WwSVUN7goFHmSGGQ==
+  dependencies:
+    devlop "^1.0.0"
+    micromark-util-chunked "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-util-symbol@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz#e5da494e8eb2b071a0d08fb34f6cefec6c0a19b8"
+  integrity sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==
+
+micromark-util-types@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-types/-/micromark-util-types-2.0.1.tgz#a3edfda3022c6c6b55bfb049ef5b75d70af50709"
+  integrity sha512-534m2WhVTddrcKVepwmVEVnUAmtrx9bfIjNoQHRqfnvdaHQiFytEhJoTgpWJvDEXCO5gLTQh3wYC1PgOJA4NSQ==
+
+micromark@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/micromark/-/micromark-4.0.1.tgz#294c2f12364759e5f9e925a767ae3dfde72223ff"
+  integrity sha512-eBPdkcoCNvYcxQOAKAlceo5SNdzZWfF+FcSupREAzdAh9rRmE239CEQAiTwIgblwnoM8zzj35sZ5ZwvSEOF6Kw==
+  dependencies:
+    "@types/debug" "^4.0.0"
+    debug "^4.0.0"
+    decode-named-character-reference "^1.0.0"
+    devlop "^1.0.0"
+    micromark-core-commonmark "^2.0.0"
+    micromark-factory-space "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-chunked "^2.0.0"
+    micromark-util-combine-extensions "^2.0.0"
+    micromark-util-decode-numeric-character-reference "^2.0.0"
+    micromark-util-encode "^2.0.0"
+    micromark-util-normalize-identifier "^2.0.0"
+    micromark-util-resolve-all "^2.0.0"
+    micromark-util-sanitize-uri "^2.0.0"
+    micromark-util-subtokenize "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
 micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5, micromatch@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"