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>

apps/frontend/src/pages/news/article/[slug].vue

@@ -27,7 +27,7 @@ const article = computed(() => ({
   path: `/news/${rawArticle.slug}`,
   thumbnail: rawArticle.thumbnail
     ? `/news/article/${rawArticle.slug}/thumbnail.webp`
-    : `/news/default.jpg`,
+    : `/news/default.webp`,
   title: rawArticle.title,
   summary: rawArticle.summary,
   date: rawArticle.date,

apps/frontend/src/pages/news/changelog.vue

@@ -6,6 +6,21 @@
   </div>
 </template>
 
+<script lang="ts" setup>
+const config = useRuntimeConfig();
+
+useSeoMeta({
+  title: "Modrinth Changelog",
+  ogTitle: "Modrinth Changelog",
+  description: "Keep up-to-date on what's new with Modrinth.",
+  ogDescription: "Keep up-to-date on what's new with Modrinth.",
+  ogType: "website",
+  ogImage: () => `${config.public.siteUrl}/news/changelog.webp`,
+  twitterCard: "summary_large_image",
+  twitterImage: () => `${config.public.siteUrl}/news/changelog.webp`,
+});
+</script>
+
 <style lang="scss" scoped>
 .page {
   padding: 1rem;

apps/frontend/src/pages/news/index.vue

@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import { ButtonStyled } from "@modrinth/ui";
+import { ButtonStyled, NewsArticleCard } from "@modrinth/ui";
 import { ChevronRightIcon, RssIcon, GitGraphIcon } from "@modrinth/assets";
 import dayjs from "dayjs";
 import { articles as rawArticles } from "@modrinth/blog";
 import { computed, ref } from "vue";
 import NewsletterButton from "~/components/ui/NewsletterButton.vue";
-import NewsArticleCard from "~/components/ui/news/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,
@@ -31,9 +30,9 @@ useSeoMeta({
   description: "Keep up-to-date on the latest news from Modrinth.",
   ogDescription: "Keep up-to-date on the latest news from Modrinth.",
   ogType: "website",
-  ogImage: () => `${config.public.siteUrl}/news/thumbnail.jpg`,
+  ogImage: () => `${config.public.siteUrl}/news/thumbnail.webp`,
   twitterCard: "summary_large_image",
-  twitterImage: () => `${config.public.siteUrl}/news/thumbnail.jpg`,
+  twitterImage: () => `${config.public.siteUrl}/news/thumbnail.webp`,
 });
 </script>
 
@@ -64,8 +63,8 @@ useSeoMeta({
         class="full-width-bg brand-gradient-bg mt-6 border-0 border-y-[1px] border-solid py-4"
       >
         <nuxt-link
-          :to="`${featuredArticle.path}/`"
-          class="active:scale-[0.99]! group flex transition-all ease-in-out hover:brightness-125"
+          :to="`${featuredArticle.path}`"
+          class="active:scale-[0.99]! group flex cursor-pointer transition-all ease-in-out hover:brightness-125"
         >
           <article class="featured-article px-6">
             <div class="featured-image-container">

apps/frontend/src/public/news/feed/articles.json

@@ -38,7 +38,7 @@
     {
       "title": "A Sustainable Path Forward for Modrinth",
       "summary": "Our capital return and what’s next.",
-      "thumbnail": "https://modrinth.com/news/default.jpg",
+      "thumbnail": "https://modrinth.com/news/default.webp",
       "date": "2024-04-04T20:00:00.000Z",
       "link": "https://modrinth.com/news/article/capital-return"
     },
@@ -52,14 +52,14 @@
     {
       "title": "Correcting Inflated Download Counts due to Rate Limiting Issue",
       "summary": "A rate limiting issue caused inflated download counts in certain countries.",
-      "thumbnail": "https://modrinth.com/news/default.jpg",
+      "thumbnail": "https://modrinth.com/news/default.webp",
       "date": "2023-11-10T20:00:00.000Z",
       "link": "https://modrinth.com/news/article/download-adjustment"
     },
     {
       "title": "Introducing Modrinth App Beta",
       "summary": "Changing the modded Minecraft landscape with the new Modrinth App, alongside several other major features.",
-      "thumbnail": "https://modrinth.com/news/default.jpg",
+      "thumbnail": "https://modrinth.com/news/default.webp",
       "date": "2023-08-05T20:00:00.000Z",
       "link": "https://modrinth.com/news/article/modrinth-app-beta"
     },
@@ -73,14 +73,14 @@
     {
       "title": "Accelerating Modrinth's Development",
       "summary": "Our fundraiser and the future of Modrinth!",
-      "thumbnail": "https://modrinth.com/news/default.jpg",
+      "thumbnail": "https://modrinth.com/news/default.webp",
       "date": "2023-02-01T20:00:00.000Z",
       "link": "https://modrinth.com/news/article/accelerating-development"
     },
     {
       "title": "Two years of Modrinth: a retrospective",
       "summary": "The history of Modrinth as we know it from December 2020 to December 2022.",
-      "thumbnail": "https://modrinth.com/news/default.jpg",
+      "thumbnail": "https://modrinth.com/news/default.webp",
       "date": "2023-01-07T00:00:00.000Z",
       "link": "https://modrinth.com/news/article/two-years-of-modrinth-history"
     },
@@ -157,7 +157,7 @@
     {
       "title": "What is Modrinth?",
       "summary": "Hello, we are Modrinth – an open source mods hosting platform. Sounds dry, doesn't it? So let me tell you our story – and I promise, it won't be boring!",
-      "thumbnail": "https://modrinth.com/news/default.jpg",
+      "thumbnail": "https://modrinth.com/news/default.webp",
       "date": "2020-11-27T00:00:00.000Z",
       "link": "https://modrinth.com/news/article/whats-modrinth"
     }