forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: add angular in the framework list (#730)
authored by
Santosh Yadav
and committed by
GitHub
56b443e6
31716148
+14
-6
+14
-6
app/pages/index.vue
+14
-6
app/pages/index.vue
···
4
4
const searchQuery = shallowRef('')
5
5
const searchInputRef = useTemplateRef('searchInputRef')
6
6
const { focused: isSearchFocused } = useFocus(searchInputRef)
7
+
const frameworks = ref([
8
+
{ name: 'nuxt', package: 'nuxt' },
9
+
{ name: 'vue', package: 'vue' },
10
+
{ name: 'react', package: 'react' },
11
+
{ name: 'svelte', package: 'svelte' },
12
+
{ name: 'vite', package: 'vite' },
13
+
{ name: 'next', package: 'next' },
14
+
{ name: 'astro', package: 'astro' },
15
+
{ name: 'typescript', package: 'typescript' },
16
+
{ name: 'Angular', package: '@angular/core' },
17
+
])
7
18
8
19
async function search() {
9
20
const query = searchQuery.value.trim()
···
114
125
style="animation-delay: 0.3s"
115
126
>
116
127
<ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 list-none m-0 p-0">
117
-
<li
118
-
v-for="pkg in ['nuxt', 'vue', 'react', 'svelte', 'vite', 'next', 'astro', 'typescript']"
119
-
:key="pkg"
120
-
>
128
+
<li v-for="framework in frameworks" :key="framework.name">
121
129
<NuxtLink
122
-
:to="{ name: 'package', params: { package: [pkg] } }"
130
+
:to="{ name: 'package', params: { package: [framework.package] } }"
123
131
class="link-subtle font-mono text-sm inline-flex items-center gap-2 group"
124
132
>
125
133
<span
126
134
class="w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200"
127
135
/>
128
-
{{ pkg }}
136
+
{{ framework.name }}
129
137
</NuxtLink>
130
138
</li>
131
139
</ul>