Ryan/drop
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop.git synced 2025-11-09 20:12:10 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: refactor news and migrate rest of useFetch to $dropFetch

Browse Source
This commit is contained in:
DecDuck
2025-03-14 13:12:04 +11:00
parent bd1cb67cd0
commit 1de9ebdfa5
23 changed files with 299 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/DeleteNewsModal.vue
View File

@ -46,16 +46,22 @@ const article = defineModel<Article | undefined>();
const deleteLoading = ref(false);
const router = useRouter();
const news = useNews();
if (!news.value) {
news.value = await fetchNews();
}
async function deleteArticle() {
try {
if (!article.value) return;
if (!article.value || !news.value) return;
deleteLoading.value = true;
await news.remove(article.value.id);
await $dropFetch(`/api/v1/admin/news/${article.value.id}`, { method: "DELETE" });
const index = news.value.findIndex((e) => e.id == article.value?.id);
news.value.splice(index, 1);
article.value = undefined;
await router.push('/news');
router.push("/news");
} catch (e: any) {
createModal(
ModalType.Notification,
@ -69,4 +75,4 @@ async function deleteArticle() {
deleteLoading.value = false;
}
}
</script>
</script>

20
components/NewsArticleCreate.vue → components/NewsArticleCreateButton.vue
View File

@ -4,13 +4,13 @@
<button
v-if="user?.admin"
@click="modalOpen = !modalOpen"
class="inline-flex items-center gap-x-2 px-4 py-2 rounded-lg bg-blue-600 text-white font-semibold font-display shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-blue-500/25 hover:shadow-lg active:scale-95"
class="transition inline-flex w-full items-center px-4 gap-x-2 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 font-semibold text-sm shadow-sm"
>
<PlusIcon
class="h-5 w-5 transition-transform duration-200"
:class="{ 'rotate-90': modalOpen }"
/>
<span>New Article</span>
<span>New article</span>
</button>
<ModalTemplate size-class="sm:max-w-[80vw]" v-model="modalOpen">
@ -207,14 +207,16 @@ import {
XCircleIcon,
XMarkIcon,
} from "@heroicons/vue/24/solid";
import type { Article } from "@prisma/client";
import { micromark } from "micromark";
import type { SerializeObject } from "nitropack/types";
const emit = defineEmits<{
refresh: [];
}>();
const news = useNews();
if(!news.value){
news.value = await fetchNews();
}
const user = useUser();
const news = useNews();
const modalOpen = ref(false);
const loading = ref(false);
@ -348,11 +350,13 @@ async function createArticle() {
formData.append("content", newArticle.value.content);
formData.append("tags", JSON.stringify(newArticle.value.tags));
await $dropFetch("/api/v1/admin/news", {
const createdArticle = await $dropFetch("/api/v1/admin/news", {
method: "POST",
body: formData,
});
news.value?.push(createdArticle);
// Reset form
newArticle.value = {
title: "",
@ -361,8 +365,6 @@ async function createArticle() {
tags: [],
};
emit("refresh");
modalOpen.value = false;
} catch (e) {
error.value = (e as any)?.statusMessage ?? "An unknown error occured.";

16
components/NewsDirectory.vue
View File

@ -116,19 +116,21 @@ import { ref, computed } from "vue";
import { MagnifyingGlassIcon } from "@heroicons/vue/24/solid";
import { micromark } from "micromark";
const news = useNews();
if(!news.value){
news.value = await fetchNews();
}
const route = useRoute();
const searchQuery = ref("");
const dateFilter = ref("all");
const selectedTags = ref<string[]>([]);
const { data: articles, refresh: refreshArticles } = await useNews().getAll();
defineExpose({ refresh: refreshArticles });
// Get unique tags from all articles
const availableTags = computed(() => {
if (!articles.value) return [];
if (!news.value) return [];
const tags = new Set<string>();
articles.value.forEach((article) => {
news.value.forEach((article) => {
article.tags.forEach((tag) => tags.add(tag.name));
});
return Array.from(tags);
@ -159,10 +161,10 @@ const formatExcerpt = (excerpt: string) => {
};
const filteredArticles = computed(() => {
if (!articles.value) return [];
if (!news.value) return [];
// filter articles based on search, date, and tags
return articles.value.filter((article) => {
return news.value.filter((article) => {
const matchesSearch =
article.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
article.description

10
composables/collection.ts
View File

@ -9,10 +9,7 @@ export const useCollections = async () => {
// @ts-expect-error
const state = useState<FullCollection[]>("collections", () => undefined);
if (state.value === undefined) {
const headers = useRequestHeaders(["cookie"]);
state.value = await $dropFetch<FullCollection[]>("/api/v1/collection", {
headers,
});
state.value = await $dropFetch<FullCollection[]>("/api/v1/collection");
}
return state;
@ -41,8 +38,5 @@ export const useLibrary = async () => {
export async function refreshLibrary() {
const state = useState<FullCollection>("library");
const headers = useRequestHeaders(["cookie"]);
state.value = await $dropFetch<FullCollection>("/api/v1/collection/default", {
headers,
});
state.value = await $dropFetch<FullCollection>("/api/v1/collection/default");
}

63
composables/news.ts
View File

@ -1,35 +1,40 @@
export const useNews = () => {
const getAll = async (options?: {
limit?: number;
skip?: number;
orderBy?: "asc" | "desc";
tags?: string[];
search?: string;
}) => {
const query = new URLSearchParams();
import type { Article } from "@prisma/client";
import type { SerializeObject } from "nitropack";
if (options?.limit) query.set("limit", options.limit.toString());
if (options?.skip) query.set("skip", options.skip.toString());
if (options?.orderBy) query.set("order", options.orderBy);
if (options?.tags?.length) query.set("tags", options.tags.join(","));
if (options?.search) query.set("search", options.search);
export const useNews = () =>
useState<
| Array<
SerializeObject<
Article & {
tags: Array<{ id: string; name: string }>;
author: { displayName: string; id: string } | null;
}
>
>
| undefined
>("news", () => undefined);
return await useFetch(`/api/v1/news?${query.toString()}`);
};
export const fetchNews = async (options?: {
limit?: number;
skip?: number;
orderBy?: "asc" | "desc";
tags?: string[];
search?: string;
}) => {
const query = new URLSearchParams();
const getById = async (id: string) => {
return await useFetch(`/api/v1/news/${id}`);
};
if (options?.limit) query.set("limit", options.limit.toString());
if (options?.skip) query.set("skip", options.skip.toString());
if (options?.orderBy) query.set("order", options.orderBy);
if (options?.tags?.length) query.set("tags", options.tags.join(","));
if (options?.search) query.set("search", options.search);
const remove = async (id: string) => {
return await $dropFetch(`/api/v1/admin/news/${id}`, {
method: "DELETE",
});
};
const news = useNews();
return {
getAll,
getById,
remove,
};
// @ts-ignore
const newValue = await $dropFetch(`/api/v1/news?${query.toString()}`);
news.value = newValue;
return newValue;
};

6
composables/request.ts
View File

@ -31,7 +31,11 @@ export const $dropFetch: DropFetch = async (request, opts) => {
if (!getCurrentInstance()?.proxy) {
return (await $fetch(request, opts)) as any;
}
const { data, error } = await useFetch(request, opts as any);
const headers = useRequestHeaders(["cookie"]);
const { data, error } = await useFetch(request, {
...opts,
headers: { ...opts?.headers, ...headers },
} as any);
if (error.value) throw error.value;
return data.value as any;
};

3
composables/user.ts
View File

@ -6,11 +6,10 @@ import type { User } from "@prisma/client";
export const useUser = () => useState<User | undefined | null>(undefined);
export const updateUser = async () => {
const headers = useRequestHeaders(["cookie"]);
const user = useUser();
if (user.value === null) return;
// SSR calls have to be after uses
user.value = await $dropFetch<User | null>("/api/v1/user", { headers });
user.value = await $dropFetch<User | null>("/api/v1/user");
};

3
pages/admin/index.vue
View File

@ -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>

6
pages/admin/library/[id]/import.vue
View File

@ -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<{

13
pages/admin/library/[id]/index.vue
View File

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

3
pages/admin/library/import.vue
View File

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

3
pages/admin/library/index.vue
View File

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

5
pages/admin/users/auth/index.vue
View File

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

8
pages/admin/users/auth/simple/index.vue
View File

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

3
pages/admin/users/index.vue
View File

@ -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>

30
pages/client/[id]/callback.vue
View File

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

23
pages/library/index.vue
View File

@ -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
View File

@ -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>

18
pages/news/[id]/index.vue
View File

@ -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(() => {

19
pages/news/index.vue
View File

@ -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>

4
pages/store/[id]/index.vue
View File

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

18
pages/store/index.vue
View File

@ -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",

9
server/internal/news/index.ts
View File

@ -31,6 +31,15 @@ class NewsManager {
},
},
},
include: {
author: {
select: {
id: true,
displayName: true,
},
},
tags: true,
},
});
}