From c1b972415d472a6ca557decc371a33946f99d8c7 Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Thu, 22 Aug 2024 18:07:03 +0200
Subject: [PATCH] feat: add fonts

---
 .gitignore                           |  2 ++
 src/client/components/ModuleList.vue | 20 ++++++++----
 src/client/components/NavBar.vue     |  2 +-
 src/client/components/PluginName.vue | 48 ++++++++++++++++++----------
 src/client/pages/index/module.vue    |  2 +-
 src/client/vite.config.ts            |  6 ++--
 uno.config.ts                        | 24 +++++++-------
 7 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/.gitignore b/.gitignore
index bf51621..a642117 100644
--- a/.gitignore
+++ b/.gitignore
@@ -81,3 +81,5 @@ dist
 .idea
 
 .vite-inspect
+
+public/assets/fonts
diff --git a/src/client/components/ModuleList.vue b/src/client/components/ModuleList.vue
index b009dfe..7338740 100644
--- a/src/client/components/ModuleList.vue
+++ b/src/client/components/ModuleList.vue
@@ -3,11 +3,13 @@ import type { ModuleInfo } from '../../types'
 import { listMode, searchText } from '../logic'
 
 const props = defineProps<{
-  modules: ModuleInfo[]
+  modules: readonly ModuleInfo[]
 }>()
 
