Use server route to fetch homepage projects

composables/homepage-projects.ts

@@ -0,0 +1,3 @@
+export function useHomepageProjects() {
+  return useDynamicSharedState('homepageProjects')
+}

pages/app.vue

@@ -1,15 +1,13 @@
 <script setup>
 import { TrashIcon, SearchIcon, BoxIcon, SendIcon, EditIcon, DownloadIcon } from 'omorphia'
 import Avatar from '~/components/ui/Avatar.vue'
-import homepageProjects from '~/generated/homepage.json'
 import LogoAnimated from '~/components/brand/LogoAnimated.vue'
 import Badge from '~/components/ui/Badge.vue'
 import PrismIcon from '~/assets/images/external/prism.svg'
 import ATLauncher from '~/assets/images/external/atlauncher.svg'
 import CurseForge from '~/assets/images/external/curseforge.svg'
 import Checkbox from '~/components/ui/Checkbox.vue'
 
-const val = Math.ceil(homepageProjects.length / 6)
 const os = ref(null)
 const macValue = ref(null)
 const downloadWindows = ref(null)
@@ -27,17 +25,23 @@ const macLinks = {
 
 let downloadLauncher
 
-const rows = shallowRef([
-  homepageProjects.slice(0, val),
-  homepageProjects.slice(val, val * 2),
-  homepageProjects.slice(val * 2, val * 3),
-  homepageProjects.slice(val * 3, val * 4),
-  homepageProjects.slice(val * 4, val * 5),
+const [{ data: launcherUpdates }, $homepageProjects] = await Promise.all([
+  useAsyncData('launcherUpdates', () => $fetch('https://launcher-files.modrinth.com/updates.json')),
+  useHomepageProjects(),
 ])
 
-const { data: launcherUpdates } = await useAsyncData('launcherUpdates', () =>
-  $fetch('https://launcher-files.modrinth.com/updates.json')
-)
+const rows = computed(() => {
+  const projects = $homepageProjects.value
+  const val = Math.ceil(projects.length / 6)
+  return [
+    projects.slice(0, val),
+    projects.slice(val, val * 2),
+    projects.slice(val * 2, val * 3),
+    projects.slice(val * 3, val * 4),
+    projects.slice(val * 4, val * 5),
+  ]
+})
+
 console.log(launcherUpdates)
 
 console.log(launcherUpdates.value)

pages/index.vue

@@ -513,34 +513,37 @@ import PrismLauncherLogo from '~/assets/images/external/prism.svg'
 import ATLauncherLogo from '~/assets/images/external/atlauncher.svg'
 import Avatar from '~/components/ui/Avatar.vue'
 import ProjectCard from '~/components/ui/ProjectCard.vue'
-import homepageProjects from '~/generated/homepage.json'
 
 const searchQuery = ref('better')
 const sortType = ref('relevance')
 
 const auth = await useAuth()
 const tags = useTags()
 
-const [{ data: searchProjects, refresh: updateSearchProjects }, { data: notifications }] =
-  await Promise.all([
-    useAsyncData(
-      'demoSearchProjects',
-      () => useBaseFetch(`search?limit=3&query=${searchQuery.value}&index=${sortType.value}`),
-      {
-        transform: (result) => result.hits,
-      }
-    ),
-    useAsyncData('updatedProjects', () => useBaseFetch(`search?limit=3&query=&index=updated`), {
+const [
+  { data: searchProjects, refresh: updateSearchProjects },
+  { data: notifications },
+  $homepageProjects,
+] = await Promise.all([
+  useAsyncData(
+    'demoSearchProjects',
+    () => useBaseFetch(`search?limit=3&query=${searchQuery.value}&index=${sortType.value}`),
+    {
       transform: (result) => result.hits,
-    }),
-  ])
-
-const val = Math.ceil(homepageProjects.length / 3)
-const rows = shallowRef([
-  homepageProjects.slice(0, val),
-  homepageProjects.slice(val, val * 2),
-  homepageProjects.slice(val * 2, val * 3),
+    }
+  ),
+  useAsyncData('updatedProjects', () => useBaseFetch(`search?limit=3&query=&index=updated`), {
+    transform: (result) => result.hits,
+  }),
+  useHomepageProjects(),
 ])
+
+const rows = computed(() => {
+  const projects = $homepageProjects.value
+  const val = Math.ceil(projects.length / 3)
+
+  return [projects.slice(0, val), projects.slice(val, val * 2), projects.slice(val * 2, val * 3)]
+})
 </script>
 
 <style lang="scss" scoped>

plugins/shared-state.ts

@@ -1,4 +1,5 @@
 import { provideSharedStates } from './shared-state/provider.ts'
+import { defineDynamicStateHolder } from './shared-state/dynamic-holder.ts'
 
 export default defineNuxtPlugin(async () => {
   return {
@@ -7,7 +8,19 @@ export default defineNuxtPlugin(async () => {
         static: {
           tags: await useTagsFetch(),
         },
-        dynamic: {},
+        dynamic: {
+          homepageProjects: defineDynamicStateHolder({
+            key: 'homepage-projects',
+            state: useFetch('/api/homepage-projects'),
+            ttl: 10 * 60,
+            refresher(state) {
+              state.execute()
+            },
+            valueGetter(state) {
+              return state.data
+            },
+          }),
+        },
       }),
     },
   }