refactor: optimize types

Author: ShroXd

app/components/OgImage/ShareCard.vue

@@ -6,19 +6,13 @@ const props = withDefaults(
   defineProps<{
     name: string
     theme?: 'light' | 'dark'
-    color?: string
+    color?: AccentColorId
   }>(),
   { theme: 'dark' },
 )
 
 const theme = computed(() => SHARE_CARD_THEMES[props.theme])
-const primaryColor = computed(() => {
-  const id = props.color as AccentColorId | undefined
-  if (id && id in ACCENT_COLOR_TOKENS) {
-    return ACCENT_COLOR_TOKENS[id][props.theme].hex
-  }
-  return ACCENT_COLOR_TOKENS.sky[props.theme].hex
-})
+const primaryColor = computed(() => ACCENT_COLOR_TOKENS[props.color ?? 'sky'][props.theme].hex)
 
 const compactFormatter = useCompactNumberFormatter()
 const bytesFormatter = useBytesFormatter()

app/components/Package/ShareModal.vue

@@ -11,11 +11,9 @@ const colorMode = useColorMode()
 const theme = computed(() => (colorMode.value === 'dark' ? 'dark' : 'light'))
 const { selectedAccentColor } = useAccentColor()
 
-const colorParam = computed(() => {
-  const id = selectedAccentColor.value as keyof typeof ACCENT_COLOR_TOKENS
-  if (!id || !(id in ACCENT_COLOR_TOKENS)) return ''
-  return `&color=${encodeURIComponent(id)}`
-})
+const colorParam = computed(() =>
+  selectedAccentColor.value ? `&color=${encodeURIComponent(selectedAccentColor.value)}` : '',
+)
 
 const cardUrl = computed(
   () => `/api/card/${props.packageName}.png?theme=${theme.value}${colorParam.value}`,

app/pages/share-card/[[org]]/[name].vue

@@ -1,24 +1,22 @@
 <script setup lang="ts">
-import { ACCENT_COLOR_IDS, ACCENT_COLOR_TOKENS, type AccentColorId } from '#shared/utils/constants'
+import { type AccentColorId, ACCENT_COLOR_TOKENS } from '#shared/utils/constants'
 
 // This page exists only as a rendering target for nuxt-og-image.
 // Visiting it directly redirects to the package page.
 
-const route = useRoute()
-const org = (route.params as any).org as string | undefined
-const name = (route.params as any).name as string
+const route = useRoute('share-card-org-name')
+const { org, name } = route.params
 const packageName = org ? `${org}/${name}` : name
 const theme = route.query.theme === 'light' ? 'light' : 'dark'
-const colorParam = route.query.color as string | undefined
-const color: AccentColorId = ACCENT_COLOR_IDS.includes(colorParam as AccentColorId)
-  ? (colorParam as AccentColorId)
-  : 'sky'
-
-const primaryColor = ACCENT_COLOR_TOKENS[color][theme].hex
+const colorParam = route.query.color
+const color: AccentColorId =
+  typeof colorParam === 'string' && colorParam in ACCENT_COLOR_TOKENS
+    ? (colorParam as AccentColorId)
+    : 'sky'
 
 defineOgImageComponent(
   'ShareCard',
-  { name: packageName, theme, primaryColor },
+  { name: packageName, theme, color },
   { width: 1280, height: 520 },
 )