mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-24 13:41:09 +10:00
Rearchitecture for v0.4.0 (#197)
* feat: database redist support * feat: rearchitecture of database schemas, migration reset, and #180 * feat: import redists * fix: giantbomb logging bug * feat: partial user platform support + statusMessage -> message * feat: add user platform filters to store view * fix: sanitize svg uploads ... copilot suggested this I feel dirty. * feat: beginnings of platform & redist management * feat: add server side redist patching * fix: update drop-base commit * feat: import of custom platforms & file extensions * fix: redelete platform * fix: remove platform * feat: uninstall commands, new R UI * checkpoint: before migrating to nuxt v4 * update to nuxt 4 * fix: fixes for Nuxt v4 update * fix: remaining type issues * feat: initial feedback to import other kinds of versions * working commit * fix: lint * feat: redist import
This commit is contained in:
DecDuck
GitHub
167
app/pages/news/[id]/index.vue
Normal file
167
app/pages/news/[id]/index.vue
Normal file
@ -0,0 +1,167 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="article" class="px-4 sm:px-6 lg:px-8">
|
||||
<!-- Banner header with blurred background -->
|
||||
<div class="relative w-full h-[300px] mb-8 rounded-lg overflow-hidden">
|
||||
<div class="absolute inset-0">
|
||||
<img
|
||||
:src="
|
||||
article.imageObjectId
|
||||
? useObject(article.imageObjectId)
|
||||
: '/wallpapers/news-placeholder.jpg'
|
||||
"
|
||||
alt=""
|
||||
class="w-full h-full object-cover blur-sm scale-110"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-950"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="relative h-full flex flex-col justify-end p-8">
|
||||
<div class="flex items-center gap-x-3 mb-6">
|
||||
<NuxtLink
|
||||
to="/news"
|
||||
class="px-2 py-1 rounded bg-zinc-900/80 backdrop-blur-sm transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
|
||||
>
|
||||
<ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
|
||||
{{ $t("news.back") }}
|
||||
</NuxtLink>
|
||||
|
||||
<button
|
||||
v-if="user?.admin"
|
||||
class="px-2 py-1 rounded bg-red-900/50 backdrop-blur-sm transition text-sm/6 font-semibold text-red-400 hover:text-red-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
|
||||
@click="() => (currentlyDeleting = article)"
|
||||
>
|
||||
<TrashIcon class="h-4 w-4" aria-hidden="true" />
|
||||
{{ $t("news.delete") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="max-w-[calc(100%-2rem)]">
|
||||
<h1 class="text-4xl font-bold text-white mb-3">
|
||||
{{ article.title }}
|
||||
</h1>
|
||||
<div
|
||||
class="flex flex-col gap-y-3 sm:flex-row sm:items-center sm:gap-x-4 text-zinc-300"
|
||||
>
|
||||
<div class="flex items-center gap-x-4">
|
||||
<time :datetime="article.publishedAt">{{
|
||||
formatDate(article.publishedAt)
|
||||
}}</time>
|
||||
<span class="text-blue-400">{{
|
||||
article.author?.displayName ?? "System"
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="tag in article.tags"
|
||||
:key="tag.id"
|
||||
class="inline-flex items-center rounded-full bg-zinc-800/80 backdrop-blur-sm px-3 py-1 text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ tag.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4 text-lg text-zinc-300">{{ article.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Article content - markdown -->
|
||||
<div
|
||||
class="mx-auto prose prose-blue prose-invert prose-lg"
|
||||
v-html="renderedContent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ModalDeleteNews v-model="currentlyDeleting" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeftIcon } from "@heroicons/vue/20/solid";
|
||||
import { TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import { micromark } from "micromark";
|
||||
|
||||
const route = useRoute();
|
||||
const currentlyDeleting = ref();
|
||||
const user = useUser();
|
||||
const news = useNews();
|
||||
const { t } = useI18n();
|
||||
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: t("news.notFound"),
|
||||
fatal: true,
|
||||
});
|
||||
|
||||
// Render markdown content
|
||||
const renderedContent = computed(() => {
|
||||
return micromark(article.value?.content ?? "");
|
||||
});
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
useHead({
|
||||
title: article.value.title,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.prose {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.prose a {
|
||||
color: #60a5fa;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.prose a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose img {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.prose code {
|
||||
background: #27272a;
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.prose pre {
|
||||
background: #18181b;
|
||||
padding: 1em;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
</style>
|
||||
128
app/pages/news/index.vue
Normal file
128
app/pages/news/index.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="flex flex-col px-8">
|
||||
<div class="mb-8">
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold font-display text-zinc-100">
|
||||
{{ $t("news.title") }}
|
||||
</h2>
|
||||
<p class="mt-2 text-zinc-400">
|
||||
{{ $t("news.subheader") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Articles list -->
|
||||
<TransitionGroup
|
||||
name="article-list"
|
||||
tag="div"
|
||||
class="gap-6 grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5"
|
||||
>
|
||||
<NuxtLink
|
||||
v-for="article in articles"
|
||||
:key="article.id"
|
||||
:to="`/news/${article.id}`"
|
||||
class="block"
|
||||
>
|
||||
<article
|
||||
class="group relative flex flex-col overflow-hidden rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition-all duration-200"
|
||||
>
|
||||
<div class="relative h-48 w-full overflow-hidden">
|
||||
<img
|
||||
:src="
|
||||
article.imageObjectId
|
||||
? useObject(article.imageObjectId)
|
||||
: '/wallpapers/news-placeholder.jpg'
|
||||
"
|
||||
alt=""
|
||||
class="h-full w-full object-cover object-center transition-all duration-500 group-hover:scale-110 scale-105"
|
||||
/>
|
||||
<div class="absolute top-4 left-4 flex gap-2">
|
||||
<span
|
||||
v-for="tag in article.tags"
|
||||
:key="tag.id"
|
||||
class="inline-flex items-center rounded-full bg-zinc-900/75 px-3 py-1 text-sm font-semibold text-zinc-100 backdrop-blur"
|
||||
>
|
||||
{{ tag.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-1 flex-col justify-between p-6">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-x-2">
|
||||
<time
|
||||
:datetime="article.publishedAt"
|
||||
class="text-sm text-zinc-400"
|
||||
>
|
||||
{{ $d(new Date(article.publishedAt), "short") }}
|
||||
</time>
|
||||
<span class="text-sm text-blue-400">{{
|
||||
article.author?.displayName ?? "System"
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<h3
|
||||
class="text-xl font-semibold text-zinc-100 group-hover:text-primary-400"
|
||||
>
|
||||
{{ article.title }}
|
||||
</h3>
|
||||
<p class="mt-3 text-base text-zinc-400">
|
||||
{{ article.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</NuxtLink>
|
||||
</TransitionGroup>
|
||||
|
||||
<div v-if="articles?.length === 0" class="text-center py-12">
|
||||
<DocumentIcon class="mx-auto h-12 w-12 text-zinc-400" />
|
||||
<h3 class="mt-2 text-sm font-semibold text-zinc-100">
|
||||
{{ $t("news.none") }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-zinc-500">{{ $t("news.checkLater") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DocumentIcon } from "@heroicons/vue/24/outline";
|
||||
import type { ArticleModel } from "~~/prisma/client/models";
|
||||
import type { SerializeObject } from "nitropack/types";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const { articles } = defineProps<{
|
||||
articles: SerializeObject<
|
||||
ArticleModel & {
|
||||
tags: Array<{ name: string; id: string }>;
|
||||
author: { displayName: string };
|
||||
}
|
||||
>[];
|
||||
}>();
|
||||
|
||||
useHead({
|
||||
title: t("userHeader.links.news"),
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Article list transitions */
|
||||
.article-list-enter-active,
|
||||
.article-list-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.article-list-enter-from,
|
||||
.article-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.article-list-move {
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user