From 363f47f269ae44c7f6c75ce44f83469a79146e98 Mon Sep 17 00:00:00 2001 From: "Calum H." Date: Mon, 27 Oct 2025 23:19:35 +0000 Subject: [PATCH] feat: blog (#4653) * feat: blog * feat: creator withdraw overhaul blog * fix: bullet points * fix: title * fix: blog * feat: autoplay on scroll & fix encoding of videos * fix: class on first video * fix: authors + summary + title * fix: title + summary * fix: lint * fix: rev page mp4 * update formatting + phrasing * some more formatting changes * unify hr colors * update opening line * update blog time --------- Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com> --- .../src/pages/news/article/[slug].vue | 77 ++++++++++-- .../balance-progress-bar.mp4 | Bin 0 -> 739212 bytes .../revenue-page-from-home.mp4 | Bin 0 -> 3468153 bytes .../tax-compliance.png | Bin 0 -> 135147 bytes .../thumbnail.webp | Bin 0 -> 37252 bytes .../withdraw-example.mp4 | Bin 0 -> 5654499 bytes .../src/public/news/feed/articles.json | 7 ++ apps/frontend/src/public/news/feed/rss.xml | 10 +- .../articles/creator-withdrawals-overhaul.md | 110 ++++++++++++++++++ .../creator_withdrawals_overhaul.content.ts | 2 + .../compiled/creator_withdrawals_overhaul.ts | 12 ++ packages/blog/compiled/index.ts | 2 + .../balance-progress-bar.mp4 | Bin 0 -> 739212 bytes .../revenue-page-from-home.mp4 | Bin 0 -> 3468153 bytes .../tax-compliance.png | Bin 0 -> 135147 bytes .../thumbnail.webp | Bin 0 -> 37252 bytes .../withdraw-example.mp4 | Bin 0 -> 5654499 bytes 17 files changed, 212 insertions(+), 8 deletions(-) create mode 100644 apps/frontend/src/public/news/article/creator-withdrawals-overhaul/balance-progress-bar.mp4 create mode 100644 apps/frontend/src/public/news/article/creator-withdrawals-overhaul/revenue-page-from-home.mp4 create mode 100644 apps/frontend/src/public/news/article/creator-withdrawals-overhaul/tax-compliance.png create mode 100644 apps/frontend/src/public/news/article/creator-withdrawals-overhaul/thumbnail.webp create mode 100644 apps/frontend/src/public/news/article/creator-withdrawals-overhaul/withdraw-example.mp4 create mode 100644 packages/blog/articles/creator-withdrawals-overhaul.md create mode 100644 packages/blog/compiled/creator_withdrawals_overhaul.content.ts create mode 100644 packages/blog/compiled/creator_withdrawals_overhaul.ts create mode 100644 packages/blog/public/creator-withdrawals-overhaul/balance-progress-bar.mp4 create mode 100644 packages/blog/public/creator-withdrawals-overhaul/revenue-page-from-home.mp4 create mode 100644 packages/blog/public/creator-withdrawals-overhaul/tax-compliance.png create mode 100644 packages/blog/public/creator-withdrawals-overhaul/thumbnail.webp create mode 100644 packages/blog/public/creator-withdrawals-overhaul/withdraw-example.mp4 diff --git a/apps/frontend/src/pages/news/article/[slug].vue b/apps/frontend/src/pages/news/article/[slug].vue index ffdd86c0..d7d78dcb 100644 --- a/apps/frontend/src/pages/news/article/[slug].vue +++ b/apps/frontend/src/pages/news/article/[slug].vue @@ -4,7 +4,7 @@ import { articles as rawArticles } from '@modrinth/blog' import { Avatar, ButtonStyled } from '@modrinth/ui' import type { User } from '@modrinth/utils' import dayjs from 'dayjs' -import { computed } from 'vue' +import { computed, onMounted } from 'vue' import NewsletterButton from '~/components/ui/NewsletterButton.vue' import ShareArticleButtons from '~/components/ui/ShareArticleButtons.vue' @@ -74,6 +74,36 @@ useSeoMeta({ twitterCard: 'summary_large_image', twitterImage: () => thumbnailPath.value, }) + +onMounted(() => { + const videos = document.querySelectorAll('.markdown-body video') + + if ('IntersectionObserver' in window) { + const videoObserver = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + const video = entry.target as HTMLVideoElement + if (entry.isIntersecting) { + video.play().catch(() => {}) + } else { + video.pause() + } + }) + }, + { + threshold: 0.5, + }, + ) + + videos.forEach((video) => { + videoObserver.observe(video) + }) + } else { + videos.forEach((video) => { + ;(video as HTMLVideoElement).setAttribute('autoplay', '') + }) + } +})