Pre-generate homepage (#1699)

* Pregenerate homepage:

* fix lint

nuxt.config.ts

@@ -110,11 +110,9 @@ export default defineNuxtConfig({
  donationPlatforms?: any[]
  reportTypes?: any[]
  } = {}
- let homePageProjects: any[] = []
 
  try {
  state = JSON.parse(await fs.readFile('./generated/state.json', 'utf8'))
- homePageProjects = JSON.parse(await fs.readFile('./generated/homepage.json', 'utf8'))
  } catch {
  // File doesn't exist, create folder
  await fs.mkdir('./generated', { recursive: true })
@@ -127,8 +125,7 @@ export default defineNuxtConfig({
  state.lastGenerated &&
  new Date(state.lastGenerated).getTime() + TTL > new Date().getTime() &&
  // ...but only if the API URL is the same
- state.apiUrl === API_URL &&
- homePageProjects.length !== 0
+ state.apiUrl === API_URL
  ) {
  return
  }
@@ -143,25 +140,23 @@ export default defineNuxtConfig({
  },
  }
 
- const [categories, loaders, gameVersions, donationPlatforms, reportTypes, projects] =
- await Promise.all([
+ const [categories, loaders, gameVersions, donationPlatforms, reportTypes] = 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=40`, headers),
-  ])
+ ]
+ )
 
  state.categories = categories
  state.loaders = loaders
  state.gameVersions = gameVersions
  state.donationPlatforms = donationPlatforms
  state.reportTypes = reportTypes
- homePageProjects = projects
 
  await fs.writeFile('./generated/state.json', JSON.stringify(state))
- await fs.writeFile('./generated/homepage.json', JSON.stringify(homePageProjects))
 
  console.log('Tags generated!')
  },
@@ -374,6 +369,10 @@ export default defineNuxtConfig({
  devtools: {
  enabled: true,
  },
+ routeRules: {
+ '/': { prerender: true },
+ '/app': { prerender: true },
+ },
 })
 
 function getApiUrl() {

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,18 +25,24 @@ 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: 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),
+ ]
+ },
+ }),
+ await useAsyncData('launcherUpdates', () =>
+ $fetch('https://launcher-files.modrinth.com/updates.json')
+ ),
 ])
 
-const { data: launcherUpdates } = await useAsyncData('launcherUpdates', () =>
- $fetch('https://launcher-files.modrinth.com/updates.json')
-)
-
 macLinks.appleSilicon = launcherUpdates.value.platforms['darwin-aarch64'].install_urls[0]
 macLinks.intel = launcherUpdates.value.platforms['darwin-x86_64'].install_urls[0]
 windowsLink.value = launcherUpdates.value.platforms['windows-x86_64'].install_urls[0]

pages/index.vue

@@ -512,23 +512,34 @@ 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 searchProjects = ref([])
-const notifications = ref([])
-const updateSearchProjects = async () => {}
-
-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),
+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,
+ }),
 ])
 </script>
 

pages/settings/account.vue

@@ -392,7 +392,6 @@
 <script setup>
 import {
  EditIcon,
- UserIcon,
  SaveIcon,
  TrashIcon,
  PlusIcon,