Merge branch 'AdenMGB-develop' into develop

components/DeleteNewsModal.vue

@@ -0,0 +1,72 @@
+<template>
+  <ModalTemplate :modelValue="!!article">
+    <template #default>
+      <div>
+        <DialogTitle
+          as="h3"
+          class="text-lg font-bold font-display text-zinc-100"
+        >
+          Delete Article
+        </DialogTitle>
+        <p class="mt-1 text-sm text-zinc-400">
+          Are you sure you want to delete "{{ article?.title }}"?
+        </p>
+        <p class="mt-2 text-sm font-bold text-red-500">
+          This action cannot be undone.
+        </p>
+      </div>
+    </template>
+    <template #buttons>
+      <LoadingButton
+        :loading="deleteLoading"
+        @click="() => deleteArticle()"
+        class="bg-red-600 text-white hover:bg-red-500"
+      >
+        Delete
+      </LoadingButton>
+      <button
+        @click="() => (article = undefined)"
+        class="inline-flex items-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-zinc-700"
+      >
+        Cancel
+      </button>
+    </template>
+  </ModalTemplate>
+</template>
+
+<script setup lang="ts">
+import { DialogTitle } from "@headlessui/vue";
+
+interface Article {
+  id: string;
+  title: string;
+}
+
+const article = defineModel<Article | undefined>();
+const deleteLoading = ref(false);
+const router = useRouter();
+const news = useNews();
+
+async function deleteArticle() {
+  try {
+    if (!article.value) return;
+
+    deleteLoading.value = true;
+    await news.remove(article.value.id);
+
+    article.value = undefined;
+    await router.push('/news');
+  } catch (e: any) {
+    createModal(
+      ModalType.Notification,
+      {
+        title: "Failed to delete article",
+        description: `Drop couldn't delete this article: ${e?.statusMessage}`,
+      },
+      (_, c) => c()
+    );
+  } finally {
+    deleteLoading.value = false;
+  }
+}
+</script> 

components/NewsArticleCreate.vue

