Mirrors/tachiyomi-website
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/website.git synced 2024-10-31 23:15:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Alessandro Jean 2023-09-03 16:55:45 -03:00 committed by GitHub
parent 7812958263
commit 87679463a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 51 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
website/src/.vitepress/theme/components/DownloadButtons.vue
View File

@ -1,46 +1,23 @@
<script setup lang="ts">
import { computed } from "vue";
import useReleaseQuery from "../queries/useReleaseQuery";
const {
data: stableRelease,
isLoading: isLoadingStable,
isError: isErrorStable,
error: errorStable
} = useReleaseQuery("stable");
const {
data: previewRelease,
isLoading: isLoadingPreview,
isError: isErrorPreview,
error: errorPreview
} = useReleaseQuery("preview");
import { data as release } from "../data/release.data";
const downloadInformation = computed(() => ({
preview: {
tagName: previewRelease.value?.tag_name || "0.00.0",
asset: (previewRelease.value?.assets ?? [])
tagName: release.preview.tag_name ?? "r0000",
asset: (release.preview.assets ?? [])
.find(a => /^tachiyomi-r\d{4,}.apk/.test(a.name)),
},
stable: {
tagName: stableRelease.value?.tag_name?.slice(1) || "r0000",
asset: (stableRelease.value?.assets ?? [])
tagName: release.stable.tag_name?.slice(1) ?? "0.00.0",
asset: (release.stable.assets ?? [])
.find(a => /^tachiyomi-v\d+\.\d+\.\d+.apk/.test(a.name)),
}
}))
</script>
<template>
<div v-if="isLoadingStable || isLoadingPreview">
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">
<div 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>

27
website/src/.vitepress/theme/components/ReleaseDate.vue
View File

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

17
website/src/.vitepress/theme/components/WhatsNew.vue
View File

@ -1,18 +1,15 @@
<script setup lang="ts">
import { computed, toRefs } from "vue";
import MarkdownIt from "markdown-it";
import useReleaseQuery from "../queries/useReleaseQuery";
import type { ReleaseType } from "../queries/useReleaseQuery";
import { data as release, type AppRelease } from "../data/release.data";
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">
This is the fancy loading indicator
</div>
<div v-else-if="isError">
This is the error message: {{ error }}
</div>
<div class="whatsNew" v-else>
<div class="whatsNew">
<header>
<IconNewReleases />
<h2>What's new</h2>

34
website/src/.vitepress/theme/data/release.data.ts Normal file
View File

@ -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 };
}
});

39
website/src/.vitepress/theme/queries/useReleaseQuery.ts
View File

@ -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,
});
}