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

feat: file uploads on news articles

Browse Source
This commit is contained in:
DecDuck
2025-03-11 17:51:46 +11:00
parent 137241fdbb
commit 0f0874c10a
7 changed files with 257 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,19 +2,21 @@
<div v-if="article" class="max-w-7xl mx-auto 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">
<template v-if="article.image">
<img
:src="article.image"
alt=""
class="w-full h-full object-cover blur-sm scale-110"
/>
<div class="absolute inset-0 bg-gradient-to-b from-zinc-950/70 via-zinc-950/60 to-zinc-950/90"></div>
</template>
<template v-else>
<!-- Fallback gradient background when no image -->
<div class="absolute inset-0 bg-gradient-to-b from-zinc-800 to-zinc-900"></div>
</template>
<div class="absolute inset-0" v-if="article.image">
<img
:src="useObject(article.image)"
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 v-else>
<!-- Fallback gradient background when no image -->
<div
class="absolute inset-0 bg-gradient-to-b from-zinc-800 to-zinc-900"
></div>
</div>
<div class="relative h-full flex flex-col justify-end p-8">
@ -26,10 +28,10 @@
<ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
Back to News
</NuxtLink>
<button
v-if="user?.admin"
@click="() => currentlyDeleting = article"
@click="() => (currentlyDeleting = article)"
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"
>
<TrashIcon class="h-4 w-4" aria-hidden="true" />
@ -38,11 +40,19 @@
</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">
<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>
<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
@ -60,8 +70,8 @@
</div>
<!-- Article content - markdown -->
<div
class="max-w-[calc(100%-2rem)] mx-auto prose prose-invert prose-lg"
<div
class="mx-auto prose prose-invert prose-lg"
v-html="renderedContent"
/>
</div>
@ -72,7 +82,7 @@
<script setup lang="ts">
import { ArrowLeftIcon } from "@heroicons/vue/20/solid";
import { TrashIcon } from "@heroicons/vue/24/outline";
import { micromark } from 'micromark';
import { micromark } from "micromark";
const route = useRoute();
const { data: article } = await useNews().getById(route.params.id as string);
@ -82,7 +92,7 @@ const user = useUser();
if (!article.value) {
throw createError({
statusCode: 404,
message: 'Article not found'
message: "Article not found",
});
}

29
pages/news/index.vue
View File

@ -10,17 +10,13 @@
Stay up to date with the latest updates and announcements.
</p>
</div>
<NewsArticleCreate @refresh="refreshAll" />
</div>
</div>
<!-- Articles list -->
<TransitionGroup
name="article-list"
tag="div"
class="space-y-6"
>
<TransitionGroup name="article-list" tag="div" class="space-y-6">
<NuxtLink
v-for="article in articles"
:key="article.id"
@ -32,7 +28,8 @@
>
<div class="relative h-48 w-full overflow-hidden">
<img
:src="article.image || '/images/default-news-image.jpg'"
v-if="article.image"
:src="useObject(article.image)"
alt=""
class="h-full w-full object-cover object-center transition-all duration-500 group-hover:scale-110 scale-105"
/>
@ -50,13 +47,20 @@
<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">
<time
:datetime="article.publishedAt"
class="text-sm text-zinc-400"
>
{{ formatDate(article.publishedAt) }}
</time>
<span class="text-sm text-blue-400">{{ article.author?.displayName ?? "System" }}</span>
<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">
<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">
@ -69,10 +73,7 @@
</NuxtLink>
</TransitionGroup>
<div
v-if="articles?.length === 0"
class="text-center py-12"
>
<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">No articles</h3>
<p class="mt-1 text-sm text-zinc-500">Check back later for updates.</p>