mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-13 08:12:40 +10:00
feat: refactor news and migrate rest of useFetch to $dropFetch
This commit is contained in:
DecDuck
@ -176,6 +176,5 @@ useHead({
|
||||
title: "Home",
|
||||
});
|
||||
|
||||
const headers = useRequestHeaders(["cookie"]);
|
||||
const libraryState = await $dropFetch("/api/v1/admin/library", { headers });
|
||||
const libraryState = await $dropFetch("/api/v1/admin/library");
|
||||
</script>
|
||||
|
||||
@ -551,13 +551,9 @@ definePageMeta({
|
||||
const router = useRouter();
|
||||
|
||||
const route = useRoute();
|
||||
const headers = useRequestHeaders(["cookie"]);
|
||||
const gameId = route.params.id.toString();
|
||||
const versions = await $dropFetch(
|
||||
`/api/v1/admin/import/version?id=${encodeURIComponent(gameId)}`,
|
||||
{
|
||||
headers,
|
||||
}
|
||||
`/api/v1/admin/import/version?id=${encodeURIComponent(gameId)}`
|
||||
);
|
||||
const currentlySelectedVersion = ref(-1);
|
||||
const versionSettings = ref<{
|
||||
|
||||
@ -321,7 +321,10 @@
|
||||
{{ item.delta ? "Upgrade mode" : "" }}
|
||||
</div>
|
||||
<div class="inline-flex items-center gap-x-2">
|
||||
<component :is="PLATFORM_ICONS[item.platform]" class="size-6 text-blue-600" />
|
||||
<component
|
||||
:is="PLATFORM_ICONS[item.platform]"
|
||||
class="size-6 text-blue-600"
|
||||
/>
|
||||
<Bars3Icon class="cursor-move w-6 h-6 text-zinc-400 handle" />
|
||||
<button @click="() => deleteVersion(item.versionName)">
|
||||
<TrashIcon class="w-5 h-5 text-red-600" />
|
||||
@ -345,7 +348,7 @@
|
||||
:options="{ id: game.id }"
|
||||
accept="image/*"
|
||||
endpoint="/api/v1/admin/game/image"
|
||||
@upload="(result) => uploadAfterImageUpload(result)"
|
||||
@upload="(result: Game) => uploadAfterImageUpload(result)"
|
||||
/>
|
||||
<ModalTemplate v-model="showAddCarouselModal">
|
||||
<template #default>
|
||||
@ -529,12 +532,8 @@ const mobileShowFinalDescription = ref(true);
|
||||
|
||||
const route = useRoute();
|
||||
const gameId = route.params.id.toString();
|
||||
const headers = useRequestHeaders(["cookie"]);
|
||||
const { game: rawGame, unimportedVersions } = await $dropFetch(
|
||||
`/api/v1/admin/game?id=${encodeURIComponent(gameId)}`,
|
||||
{
|
||||
headers,
|
||||
}
|
||||
`/api/v1/admin/game?id=${encodeURIComponent(gameId)}`
|
||||
);
|
||||
const game = ref(rawGame);
|
||||
|
||||
|
||||
@ -157,8 +157,7 @@ definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const headers = useRequestHeaders(["cookie"]);
|
||||
const games = await $dropFetch("/api/v1/admin/import/game", { headers });
|
||||
const games = await $dropFetch("/api/v1/admin/import/game");
|
||||
|
||||
const currentlySelectedGame = ref(-1);
|
||||
const gameSearchResultsLoading = ref(false);
|
||||
|
||||
@ -179,8 +179,7 @@ useHead({
|
||||
|
||||
const searchQuery = ref("");
|
||||
|
||||
const headers = useRequestHeaders(["cookie"]);
|
||||
const libraryState = await $dropFetch("/api/v1/admin/library", { headers });
|
||||
const libraryState = await $dropFetch("/api/v1/admin/library");
|
||||
const libraryGames = ref(
|
||||
libraryState.games.map((e) => {
|
||||
const noVersions = e.status.noVersions;
|
||||
|
||||
@ -110,10 +110,7 @@ definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const headers = useRequestHeaders(["cookie"]);
|
||||
const enabledMechanisms = await $dropFetch("/api/v1/admin/auth", {
|
||||
headers,
|
||||
});
|
||||
const enabledMechanisms = await $dropFetch("/api/v1/admin/auth");
|
||||
|
||||
const authenticationMechanisms: Array<{
|
||||
name: string;
|
||||
|
||||
@ -391,12 +391,10 @@ useHead({
|
||||
title: "Simple authentication",
|
||||
});
|
||||
|
||||
const headers = useRequestHeaders(["cookie"]);
|
||||
const { data } = await useFetch<Array<SerializeObject<Invitation>>>(
|
||||
"/api/v1/admin/auth/invitation",
|
||||
{ headers }
|
||||
const data = await $dropFetch<Array<SerializeObject<Invitation>>>(
|
||||
"/api/v1/admin/auth/invitation"
|
||||
);
|
||||
const invitations = ref(data.value ?? []);
|
||||
const invitations = ref(data ?? []);
|
||||
|
||||
const generateInvitationUrl = (id: string) =>
|
||||
`${window.location.protocol}//${window.location.host}/register?id=${id}`;
|
||||
|
||||
@ -106,6 +106,5 @@ definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const headers = useRequestHeaders(["cookie"]);
|
||||
const { data: users } = await useFetch("/api/v1/admin/users", { headers });
|
||||
const users = await $dropFetch("/api/v1/admin/users");
|
||||
</script>
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<main
|
||||
v-else-if="clientData.data.value"
|
||||
v-else-if="clientData"
|
||||
class="mx-auto grid lg:grid-cols-2 max-w-md lg:max-w-none min-h-full place-items-center w-full gap-4 px-6 py-12 sm:py-32 lg:px-8"
|
||||
>
|
||||
<div>
|
||||
@ -58,7 +58,7 @@
|
||||
Authorize client?
|
||||
</h1>
|
||||
<p class="mt-6 text-base leading-7 text-zinc-400">
|
||||
"{{ clientData.data.value.name }}" has requested access to your Drop
|
||||
"{{ clientData.name }}" has requested access to your Drop
|
||||
account.
|
||||
</p>
|
||||
<div
|
||||
@ -94,8 +94,8 @@
|
||||
<p
|
||||
class="mt-6 font-semibold font-display text-lg leading-8 text-zinc-100"
|
||||
>
|
||||
Accepting this request will allow "{{ clientData.data.value.name }}"
|
||||
on "{{ clientData.data.value.platform }}" to:
|
||||
Accepting this request will allow "{{ clientData.name }}"
|
||||
on "{{ clientData.platform }}" to:
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-8 max-w-2xl sm:mt-12 lg:mt-14">
|
||||
@ -132,22 +132,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<main
|
||||
v-else-if="clientData.error.value != undefined"
|
||||
class="grid min-h-full w-full place-items-center px-6 py-24 sm:py-32 lg:px-8"
|
||||
>
|
||||
<div class="text-center">
|
||||
<p class="text-base font-semibold text-blue-600">400</p>
|
||||
<h1
|
||||
class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
|
||||
>
|
||||
Invalid or expired request
|
||||
</h1>
|
||||
<p class="mt-6 text-base leading-7 text-zinc-400">
|
||||
Unfortunately, we couldn't load the authorization request.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -164,10 +148,8 @@ import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/solid";
|
||||
const route = useRoute();
|
||||
const clientId = route.params.id;
|
||||
|
||||
const headers = useRequestHeaders(["cookie"]);
|
||||
const clientData = await useFetch(
|
||||
`/api/v1/client/auth/callback?id=${clientId}`,
|
||||
{ headers }
|
||||
const clientData = await $dropFetch(
|
||||
`/api/v1/client/auth/callback?id=${clientId}`
|
||||
);
|
||||
|
||||
const completed = ref(false);
|
||||
|
||||
@ -38,7 +38,9 @@
|
||||
@click="() => (currentlyDeleting = collection)"
|
||||
class="group px-3 ml-[2px] bg-zinc-800/50 hover:bg-zinc-800 group"
|
||||
>
|
||||
<TrashIcon class="transition-all size-5 text-zinc-400 group-hover:text-red-400 group-hover:rotate-[8deg]" />
|
||||
<TrashIcon
|
||||
class="transition-all size-5 text-zinc-400 group-hover:text-red-400 group-hover:rotate-[8deg]"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -48,10 +50,16 @@
|
||||
@click="collectionCreateOpen = true"
|
||||
class="group flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full hover:scale-105"
|
||||
>
|
||||
<div class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800 border-2 border-dashed border-zinc-700">
|
||||
<div
|
||||
class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800 border-2 border-dashed border-zinc-700"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<PlusIcon class="h-5 w-5 text-zinc-400 group-hover:text-zinc-300 transition-all duration-300 group-hover:rotate-90" />
|
||||
<h3 class="text-lg font-semibold text-zinc-400 group-hover:text-zinc-300">
|
||||
<PlusIcon
|
||||
class="h-5 w-5 text-zinc-400 group-hover:text-zinc-300 transition-all duration-300 group-hover:rotate-90"
|
||||
/>
|
||||
<h3
|
||||
class="text-lg font-semibold text-zinc-400 group-hover:text-zinc-300"
|
||||
>
|
||||
Create Collection
|
||||
</h3>
|
||||
</div>
|
||||
@ -78,10 +86,9 @@ import {
|
||||
import { type Collection, type Game, type GameVersion } from "@prisma/client";
|
||||
import { PlusIcon } from "@heroicons/vue/20/solid";
|
||||
|
||||
const headers = useRequestHeaders(["cookie"]);
|
||||
const { data: gamesData } = await useFetch<
|
||||
(Game & { versions: GameVersion[] })[]
|
||||
>("/api/v1/store/recent", { headers });
|
||||
const gamesData = await $dropFetch<(Game & { versions: GameVersion[] })[]>(
|
||||
"/api/v1/store/recent"
|
||||
);
|
||||
|
||||
const collections = await useCollections();
|
||||
const collectionCreateOpen = ref(false);
|
||||
|
||||
299
pages/news.vue
299
pages/news.vue
@ -1,156 +1,163 @@
|
||||
<template>
|
||||
<div class="flex flex-col lg:flex-row grow">
|
||||
<TransitionRoot as="template" :show="sidebarOpen">
|
||||
<Dialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
|
||||
<div class="flex flex-col lg:flex-row grow">
|
||||
<TransitionRoot as="template" :show="sidebarOpen">
|
||||
<Dialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition-opacity ease-linear duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="transition-opacity ease-linear duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div class="fixed inset-0 bg-zinc-900/80" />
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 flex">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition-opacity ease-linear duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="transition-opacity ease-linear duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
enter="transition ease-in-out duration-300 transform"
|
||||
enter-from="-translate-x-full"
|
||||
enter-to="translate-x-0"
|
||||
leave="transition ease-in-out duration-300 transform"
|
||||
leave-from="translate-x-0"
|
||||
leave-to="-translate-x-full"
|
||||
>
|
||||
<div class="fixed inset-0 bg-zinc-900/80" />
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 flex">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition ease-in-out duration-300 transform"
|
||||
enter-from="-translate-x-full"
|
||||
enter-to="translate-x-0"
|
||||
leave="transition ease-in-out duration-300 transform"
|
||||
leave-from="translate-x-0"
|
||||
leave-to="-translate-x-full"
|
||||
>
|
||||
<DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-in-out duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="ease-in-out duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
<DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-in-out duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="ease-in-out duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div
|
||||
class="absolute top-0 left-full flex w-16 justify-center pt-5"
|
||||
>
|
||||
<div
|
||||
class="absolute top-0 left-full flex w-16 justify-center pt-5"
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 p-2.5"
|
||||
@click="sidebarOpen = false"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 p-2.5"
|
||||
@click="sidebarOpen = false"
|
||||
>
|
||||
<span class="sr-only">Close sidebar</span>
|
||||
<XMarkIcon class="size-6 text-white" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
<div class="bg-zinc-900">
|
||||
<NewsDirectory ref="newsDirectory" />
|
||||
<span class="sr-only">Close sidebar</span>
|
||||
<XMarkIcon class="size-6 text-white" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
|
||||
<!-- Static sidebar for desktop -->
|
||||
<div
|
||||
class="hidden lg:block lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col lg:border-r-2 lg:border-zinc-800"
|
||||
>
|
||||
<NewsDirectory ref="newsDirectory" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="block flex items-center gap-x-2 bg-zinc-950 px-2 py-1 shadow-xs sm:px-4 lg:hidden border-b border-zinc-700"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 p-2.5 text-zinc-400 lg:hidden"
|
||||
@click="sidebarOpen = true"
|
||||
>
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<Bars3Icon class="size-6" aria-hidden="true" />
|
||||
</button>
|
||||
<div
|
||||
class="flex-1 text-sm/6 font-semibold uppercase font-display text-zinc-400"
|
||||
>
|
||||
News
|
||||
</TransitionChild>
|
||||
<div class="bg-zinc-900">
|
||||
<NewsArticleCreateButton />
|
||||
<NewsDirectory :articles="news" />
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6 grow">
|
||||
<NuxtPage />
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
|
||||
<!-- Static sidebar for desktop -->
|
||||
<div
|
||||
class="hidden lg:block lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col lg:border-r-2 lg:border-zinc-800"
|
||||
>
|
||||
<NewsArticleCreateButton />
|
||||
<NewsDirectory />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="block flex items-center gap-x-2 bg-zinc-950 px-2 py-1 shadow-xs sm:px-4 lg:hidden border-b border-zinc-700"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 p-2.5 text-zinc-400 lg:hidden"
|
||||
@click="sidebarOpen = true"
|
||||
>
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<Bars3Icon class="size-6" aria-hidden="true" />
|
||||
</button>
|
||||
<div
|
||||
class="flex-1 text-sm/6 font-semibold uppercase font-display text-zinc-400"
|
||||
>
|
||||
News
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from "@headlessui/vue";
|
||||
import {
|
||||
Bars3Icon,
|
||||
CalendarIcon,
|
||||
ChartPieIcon,
|
||||
DocumentDuplicateIcon,
|
||||
FolderIcon,
|
||||
HomeIcon,
|
||||
UsersIcon,
|
||||
XMarkIcon,
|
||||
} from "@heroicons/vue/24/outline";
|
||||
|
||||
const router = useRouter();
|
||||
const sidebarOpen = ref(false);
|
||||
|
||||
router.afterEach(() => {
|
||||
sidebarOpen.value = false;
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: "News",
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.hover-lift {
|
||||
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Springy list animations */
|
||||
.list-enter-active {
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.list-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-move {
|
||||
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6 grow">
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from "@headlessui/vue";
|
||||
import {
|
||||
Bars3Icon,
|
||||
CalendarIcon,
|
||||
ChartPieIcon,
|
||||
DocumentDuplicateIcon,
|
||||
FolderIcon,
|
||||
HomeIcon,
|
||||
UsersIcon,
|
||||
XMarkIcon,
|
||||
} from "@heroicons/vue/24/outline";
|
||||
|
||||
const news = useNews();
|
||||
|
||||
if (!news.value) {
|
||||
await fetchNews();
|
||||
console.log('fetched news')
|
||||
}
|
||||
|
||||
const router = useRouter();
|
||||
const sidebarOpen = ref(false);
|
||||
|
||||
router.afterEach(() => {
|
||||
sidebarOpen.value = false;
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: "News",
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.hover-lift {
|
||||
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Springy list animations */
|
||||
.list-enter-active {
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.list-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-move {
|
||||
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -70,10 +70,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Article content - markdown -->
|
||||
<div
|
||||
class="mx-auto prose prose-invert prose-lg"
|
||||
v-html="renderedContent"
|
||||
/>
|
||||
<div class="mx-auto prose prose-invert prose-lg" v-html="renderedContent" />
|
||||
</div>
|
||||
|
||||
<DeleteNewsModal v-model="currentlyDeleting" />
|
||||
@ -85,16 +82,19 @@ import { TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import { micromark } from "micromark";
|
||||
|
||||
const route = useRoute();
|
||||
const { data: article } = await useNews().getById(route.params.id as string);
|
||||
const currentlyDeleting = ref();
|
||||
const user = useUser();
|
||||
|
||||
if (!article.value) {
|
||||
const news = useNews();
|
||||
if (!news.value) {
|
||||
news.value = await fetchNews();
|
||||
}
|
||||
const article = computed(() => news.value?.find((e) => e.id == route.params.id));
|
||||
if (!article.value)
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
message: "Article not found",
|
||||
statusMessage: "Article not found",
|
||||
fatal: true,
|
||||
});
|
||||
}
|
||||
|
||||
// Render markdown content
|
||||
const renderedContent = computed(() => {
|
||||
|
||||
@ -10,8 +10,6 @@
|
||||
Stay up to date with the latest updates and announcements.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<NewsArticleCreate @refresh="refreshAll" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -83,9 +81,17 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DocumentIcon } from "@heroicons/vue/24/outline";
|
||||
import type { Article } from "@prisma/client";
|
||||
import type { SerializeObject } from "nitropack/types";
|
||||
|
||||
const newsDirectory = ref();
|
||||
const { data: articles, refresh: refreshArticles } = await useNews().getAll();
|
||||
const props = defineProps<{
|
||||
articles: SerializeObject<
|
||||
Article & {
|
||||
tags: Array<{ name: string; id: string }>;
|
||||
author: { displayName: string };
|
||||
}
|
||||
>[];
|
||||
}>();
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString("en-AU", {
|
||||
@ -98,11 +104,6 @@ const formatDate = (date: string) => {
|
||||
useHead({
|
||||
title: "News",
|
||||
});
|
||||
|
||||
const refreshAll = async () => {
|
||||
await refreshArticles();
|
||||
await newsDirectory.value?.refresh();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -176,10 +176,8 @@ const gameId = route.params.id.toString();
|
||||
|
||||
const user = useUser();
|
||||
|
||||
const headers = useRequestHeaders(["cookie"]);
|
||||
const game = await $dropFetch<Game & { versions: GameVersion[] }>(
|
||||
`/api/v1/games/${gameId}`,
|
||||
{ headers }
|
||||
`/api/v1/games/${gameId}`
|
||||
);
|
||||
|
||||
// Preview description (first 30 lines)
|
||||
|
||||
@ -35,7 +35,9 @@
|
||||
{{ game.mShortDescription }}
|
||||
</p>
|
||||
<div>
|
||||
<div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-4 w-fit mx-auto">
|
||||
<div
|
||||
class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-4 w-fit mx-auto"
|
||||
>
|
||||
<NuxtLink
|
||||
:href="`/store/${game.id}`"
|
||||
class="block w-full rounded-md border border-transparent bg-white px-8 py-3 text-base font-medium text-gray-900 hover:bg-gray-100 sm:w-auto duration-200 hover:scale-105"
|
||||
@ -95,14 +97,12 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
const headers = useRequestHeaders(["cookie"]);
|
||||
const recent = await $dropFetch("/api/v1/store/recent", { headers });
|
||||
const updated = await $dropFetch("/api/v1/store/updated", { headers });
|
||||
const released = await $dropFetch("/api/v1/store/released", {
|
||||
headers,
|
||||
});
|
||||
const developers = await $dropFetch("/api/v1/store/developers", { headers });
|
||||
const publishers = await $dropFetch("/api/v1/store/publishers", { headers });
|
||||
const recent = await $dropFetch("/api/v1/store/recent");
|
||||
const updated = await $dropFetch("/api/v1/store/updated");
|
||||
const released = await $dropFetch("/api/v1/store/released");
|
||||
|
||||
const developers = await $dropFetch("/api/v1/store/developers");
|
||||
const publishers = await $dropFetch("/api/v1/store/publishers");
|
||||
|
||||
useHead({
|
||||
title: "Store",
|
||||
|
||||
Reference in New Issue
Block a user