fix: move frameworks to utils

Author: graphieros

app/components/Package/DownloadAnalytics.vue

@@ -4,6 +4,7 @@ import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
 import { useDebounceFn, useElementSize } from '@vueuse/core'
 import { useCssVariables } from '~/composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch } from '~/utils/colors'
+import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
 
 const props = defineProps<{
   // For single package downloads history
@@ -57,9 +58,6 @@ const { colors } = useCssVariables(
   },
 )
 
-// Listed frameworks have hardcoded colors
-const { getFrameworkColor, isListedFramework } = useFrameworks()
-
 watch(
   () => colorMode.value,
   value => {

app/composables/useFrameworks.ts

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { debounce } from 'perfect-debounce'
+import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
 
 const searchQuery = shallowRef('')
 const searchInputRef = useTemplateRef('searchInputRef')
 const { focused: isSearchFocused } = useFocus(searchInputRef)
-const { frameworks } = useFrameworks()
 
 async function search() {
   const query = searchQuery.value.trim()
@@ -116,7 +116,7 @@ defineOgImageComponent('Default', {
         style="animation-delay: 0.3s"
       >
         <ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 list-none m-0 p-0">
-          <li v-for="framework in frameworks" :key="framework.name">
+          <li v-for="framework in SHOWCASED_FRAMEWORKS" :key="framework.name">
             <NuxtLink
               :to="{ name: 'package', params: { package: [framework.package] } }"
               class="link-subtle font-mono text-sm inline-flex items-center gap-2 group"

app/pages/index.vue

@@ -0,0 +1,22 @@
+export const SHOWCASED_FRAMEWORKS = [
+  { name: 'nuxt', package: 'nuxt', color: 'oklch(0.7862 0.192 155.63)' },
+  { name: 'vue', package: 'vue', color: 'oklch(0.7025 0.132 160.37)' },
+  { name: 'nitro', package: 'nitro', color: 'oklch(70.4% 0.191 22.216)' },
+  { name: 'react', package: 'react', color: 'oklch(0.832 0.1167 218.69)' },
+  { name: 'svelte', package: 'svelte', color: 'oklch(0.6917 0.1865 35.04)' },
+  { name: 'vite', package: 'vite', color: 'oklch(0.7484 0.1439 294.03)' },
+  { name: 'next', package: 'next', color: 'oklch(71.7% .1648 250.794)' },
+  { name: 'astro', package: 'astro', color: 'oklch(0.5295 0.2434 270.23)' },
+  { name: 'typescript', package: 'typescript', color: 'oklch(0.5671 0.1399 253.3)' },
+  { name: 'angular', package: '@angular/core', color: 'oklch(0.626 0.2663 310.4)' },
+]
+
+export type ShowcasedFramework = (typeof SHOWCASED_FRAMEWORKS)[number]['package']
+
+export function getFrameworkColor(framework: ShowcasedFramework): string {
+  return SHOWCASED_FRAMEWORKS.find(f => f.package === framework)!.color
+}
+
+export function isListedFramework(name: string): name is ShowcasedFramework {
+  return SHOWCASED_FRAMEWORKS.some(f => f.package === name)
+}