diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts index c0c938e3481..0979bd7d87c 100644 --- a/frontend/nuxt.config.ts +++ b/frontend/nuxt.config.ts @@ -130,6 +130,7 @@ export default defineNuxtConfig({ "@nuxtjs/i18n", "@nuxtjs/tailwindcss", "@nuxtjs/plausible", + "nuxt-prepare", "@nuxt/test-utils/module", "@nuxtjs/sitemap", ], diff --git a/frontend/package.json b/frontend/package.json index 8109f5659f9..9e1d03fe7ba 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -98,6 +98,7 @@ "node-html-parser": "^5.3.3", "npm-run-all": "^4.1.5", "nuxt": "^3.9.1", + "nuxt-prepare": "^0.2.2", "talkback": "^3.0.2", "typescript": "^5.2.2", "vitest": "^1.2.0", diff --git a/frontend/server.prepare.ts b/frontend/server.prepare.ts new file mode 100644 index 00000000000..8a43ed83b90 --- /dev/null +++ b/frontend/server.prepare.ts @@ -0,0 +1,21 @@ +import { defineNuxtPrepareHandler } from "nuxt-prepare/config" +import { $fetch } from "ofetch" + +import { sortProviders } from "./src/utils/provider" + +export default defineNuxtPrepareHandler(async () => { + const apiUrl = + process.env.NUXT_PUBLIC_API_URL || "https://api.openverse.engineering/" + const audioProviders = await $fetch(`${apiUrl}v1/audio/stats/`) + const imageProviders = await $fetch(`${apiUrl}v1/images/stats/`) + + return { + ok: true, + state: { + providers: { + audio: sortProviders(audioProviders), + image: sortProviders(imageProviders), + }, + }, + } +}) diff --git a/frontend/src/app.vue b/frontend/src/app.vue index bc762d46ec7..85544a69e50 100644 --- a/frontend/src/app.vue +++ b/frontend/src/app.vue @@ -42,7 +42,6 @@ import { } from "#imports" import { useUiStore } from "~/stores/ui" -import { useProviderStore } from "~/stores/provider" import { useFeatureFlagStore } from "~/stores/feature-flag" import { useLayout } from "~/composables/use-layout" @@ -97,10 +96,6 @@ export default defineComponent({ const isDesktopLayout = computed(() => uiStore.isDesktopLayout) const breakpoint = computed(() => uiStore.breakpoint) - /* Provider store */ - const providerStore = useProviderStore() - await providerStore.fetchMediaProviders() - return { isDesktopLayout, breakpoint, diff --git a/frontend/src/stores/provider.ts b/frontend/src/stores/provider.ts index 56b08c972e3..5576d6b9500 100644 --- a/frontend/src/stores/provider.ts +++ b/frontend/src/stores/provider.ts @@ -17,6 +17,10 @@ import type { MediaProvider } from "~/types/media-provider" import type { FetchingError, FetchState } from "~/types/fetch-state" import { DEFAULT_REQUEST_TIMEOUT } from "~/utils/query-utils" +import { sortProviders } from "~/utils/provider" + +import { providers } from "#nuxt-prepare" + export interface ProviderState { /** * Timestamp is used to limit the update frequency to one every 60 minutes per request. @@ -36,24 +40,12 @@ export interface ProviderState { } } -/** - * Sorts providers by their source_name property. - * @param data - initial unordered list of providers - */ -const sortProviders = (data: MediaProvider[]): MediaProvider[] => { - return [...data].sort((sourceObjectA, sourceObjectB) => { - const nameA = sourceObjectA.source_name.toUpperCase() - const nameB = sourceObjectB.source_name.toUpperCase() - return nameA.localeCompare(nameB) - }) -} - export const useProviderStore = defineStore("provider", { state: (): ProviderState => ({ lastUpdated: null, providers: { - [AUDIO]: [], - [IMAGE]: [], + [AUDIO]: providers?.audio ?? [], + [IMAGE]: providers?.image ?? [], }, fetchState: { [AUDIO]: { isFetching: false, hasStarted: false, fetchingError: null }, @@ -147,7 +139,10 @@ export const useProviderStore = defineStore("provider", { const { $sentry } = useNuxtApp() const nitroOrigin = useRequestEvent()?.context.siteConfigNitroOrigin - const baseURL = nitroOrigin ? nitroOrigin : location?.origin + + // TODO: Check if baseURL works in prod. + let baseURL = nitroOrigin ? nitroOrigin : location?.origin + baseURL = baseURL.replace("localhost", "0.0.0.0") try { const res: MediaProvider[] = await axios.get( `/api/${mediaType === "image" ? "images" : "audio"}/stats/`, diff --git a/frontend/src/utils/provider.ts b/frontend/src/utils/provider.ts new file mode 100644 index 00000000000..deb8ce88258 --- /dev/null +++ b/frontend/src/utils/provider.ts @@ -0,0 +1,13 @@ +import type { MediaProvider } from "~/types/media-provider" + +/** + * Sorts providers by their source_name property. + * @param data - initial unordered list of providers + */ +export const sortProviders = (data: MediaProvider[]): MediaProvider[] => { + return [...data].sort((sourceObjectA, sourceObjectB) => { + const nameA = sourceObjectA.source_name.toUpperCase() + const nameB = sourceObjectB.source_name.toUpperCase() + return nameA.localeCompare(nameB) + }) +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0c7b381e0d6..f89cb702136 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -68,7 +68,7 @@ importers: version: 0.2.4(rollup@4.9.4) '@nuxtjs/sitemap': specifier: ^5.0.2 - version: 5.0.3(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.8)(axios@1.6.5)(h3@1.10.0)(nuxt@3.9.1)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.11)(vue@3.4.13)(webpack@5.89.0) + version: 5.0.3(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.13)(axios@1.6.5)(h3@1.10.0)(nuxt@3.9.1)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.11)(vue@3.4.13)(webpack@5.89.0) '@nuxtjs/tailwindcss': specifier: ^6.10.3 version: 6.10.4(rollup@4.9.4) @@ -138,7 +138,7 @@ importers: version: 14.5.2(@testing-library/dom@9.3.4) '@testing-library/vue': specifier: ^8.0.1 - version: 8.0.1(@vue/compiler-sfc@3.4.8)(vue@3.4.13) + version: 8.0.1(@vue/compiler-sfc@3.4.13)(vue@3.4.13) '@vitest/ui': specifier: ^1.2.0 version: 1.2.0(vitest@1.2.0) @@ -163,6 +163,9 @@ importers: nuxt: specifier: ^3.9.1 version: 3.9.1(rollup@4.9.4)(typescript@5.2.2)(vite@5.0.11)(vue-tsc@1.8.27) + nuxt-prepare: + specifier: ^0.2.2 + version: 0.2.2(rollup@4.9.4) talkback: specifier: ^3.0.2 version: 3.0.2 @@ -1763,7 +1766,7 @@ packages: - supports-color dev: false - /@nuxt/devtools-ui-kit@1.0.8(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.8)(axios@1.6.5)(nuxt@3.9.1)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.11)(vue@3.4.13)(webpack@5.89.0): + /@nuxt/devtools-ui-kit@1.0.8(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.13)(axios@1.6.5)(nuxt@3.9.1)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.11)(vue@3.4.13)(webpack@5.89.0): resolution: {integrity: sha512-oPkyQ+nkvCvveWxHWAHpZt9uEycHFD00Rh46KYKe5KLl81Wr/L3KacIIYpiocPog0YZZhjvX5CmrIe8zXopNOA==} peerDependencies: '@nuxt/devtools': 1.0.8 @@ -1789,7 +1792,7 @@ packages: focus-trap: 7.5.4 splitpanes: 3.1.5 unocss: 0.58.3(@unocss/webpack@0.58.3)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.11) - v-lazy-show: 0.2.4(@vue/compiler-core@3.4.8) + v-lazy-show: 0.2.4(@vue/compiler-core@3.4.13) transitivePeerDependencies: - '@unocss/webpack' - '@vue/compiler-core' @@ -2069,7 +2072,7 @@ packages: dependencies: '@nuxt/kit': 3.9.1(rollup@4.9.4) '@nuxt/schema': 3.9.1(rollup@4.9.4) - '@testing-library/vue': 8.0.1(@vue/compiler-sfc@3.4.8)(vue@3.4.13) + '@testing-library/vue': 8.0.1(@vue/compiler-sfc@3.4.13)(vue@3.4.13) '@vitest/ui': 1.2.0(vitest@1.2.0) '@vue/test-utils': 2.4.3(vue@3.4.13) c12: 1.6.1 @@ -2224,18 +2227,18 @@ packages: - supports-color dev: false - /@nuxtjs/sitemap@5.0.3(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.8)(axios@1.6.5)(h3@1.10.0)(nuxt@3.9.1)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.11)(vue@3.4.13)(webpack@5.89.0): + /@nuxtjs/sitemap@5.0.3(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.13)(axios@1.6.5)(h3@1.10.0)(nuxt@3.9.1)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.11)(vue@3.4.13)(webpack@5.89.0): resolution: {integrity: sha512-TfVyLI0IShv6DzfdrwhO5ghpMg3Nm67QxL7nHd7l+Ke9e8tQkfwtuiKKhZjXOt2riSpyqKATuG+H9b1Nyx9HPQ==} dependencies: '@nuxt/devtools-kit': 1.0.8(nuxt@3.9.1)(rollup@4.9.4)(vite@5.0.11) - '@nuxt/devtools-ui-kit': 1.0.8(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.8)(axios@1.6.5)(nuxt@3.9.1)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.11)(vue@3.4.13)(webpack@5.89.0) + '@nuxt/devtools-ui-kit': 1.0.8(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.13)(axios@1.6.5)(nuxt@3.9.1)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.11)(vue@3.4.13)(webpack@5.89.0) '@nuxt/kit': 3.9.1(rollup@4.9.4) '@vueuse/core': 10.7.2(vue@3.4.13) chalk: 5.3.0 defu: 6.1.4 floating-vue: 5.0.3(@nuxt/kit@3.9.1)(vue@3.4.13) h3-compression: 0.3.2(h3@1.10.0) - nuxt-site-config: 2.2.5(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.8)(axios@1.6.5)(nuxt@3.9.1)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.11)(vue@3.4.13)(webpack@5.89.0) + nuxt-site-config: 2.2.5(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.13)(axios@1.6.5)(nuxt@3.9.1)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.11)(vue@3.4.13)(webpack@5.89.0) nuxt-site-config-kit: 2.2.5(rollup@4.9.4)(vue@3.4.13) ofetch: 1.3.3 pathe: 1.1.2 @@ -3227,7 +3230,7 @@ packages: '@testing-library/dom': 9.3.4 dev: true - /@testing-library/vue@8.0.1(@vue/compiler-sfc@3.4.8)(vue@3.4.13): + /@testing-library/vue@8.0.1(@vue/compiler-sfc@3.4.13)(vue@3.4.13): resolution: {integrity: sha512-l51ZEpjTQ6glq3wM+asQ1GbKJMGcxwgHEygETx0aCRN4TjFEGvMZy4YdWKs/y7bu4bmLrxcxhbEPP7iPSW/2OQ==} engines: {node: '>=14'} peerDependencies: @@ -3236,7 +3239,7 @@ packages: dependencies: '@babel/runtime': 7.23.8 '@testing-library/dom': 9.3.4 - '@vue/compiler-sfc': 3.4.8 + '@vue/compiler-sfc': 3.4.13 '@vue/test-utils': 2.4.3(vue@3.4.13) vue: 3.4.13(typescript@5.2.2) transitivePeerDependencies: @@ -9184,6 +9187,20 @@ packages: optionalDependencies: fsevents: 2.3.3 + /nuxt-prepare@0.2.2(rollup@4.9.4): + resolution: {integrity: sha512-OakMxXJdH7OpoLG3mM1QpWvifq0g8UCN+1x1jzI7J7+5Z4SbTLCN9HBYd8A6fvWYlyUvrIzzt8pK1mvkr7kIhg==} + dependencies: + '@nuxt/kit': 3.9.1(rollup@4.9.4) + defu: 6.1.4 + jiti: 1.21.0 + pathe: 1.1.2 + scule: 1.2.0 + type-fest: 4.9.0 + transitivePeerDependencies: + - rollup + - supports-color + dev: true + /nuxt-site-config-kit@2.2.5(rollup@4.9.4)(vue@3.4.13): resolution: {integrity: sha512-56KIiPXZosE3xqswQ/jTTne4WLi1xy81lMjm2mCAayh5ZWixx+26wDart9F+5PI3RJ0/txnJKysd2CY2Rcsp7g==} dependencies: @@ -9199,11 +9216,11 @@ packages: - vue dev: false - /nuxt-site-config@2.2.5(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.8)(axios@1.6.5)(nuxt@3.9.1)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.11)(vue@3.4.13)(webpack@5.89.0): + /nuxt-site-config@2.2.5(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.13)(axios@1.6.5)(nuxt@3.9.1)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.11)(vue@3.4.13)(webpack@5.89.0): resolution: {integrity: sha512-E8qp+/8GRya1Gyt13Vo9MLW36TDJ52YVXJdSEmZAlNBIplAoVSEkizFlppaStKpGmqXXFXmkLuD8rm3jHZsvMQ==} dependencies: '@nuxt/devtools-kit': 1.0.8(nuxt@3.9.1)(rollup@4.9.4)(vite@5.0.11) - '@nuxt/devtools-ui-kit': 1.0.8(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.8)(axios@1.6.5)(nuxt@3.9.1)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.11)(vue@3.4.13)(webpack@5.89.0) + '@nuxt/devtools-ui-kit': 1.0.8(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.13)(axios@1.6.5)(nuxt@3.9.1)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.11)(vue@3.4.13)(webpack@5.89.0) '@nuxt/kit': 3.9.1(rollup@4.9.4) '@nuxt/schema': 3.9.1(rollup@4.9.4) floating-vue: 2.0.0-beta.24(@nuxt/kit@3.9.1)(vue@3.4.13) @@ -10679,7 +10696,6 @@ packages: /scule@1.2.0: resolution: {integrity: sha512-CRCmi5zHQnSoeCik9565PONMg0kfkvYmcSqrbOJY4txFfy1wvVULV4FDaiXhUblUgahdqz3F2NwHZ8i4eBTwUw==} - dev: false /seeded-rand@2.0.1: resolution: {integrity: sha512-OoNSbS3HH7tFIcE3zsn9BkyfjV6Of4L8b0HZU69WiqOQsMTXBTe83MNnIxmgTx9ABmOoTBhPwst+SN96twgDvA==} @@ -11560,6 +11576,11 @@ packages: resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==} engines: {node: '>=14.16'} + /type-fest@4.9.0: + resolution: {integrity: sha512-KS/6lh/ynPGiHD/LnAobrEFq3Ad4pBzOlJ1wAnJx9N4EYoqFhMfLIBjUT2UEx4wg5ZE+cC1ob6DCSpppVo+rtg==} + engines: {node: '>=16'} + dev: true + /type-is@1.6.18: resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==} engines: {node: '>= 0.6'} @@ -11910,12 +11931,12 @@ packages: hasBin: true dev: false - /v-lazy-show@0.2.4(@vue/compiler-core@3.4.8): + /v-lazy-show@0.2.4(@vue/compiler-core@3.4.13): resolution: {integrity: sha512-Lx9Str2i+HTh+zGzs9O3YyhGAZOAAfU+6MUUPcQPPiPxQO1sHBEv9sH3MO9bPc4T09gsjsS2+sbaCWQ1MdhpJQ==} peerDependencies: '@vue/compiler-core': ^3.3 dependencies: - '@vue/compiler-core': 3.4.8 + '@vue/compiler-core': 3.4.13 dev: false /v8-to-istanbul@9.2.0: