From 866c4d354e461a93185b9e300ae4537e2fa007ac Mon Sep 17 00:00:00 2001
From: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com>
Date: Sun, 2 Feb 2025 10:05:55 +1030
Subject: [PATCH] feat(news): Created ability to create news articles

---
 components/NewsArticleCreate.vue | 346 +++++++++++++++++++++++++++++++
 1 file changed, 346 insertions(+)
 create mode 100644 components/NewsArticleCreate.vue

diff --git a/components/NewsArticleCreate.vue b/components/NewsArticleCreate.vue
new file mode 100644
index 0000000..7759062
--- /dev/null
+++ b/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>