@@ -0,0 +1,346 @@
+<template>
+  <div class="w-full">
+    <!-- Create article button - only show for admin users -->
+    <button
+      v-if="user?.admin"
+      @click="isCreateExpanded = !isCreateExpanded"
+      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"
+    >
+      <PlusIcon 
+        class="h-5 w-5 transition-transform duration-200" 
+        :class="{ 'rotate-90': isCreateExpanded }" 
+      />
+      <span>New Article</span>
+    </button>
+
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="transform -translate-y-4 opacity-0"
+      enter-to-class="transform translate-y-0 opacity-100"
+      leave-active-class="transition duration-200 ease-in"
+      leave-from-class="transform translate-y-0 opacity-100"
+      leave-to-class="transform -translate-y-4 opacity-0"
+    >
+      <div v-if="isCreateExpanded" class="mt-6 p-6 rounded-lg bg-zinc-900/50 border border-zinc-800 w-full">
+        <h3 class="text-lg font-semibold text-zinc-100 mb-4">Create New Article</h3>
+        <form @submit.prevent="createArticle" class="space-y-4">
+          <div>
+            <label for="title" class="block text-sm font-medium text-zinc-400">Title</label>
+            <input
+              id="title"
+              v-model="newArticle.title"
+              type="text"
+              autocomplete="off"
+              class="mt-1 block w-full rounded-md bg-zinc-900 border-zinc-700 text-zinc-100 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+              required
+            />
+          </div>
+
+          <div>
+            <label for="excerpt" class="block text-sm font-medium text-zinc-400">Excerpt</label>
+            <input
+              id="excerpt"
+              v-model="newArticle.excerpt"
+              type="text"
+              class="mt-1 block w-full rounded-md bg-zinc-900 border-zinc-700 text-zinc-100 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+              required
+            />
+          </div>
+
+          <div>
+            <label for="content" class="block text-sm font-medium text-zinc-400">Content (Markdown)</label>
+            <div class="mt-1 flex flex-col gap-4">
+              <!-- Markdown shortcuts -->
+              <div class="flex flex-wrap gap-2">
+                <button
+                  v-for="shortcut in markdownShortcuts"
+                  :key="shortcut.label"
+                  type="button"
+                  @click="applyMarkdown(shortcut)"
+                  class="px-2 py-1 text-sm rounded bg-zinc-800 text-zinc-300 hover:bg-zinc-700 transition-colors"
+                >
+                  {{ shortcut.label }}
+                </button>
+              </div>
+
+              <div class="grid grid-cols-2 gap-4 h-[400px]">
+                <!-- Editor -->
+                <div class="flex flex-col">
+                  <span class="text-sm text-zinc-500 mb-2">Editor</span>
+                  <textarea
+                    id="content"
+                    v-model="newArticle.content"
+                    ref="contentEditor"
+                    @keydown="handleContentKeydown"
+                    class="flex-1 rounded-md bg-zinc-900 border-zinc-700 text-zinc-100 shadow-sm focus:border-primary-500 focus:ring-primary-500 font-mono resize-none"
+                    required
+                  ></textarea>
+                </div>
+                
+                <!-- Preview -->
+                <div class="flex flex-col">
+                  <span class="text-sm text-zinc-500 mb-2">Preview</span>
+                  <div class="flex-1 p-4 rounded-md bg-zinc-900 border border-zinc-700 overflow-y-auto">
+                    <div 
+                      class="prose prose-invert prose-sm h-full overflow-y-auto"
+                      v-html="markdownPreview"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p class="mt-2 text-sm text-zinc-500">
+              Use the shortcuts above or write Markdown directly. Supports **bold**, *italic*, [links](url), and more.
+            </p>
+          </div>
+
+          <div>
+            <label for="image" class="block text-sm font-medium text-zinc-400">Image URL (optional)</label>
+            <input
+              id="image"
+              v-model="newArticle.image"
+              type="url"
+              class="mt-1 block w-full rounded-md bg-zinc-900 border-zinc-700 text-zinc-100 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-zinc-400 mb-2">Tags</label>
+            <div class="flex flex-wrap gap-2 mb-2">
+              <span
+                v-for="tag in newArticle.tags"
+                :key="tag"
+                class="inline-flex items-center gap-x-1 px-2 py-1 rounded-full text-xs font-medium bg-blue-600/80 text-white"
+              >
+                {{ tag }}
+                <button
+                  type="button"
+                  @click="removeTag(tag)"
+                  class="text-white hover:text-white/80"
+                >
+                  <XMarkIcon class="h-3 w-3" />
+                </button>
+              </span>
+            </div>
+            <div class="flex gap-x-2">
+              <input
+                type="text"
+                v-model="newTagInput"
+                @keydown.enter.prevent="addTag"
+                placeholder="Add a tag..."
+                class="mt-1 block w-full rounded-md bg-zinc-900 border-zinc-700 text-zinc-100 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+              />
+              <button
+                type="button"
+                @click="addTag"
+                class="mt-1 px-3 py-2 rounded-md bg-zinc-800 text-zinc-100 hover:bg-zinc-700"
+              >
+                Add
+              </button>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <button
+              type="submit"
+              class="px-4 py-2 rounded-md 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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              :disabled="isSubmitting"
+            >
+              {{ isSubmitting ? 'Creating...' : 'Create Article' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PlusIcon, XMarkIcon } from "@heroicons/vue/24/solid";
+import { micromark } from 'micromark';
+
+const emit = defineEmits<{
+  'refresh': []
+}>();
+
+const user = useUser();
+const news = useNews();
+const isCreateExpanded = ref(false);
+const isSubmitting = ref(false);
+const newTagInput = ref('');
+
+const newArticle = ref({
+  title: '',
+  excerpt: '',
+  content: '',
+  image: '',
+  tags: [] as string[]
+});
+
+const contentEditor = ref<HTMLTextAreaElement>();
+
+const markdownShortcuts = [
+  { label: 'Bold', prefix: '**', suffix: '**', placeholder: 'bold text' },
+  { label: 'Italic', prefix: '_', suffix: '_', placeholder: 'italic text' },
+  { label: 'Link', prefix: '[', suffix: '](url)', placeholder: 'link text' },
+  { label: 'Code', prefix: '`', suffix: '`', placeholder: 'code' },
+  { label: 'List Item', prefix: '- ', suffix: '', placeholder: 'list item' },
+  { label: 'Heading', prefix: '## ', suffix: '', placeholder: 'heading' },
+];
+
+const handleContentKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    
+    const textarea = contentEditor.value;
+    if (!textarea) return;
+    
+    const start = textarea.selectionStart;
+    const text = textarea.value;
+    const lineStart = text.lastIndexOf('\n', start - 1) + 1;
+    const currentLine = text.slice(lineStart, start);
+    
+    // Check if the current line starts with a list marker
+    const listMatch = currentLine.match(/^(\s*)([-*+]|\d+\.)\s/);
+    let insertion = '\n';
+    
+    if (listMatch) {
+      // If the line is empty except for the list marker, end the list
+      if (currentLine.trim() === listMatch[0].trim()) {
+        const removeLength = currentLine.length;
+        newArticle.value.content = 
+          text.slice(0, lineStart) + 
+          text.slice(lineStart + removeLength);
+        
+        // Move cursor to new position after removing the list marker
+        nextTick(() => {
+          textarea.selectionStart = textarea.selectionEnd = lineStart;
+        });
+        return;
+      }
+      // Otherwise, continue the list
+      insertion = '\n' + listMatch[1] + listMatch[2] + ' ';
+    }
+    
+    newArticle.value.content = 
+      text.slice(0, start) + 
+      insertion + 
+      text.slice(start);
+    
+    nextTick(() => {
+      textarea.selectionStart = textarea.selectionEnd = 
+        start + insertion.length;
+    });
+  }
+};
+
+const addTag = () => {
+  const tag = newTagInput.value.trim();
+  if (tag && !newArticle.value.tags.includes(tag)) {
+    newArticle.value.tags.push(tag);
+    newTagInput.value = ''; // Clear the input
+  }
+};
+
+const removeTag = (tagToRemove: string) => {
+  newArticle.value.tags = newArticle.value.tags.filter(tag => tag !== tagToRemove);
+};
+
+const applyMarkdown = (shortcut: typeof markdownShortcuts[0]) => {
+  const textarea = contentEditor.value;
+  if (!textarea) return;
+
+  const start = textarea.selectionStart;
+  const end = textarea.selectionEnd;
+  const text = textarea.value;
+  
+  const selectedText = text.substring(start, end);
+  const replacement = selectedText || shortcut.placeholder;
+  
+  const newText = 
+    text.substring(0, start) + 
+    shortcut.prefix + 
+    replacement + 
+    shortcut.suffix + 
+    text.substring(end);
+  
+  newArticle.value.content = newText;
+  
+  nextTick(() => {
+    textarea.focus();
+    const newStart = start + shortcut.prefix.length;
+    const newEnd = newStart + replacement.length;
+    textarea.setSelectionRange(newStart, newEnd);
+  });
+};
+
+const createArticle = async () => {
+  if (!user.value?.id) {
+    console.error('User not authenticated');
+    return;
+  }
+
+  isSubmitting.value = true;
+  try {
+    await news.create({
+      ...newArticle.value,
+      authorId: user.value.id,
+    });
+    
+    // Reset form
+    newArticle.value = {
+      title: '',
+      excerpt: '',
+      content: '',
+      image: '',
+      tags: []
+    };
+    
+    emit('refresh');
+    
+    isCreateExpanded.value = false;
+    
+  } catch (error) {
+    console.error('Failed to create article:', error);
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+const markdownPreview = computed(() => {
+  return micromark(newArticle.value.content);
+});
+</script>
+
+<style scoped>
+
+.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> 

components/NewsDirectory.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-zinc-900 px-6 py-6 ring-1 ring-white/10">
+    <!-- Search and filters -->
+    <div class="space-y-6">
+      <div>
+        <label for="search" class="sr-only">Search articles</label>
+        <div class="relative">
+          <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+            <MagnifyingGlassIcon class="h-5 w-5 text-zinc-400" aria-hidden="true" />
+          </div>
+          <input
+            id="search"
+            type="text"
+            v-model="searchQuery"
+            class="block w-full rounded-md border-0 bg-zinc-800 py-2.5 pl-10 pr-3 text-zinc-100 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6"
+            placeholder="Search articles..."
+          />
+        </div>
+      </div>
+
+      <div class="pt-2">
+        <label for="date" class="block text-sm font-medium text-zinc-400 mb-2">Date</label>
+        <select
+          id="date"
+          v-model="dateFilter"
+          class="mt-1 block w-full rounded-md border-0 bg-zinc-800 py-2 pl-3 pr-10 text-zinc-100 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6"
+        >
+          <option value="all">All time</option>
+          <option value="today">Today</option>
+          <option value="week">This week</option>
+          <option value="month">This month</option>
+          <option value="year">This year</option>
+        </select>
+      </div>
+
+      <!-- Tags -->
+      <div>
+        <label class="block text-sm font-medium text-zinc-400 mb-2">Tags</label>
+        <div class="flex flex-wrap gap-2">
+          <button
+            v-for="tag in availableTags"
+            :key="tag"
+            @click="toggleTag(tag)"
+            class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors duration-200"
+            :class="[
+              selectedTags.includes(tag)
+                ? 'bg-blue-600 text-white'
+                : 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700'
+            ]"
+          >
+            {{ tag }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <nav class="flex-1 space-y-2">
+      <NuxtLink
+        v-for="article in filteredArticles"
+        :key="article.id"
+        :to="`/news/article/${article.id}`"
+        class="group block rounded-lg hover-lift"
+      >
+        <div 
+          class="relative flex flex-col gap-y-2 rounded-lg p-3 transition-all duration-200"
+          :class="[
+            route.params.id === article.id 
+              ? 'bg-zinc-800' 
+              : 'hover:bg-zinc-800/50'
+          ]"
+        >
+          <div 
+            v-if="article.image"
+            class="absolute inset-0 rounded-lg transition-all duration-200 overflow-hidden"
+          >
+            <img 
+              :src="article.image"
+              class="absolute inset-0 w-full h-full object-cover transition-all duration-200"
+              :class="[
+                'blur-sm group-hover:blur-none scale-105 group-hover:scale-100 duration-500'
+              ]"
+              alt=""
+            />
+            <div 
+              class="absolute inset-0 bg-gradient-to-b from-zinc-900/80 to-zinc-900/90 group-hover:from-zinc-900/40 group-hover:to-zinc-900/60 transition-all duration-200"
+            />
+          </div>
+
+          <h3 class="relative text-sm font-medium text-zinc-100">{{ article.title }}</h3>
+          <p class="relative mt-1 text-xs text-zinc-400 line-clamp-2" v-html="formatExcerpt(article.excerpt)"></p>
+          <div class="relative mt-2 flex items-center gap-x-2 text-xs text-zinc-500">
+            <time :datetime="article.publishedAt">{{ formatDate(article.publishedAt) }}</time>
+          </div>
+        </div>
+      </NuxtLink>
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid';
+import { micromark } from 'micromark';
+
+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 [];
+  const tags = new Set<string>();
+  articles.value.forEach(article => {
+    article.tags.forEach(tag => tags.add(tag));
+  });
+  return Array.from(tags);
+});
+
+const toggleTag = (tag: string) => {
+  const index = selectedTags.value.indexOf(tag);
+  if (index === -1) {
+    selectedTags.value.push(tag);
+  } else {
+    selectedTags.value.splice(index, 1);
+  }
+};
+
+const formatDate = (date: string) => {
+  return new Date(date).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+};
+
+const formatExcerpt = (excerpt: string) => {
+  // Convert markdown to HTML
+  const html = micromark(excerpt);
+  // Strip HTML tags using regex
+  return html.replace(/<[^>]*>/g, '');
+};
+
+const filteredArticles = computed(() => {
+  if (!articles.value) return [];
+  
+  // filter articles based on search, date, and tags
+  return articles.value.filter((article) => {
+    const matchesSearch = 
+      article.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      article.excerpt.toLowerCase().includes(searchQuery.value.toLowerCase());
+    
+    const articleDate = new Date(article.publishedAt);
+    const now = new Date();
+    let matchesDate = true;
+    
+    switch (dateFilter.value) {
+      case 'today':
+        matchesDate = articleDate.toDateString() === now.toDateString();
+        break;
+      case 'week':
+        const weekAgo = new Date(now.setDate(now.getDate() - 7));
+        matchesDate = articleDate >= weekAgo;
+        break;
+      case 'month':
+        matchesDate = articleDate.getMonth() === now.getMonth() && 
+                     articleDate.getFullYear() === now.getFullYear();
+        break;
+      case 'year':
+        matchesDate = articleDate.getFullYear() === now.getFullYear();
+        break;
+    }
+    
+    const matchesTags = selectedTags.value.length === 0 || 
+                       selectedTags.value.every(tag => article.tags.includes(tag));
+    
+    return matchesSearch && matchesDate && matchesTags;
+  });
+});
+</script>
+
+<style scoped>
+.hover-lift {
+  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.hover-lift:hover {
+  transform: translateY(-2px) scale(1.02);
+}
+</style>

composables/useNews.ts

@@ -0,0 +1,50 @@
+export const useNews = () => {
+  const getAll = async (options?: {
+    limit?: number;
+    skip?: number;
+    orderBy?: 'asc' | 'desc';
+    tags?: string[];
+    search?: string;
+  }) => {
+    const query = new URLSearchParams();
+    
+    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);
+
+    return await useFetch(`/api/v1/news?${query.toString()}`);
+  };
+
+  const getById = async (id: string) => {
+    return await useFetch(`/api/v1/news/${id}`);
+  };
+
+  const create = async (article: {
+    title: string;
+    excerpt: string;
+    content: string;
+    image?: string;
+    tags: string[];
+    authorId: string;
+  }) => {
+    return await $fetch('/api/v1/news', {
+      method: 'POST',
+      body: article
+    });
+  };
+
+  const remove = async (id: string) => {
+    return await $fetch(`/api/v1/news/${id}`, {
+      method: 'DELETE'
+    });
+  };
+
+  return {
+    getAll,
+    getById,
+    create,
+    remove
+  };
+}; 

