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/app-frontend/package.json

@@ -20,6 +20,7 @@
     "@sentry/vue": "^8.27.0",
     "@tauri-apps/api": "^2.5.0",
     "@tauri-apps/plugin-dialog": "^2.2.1",
+    "@tauri-apps/plugin-http": "^2.5.0",
     "@tauri-apps/plugin-opener": "^2.2.6",
     "@tauri-apps/plugin-os": "^2.2.1",
     "@tauri-apps/plugin-updater": "^2.7.1",

apps/app-frontend/src/App.vue

@@ -25,7 +25,7 @@ import {
   ButtonStyled,
   Notifications,
   OverflowMenu,
-  useRelativeTime,
+  NewsArticleCard,
 } from '@modrinth/ui'
 import { useLoading, useTheming } from '@/store/state'
 import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
@@ -62,15 +62,12 @@ import NavButton from '@/components/ui/NavButton.vue'
 import { get as getCreds, login, logout } from '@/helpers/mr_auth.js'
 import { get_user } from '@/helpers/cache.js'
 import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
-import dayjs from 'dayjs'
 import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import { hide_ads_window, init_ads_window } from '@/helpers/ads.js'
 import FriendsList from '@/components/ui/friends/FriendsList.vue'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
 
-const formatRelativeTime = useRelativeTime()
-
 const themeStore = useTheming()
 
 const news = ref([])
@@ -177,6 +174,7 @@ async function setupApp() {
     'criticalAnnouncements',
     true,
   )
+    .then((response) => response.json())
     .then((res) => {
       if (res && res.header && res.body) {
         criticalErrorMessage.value = res
@@ -188,11 +186,21 @@ async function setupApp() {
       )
     })
 
-  useFetch(`https://modrinth.com/news/feed/articles.json`, 'news', true).then((res) => {
-    if (res && res.articles) {
-      news.value = res.articles
-    }
-  })
+  useFetch(`https://modrinth.com/news/feed/articles.json`, 'news', true)
+    .then((response) => response.json())
+    .then((res) => {
+      if (res && res.articles) {
+        // Format expected by NewsArticleCard component.
+        news.value = res.articles.map((article) => ({
+          ...article,
+          path: article.link,
+          thumbnail: article.thumbnail,
+          title: article.title,
+          summary: article.summary,
+          date: article.date,
+        }))
+      }
+    })
 
   get_opening_command().then(handleCommand)
   checkUpdates()
@@ -579,34 +587,15 @@ function handleAuxClick(e) {
               <FriendsList :credentials="credentials" :sign-in="() => signIn()" />
             </suspense>
           </div>
-          <div v-if="news && news.length > 0" class="pt-4 flex flex-col">
-            <h3 class="px-4 text-lg m-0">News</h3>
-            <template v-for="(item, index) in news" :key="`news-${index}`">
-              <a
-                :class="`flex flex-col outline-offset-[-4px] hover:bg-[--brand-gradient-border] focus:bg-[--brand-gradient-border] px-4 transition-colors ${index === 0 ? 'pt-2 pb-4' : 'py-4'}`"
-                :href="item.link"
-                target="_blank"
-                rel="external"
-              >
-                <img
-                  :src="item.thumbnail"
-                  alt="News thumbnail"
-                  aria-hidden="true"
-                  class="w-full aspect-[3/1] object-cover rounded-2xl border-[1px] border-solid border-[--brand-gradient-border]"
-                />
-                <h4 class="mt-2 mb-0 text-sm leading-none text-contrast font-semibold">
-                  {{ item.title }}
-                </h4>
-                <p class="my-1 text-sm text-secondary leading-tight">{{ item.summary }}</p>
-                <p class="text-right text-sm text-secondary opacity-60 leading-tight m-0">
-                  {{ formatRelativeTime(dayjs(item.date).toISOString()) }}
-                </p>
-              </a>
-              <hr
-                v-if="index !== news.length - 1"
-                class="h-px my-[-2px] mx-4 border-0 m-0 bg-[--brand-gradient-border]"
+          <div v-if="news && news.length > 0" class="pt-4 flex flex-col items-center">
+            <h3 class="px-4 text-lg m-0 text-left w-full">News</h3>
+            <div class="px-4 pt-2 space-y-4 flex flex-col items-center w-full">
+              <NewsArticleCard
+                v-for="(item, index) in news"
+                :key="`news-${index}`"
+                :article="item"
               />
-            </template>
+            </div>
           </div>
         </div>
       </div>

apps/app-frontend/src/helpers/fetch.js

@@ -1,12 +1,12 @@
-import { ofetch } from 'ofetch'
+import { fetch } from '@tauri-apps/plugin-http'
 import { handleError } from '@/store/state.js'
 import { getVersion } from '@tauri-apps/api/app'
 
 export const useFetch = async (url, item, isSilent) => {
   try {
     const version = await getVersion()
-
-    return await ofetch(url, {
+    return await fetch(url, {
+      method: 'GET',
       headers: { 'User-Agent': `modrinth/theseus/${version} (support@modrinth.com)` },
     })
   } catch (err) {

apps/app/Cargo.toml

@@ -43,6 +43,7 @@ paste.workspace = true
 enumset = { workspace = true, features = ["serde"] }
 
 native-dialog.workspace = true
+tauri-plugin-http = "2.5.0"
 
 [target.'cfg(target_os = "linux")'.dependencies]
 tauri-plugin-updater = { workspace = true, optional = true }

apps/app/capabilities/plugins.json

@@ -19,6 +19,14 @@
     "window-state:default",
     "window-state:allow-restore-state",
     "window-state:allow-save-window-state",
+    
+    {
+      "identifier": "http:default",
+      "allow": [
+        { "url": "https://modrinth.com/*" },
+        { "url": "https://*.modrinth.com/*" }
+      ]
+    },
 
     "auth:default",
     "import:default",

apps/app/src/main.rs

@@ -183,6 +183,7 @@ fn main() {
                 let _ = win.set_focus();
             }
         }))
+        .plugin(tauri_plugin_http::init())
         .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_deep_link::init())

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"
     }