+const route = useRoute()
+
 const { list, containerProps, wrapperProps } = useVirtualList(
-  toRef(props, 'modules'),
+  toRef(props, 'modules') as Ref<ModuleInfo[]>,
   {
     itemHeight: listMode.value === 'detailed' ? 53 : 37,
   },
@@ -32,8 +34,14 @@ const { list, containerProps, wrapperProps } = useVirtualList(
         <RouterLink
           v-for="m in list"
           :key="m.data.id"
-          class="block border-b border-main px-3 py-2 text-left text-sm font-mono"
-          :to="`/module?id=${encodeURIComponent(m.data.id)}`"
+          class="block border-b border-main hover:bg-active px-3 py-2 text-left text-sm font-mono"
+          :to="{
+            path: '/module',
+            query: {
+              ...route.query,
+              id: m.data.id,
+            },
+          }"
         >
           <ModuleId :id="m.data.id" />
           <div v-if="listMode === 'detailed'" text-xs flex="~ gap-1">
@@ -44,8 +52,8 @@ const { list, containerProps, wrapperProps } = useVirtualList(
               :key="i"
             >
               <span v-if="idx !== 0" op20>|</span>
-              <span>
-                <PluginName :name="i.name" :hide="true" />
+              <span ws-nowrap op50>
+                <PluginName :name="i.name" :compact="true" />
               </span>
             </template>
             <template v-if="m.data.invokeCount > 2">
diff --git a/src/client/components/NavBar.vue b/src/client/components/NavBar.vue
index ef0b672..113bf14 100644
--- a/src/client/components/NavBar.vue
+++ b/src/client/components/NavBar.vue
@@ -3,7 +3,7 @@ import { isStaticMode, refetch, toggleDark } from '../logic'
 </script>
 
 <template>
-  <nav h-54px flex="~ none gap-5" border="b main" pl-4 pr-6 font-light children:my-auto>
+  <nav h-54px flex="~ none gap-2" border="b main" pl-4 pr-4 font-light children:my-auto>
     <slot />
     <slot name="actions">
       <button v-if="!isStaticMode" class="text-lg icon-btn" title="Refetch" @click="refetch()">
diff --git a/src/client/components/PluginName.vue b/src/client/components/PluginName.vue
index c2a776b..4c207d5 100644
--- a/src/client/components/PluginName.vue
+++ b/src/client/components/PluginName.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
+import { Fragment } from 'vue'
+import { getHashColorFromString } from '../logic/color'
+
 const props = defineProps<{
   name: string
+  compact?: boolean
   colored?: boolean
   hide?: boolean
 }>()
 
-const starts = [
+const startsGeneric = [
   '__load__',
-  'vite:',
   'vite-plugin-',
   'vite-',
   'rollup-plugin-',
@@ -15,23 +18,36 @@ const starts = [
   'unplugin-',
 ]
 
-const parts = computed(() => {
+const startCompact = [
+  ...startsGeneric,
+  'vite:',
+]
+
+function render() {
+  const starts = props.compact ? startCompact : startsGeneric
+
   for (const s of starts) {
-    if (props.name.startsWith(s))
-      return [s, props.name.slice(s.length)]
+    if (props.name.startsWith(s)) {
+      if (props.compact)
+        return h('span', props.name.slice(s.length))
+      return h(Fragment, [
+        h('span', { class: 'op50' }, s),
+        h('span', props.name.slice(s.length)),
+      ])
+    }
+  }
+
+  const parts = props.name.split(':')
+  if (parts.length > 1) {
+    return h(Fragment, [
+      h('span', { style: { color: getHashColorFromString(parts[0]) } }, `${parts[0]}:`),
+      h('span', parts.slice(1).join(':')),
+    ])
   }
-  return ['', props.name]
-})
-const opacity = computed(() => {
-  return props.colored ? 'op100 dark:op-65' : 'op75 dark:op50'
-})
+  return h('span', props.name)
+}
 </script>
 
 <template>
-  <span v-if="parts[0] && !hide" :class="opacity">
-    {{ parts[0] }}
-  </span>
-  <span :class="opacity">
-    {{ parts[1] }}
-  </span>
+  <component :is="render" />
 </template>
diff --git a/src/client/pages/index/module.vue b/src/client/pages/index/module.vue
index 9fe0ca5..116794f 100644
--- a/src/client/pages/index/module.vue
+++ b/src/client/pages/index/module.vue
@@ -141,7 +141,7 @@ getHot().then((hot) => {
               currentIndex === tr.index
                 ? 'bg-active'
                 : tr.noChange || !tr.result
-                  ? 'font-italic'
+                  ? 'op75 saturate-50'
                   : ''
             "
             @click="index = tr.index.toString()"
diff --git a/src/client/vite.config.ts b/src/client/vite.config.ts
index 87a4bc8..f688b98 100644
--- a/src/client/vite.config.ts
+++ b/src/client/vite.config.ts
@@ -18,7 +18,7 @@ export default defineConfig({
 
   plugins: [
     {
-      name: 'local-object-transform',
+      name: 'local:object-transform',
       transform: {
         order: 'post',
         async handler(code) {
@@ -27,7 +27,7 @@ export default defineConfig({
       },
     },
     {
-      name: 'generate-error',
+      name: 'local:generate-error',
       load(id) {
         if (id === '/__LOAD_ERROR')
           throw new Error('Load error')
@@ -41,7 +41,7 @@ export default defineConfig({
     },
 
     {
-      name: 'no-change',
+      name: 'local:no-change',
       transform: {
         order: 'post',
         async handler(code) {
diff --git a/uno.config.ts b/uno.config.ts
index 232c2df..cd59314 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -3,9 +3,11 @@ import {
   presetAttributify,
   presetIcons,
   presetUno,
+  presetWebFonts,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
+import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
 
 // @unocss-include
 export default defineConfig({
@@ -14,21 +16,14 @@ export default defineConfig({
     'bg-main': 'bg-white dark:bg-[#121212]',
     'text-main': 'text-[#121212] dark:text-white',
     'bg-active': 'bg-gray-400/10',
+
     'icon-btn': [
       'inline-block cursor-pointer select-none !outline-none',
-      'opacity-75 transition duration-200 ease-in-out',
-      'hover:opacity-100 hover:text-teal-600',
-      'text-0.9em h-1.2em',
+      'opacity-75 transition duration-200 ease-in-out p2 rounded-lg',
+      'hover:opacity-100 hover:text-teal-600 hover:bg-active',
+      'text-0.9em',
     ].join(' '),
 
-    'badge-virtual': 'bg-teal-400:10 text-green-700 dark:text-teal-400',
-    'badge-gray': 'bg-gray-400:10 text-gray-700 dark:text-gray-400',
-    'badge-green': 'bg-teal-400:10 text-green-700 dark:text-[#34E676]',
-    'badge-orange': 'bg-orange-400:10 text-orange-800 dark:text-orange-400',
-    'badge-error': 'bg-main  text-[#b71c1c] dark:text-[#EF5350]',
-    'badge-order': 'bg-violet-400:10 text-violet-700 dark:text-violet-400',
-    'badge-load': 'bg-light-blue-400/10 text-blue-700 dark:text-light-blue-400',
-    'badge-post': 'bg-purple7/5 text-purple7 dark:bg-purple3/5 dark:text-purple3',
     'status-green': 'text-green-700 dark:text-[#34E676]',
     'status-yellow': 'text-[#827717] dark:text-[#EAB306]',
     'status-red': 'text-[#b71c1c] dark:text-[#EF5350]',
@@ -43,6 +38,13 @@ export default defineConfig({
         display: 'block',
       },
     }),
+    presetWebFonts({
+      fonts: {
+        mono: 'DM Mono',
+        sans: 'DM Sans',
+      },
+      processors: createLocalFontProcessor(),
+    }),
   ],
   transformers: [
     transformerDirectives(),