Use VitePress's data loader to generate the download page (#13)

website/src/.vitepress/theme/components/DownloadButtons.vue

@@ -1,46 +1,23 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import useReleaseQuery from "../queries/useReleaseQuery";
+import { data as release } from "../data/release.data";
-
-const {
-	data: stableRelease,
-	isLoading: isLoadingStable,
-	isError: isErrorStable,
-	error: errorStable
-} = useReleaseQuery("stable");
-
-const {
-	data: previewRelease,
-	isLoading: isLoadingPreview,
-	isError: isErrorPreview,
-	error: errorPreview
-} = useReleaseQuery("preview");
 
 const downloadInformation = computed(() => ({
 	preview: {
-		tagName: previewRelease.value?.tag_name || "0.00.0",
+		tagName: release.preview.tag_name ?? "r0000",
-		asset: (previewRelease.value?.assets ?? [])
+		asset: (release.preview.assets ?? [])
 			.find(a => /^tachiyomi-r\d{4,}.apk/.test(a.name)),
 	},
 	stable: {
-		tagName: stableRelease.value?.tag_name?.slice(1) || "r0000",
+		tagName: release.stable.tag_name?.slice(1) ?? "0.00.0",
-		asset: (stableRelease.value?.assets ?? [])
+		asset: (release.stable.assets ?? [])
 			.find(a => /^tachiyomi-v\d+\.\d+\.\d+.apk/.test(a.name)),
 	}
 }))
 </script>
 
 <template>
-	<div v-if="isLoadingStable || isLoadingPreview">
+	<div class="download-buttons">
-		This is the fancy loading indicator
-	</div>
-	<div v-else-if="isErrorStable">
-		This is the error message: {{ errorStable }}
-	</div>
-	<div v-else-if="isErrorPreview">
-		This is the error message: {{ errorPreview }}
-	</div>
-	<div v-else class="download-buttons">
 		<a class="download-button primary" :download="downloadInformation.stable.asset?.name" :href="downloadInformation.stable.asset?.browser_download_url">
 			<IconDownload />
 			<span class="text">Stable</span>

website/src/.vitepress/theme/components/ReleaseDate.vue

@@ -1,29 +1,16 @@
 <script setup lang="ts">
 import { computed, toRefs } from "vue";
 import moment from "moment";
-import useReleaseQuery from "../queries/useReleaseQuery";
+import { data as release, type AppRelease } from "../data/release.data";
-import type { ReleaseType } from "../queries/useReleaseQuery";
 
-const props = defineProps<{ type: ReleaseType }>();
+const props = defineProps<{ type: keyof AppRelease }>();
 const { type } = toRefs(props);
 
-const {	data: release, isLoading, isError } = useReleaseQuery(type);
+const momentInfo = computed(() => ({
-
+	relative: moment(release[type.value].published_at).fromNow(),
-const momentInfo = computed(() => {
+	exact: moment(release[type.value].published_at).format("dddd, MMMM Do YYYY [at] HH:mm"),
-	if (isLoading.value || isError.value || !release.value) {
+	iso: release[type.value].published_at,
-		return {
+}))
-			relative: "at an unknown time",
-			exact: null,
-			iso: null,
-		};
-	}
-
-	return {
-		relative: moment(release.value!.published_at).fromNow(),
-		exact: moment(release.value!.published_at).format("dddd, MMMM Do YYYY [at] HH:mm"),
-		iso: release.value!.published_at,
-	}
-})
 </script>
 
 <template>

website/src/.vitepress/theme/components/WhatsNew.vue

@@ -1,18 +1,15 @@
 <script setup lang="ts">
 import { computed, toRefs } from "vue";
 import MarkdownIt from "markdown-it";
-import useReleaseQuery from "../queries/useReleaseQuery";
+import { data as release, type AppRelease } from "../data/release.data";
-import type { ReleaseType } from "../queries/useReleaseQuery";
 
-const props = defineProps<{ type: ReleaseType }>();
+const props = defineProps<{ type: keyof AppRelease }>();
 const { type } = toRefs(props);
 
-const {	data: release, isLoading, isError, error } = useReleaseQuery(type);
-
 const md = new MarkdownIt();
 
 const whatsNew = computed(() => {
-	const flavoredString = (release.value?.body ?? "")
+	const flavoredString = (release[type.value].body ?? "")
 		.replace(/(?<=\(|(, ))@(.*?)(?=\)|(, ))/g, "[@$2](https://github.com/$2)")
 
 	return md.render(flavoredString);
@@ -20,13 +17,7 @@ const whatsNew = computed(() => {
 </script>
 
 <template>
-	<div v-if="isLoading">
+	<div class="whatsNew">
-		This is the fancy loading indicator
-	</div>
-	<div v-else-if="isError">
-		This is the error message: {{ error }}
-	</div>
-	<div class="whatsNew" v-else>
 		<header>
 			<IconNewReleases />
 			<h2>What's new</h2>

website/src/.vitepress/theme/data/release.data.ts

@@ -0,0 +1,34 @@
+import { defineLoader } from "vitepress"
+import axios from "axios";
+import { GITHUB_PREVIEW_API, GITHUB_STABLE_API } from "../../config/constants";
+
+export interface AppRelease {
+	stable: GitHubRelease;
+	preview: GitHubRelease;
+}
+
+export interface GitHubRelease {
+	body: string;
+	tag_name: string;
+	name: string;
+	assets: GitHubAsset[];
+	published_at: string;
+}
+
+export interface GitHubAsset {
+	name: string;
+	content_type: string;
+	browser_download_url: string;
+}
+
+declare const data: AppRelease;
+export { data };
+
+export default defineLoader({
+	async load(): Promise<AppRelease> {
+		const { data: stable } = await axios.get<GitHubRelease>(GITHUB_STABLE_API);
+		const { data: preview } = await axios.get<GitHubRelease>(GITHUB_PREVIEW_API);
+
+		return { stable, preview };
+	}
+});

website/src/.vitepress/theme/queries/useReleaseQuery.ts

@@ -1,39 +0,0 @@
-import { useQuery } from "@tanstack/vue-query";
-import axios from "axios";
-import { GITHUB_STABLE_API, GITHUB_PREVIEW_API } from "../../config/constants";
-import { unref, type Ref } from "vue";
-
-export type ReleaseType = "stable" | "preview";
-
-export interface GitHubRelease {
-	body: string;
-	tag_name: string;
-	name: string;
-	assets: GitHubAsset[];
-	published_at: string;
-}
-
-export interface GitHubAsset {
-	name: string;
-	content_type: string;
-	browser_download_url: string;
-}
-
-const apiUrls: Record<ReleaseType, string> = {
-	stable: GITHUB_STABLE_API,
-	preview: GITHUB_PREVIEW_API,
-};
-
-export default function useReleaseQuery(type: ReleaseType | Ref<ReleaseType>) {
-	return useQuery({
-		queryKey: ["release", type],
-		queryFn: async () => {
-			const typeKey = unref(type);
-			const { data } = await axios.get<GitHubRelease>(apiUrls[typeKey]);
-
-			return data;
-		},
-		initialData: () => null,
-		refetchOnWindowFocus: false,
-	});
-}