Cache homepage projects in tags (#1336)

* Cache homepage projects in tags

* Update app page

.github/workflows/frontend-pages.yml

@@ -18,3 +18,11 @@ jobs:
           project: 'frontend'
           githubToken: ${{ secrets.GITHUB_TOKEN }}
           commitHash: ${{ steps.push-changes.outputs.commit-hash }}
+      - name: Purge cache
+        if: github.ref == 'refs/heads/master'
+        run: |
+          curl -X \
+            -H "Authorization: ${{ secrets.CF_API_TOKEN }}" \
+            -H "Content-Type: application/json" \
+            --data '{"hosts": ["modrinth.com", "www.modrinth.com"]}' \
+            https://api.cloudflare.com/client/v4/zones/e39df17b9c4ef44cbce2646346ee6d33/purge_cache

apps/frontend/nuxt.config.ts

@@ -122,6 +122,9 @@ export default defineNuxtConfig({
         gameVersions?: any[];
         donationPlatforms?: any[];
         reportTypes?: any[];
+        homePageProjects?: any[];
+        homePageSearch?: any[];
+        homePageNotifs?: any[];
       } = {};
 
       try {
@@ -153,21 +156,34 @@ export default defineNuxtConfig({
         },
       };
 
-      const [categories, loaders, gameVersions, donationPlatforms, reportTypes] = await Promise.all(
-        [
+      const [
+        categories,
+        loaders,
+        gameVersions,
+        donationPlatforms,
+        reportTypes,
+        homePageProjects,
+        homePageSearch,
+        homePageNotifs,
+      ] = await Promise.all([
         $fetch(`${API_URL}tag/category`, headers),
         $fetch(`${API_URL}tag/loader`, headers),
         $fetch(`${API_URL}tag/game_version`, headers),
         $fetch(`${API_URL}tag/donation_platform`, headers),
         $fetch(`${API_URL}tag/report_type`, headers),
-        ],
-      );
+        $fetch(`${API_URL}projects_random?count=60`, headers),
+        $fetch(`${API_URL}search?limit=3&query=leave&index=relevance`, headers),
+        $fetch(`${API_URL}search?limit=3&query=&index=updated`, headers),
+      ]);
 
       state.categories = categories;
       state.loaders = loaders;
       state.gameVersions = gameVersions;
       state.donationPlatforms = donationPlatforms;
       state.reportTypes = reportTypes;
+      state.homePageProjects = homePageProjects;
+      state.homePageSearch = homePageSearch;
+      state.homePageNotifs = homePageNotifs;
 
       await fs.writeFile("./src/generated/state.json", JSON.stringify(state));
 

apps/frontend/src/pages/app.vue

@@ -16,6 +16,8 @@ import ATLauncher from "~/assets/images/external/atlauncher.svg?component";
 import CurseForge from "~/assets/images/external/curseforge.svg?component";
 import Checkbox from "~/components/ui/Checkbox.vue";
 
+import { homePageProjects } from "~/generated/state.json";
+
 const os = ref(null);
 const macValue = ref(null);
 const downloadWindows = ref(null);
@@ -34,19 +36,17 @@ const macLinks = {
 
 let downloadLauncher;
 
-const [{ data: rows }, { data: launcherUpdates }] = await Promise.all([
-  useAsyncData("projects", () => useBaseFetch("projects_random?count=40"), {
-    transform: (homepageProjects) => {
-      const val = Math.ceil(homepageProjects.length / 6);
-      return [
-        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 newProjects = homePageProjects.slice(0, 40);
+const val = Math.ceil(newProjects.length / 6);
+const rows = ref([
+  newProjects.slice(0, val),
+  newProjects.slice(val, val * 2),
+  newProjects.slice(val * 2, val * 3),
+  newProjects.slice(val * 3, val * 4),
+  newProjects.slice(val * 4, val * 5),
+]);
+
+const [{ data: launcherUpdates }] = await Promise.all([
   await useAsyncData("launcherUpdates", () =>
     $fetch("https://launcher-files.modrinth.com/updates.json"),
   ),

apps/frontend/src/pages/index.vue

@@ -513,34 +513,32 @@ import ATLauncherLogo from "~/assets/images/external/atlauncher.svg?component";
 import Avatar from "~/components/ui/Avatar.vue";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
 
-const searchQuery = ref("better");
+import { homePageProjects, homePageSearch, homePageNotifs } from "~/generated/state.json";
+
+const searchQuery = ref("leave");
 const sortType = ref("relevance");
 
 const auth = await useAuth();
 const tags = useTags();
 
-const [
-  { data: rows },
-  { data: searchProjects, refresh: updateSearchProjects },
-  { data: notifications },
-] = await Promise.all([
-  useAsyncData("projects", () => useBaseFetch("projects_random?count=40"), {
-    transform: (result) => {
-      const val = Math.ceil(result.length / 3);
-      return [result.slice(0, val), result.slice(val, val * 2), result.slice(val * 2, val * 3)];
-    },
-  }),
-  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`), {
-    transform: (result) => result.hits,
-  }),
+const newProjects = homePageProjects.slice(0, 40);
+const val = Math.ceil(newProjects.length / 3);
+const rows = ref([
+  newProjects.slice(0, val),
+  newProjects.slice(val, val * 2),
+  newProjects.slice(val * 2, val * 3),
 ]);
+
+const notifications = ref(homePageNotifs.hits ?? []);
+const searchProjects = ref(homePageSearch.hits ?? []);
+
+async function updateSearchProjects() {
+  const res = await useBaseFetch(
+    `search?limit=3&query=${searchQuery.value}&index=${sortType.value}`,
+  );
+
+  searchProjects.value = res.hits ?? [];
+}
 </script>
 
 <style lang="scss" scoped>