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

fix: news frontend

Browse Source
This commit is contained in:
DecDuck
2025-03-10 12:05:10 +11:00
parent b6f52f660a
commit 1eede0f035
7 changed files with 53 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pages/news/article/[id]/index.vue → pages/news/[id]/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<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">
@ -42,19 +42,19 @@
<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 }}</span>
<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"
: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 }}
{{ tag.name }}
</span>
</div>
</div>
<p class="mt-4 text-lg text-zinc-300">{{ article.excerpt }}</p>
<p class="mt-4 text-lg text-zinc-300">{{ article.description }}</p>
</div>
</div>
</div>
@ -88,7 +88,7 @@ if (!article.value) {
// Render markdown content
const renderedContent = computed(() => {
return micromark(article.value.content);
return micromark(article.value?.content ?? "");
});
const formatDate = (date: string) => {

28
pages/news/index.vue
View File

@ -24,7 +24,7 @@
<NuxtLink
v-for="article in articles"
:key="article.id"
:to="`/news/article/${article.id}`"
:to="`/news/${article.id}`"
class="block"
>
<article
@ -39,10 +39,10 @@
<div class="absolute top-4 left-4 flex gap-2">
<span
v-for="tag in article.tags"
:key="tag"
: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 }}
{{ tag.name }}
</span>
</div>
</div>
@ -53,14 +53,14 @@
<time :datetime="article.publishedAt" class="text-sm text-zinc-400">
{{ formatDate(article.publishedAt) }}
</time>
<span class="text-sm text-blue-400">{{ article.author.displayName }}</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">
{{ article.title }}
</h3>
<p class="mt-3 text-base text-zinc-400">
{{ article.excerpt }}
{{ article.description }}
</p>
</div>
</div>
@ -70,7 +70,7 @@
</TransitionGroup>
<div
v-if="articles.length === 0"
v-if="articles?.length === 0"
class="text-center py-12"
>
<DocumentIcon class="mx-auto h-12 w-12 text-zinc-400" />
@ -83,25 +83,11 @@
<script setup lang="ts">
import { DocumentIcon } from "@heroicons/vue/24/outline";
interface Article {
id: string;
title: string;
excerpt: string;
content: string;
tags: string[];
image: string | null;
publishedAt: string;
author: {
id: string;
displayName: string;
};
}
const newsDirectory = ref();
const { data: articles, refresh: refreshArticles } = await useNews().getAll();
const formatDate = (date: string) => {
return new Date(date).toLocaleDateString("en-US", {
return new Date(date).toLocaleDateString("en-AU", {
year: "numeric",
month: "long",
day: "numeric",