pages/news.vue

@@ -0,0 +1,156 @@
+<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">
+          <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 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"
+                >
+                  <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"
+                    >
+                      <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" />
+                </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
+        </div>
+      </div>
+  
+      <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 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>
+  

pages/news/article/[id]/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div 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>
+
+      <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" />
+            Back to News
+          </NuxtLink>
+          
+          <button
+            v-if="user?.admin"
+            @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" />
+            Delete Article
+          </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 }}</span>
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <span
+                v-for="tag in article.tags"
+                :key="tag"
+                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 }}
+              </span>
+            </div>
+          </div>
+          <p class="mt-4 text-lg text-zinc-300">{{ article.excerpt }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Article content - markdown -->
+    <div 
+      class="max-w-[calc(100%-2rem)] mx-auto prose prose-invert prose-lg"
+      v-html="renderedContent"
+    />
+  </div>
+
+  <DeleteNewsModal v-model="currentlyDeleting" />
+</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 { data: article } = await useNews().getById(route.params.id as string);
+const currentlyDeleting = ref();
+const user = useUser();
+
+if (!article.value) {
+  throw createError({
+    statusCode: 404,
+    message: 'Article not found'
+  });
+}
+
+// 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>

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>

prisma/migrations/20250128102738_add_news/migration.sql

@@ -0,0 +1,16 @@
+-- CreateTable
+CREATE TABLE "news" (
+    "id" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "excerpt" TEXT NOT NULL,
+    "tags" TEXT[],
+    "image" TEXT,
+    "publishedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "authorId" TEXT NOT NULL,
+
+    CONSTRAINT "news_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "news" ADD CONSTRAINT "news_authorId_fkey" FOREIGN KEY ("authorId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE; 

prisma/migrations/20250309234300_news_articles/migration.sql

@@ -0,0 +1,52 @@
+/*
+  Warnings:
+
+  - You are about to drop the `news` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropForeignKey
+ALTER TABLE "news" DROP CONSTRAINT "news_authorId_fkey";
+
+-- DropTable
+DROP TABLE "news";
+
+-- CreateTable
+CREATE TABLE "Tag" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+
+    CONSTRAINT "Tag_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Article" (
+    "id" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "description" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "image" TEXT,
+    "publishedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "authorId" TEXT,
+
+    CONSTRAINT "Article_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "_ArticleToTag" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_ArticleToTag_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateIndex
+CREATE INDEX "_ArticleToTag_B_index" ON "_ArticleToTag"("B");
+
+-- AddForeignKey
+ALTER TABLE "Article" ADD CONSTRAINT "Article_authorId_fkey" FOREIGN KEY ("authorId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_ArticleToTag" ADD CONSTRAINT "_ArticleToTag_A_fkey" FOREIGN KEY ("A") REFERENCES "Article"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_ArticleToTag" ADD CONSTRAINT "_ArticleToTag_B_fkey" FOREIGN KEY ("B") REFERENCES "Tag"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/migrations/20250309234801_make_tags_unique/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[name]` on the table `Tag` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "Tag_name_key" ON "Tag"("name");

prisma/migrations/20250309234846_make_tokens_unique/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[token]` on the table `APIToken` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "APIToken_token_key" ON "APIToken"("token");

prisma/schema/auth.prisma

@@ -29,7 +29,7 @@ enum APITokenMode {
 
 model APIToken {
     id    String       @id @default(uuid())
-    token String       @default(uuid())
+    token String       @default(uuid()) @unique
     mode  APITokenMode
     name  String
 

prisma/schema/news.prisma

@@ -0,0 +1,21 @@
+model Tag {
+  id   String @id @default(uuid())
+  name String @unique
+
+  articles Article[]
+}
+
+model Article {
+  id          String @id @default(uuid())
+  title       String
+  description String
+  content     String @db.Text
+
+  tags Tag[]
+
+  image       String? // Object ID
+  publishedAt DateTime @default(now())
+
+  author   User?   @relation(fields: [authorId], references: [id]) // Optional, if no user, it's a system post
+  authorId String?
+}

prisma/schema/schema.prisma

@@ -6,7 +6,7 @@
 
 generator client {
   provider        = "prisma-client-js"
-  previewFeatures = ["prismaSchemaFolder", "omitApi"]
+  previewFeatures = ["prismaSchemaFolder", "omitApi", "fullTextSearchPostgres"]
 }
 
 datasource db {

prisma/schema/user.prisma

@@ -11,6 +11,7 @@ model User {
     clients       Client[]
     notifications Notification[]
     collections   Collection[]
+    articles      Article[]
 
     tokens APIToken[]
 }

server/api/v1/admin/news/[id]/index.delete.ts

@@ -0,0 +1,23 @@
+import { defineEventHandler, createError } from "h3";
+import newsManager from "~/server/internal/news";
+
+export default defineEventHandler(async (event) => {
+  const userId = await event.context.session.getUserId(event);
+  if (!userId) {
+    throw createError({
+      statusCode: 401,
+      message: "Unauthorized",
+    });
+  }
+
+  const id = event.context.params?.id;
+  if (!id) {
+    throw createError({
+      statusCode: 400,
+      message: "Missing news ID",
+    });
+  }
+
+  await newsManager.delete(id);
+  return { success: true };
+}); 

server/api/v1/admin/news/[id]/index.get.ts

@@ -0,0 +1,27 @@
+import { defineEventHandler, createError } from "h3";
+import aclManager from "~/server/internal/acls";
+import newsManager from "~/server/internal/news";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["news:read"]);
+  if (!allowed)
+    throw createError({
+      statusCode: 403,
+    });
+
+  const id = h3.context.params?.id;
+  if (!id)
+    throw createError({
+      statusCode: 400,
+      message: "Missing news ID",
+    });
+
+  const news = await newsManager.fetchById(id);
+  if (!news)
+    throw createError({
+      statusCode: 404,
+      message: "News article not found",
+    });
+
+  return news;
+});

server/api/v1/admin/news/index.get.ts

@@ -0,0 +1,36 @@
+import { defineEventHandler, getQuery } from "h3";
+import aclManager from "~/server/internal/acls";
+import newsManager from "~/server/internal/news";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["news:read"]);
+  if (!allowed)
+    throw createError({
+      statusCode: 403,
+    });
+
+  const query = getQuery(h3);
+
+  const orderBy = query.order as "asc" | "desc";
+  if (orderBy) {
+    if (typeof orderBy !== "string" || !["asc", "desc"].includes(orderBy))
+      throw createError({ statusCode: 400, statusMessage: "Invalid order" });
+  }
+
+  const tags = query.tags as string[] | undefined;
+  if (tags) {
+    if (typeof tags !== "object" || !Array.isArray(tags))
+      throw createError({ statusCode: 400, statusMessage: "Invalid tags" });
+  }
+
+  const options = {
+    take: parseInt(query.limit as string),
+    skip: parseInt(query.skip as string),
+    orderBy: orderBy,
+    tags: tags?.map((e) => e.toString()),
+    search: query.search as string,
+  };
+
+  const news = await newsManager.fetch(options);
+  return news;
+});

server/api/v1/admin/news/index.post.ts

@@ -0,0 +1,23 @@
+import { defineEventHandler, createError, readBody } from "h3";
+import aclManager from "~/server/internal/acls";
+import newsManager from "~/server/internal/news";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, ["news:create"]);
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const body = await readBody(h3);
+
+  const article = await newsManager.create({
+    title: body.title,
+    description: body.description,
+    content: body.content,
+
+    tags: body.tags,
+
+    image: body.image,
+    authorId: body.authorId,
+  });
+
+  return article;
+});

server/api/v1/auth/signup/simple.post.ts

@@ -93,7 +93,7 @@ export default defineEventHandler(async (h3) => {
     profilePictureId,
     async () => jdenticon.toPng(username, 256),
     {},
-    [`anonymous:read`, `${userId}:write`]
+    [`internal:read`, `${userId}:write`]
   );
   const user = await prisma.user.create({
     data: {

server/api/v1/news/[id]/index.get.ts

@@ -0,0 +1,30 @@
+import { defineEventHandler, createError } from "h3";
+import aclManager from "~/server/internal/acls";
+import newsManager from "~/server/internal/news";
+
+export default defineEventHandler(async (h3) => {
+  const userId = await aclManager.getUserIdACL(h3, ["news:read"]);
+  if (!userId)
+    throw createError({
+      statusCode: 403,
+      statusMessage: "Requires authentication",
+    });
+
+  const id = h3.context.params?.id;
+  if (!id)
+    throw createError({
+      statusCode: 400,
+      message: "Missing news ID",
+    });
+  
+
+  const news = await newsManager.fetchById(id);
+  if (!news)
+    throw createError({
+      statusCode: 404,
+      message: "News article not found",
+    });
+
+
+  return news;
+});

server/api/v1/news/index.get.ts

@@ -0,0 +1,37 @@
+import { defineEventHandler, getQuery } from "h3";
+import aclManager from "~/server/internal/acls";
+import newsManager from "~/server/internal/news";
+
+export default defineEventHandler(async (h3) => {
+  const userId = await aclManager.getUserIdACL(h3, ["news:read"]);
+  if (!userId)
+    throw createError({
+      statusCode: 403,
+      statusMessage: "Requires authentication",
+    });
+
+  const query = getQuery(h3);
+
+  const orderBy = query.order as "asc" | "desc";
+  if (orderBy) {
+    if (typeof orderBy !== "string" || !["asc", "desc"].includes(orderBy))
+      throw createError({ statusCode: 400, statusMessage: "Invalid order" });
+  }
+
+  const tags = query.tags as string[] | undefined;
+  if (tags) {
+    if (typeof tags !== "object" || !Array.isArray(tags))
+      throw createError({ statusCode: 400, statusMessage: "Invalid tags" });
+  }
+
+  const options = {
+    take: parseInt(query.limit as string),
+    skip: parseInt(query.skip as string),
+    orderBy: orderBy,
+    tags: tags?.map((e) => e.toString()),
+    search: query.search as string,
+  };
+
+  const news = await newsManager.fetch(options);
+  return news;
+});

server/internal/acls/descriptions.ts

@@ -30,6 +30,8 @@ export const userACLDescriptions: ObjectFromList<typeof userACLs> = {
     "Remove a game from any collection (excluding library).",
   "library:add": "Add a game to your library.",
   "library:remove": "Remove a game from your library.",
+
+  "news:read": "Read the server's news articles.",
 };
 
 export const systemACLDescriptions: ObjectFromList<typeof systemACLs> = {
@@ -55,4 +57,8 @@ export const systemACLDescriptions: ObjectFromList<typeof systemACLs> = {
   "import:game:new": "Import a game.",
 
   "user:read": "Fetch any user's information.",
+  
+  "news:read": "Read news articles.",
+  "news:create": "Create a new news article.",
+  "news:delete": "Delete a news article."
 };

server/internal/acls/index.ts

@@ -25,6 +25,11 @@ export const userACLs = [
   "collections:remove",
   "library:add",
   "library:remove",
+<<<<<<< HEAD
+=======
+
+  "news:read",
+>>>>>>> AdenMGB-develop
 ] as const;
 const userACLPrefix = "user:";
 
@@ -51,6 +56,13 @@ export const systemACLs = [
   "import:game:new",
 
   "user:read",
+<<<<<<< HEAD
+=======
+
+  "news:read",
+  "news:create",
+  "news:delete",
+>>>>>>> AdenMGB-develop
 ] as const;
 const systemACLPrefix = "system:";
 

server/internal/news/index.ts

@@ -0,0 +1,118 @@
+import { triggerAsyncId } from "async_hooks";
+import prisma from "../db/database";
+
+class NewsManager {
+  async create(data: {
+    title: string;
+    content: string;
+    description: string;
+    tags: string[];
+    authorId: string;
+    image?: string;
+  }) {
+    return await prisma.article.create({
+      data: {
+        title: data.title,
+        description: data.description,
+        content: data.content,
+
+        tags: {
+          connectOrCreate: data.tags.map((e) => ({
+            where: { name: e },
+            create: { name: e },
+          })),
+        },
+
+        image: data.image,
+        author: {
+          connect: {
+            id: data.authorId,
+          },
+        },
+      },
+    });
+  }
+
+  async fetch(
+    options: {
+      take?: number;
+      skip?: number;
+      orderBy?: "asc" | "desc";
+      tags?: string[];
+      search?: string;
+    } = {}
+  ) {
+    return await prisma.article.findMany({
+      where: {
+        AND: [
+          {
+            tags: {
+              some: { OR: options.tags?.map((e) => ({ name: e })) ?? [] },
+            },
+          },
+          {
+            title: {
+              search: options.search
+            },
+            description: {
+              search: options.search
+            },
+            content: {
+              search: options.search
+            }
+          }
+        ],
+      },
+      take: options?.take || 10,
+      skip: options?.skip || 0,
+      orderBy: {
+        publishedAt: options?.orderBy || "desc",
+      },
+      include: {
+        author: {
+          select: {
+            id: true,
+            displayName: true,
+          },
+        },
+      },
+    });
+  }
+
+  async fetchById(id: string) {
+    return await prisma.article.findUnique({
+      where: { id },
+      include: {
+        author: {
+          select: {
+            id: true,
+            displayName: true,
+          },
+        },
+      },
+    });
+  }
+
+  async update(
+    id: string,
+    data: {
+      title?: string;
+      content?: string;
+      excerpt?: string;
+      image?: string;
+    }
+  ) {
+    return await prisma.article.update({
+      where: { id },
+      data,
+    });
+  }
+
+  async delete(id: string) {
+    return await prisma.article.delete({
+      where: { id },
+    });
+  }
+}
+
+export default new NewsManager();