Render Asset descriptions as Markdown

Author: Sanqui

package-lock.json

@@ -37,6 +37,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@humanspeak/svelte-markdown": "^0.7.7",
     "@svelte-plugins/tooltips": "^3.0.1",
     "qrcode": "^1.5.4",
     "slugify": "^1.6.6",

package.json

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { AssetData } from "$src/types";
 	import Box from "./Box.svelte";
+    import SvelteMarkdown from '@humanspeak/svelte-markdown'
 
     interface Props {
         data: AssetData;
@@ -14,7 +15,9 @@
             <div class="asset-name">
                 <a href="{ data.inventory_url }"> { data.name }</a>
             </div>
-            <p>{@html data.description}</p>
+            <p>
+                <SvelteMarkdown source={data.description} />
+            </p>
         </div>
         {#if data.picture.url}
             <div class="asset-photo">

src/lib/AssetBox.svelte

@@ -19,7 +19,7 @@ export async function loadRHInventoryAssetData(params: {tagId: number, page: num
     const response = await fetch(url);
     const APIAssets = (await response.json()) as RHInventoryAssetsResponse;
 
-    console.log(APIAssets);
+    console.log(`Loaded ${APIAssets.assets.length} assets from RHInventory API`);
 
     return APIAssets.assets.map(APIAsset => {
         return {