refactor(downloadFont): handle generic families and multi-family strings

Strips generic CSS families (serif, monospace, etc.) before building
the font API URL, and correctly parses comma-separated font stacks.

src/components/FluxNote.vue

@@ -2,6 +2,7 @@
 import { computed, nextTick, onMounted, onUnmounted, toRefs, watch } from "vue"
 
 import HeaderNote from "@/components/HeaderNote.vue"
+import SignInGithub from "@/components/SignInGithub.vue"
 import SkeletonLoader from "@/components/SkeletonLoader.vue"
 import StackedNote from "@/components/StackedNote.vue"
 import { useLinks } from "@/hooks/useLinks.hook"
@@ -102,6 +103,10 @@ onUnmounted(() => {
       </div>
       <slot />
       <skeleton-loader v-if="isLoading" />
+      <div v-else-if="withContent && !hasContent" class="repo-not-found">
+        <p>This repository is not accessible.</p>
+        <sign-in-github />
+      </div>
       <p
         v-else-if="withContent && hasContent"
         class="note-display"
@@ -189,6 +194,15 @@ $header-height: 40px;
     }
   }
 
+  .repo-not-found {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem 0;
+    color: var(--color-base-content);
+  }
+
   .note-display {
     padding-bottom: 2rem;
   }

src/utils/downloadFont.ts

@@ -1,33 +1,48 @@
 import FontFaceObserver from "fontfaceobserver"
 
-const assembleFontLink = (font: string) => {
+const GENERIC_FAMILIES = new Set([
-  return `https://api.fonts.coollabs.io/css2?display=swap&family=${font
+  "serif", "sans-serif", "monospace", "cursive", "fantasy",
-    .replaceAll(",", "&family=")
+  "system-ui", "ui-serif", "ui-sans-serif", "ui-monospace", "ui-rounded",
-    .replaceAll(" ", "+")}`
+])
+
+const parseWebFontFamilies = (font: string): string[] =>
+  font
+    .split(",")
+    .map(f => f.trim().replace(/^["']|["']$/g, ""))
+    .filter(f => f && !GENERIC_FAMILIES.has(f))
+
+const assembleFontLink = (families: string[]): string | null => {
+  if (families.length === 0) return null
+  return `https://api.fonts.coollabs.io/css2?display=swap&${
+    families.map(f => `family=${f.replaceAll(" ", "+")}`).join("&")
+  }`
 }
 
 export const downloadFont = async (
   font: string,
   cssVar = "--font-family"
 ): Promise<void> => {
-  const href = assembleFontLink(font)
+  const families = parseWebFontFamilies(font)
+  const href = assembleFontLink(families)
 
-  // check if the href already exists
+  if (href) {
-  const existingLink = document.querySelector(`link[href="${href}"]`)
+    const alreadyLoaded = Array.from(
+      document.head.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]')
+    ).some(link => link.href === href)
 
-  if (!existingLink) {
+    if (!alreadyLoaded) {
       const link = document.createElement("link")
       link.href = href
       link.rel = "stylesheet"
-
       document.head.appendChild(link)
     }
 
     try {
-    await new FontFaceObserver(font).load()
+      await new FontFaceObserver(families[0]).load()
-
+    } catch {
-    document.documentElement.style.setProperty(cssVar, font)
-  } catch (error) {
       console.warn("error when loading font")
     }
+  }
+
+  document.documentElement.style.setProperty(cssVar, font)
 }

src/views/SpaceCowboy.vue

@@ -1,4 +1,6 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import SignInGithub from "@/components/SignInGithub.vue"
+</script>
 
 <template>
   <main class="space-cowboy content">
@@ -43,6 +45,7 @@
     <router-link class="button is-links" :to="{ name: 'Home' }"
       >return to homepage</router-link
     >
+    <sign-in-github />
   </main>
 </template>