Small fixes (#141)

* fix: save task as Json rather than string

* fix: pull objects before creating game in database

* fix: strips relative dirs from version information

* fix: #132

* fix: lint

* fix: news object ids and small tweaks

* fix: notification styling errors

* fix: lint

pages/account/notifications.vue

@@ -40,14 +40,16 @@
                 {{ notification.description }}
               </p>
               <div class="mt-4 flex flex-wrap gap-2">
-                <a
-                  v-for="action in notification.actions"
-                  :key="action"
-                  :href="action.split('|')[1]"
+                <NuxtLink
+                  v-for="[name, href] in notification.actions.map((v) =>
+                    v.split('|'),
+                  )"
+                  :key="href"
+                  :href="href"
                   class="inline-flex items-center rounded-md bg-blue-400/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-400/20 transition-all duration-200 hover:bg-blue-400/20 hover:scale-105 active:scale-95"
                 >
-                  {{ action.split("|")[0] }}
-                </a>
+                  {{ name }}
+                </NuxtLink>
               </div>
             </div>
             <div class="ml-4 flex flex-shrink-0 items-center gap-x-2">
@@ -57,7 +59,7 @@
               <button
                 v-if="!notification.read"
                 type="button"
-                class="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-1 text-xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-400/20 transition-all duration-200 hover:bg-zinc-400/20 hover:scale-105 active:scale-95"
+                class="inline-flex gap-x-1 items-center rounded-md bg-zinc-400/10 px-2 py-1 text-xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-400/20 transition-all duration-200 hover:bg-zinc-400/20 hover:scale-105 active:scale-95"
                 @click="markAsRead(notification.id)"
               >
                 <CheckIcon class="size-3" />
@@ -65,7 +67,7 @@
               </button>
               <button
                 type="button"
-                class="inline-flex items-center rounded-md bg-red-400/10 px-2 py-1 text-xs font-medium text-red-400 ring-1 ring-inset ring-red-400/20 transition-all duration-200 hover:bg-red-400/20 hover:scale-105 active:scale-95"
+                class="inline-flex gap-x-1 items-center rounded-md bg-red-400/10 px-2 py-1 text-xs font-medium text-red-400 ring-1 ring-inset ring-red-400/20 transition-all duration-200 hover:bg-red-400/20 hover:scale-105 active:scale-95"
                 @click="deleteNotification(notification.id)"
               >
                 <TrashIcon class="size-3" />

pages/news.vue

@@ -86,7 +86,7 @@
     </div>
 
     <div class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6 grow">
-      <NuxtPage />
+      <NuxtPage :articles="news" />
     </div>
   </div>
 </template>

pages/news/[id]/index.vue

@@ -1,12 +1,16 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div>
-    <div v-if="article" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div v-if="article" class="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 v-if="article.imageObjectId" class="absolute inset-0">
+        <div class="absolute inset-0">
           <img
-            :src="useObject(article.imageObjectId)"
+            :src="
+              article.imageObjectId
+                ? useObject(article.imageObjectId)
+                : '/wallpapers/news-placeholder.jpg'
+            "
             alt=""
             class="w-full h-full object-cover blur-sm scale-110"
           />
@@ -14,12 +18,6 @@
             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 class="relative h-full flex flex-col justify-end p-8">
           <div class="flex items-center gap-x-3 mb-6">
@@ -73,7 +71,7 @@
 
       <!-- Article content - markdown -->
       <div
-        class="mx-auto prose prose-invert prose-lg"
+        class="mx-auto prose prose-blue prose-invert prose-lg"
         v-html="renderedContent"
       />
     </div>

pages/news/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col max-w-4xl mx-auto">
+  <div class="flex flex-col px-8">
     <div class="mb-8">
       <div class="flex flex-col gap-y-4">
         <div>
@@ -14,7 +14,11 @@
     </div>
 
     <!-- Articles list -->
-    <TransitionGroup name="article-list" tag="div" class="space-y-6">
+    <TransitionGroup
+      name="article-list"
+      tag="div"
+      class="gap-6 grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5"
+    >
       <NuxtLink
         v-for="article in articles"
         :key="article.id"
@@ -26,8 +30,11 @@
         >
           <div class="relative h-48 w-full overflow-hidden">
             <img
-              v-if="article.imageObjectId"
-              :src="useObject(article.imageObjectId)"
+              :src="
+                article.imageObjectId
+                  ? useObject(article.imageObjectId)
+                  : '/wallpapers/news-placeholder.jpg'
+              "
               alt=""
               class="h-full w-full object-cover object-center transition-all duration-500 group-hover:scale-110 scale-105"
             />