From fdff525cc353995b256f553e2e72a3be246a8dc3 Mon Sep 17 00:00:00 2001 From: barbapapazes Date: Wed, 31 Jan 2024 11:40:25 +0100 Subject: [PATCH 1/6] chore: do not generate api/_content --- package.json | 5 +++++ patches/@nuxt__content@2.10.0.patch | 34 +++++++++++++++++++++++++++++ pnpm-lock.yaml | 10 +++++++-- 3 files changed, 47 insertions(+), 2 deletions(-) create mode 100644 patches/@nuxt__content@2.10.0.patch diff --git a/package.json b/package.json index c15862c8..2c205abd 100644 --- a/package.json +++ b/package.json @@ -49,5 +49,10 @@ "ofetch": "^1.3.3", "slugify": "^1.6.6", "unstorage": "^1.10.1" + }, + "pnpm": { + "patchedDependencies": { + "@nuxt/content@2.10.0": "patches/@nuxt__content@2.10.0.patch" + } } } diff --git a/patches/@nuxt__content@2.10.0.patch b/patches/@nuxt__content@2.10.0.patch new file mode 100644 index 00000000..ee6dab2a --- /dev/null +++ b/patches/@nuxt__content@2.10.0.patch @@ -0,0 +1,34 @@ +diff --git a/dist/runtime/legacy/composables/navigation.mjs b/dist/runtime/legacy/composables/navigation.mjs +index 871d9b4c705e6929063402236e4f650fa60aeee7..74f730474332256bf50a594a4004c6061a9c68d5 100644 +--- a/dist/runtime/legacy/composables/navigation.mjs ++++ b/dist/runtime/legacy/composables/navigation.mjs +@@ -12,9 +12,9 @@ export const fetchContentNavigation = async (queryBuilder) => { + } + const params = queryBuilder.params(); + const apiPath = content.experimental.stripQueryParameters ? withContentBase(`/navigation/${process.dev ? "_" : `${hash(params)}.${content.integrity}`}/${encodeQueryParams(params)}.json`) : withContentBase(process.dev ? `/navigation/${hash(params)}` : `/navigation/${hash(params)}.${content.integrity}.json`); +- if (!process.dev && process.server) { +- addPrerenderPath(apiPath); +- } ++ // if (!process.dev && process.server) { ++ // addPrerenderPath(apiPath); ++ // } + if (shouldUseClientDB()) { + const generateNavigation = await import("./client-db.mjs").then((m) => m.generateNavigation); + return generateNavigation(params); +diff --git a/dist/runtime/legacy/composables/query.mjs b/dist/runtime/legacy/composables/query.mjs +index a73e58b91094082a1e729f8391d32f39e34ebbde..7e229bb50c30bd3874e43c75352a2d553e39442f 100644 +--- a/dist/runtime/legacy/composables/query.mjs ++++ b/dist/runtime/legacy/composables/query.mjs +@@ -10,9 +10,9 @@ export const createQueryFetch = () => async (query) => { + const { content } = useRuntimeConfig().public; + const params = query.params(); + const apiPath = content.experimental.stripQueryParameters ? withContentBase(`/query/${process.dev ? "_" : `${hash(params)}.${content.integrity}`}/${encodeQueryParams(params)}.json`) : withContentBase(process.dev ? "/query" : `/query/${hash(params)}.${content.integrity}.json`); +- if (!process.dev && process.server) { +- addPrerenderPath(apiPath); +- } ++ // if (!process.dev && process.server) { ++ // addPrerenderPath(apiPath); ++ // } + if (shouldUseClientDB()) { + const db = await import("./client-db.mjs").then((m) => m.useContentDatabase()); + return db.fetch(query); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 75ecc542..ae1d4ba4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,11 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false +patchedDependencies: + '@nuxt/content@2.10.0': + hash: jzdfd6ssf2nfqm3h6gh2hxzo7q + path: patches/@nuxt__content@2.10.0.patch + devDependencies: '@antfu/eslint-config': specifier: 2.6.3 @@ -31,7 +36,7 @@ devDependencies: version: 1.1.33 '@nuxt/content': specifier: ^2.10.0 - version: 2.10.0(nuxt@3.9.1)(vue@3.4.7) + version: 2.10.0(patch_hash=jzdfd6ssf2nfqm3h6gh2hxzo7q)(nuxt@3.9.1)(vue@3.4.7) '@nuxt/ui': specifier: ^2.12.0 version: 2.12.0(nuxt@3.9.1)(vite@5.0.11)(vue@3.4.7) @@ -1578,7 +1583,7 @@ packages: - supports-color dev: true - /@nuxt/content@2.10.0(nuxt@3.9.1)(vue@3.4.7): + /@nuxt/content@2.10.0(patch_hash=jzdfd6ssf2nfqm3h6gh2hxzo7q)(nuxt@3.9.1)(vue@3.4.7): resolution: {integrity: sha512-HZ+1RJJc2SZc/FPYvbsME7b8++a2uf6g9JlMm+qUMDjnCWJaF38pbrsmYq2b9whXx/3WjpBmCRkWCJy6bjSP+g==} dependencies: '@nuxt/kit': 3.9.1 @@ -1629,6 +1634,7 @@ packages: - utf-8-validate - vue dev: true + patched: true /@nuxt/devalue@2.0.2: resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==} From 53cff73bb6189566dcc4793c4c0a0a7051fbc4f3 Mon Sep 17 00:00:00 2001 From: barbapapazes Date: Wed, 31 Jan 2024 12:43:51 +0100 Subject: [PATCH 2/6] fix: use state name --- composables/useBlog.ts | 4 ++-- composables/usePackages.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/composables/useBlog.ts b/composables/useBlog.ts index 0038f541..36cc84fc 100644 --- a/composables/useBlog.ts +++ b/composables/useBlog.ts @@ -20,7 +20,7 @@ export function useBlog() { }, }) - const data = useState('content:blog', () => []) + const data = useState('content:use-blog:data', () => []) const route = useRoute() // This is important to avoid a merge the URL and some data in storage for each missing query in URL. We cannot directly check for query to avoid having UTM breaking the system. @@ -99,7 +99,7 @@ export function useBlog() { return route.query.orderBy as LocationQueryValue || defaultOrderBy }) - const articles = useState('articles', () => []) + const articles = useState('content:use-blog:articles', () => []) const updateQuery = (query?: { q?: string, 'categories[]'?: string[], 'packages[]'?: string[], 'authors[]'?: string[], order?: Order, orderBy?: string }) => { navigateTo({ diff --git a/composables/usePackages.ts b/composables/usePackages.ts index 9ba237f5..9011a2d7 100644 --- a/composables/usePackages.ts +++ b/composables/usePackages.ts @@ -20,7 +20,7 @@ export function usePackages() { }, }) - const data = useState('content:packages', () => []) + const data = useState('content:use-packages:data', () => []) const route = useRoute() // This is important to avoid a merge the URL and some data in storage for each missing query in URL. We cannot directly check for query to avoid having UTM breaking the system. @@ -63,7 +63,7 @@ export function usePackages() { return route.query.orderBy as LocationQueryValue || defaultOrderBy }) - const packages = useState('packages', () => []) + const packages = useState('content:use-packages:packages', () => []) const updateQuery = (query?: { q?: string, order?: Order, orderBy?: string }) => { navigateTo({ From 92221892e9430b23b7dba7ec26056645cd3fe36c Mon Sep 17 00:00:00 2001 From: barbapapazes Date: Wed, 31 Jan 2024 13:05:34 +0100 Subject: [PATCH 3/6] fix: use blog --- composables/useBlog.ts | 41 +++++++++++++++++------------------------ 1 file changed, 17 insertions(+), 24 deletions(-) diff --git a/composables/useBlog.ts b/composables/useBlog.ts index 36cc84fc..abb20d13 100644 --- a/composables/useBlog.ts +++ b/composables/useBlog.ts @@ -20,7 +20,8 @@ export function useBlog() { }, }) - const data = useState('content:use-blog:data', () => []) + const allArticles = ref([]) + const articles = ref([]) const route = useRoute() // This is important to avoid a merge the URL and some data in storage for each missing query in URL. We cannot directly check for query to avoid having UTM breaking the system. @@ -34,7 +35,7 @@ export function useBlog() { }) const categoriesOptions = computed(() => { - const categories = data.value.flatMap(item => item.categories || []) + const categories = articles.value.flatMap(item => item.categories || []) const dedupe = new Set(categories) return Array.from(dedupe).sort() @@ -47,7 +48,7 @@ export function useBlog() { }) const packagesOptions = computed(() => { - const packages = data.value.flatMap(item => item.packages || []) + const packages = articles.value.flatMap(item => item.packages || []) const dedupe = new Set(packages) return Array.from(dedupe).sort() @@ -60,7 +61,7 @@ export function useBlog() { }) const authorsOptions = computed(() => { - const authors = data.value.flatMap(item => item.authors || []) + const authors = articles.value.flatMap(item => item.authors || []) const dedupe = new Map() authors.forEach((author) => { @@ -99,8 +100,6 @@ export function useBlog() { return route.query.orderBy as LocationQueryValue || defaultOrderBy }) - const articles = useState('content:use-blog:articles', () => []) - const updateQuery = (query?: { q?: string, 'categories[]'?: string[], 'packages[]'?: string[], 'authors[]'?: string[], order?: Order, orderBy?: string }) => { navigateTo({ query: { @@ -150,15 +149,15 @@ export function useBlog() { return data } - const search = (data: BlogPostCard[]) => { - if (!q.value) + const search = (data: BlogPostCard[], q: string) => { + if (!q) return data as (BlogPostCard & SearchResult)[] - return miniSearch.search(q.value) as (BlogPostCard & SearchResult)[] + return miniSearch.search(q) as (BlogPostCard & SearchResult)[] } const getArticles = () => { - const searched = search(data.value) + const searched = search(allArticles.value, q.value) const filtered = filter(searched) const sorted = sort(filtered, order.value, orderBy.value) @@ -166,25 +165,19 @@ export function useBlog() { } const fetchBlogArticles = async () => { - if (data.value.length) { - miniSearch.addAll(data.value) - // Do not update articles list on client side to avoid hydration error - return - } + const { data: res, error } = await useAsyncData('content:use-blog:data', () => queryContent('/blog/').only(fields).sort({ publishedAt: -1 }).find()) - try { - const res = await queryContent('/blog/').only(fields).find() - data.value = res as BlogPostCard[] - miniSearch.addAll(res) - articles.value = getArticles() - } - catch (error) { + if (error.value) { throw createError({ - statusCode: 500, - statusMessage: 'Server Error', + statusCode: error.value?.statusCode, + statusMessage: error.value?.statusMessage, fatal: true, }) } + + miniSearch.addAll(res.value as BlogPostCard[]) + allArticles.value = res.value as BlogPostCard[] + articles.value = res.value as BlogPostCard[] } const storage = useStorage('blog', { From b4304ca32cd41bbc1c81eca314150ba25ac5f9f9 Mon Sep 17 00:00:00 2001 From: barbapapazes Date: Wed, 31 Jan 2024 13:23:33 +0100 Subject: [PATCH 4/6] fix: use packages --- composables/useBlog.ts | 3 ++- composables/usePackages.ts | 39 +++++++++++++++++--------------------- 2 files changed, 19 insertions(+), 23 deletions(-) diff --git a/composables/useBlog.ts b/composables/useBlog.ts index abb20d13..fb513b83 100644 --- a/composables/useBlog.ts +++ b/composables/useBlog.ts @@ -20,9 +20,10 @@ export function useBlog() { }, }) + const route = useRoute() + const allArticles = ref([]) const articles = ref([]) - const route = useRoute() // This is important to avoid a merge the URL and some data in storage for each missing query in URL. We cannot directly check for query to avoid having UTM breaking the system. const hasQuery = computed(() => { diff --git a/composables/usePackages.ts b/composables/usePackages.ts index 9011a2d7..8f6bff5e 100644 --- a/composables/usePackages.ts +++ b/composables/usePackages.ts @@ -20,9 +20,11 @@ export function usePackages() { }, }) - const data = useState('content:use-packages:data', () => []) const route = useRoute() + const allPackages = ref([]) + const packages = ref([]) + // This is important to avoid a merge the URL and some data in storage for each missing query in URL. We cannot directly check for query to avoid having UTM breaking the system. const hasQuery = computed(() => { return route.query.q || route.query.order || route.query.orderby @@ -63,8 +65,6 @@ export function usePackages() { return route.query.orderBy as LocationQueryValue || defaultOrderBy }) - const packages = useState('content:use-packages:packages', () => []) - const updateQuery = (query?: { q?: string, order?: Order, orderBy?: string }) => { navigateTo({ query: { @@ -83,39 +83,34 @@ export function usePackages() { updateQuery(defaultQuery) } - const search = (data: Package[]) => { - if (!q.value) + const search = (data: Package[], q: string) => { + if (!q) return data as (Package & SearchResult)[] - return miniSearch.search(q.value) as (Package & SearchResult)[] + return miniSearch.search(q) as (Package & SearchResult)[] } const getPackages = () => { - const searched = search(data.value) + const searched = search(allPackages.value, q.value) const sorted = sort(searched, order.value, orderBy.value) return sorted } const fetchPackages = async () => { - if (data.value.length) { - miniSearch.addAll(data.value) - return - } + const { data: res, error } = await useAsyncData('content:use-packages:data', () => $fetch('/api/content/packages.json')) - try { - const res = await $fetch('/api/content/packages.json') - data.value = res as Package[] - miniSearch.addAll(data.value) - packages.value = getPackages() - } - catch (error) { + if (error.value) { throw createError({ - statusCode: 500, - statusMessage: 'Server Error', + statusCode: error.value?.statusCode, + statusMessage: error.value?.statusMessage, fatal: true, }) } + + miniSearch.addAll(res.value as Package[]) + allPackages.value = res.value as Package[] + packages.value = res.value as Package[] } const storage = useStorage('packages', { @@ -151,9 +146,9 @@ export function usePackages() { } }) - const numberOfPackages = computed(() => data.value.length) + const numberOfPackages = computed(() => allPackages.value.length) - const monthlyDownloads = computed(() => data.value.reduce((acc, pkg) => { + const monthlyDownloads = computed(() => allPackages.value.reduce((acc, pkg) => { if (!pkg.monthlyDownloads) return acc From 096fd7a54c78ecdd9547981d9afb16413000338d Mon Sep 17 00:00:00 2001 From: barbapapazes Date: Wed, 31 Jan 2024 15:16:23 +0100 Subject: [PATCH 5/6] fix: use home instead of index --- pages/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/index.vue b/pages/index.vue index b86486b8..cc663480 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -1,5 +1,5 @@