From 6c7866ad143d9d07597b9a93c0c3d59da9635b49 Mon Sep 17 00:00:00 2001
From: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com>
Date: Sun, 2 Feb 2025 10:10:16 +1030
Subject: [PATCH] feat(news): Created article overview page

---
 pages/news/index.vue | 137 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 137 insertions(+)
 create mode 100644 pages/news/index.vue

diff --git a/pages/news/index.vue b/pages/news/index.vue
new file mode 100644
index 0000000..9ae7fc9
--- /dev/null
+++ b/pages/news/index.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="flex flex-col max-w-4xl mx-auto">
+    <div class="mb-8">
+      <div class="flex flex-col gap-y-4">
+        <div>
+          <h2 class="text-2xl font-bold font-display text-zinc-100">
+            Latest News
+          </h2>
+          <p class="mt-2 text-zinc-400">
+            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"
+    >
+      <NuxtLink
+        v-for="article in articles"
+        :key="article.id"
+        :to="`/news/article/${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.image || '/images/default-news-image.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"
+                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 }}
+              </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">
+                  {{ formatDate(article.publishedAt) }}
+                </time>
+                <span class="text-sm text-blue-400">{{ article.author.displayName }}</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 }}
+                </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">No articles</h3>
+      <p class="mt-1 text-sm text-zinc-500">Check back later for updates.</p>
+    </div>
+  </div>
+</template>
+
+<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", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+};
+
+useHead({
+  title: "News",
+});
+
+const refreshAll = async () => {
+  await refreshArticles();
+  await newsDirectory.value?.refresh();
+};
+</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>