feat: service tags

Author: hywax

components/service/base/Index.vue

@@ -23,6 +23,13 @@
           {{ description }}
         </slot>
       </p>
+      <template v-if="tags.length">
+        <ServiceBaseTag
+          v-for="(tag, key) in tags"
+          :key="key"
+          :tag="tag"
+        />
+      </template>
     </div>
   </Component>
 </template>

components/service/base/Tag.vue

@@ -0,0 +1,30 @@
+<template>
+  <span :class="tagClasses">
+    {{ tag.name }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { Tag } from '~/types'
+
+export interface Props {
+  tag: Tag | string
+}
+
+const props = defineProps<Props>()
+
+const tag = computed<Tag>(() => (typeof props.tag === 'string' ? { name: props.tag, color: 'blue' } : props.tag))
+
+const tagClasses = computed(() => ([
+  `bg-${tag.value.color}-100`,
+  `text-${tag.value.color}-800`,
+  'text-xs',
+  'font-medium',
+  'me-2',
+  'px-2.5',
+  'py-0.5',
+  'rounded',
+  `dark:bg-${tag.value.color}-900`,
+  `dark:text-${tag.value.color}-300`,
+]))
+</script>

server/utils/config.ts

@@ -2,14 +2,26 @@ import crypto from 'node:crypto'
 import yaml from 'yaml'
 import defu from 'defu'
 import { ZodError, z } from 'zod'
-import type { CompleteConfig, Service } from '~/types'
+import type { CompleteConfig, Service, Tag } from '~/types'
 
 type DraftService = Omit<Service, 'id'>
 
-function determineServiceId(items: DraftService[]): Service[] {
+type TagMap = Map<Tag['name'], Tag>
+
+function determineService(items: DraftService[], tags: TagMap): Service[] {
   return items.map((item) => ({
-    id: crypto.randomUUID(),
     ...item,
+    id: crypto.randomUUID(),
+    tags: (item.tags || []).map((tag): Tag => {
+      if (typeof tag === 'string') {
+        return tags.get(tag) || {
+          name: tag,
+          color: 'blue',
+        }
+      }
+
+      return tag
+    }),
   }))
 }
 
@@ -22,6 +34,7 @@ export function getDefaultConfig(): CompleteConfig {
     behaviour: {
       target: '_blank',
     },
+    tags: [],
     services: [],
   }
 }
@@ -40,6 +53,11 @@ export function validateConfigSchema(config: any) {
     color: z.string().optional(),
   })
 
+  const tag = z.object({
+    name: z.string(),
+    color: z.string(),
+  })
+
   const service = z.object({
     title: z.string().nullish().optional(),
     description: z.string().nullish().optional(),
@@ -57,6 +75,7 @@ export function validateConfigSchema(config: any) {
     lang: z.string().optional(),
     theme: z.string().optional(),
     checkUpdates: z.boolean().optional(),
+    tags: z.array(tag).optional(),
     services: z.union([
       z.array(service),
       z.record(z.array(service)),
@@ -66,6 +85,14 @@ export function validateConfigSchema(config: any) {
   return schema.parse(config)
 }
 
+function createTagMap(tags: Tag[]): TagMap {
+  return tags.reduce((acc, tag) => {
+    acc.set(tag.name, tag)
+
+    return acc
+  }, new Map())
+}
+
 export async function loadLocalConfig(): Promise<CompleteConfig> {
   const defaultConfig = getDefaultConfig()
   const storage = useStorage('data')
@@ -79,20 +106,21 @@ export async function loadLocalConfig(): Promise<CompleteConfig> {
     const raw = await storage.getItem<string>(file)
     const config = yaml.parse(raw || '') || {}
     const services: CompleteConfig['services'] = []
+    const tags: TagMap = createTagMap(config.tags || [])
 
     validateConfigSchema(config)
 
     if (Array.isArray(config.services)) {
       services.push({
-        items: determineServiceId(config.services),
+        items: determineService(config.services, tags),
       })
     } else {
       const entries = Object.entries<DraftService[]>(config.services || [])
 
       for (const [title, items] of entries) {
         services.push({
           title,
-          items: determineServiceId(items),
+          items: determineService(items, tags),
         })
       }
     }

tailwind.config.ts

@@ -2,6 +2,12 @@ import type { Config } from 'tailwindcss'
 
 export default <Partial<Config>>{
   darkMode: 'class',
+  safelist: [
+    {
+      pattern: /(bg|text)-./,
+      variants: ['dark'],
+    },
+  ],
   theme: {
     extend: {
       colors: {

types/config.d.ts

@@ -5,6 +5,11 @@ export interface ServicesGroup {
   items: Service[]
 }
 
+export interface Tag {
+  name: string
+  color: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'
+}
+
 export interface Behaviour {
   target?: '_blank' | '_self' | '_parent' | '_top'
 }
@@ -14,6 +19,7 @@ export interface Config {
   lang: 'en' | 'ru'
   theme?: 'system' | 'light' | 'dark' | 'deep' | 'sepia'
   behaviour?: Behaviour
+  tags: Tag[]
   services: ServicesGroup[]
   checkUpdates: boolean
 }

types/services.d.ts

@@ -1,3 +1,5 @@
+import type { Tag } from '~/types/config'
+
 export interface ServiceStatus {
   enabled?: boolean
   interval?: number
@@ -20,6 +22,7 @@ export interface Service {
   target?: '_blank' | '_self' | '_parent' | '_top'
   icon?: ServiceIcon
   status?: ServiceStatus
+  tags: Tag['name'][] | Tag[]
   options?: Record<string, any>
   secrets?: Record<string, any>
   server?: Record<string, any>