fix: app blog issues & consistency (#3880)

* fix: app fetch

* fix: webp default images

* fix: lint issues

* feat: remove default thumbnail from app assets

* fix: webp paths

* fix: use ` instead of "/'

* fix: use AutoLink

* Fix featured article link + changelog page

---------

Co-authored-by: Prospector <prospectordev@gmail.com>

packages/ui/src/components/content/NewsArticleCard.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import AutoLink from '../base/AutoLink.vue'
+
+export interface Article {
+  path: string
+  thumbnail: string
+  title: string
+  summary: string
+  date: string
+}
+
+defineProps<{
+  article: Article
+}>()
+</script>
+
+<template>
+  <AutoLink
+    :to="article.path"
+    class="active:scale-[0.99]! group flex flex-col transition-all ease-in-out hover:brightness-125 cursor-pointer"
+  >
+    <article class="flex h-full grow flex-col gap-4">
+      <img
+        :src="article.thumbnail"
+        class="aspect-video w-full rounded-xl border-[1px] border-solid border-button-border object-cover"
+      />
+      <div class="flex grow flex-col gap-2">
+        <h3 class="m-0 text-base leading-tight group-hover:underline">
+          {{ article.title }}
+        </h3>
+        <p v-if="article.summary" class="m-0 text-sm leading-tight text-primary">
+          {{ article.summary }}
+        </p>
+        <div class="mt-auto text-sm text-secondary">
+          {{ dayjs(article.date).format('MMMM D, YYYY') }}
+        </div>
+      </div>
+    </article>
+  </AutoLink>
+</template>

packages/ui/src/components/index.ts

@@ -58,6 +58,8 @@ export { default as CompactChart } from './chart/CompactChart.vue'
 
 // Content
 export { default as ContentListPanel } from './content/ContentListPanel.vue'
+export { default as NewsArticleCard } from './content/NewsArticleCard.vue'
+export type { Article as NewsArticle } from './content/NewsArticleCard.vue'
 
 // Modals
 export { default as NewModal } from './modal/NewModal.vue'