forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: apply explicit seo meta tags globally (#935)
+73
-2
+5
-1
app/pages/@[org].vue
+5
-1
app/pages/@[org].vue
···
1
1
<script setup lang="ts">
2
2
import type { FilterChip, SortOption } from '#shared/types/preferences'
3
-
import { debounce } from 'perfect-debounce'
4
3
import { normalizeSearchParam } from '#shared/utils/url'
4
+
import { debounce } from 'perfect-debounce'
5
5
6
6
definePageMeta({
7
7
name: 'org',
···
138
138
139
139
useSeoMeta({
140
140
title: () => `@${orgName.value} - npmx`,
141
+
ogTitle: () => `@${orgName.value} - npmx`,
142
+
twitterTitle: () => `@${orgName.value} - npmx`,
141
143
description: () => `npm packages published by the ${orgName.value} organization`,
144
+
ogDescription: () => `npm packages published by the ${orgName.value} organization`,
145
+
twitterDescription: () => `npm packages published by the ${orgName.value} organization`,
142
146
})
143
147
144
148
defineOgImageComponent('Default', {
+4
app/pages/about.vue
+4
app/pages/about.vue
···
11
11
12
12
useSeoMeta({
13
13
title: () => `${$t('about.title')} - npmx`,
14
+
ogTitle: () => `${$t('about.title')} - npmx`,
15
+
twitterTitle: () => `${$t('about.title')} - npmx`,
14
16
description: () => $t('about.meta_description'),
17
+
ogDescription: () => $t('about.meta_description'),
18
+
twitterDescription: () => $t('about.meta_description'),
15
19
})
16
20
17
21
defineOgImageComponent('Default', {
+16
app/pages/compare.vue
+16
app/pages/compare.vue
···
52
52
packages.value.length > 0
53
53
? $t('compare.packages.meta_title', { packages: packages.value.join(' vs ') })
54
54
: $t('compare.packages.meta_title_empty'),
55
+
ogTitle: () =>
56
+
packages.value.length > 0
57
+
? $t('compare.packages.meta_title', { packages: packages.value.join(' vs ') })
58
+
: $t('compare.packages.meta_title_empty'),
59
+
twitterTitle: () =>
60
+
packages.value.length > 0
61
+
? $t('compare.packages.meta_title', { packages: packages.value.join(' vs ') })
62
+
: $t('compare.packages.meta_title_empty'),
55
63
description: () =>
64
+
packages.value.length > 0
65
+
? $t('compare.packages.meta_description', { packages: packages.value.join(', ') })
66
+
: $t('compare.packages.meta_description_empty'),
67
+
ogDescription: () =>
68
+
packages.value.length > 0
69
+
? $t('compare.packages.meta_description', { packages: packages.value.join(', ') })
70
+
: $t('compare.packages.meta_description_empty'),
71
+
twitterDescription: () =>
56
72
packages.value.length > 0
57
73
? $t('compare.packages.meta_description', { packages: packages.value.join(', ') })
58
74
: $t('compare.packages.meta_description_empty'),
-1
app/pages/index.vue
-1
app/pages/index.vue
···
27
27
title: () => $t('seo.home.title'),
28
28
ogTitle: () => $t('seo.home.title'),
29
29
twitterTitle: () => $t('seo.home.title'),
30
-
twitterCard: 'summary_large_image',
31
30
description: () => $t('seo.home.description'),
32
31
ogDescription: () => $t('seo.home.description'),
33
32
twitterDescription: () => $t('seo.home.description'),
+14
app/pages/package-code/[...path].vue
+14
app/pages/package-code/[...path].vue
···
283
283
}
284
284
return `Code - ${packageName.value}@${version.value} - npmx`
285
285
},
286
+
ogTitle: () => {
287
+
if (filePath.value) {
288
+
return `${filePath.value} - ${packageName.value}@${version.value} - npmx`
289
+
}
290
+
return `Code - ${packageName.value}@${version.value} - npmx`
291
+
},
292
+
twitterTitle: () => {
293
+
if (filePath.value) {
294
+
return `${filePath.value} - ${packageName.value}@${version.value} - npmx`
295
+
}
296
+
return `Code - ${packageName.value}@${version.value} - npmx`
297
+
},
286
298
description: () => `Browse source code for ${packageName.value}@${version.value}`,
299
+
ogDescription: () => `Browse source code for ${packageName.value}@${version.value}`,
300
+
twitterDescription: () => `Browse source code for ${packageName.value}@${version.value}`,
287
301
})
288
302
289
303
defineOgImageComponent('Default', {
+5
app/pages/package-docs/[...path].vue
+5
app/pages/package-docs/[...path].vue
···
95
95
96
96
useSeoMeta({
97
97
title: () => pageTitle.value,
98
+
ogTitle: () => pageTitle.value,
99
+
twitterTitle: () => pageTitle.value,
100
+
description: () => pkg.value?.license ?? '',
101
+
ogDescription: () => pkg.value?.license ?? '',
102
+
twitterDescription: () => pkg.value?.license ?? '',
98
103
})
99
104
100
105
defineOgImageComponent('Default', {
+4
app/pages/package/[...package].vue
+4
app/pages/package/[...package].vue
···
456
456
457
457
useSeoMeta({
458
458
title: () => (pkg.value?.name ? `${pkg.value.name} - npmx` : 'Package - npmx'),
459
+
ogTitle: () => (pkg.value?.name ? `${pkg.value.name} - npmx` : 'Package - npmx'),
460
+
twitterTitle: () => (pkg.value?.name ? `${pkg.value.name} - npmx` : 'Package - npmx'),
459
461
description: () => pkg.value?.description ?? '',
462
+
ogDescription: () => pkg.value?.description ?? '',
463
+
twitterDescription: () => pkg.value?.description ?? '',
460
464
})
461
465
462
466
onKeyStroke(
+12
app/pages/search.vue
+12
app/pages/search.vue
···
583
583
useSeoMeta({
584
584
title: () =>
585
585
`${query.value ? $t('search.title_search', { search: query.value }) : $t('search.title_packages')} - npmx`,
586
+
ogTitle: () =>
587
+
`${query.value ? $t('search.title_search', { search: query.value }) : $t('search.title_packages')} - npmx`,
588
+
twitterTitle: () =>
589
+
`${query.value ? $t('search.title_search', { search: query.value }) : $t('search.title_packages')} - npmx`,
586
590
description: () =>
591
+
query.value
592
+
? $t('search.meta_description', { search: query.value })
593
+
: $t('search.meta_description_packages'),
594
+
ogDescription: () =>
595
+
query.value
596
+
? $t('search.meta_description', { search: query.value })
597
+
: $t('search.meta_description_packages'),
598
+
twitterDescription: () =>
587
599
query.value
588
600
? $t('search.meta_description', { search: query.value })
589
601
: $t('search.meta_description_packages'),
+4
app/pages/settings.vue
+4
app/pages/settings.vue
···
20
20
21
21
useSeoMeta({
22
22
title: () => `${$t('settings.title')} - npmx`,
23
+
ogTitle: () => `${$t('settings.title')} - npmx`,
24
+
twitterTitle: () => `${$t('settings.title')} - npmx`,
23
25
description: () => $t('settings.meta_description'),
26
+
ogDescription: () => $t('settings.meta_description'),
27
+
twitterDescription: () => $t('settings.meta_description'),
24
28
})
25
29
26
30
defineOgImageComponent('Default', {
+4
app/pages/~[username]/index.vue
+4
app/pages/~[username]/index.vue
···
163
163
164
164
useSeoMeta({
165
165
title: () => `~${username.value} - npmx`,
166
+
ogTitle: () => `~${username.value} - npmx`,
167
+
twitterTitle: () => `~${username.value} - npmx`,
166
168
description: () => `npm packages maintained by ${username.value}`,
169
+
ogDescription: () => `npm packages maintained by ${username.value}`,
170
+
twitterDescription: () => `npm packages maintained by ${username.value}`,
167
171
})
168
172
169
173
defineOgImageComponent('Default', {
+4
app/pages/~[username]/orgs.vue
+4
app/pages/~[username]/orgs.vue
···
99
99
100
100
useSeoMeta({
101
101
title: () => `@${username.value} Organizations - npmx`,
102
+
ogTitle: () => `@${username.value} Organizations - npmx`,
103
+
twitterTitle: () => `@${username.value} Organizations - npmx`,
102
104
description: () => `npm organizations for ${username.value}`,
105
+
ogDescription: () => `npm organizations for ${username.value}`,
106
+
twitterDescription: () => `npm organizations for ${username.value}`,
103
107
})
104
108
105
109
defineOgImageComponent('Default', {