Add icon support for tree links entry

app/assets/css/style.css

@@ -813,11 +813,20 @@ hr, .prose hr { height: 1px; margin-block: 1em; border: none; border-bottom: 1px
     background: var(--color-primary);
     color: var(--color-on-primary);
     margin-bottom: calc(var(--ui-spacing)*1);
+    display: flex;
+    align-items: center;
+}
+.tree-link-card .material-symbols-outlined {
+    margin-right: calc(var(--ui-spacing)*1);
 }
 .tree-link-card:hover {
     background: var(--color-inverse);
     color: var(--color-on-inverse);
 }
+.tree-link-card:hover .material-symbols-outlined {
+    font-variation-settings:
+        'FILL' 1
+}
 .tree-link-card:active {
     opacity: .8;
 }
@@ -834,4 +843,12 @@ a.tree-link-card {
     z-index: -10;
     backdrop-filter: blur(36px);
     -webkit-backdrop-filter: (36px);
+}
+pre.codebox {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    padding: calc(var(--ui-spacing)*3);
+    border-radius: calc(var(--ui-spacing)*2);
+    background: var(--color-inverse-surface-container);
+    color: var(--color-on-inverse-surface-container);
 }

app/pages/tree/[...slug].vue

@@ -10,7 +10,7 @@
             <section class="web-section web-section-narrow-very">
                 <div v-for="link in tree.links">
                     <a class="tree-link-card" :href="link.url" v-if="link.enabled && !link.separate">
-                        {{ link.name }}
+                        <span v-if="link.ico" class="material-symbols-outlined">{{ link.ico }}</span>{{ link.name }}
                     </a>
                     <hr v-else-if="link.separate">
                 </div>
@@ -46,33 +46,37 @@ interface TreeUserDataLink {
     url: string
 }
 
-const tree = ref<TreeUserData | null>(null)
+const { data: tree, error } = await useAsyncData('treeUserData', () =>
+  $fetch<TreeUserData>(treeUserData)
+)
 
-onMounted(async () => {
-  try {
-    const data = await $fetch<TreeUserData>(treeUserData)
+if (error.value) {
+  console.error('User tree fetch failed:', error.value)
+}
 
-    if (!data) return
-
-    tree.value = data
-
-  } catch (err) {
-    console.error('User tree fetch failed:', err)
-  }
-  document.body.style.backgroundImage = `url('${tree.value?.background}')`
+if (error.value?.statusCode === 404) {
+  await navigateTo('/tree')
+}
 
+if (tree.value) {
   useSeoMeta({
     titleTemplate: "%s",
-    title: tree.value?.name + "'s Link",
-    description: tree.value?.desc,
-    ogTitle: tree.value?.name,
-    ogDescription: tree.value?.desc,
+    title: `${tree.value.name}'s Link`,
+    description: tree.value.desc,
+    ogTitle: tree.value.name,
+    ogDescription: tree.value.desc,
     ogSiteName: config.public.siteName,
     twitterCard: 'summary_large_image',
-    twitterTitle: tree.value?.name,
-    twitterDescription: tree.value?.desc,
+    twitterTitle: tree.value.name,
+    twitterDescription: tree.value.desc,
     twitterSite: config.public.twitterUsername
   })
+}
+
+onMounted(() => {
+  if (tree.value?.background) {
+    document.body.style.backgroundImage = `url('${tree.value.background}')`
+  }
 })
 
 definePageMeta({