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>

apps/frontend/src/components/ui/news/LatestNewsRow.vue

@@ -27,18 +27,17 @@
 <script setup lang="ts">
 import { NewspaperIcon } from "@modrinth/assets";
 import { articles as rawArticles } from "@modrinth/blog";
-import { ButtonStyled } from "@modrinth/ui";
+import { ButtonStyled, NewsArticleCard } from "@modrinth/ui";
 import { ref, computed } from "vue";
-import NewsArticleCard from "./NewsArticleCard.vue";
 
 const articles = ref(
   rawArticles
     .map((article) => ({
       ...article,
-      path: `/news/article/${article.slug}`,
+      path: `/news/article/${article.slug}/`,
       thumbnail: article.thumbnail
         ? `/news/article/${article.slug}/thumbnail.webp`
-        : `/news/default.jpg`,
+        : `/news/default.webp`,
       title: article.title,
       summary: article.summary,
       date: article.date,

apps/frontend/src/components/ui/news/NewsArticleCard.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import dayjs from "dayjs";
-
-interface Article {
-  path: string;
-  thumbnail: string;
-  title: string;
-  summary: string;
-  date: string;
-}
-
-defineProps<{
-  article: Article;
-}>();
-</script>
-
-<template>
-  <nuxt-link
-    :to="`${article.path}/`"
-    class="active:scale-[0.99]! group flex flex-col transition-all ease-in-out hover:brightness-125"
-  >
-    <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">
-          {{ article.summary }}
-        </p>
-        <div class="mt-auto text-sm text-secondary">
-          {{ dayjs(article.date).format("MMMM D, YYYY") }}
-        </div>
-      </div>
-    </article>
-  </nuxt-link>
-</template>