feat: DEV-99 blog migration (#3870)

* feat: blog migration w/ fixes

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

* feat: add changelog button to news page

* fix: lint issues

* refactor: replace nuxt content with `@modrinth/blog`

* feat: shared public folder

* feat: try lazy loading html content

* feat: rss + hide newsletter btn + blog.config.ts

* feat: add new chapter modrinth servers post

* fix: lint issues

* fix: only generate RSS feed if changes detected

* fix: utils dep

* fix: lockfile dep

* feat: GET /email/subscribe + subscription button

* fix: lint issues

* feat: articles.json for app

* Made grid more responsive

* fix: changes

* Make margin slightly smaller in lists

* Fix footer link

* feat: latest news

* Fix responsiveness

* Remove old utm link

* Update changelog

* Lint

---------

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

apps/frontend/src/components/ui/NewsletterButton.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ButtonStyled } from "@modrinth/ui";
+import { MailIcon, CheckIcon } from "@modrinth/assets";
+import { ref, watchEffect } from "vue";
+import { useBaseFetch } from "~/composables/fetch.js";
+
+const auth = await useAuth();
+const showSubscriptionConfirmation = ref(false);
+const subscribed = ref(false);
+
+async function checkSubscribed() {
+  if (auth.value?.user) {
+    try {
+      const { data } = await useBaseFetch("auth/email/subscribe", {
+        method: "GET",
+      });
+      subscribed.value = data?.subscribed || false;
+    } catch {
+      subscribed.value = false;
+    }
+  }
+}
+
+watchEffect(() => {
+  checkSubscribed();
+});
+
+async function subscribe() {
+  try {
+    await useBaseFetch("auth/email/subscribe", {
+      method: "POST",
+    });
+    showSubscriptionConfirmation.value = true;
+  } catch {
+  } finally {
+    setTimeout(() => {
+      showSubscriptionConfirmation.value = false;
+      subscribed.value = true;
+    }, 2500);
+  }
+}
+</script>
+
+<template>
+  <ButtonStyled v-if="auth?.user && !subscribed" color="brand" type="outlined">
+    <button v-tooltip="`Subscribe to the Modrinth newsletter`" @click="subscribe">
+      <template v-if="!showSubscriptionConfirmation"> <MailIcon /> Subscribe </template>
+      <template v-else> <CheckIcon /> Subscribed! </template>
+    </button>
+  </ButtonStyled>
+</template>

apps/frontend/src/components/ui/ShareArticleButtons.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="flex gap-2">
+    <ButtonStyled circular>
+      <a
+        v-tooltip="`Share on Bluesky`"
+        :href="`https://bsky.app/intent/compose?text=${encodedUrl}`"
+        target="_blank"
+      >
+        <BlueskyIcon />
+      </a>
+    </ButtonStyled>
+    <ButtonStyled circular>
+      <a
+        v-tooltip="`Share on Mastodon`"
+        :href="`https://tootpick.org/#text=${encodedUrl}`"
+        target="_blank"
+      >
+        <MastodonIcon />
+      </a>
+    </ButtonStyled>
+    <ButtonStyled circular>
+      <a
+        v-tooltip="`Share on X`"
+        :href="`https://www.x.com/intent/post?url=${encodedUrl}`"
+        target="_blank"
+      >
+        <TwitterIcon />
+      </a>
+    </ButtonStyled>
+    <ButtonStyled circular>
+      <a
+        v-tooltip="`Share via email`"
+        :href="`mailto:${encodedTitle ? `?subject=${encodedTitle}&` : `?`}body=${encodedUrl}`"
+        target="_blank"
+      >
+        <MailIcon />
+      </a>
+    </ButtonStyled>
+    <ButtonStyled circular>
+      <button
+        v-tooltip="copied ? `Copied to clipboard` : `Copy link`"
+        :disabled="copied"
+        class="relative grid place-items-center overflow-hidden"
+        @click="copyToClipboard(url)"
+      >
+        <CheckIcon
+          class="absolute transition-all ease-in-out"
+          :class="copied ? 'translate-y-0' : 'translate-y-7'"
+        />
+        <LinkIcon
+          class="absolute transition-all ease-in-out"
+          :class="copied ? '-translate-y-7' : 'translate-y-0'"
+        />
+      </button>
+    </ButtonStyled>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  BlueskyIcon,
+  CheckIcon,
+  LinkIcon,
+  MailIcon,
+  MastodonIcon,
+  TwitterIcon,
+} from "@modrinth/assets";
+import { ButtonStyled } from "@modrinth/ui";
+
+const props = defineProps<{
+  title?: string;
+  url: string;
+}>();
+
+const copied = ref(false);
+const encodedUrl = computed(() => encodeURIComponent(props.url));
+const encodedTitle = computed(() => (props.title ? encodeURIComponent(props.title) : undefined));
+
+async function copyToClipboard(text: string) {
+  await navigator.clipboard.writeText(text);
+  copied.value = true;
+  setTimeout(() => {
+    copied.value = false;
+  }, 3000);
+}
+</script>

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

@@ -0,0 +1,50 @@
+<template>
+  <div class="mx-2 p-4 !py-8 shadow-md sm:mx-8 sm:p-32">
+    <div class="my-8 flex items-center justify-between">
+      <h2 class="m-0 mx-auto text-3xl font-extrabold sm:text-4xl">Latest news from Modrinth</h2>
+    </div>
+
+    <div v-if="latestArticles" class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
+      <div
+        v-for="(article, index) in latestArticles"
+        :key="article.slug"
+        :class="{ 'max-xl:hidden': index === 2 }"
+      >
+        <NewsArticleCard :article="article" />
+      </div>
+    </div>
+    <div class="mx-2 my-8 flex w-full items-center justify-center">
+      <ButtonStyled color="brand" size="large">
+        <nuxt-link to="/news">
+          <NewspaperIcon />
+          View all news
+        </nuxt-link>
+      </ButtonStyled>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NewspaperIcon } from "@modrinth/assets";
+import { articles as rawArticles } from "@modrinth/blog";
+import { ButtonStyled } 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}`,
+      thumbnail: article.thumbnail
+        ? `/news/article/${article.slug}/thumbnail.webp`
+        : `/news/default.jpg`,
+      title: article.title,
+      summary: article.summary,
+      date: article.date,
+    }))
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()),
+);
+
+const latestArticles = computed(() => articles.value.slice(0, 3));
+</script>

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

@@ -0,0 +1,40 @@
+<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>