Skip to content

Commit

Permalink
feat: add fonts
Browse files Browse the repository at this point in the history
  • Loading branch information
antfu committed Aug 22, 2024
1 parent 8d7dc82 commit c1b9724
Show file tree
Hide file tree
Showing 7 changed files with 66 additions and 38 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -81,3 +81,5 @@ dist
.idea

.vite-inspect

public/assets/fonts
20 changes: 14 additions & 6 deletions src/client/components/ModuleList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
Expand All @@ -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">
Expand All @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion src/client/components/NavBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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()">
Expand Down
48 changes: 32 additions & 16 deletions src/client/components/PluginName.vue
Original file line number Diff line number Diff line change
@@ -1,37 +1,53 @@
<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-',
'rollup-',
'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>
2 changes: 1 addition & 1 deletion src/client/pages/index/module.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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()"
Expand Down
6 changes: 3 additions & 3 deletions src/client/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default defineConfig({

plugins: [
{
name: 'local-object-transform',
name: 'local:object-transform',
transform: {
order: 'post',
async handler(code) {
Expand All @@ -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')
Expand All @@ -41,7 +41,7 @@ export default defineConfig({
},

{
name: 'no-change',
name: 'local:no-change',
transform: {
order: 'post',
async handler(code) {
Expand Down
24 changes: 13 additions & 11 deletions uno.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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]',
Expand All @@ -43,6 +38,13 @@ export default defineConfig({
display: 'block',
},
}),
presetWebFonts({
fonts: {
mono: 'DM Mono',
sans: 'DM Sans',
},
processors: createLocalFontProcessor(),
}),
],
transformers: [
transformerDirectives(),
Expand Down

0 comments on commit c1b9724

Please sign in to comment.