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>

Author: IMB11

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', '')
+		})
+	}
+})
 </script>
 
 <template>
@@ -181,14 +211,19 @@ useSeoMeta({
 		padding: 0;
 	}
 
-	ul,
+	ul > li:not(:last-child),
 	ol > li:not(:last-child) {
 		margin-bottom: 0.5rem;
 	}
 
 	ul,
 	ol {
-		p {
+		> li > p {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+
+		> li > p:not(:last-child) {
 			margin-bottom: 0.5rem;
 		}
 	}
@@ -220,20 +255,22 @@ useSeoMeta({
 
 	h2 {
 		font-size: 1.25rem;
+		margin-top: 1.5rem;
 		@media (min-width: 640px) {
 			font-size: 1.5rem;
 		}
 	}
 
 	h3 {
-		font-size: 1.125rem;
+		font-size: 1rem;
+		margin-top: 1.25rem;
 		@media (min-width: 640px) {
-			font-size: 1.25rem;
+			font-size: 1.125rem;
 		}
 	}
 
 	p {
-		margin-bottom: 1.25rem;
+		margin-bottom: 0.75rem;
 		font-size: 0.875rem;
 		@media (min-width: 640px) {
 			font-size: 1rem;
@@ -275,8 +312,34 @@ useSeoMeta({
 		}
 	}
 
+	hr {
+		border: none;
+		height: 1px;
+		background-color: var(--color-divider);
+	}
+
+	.video-wrapper {
+		display: inline-block;
+		max-width: 100%;
+		border-radius: var(--radius-md);
+		overflow: hidden;
+		border: 1px solid var(--color-button-border);
+		@media (min-width: 640px) {
+			border-radius: var(--radius-lg);
+		}
+
+		video {
+			display: block;
+			max-width: 100%;
+			object-fit: cover;
+			height: auto;
+		}
+	}
+
 	> img,
-	> :has(img:first-child:last-child) {
+	> .video-wrapper,
+	> :has(img:first-child:last-child),
+	> :has(video:first-child:last-child) {
 		display: flex;
 		justify-content: center;
 	}

apps/frontend/src/public/news/article/creator-withdrawals-overhaul/balance-progress-bar.mp4

@@ -1,5 +1,12 @@
 {
 	"articles": [
+		{
+			"title": "More Ways to Withdraw",
+			"summary": "Coming soon: new withdraw options and a redesigned revenue dashboard",
+			"thumbnail": "https://modrinth.com/news/article/creator-withdrawals-overhaul/thumbnail.webp",
+			"date": "2025-10-27T23:30:00.000Z",
+			"link": "https://modrinth.com/news/article/creator-withdrawals-overhaul"
+		},
 		{
 			"title": "Standing By Our Values",
 			"summary": "Keeping LGBTQIA+ content visible despite demands from Russia.",

apps/frontend/src/public/news/article/creator-withdrawals-overhaul/revenue-page-from-home.mp4

@@ -4,9 +4,17 @@
         <description><![CDATA[Keep up-to-date on the latest news from Modrinth.]]></description>
         <link>https://modrinth.com/news/</link>
         <generator>@modrinth/blog</generator>
-        <lastBuildDate>Thu, 02 Oct 2025 01:36:13 GMT</lastBuildDate>
+        <lastBuildDate>Mon, 27 Oct 2025 23:06:26 GMT</lastBuildDate>
         <atom:link href="https://modrinth.com/news/feed/rss.xml" rel="self" type="application/rss+xml"/>
         <language><![CDATA[en]]></language>
+        <item>
+            <title><![CDATA[More Ways to Withdraw]]></title>
+            <description><![CDATA[Coming soon: new withdraw options and a redesigned revenue dashboard]]></description>
+            <link>https://modrinth.com/news/article/creator-withdrawals-overhaul/</link>
+            <guid isPermaLink="false">https://modrinth.com/news/article/creator-withdrawals-overhaul/</guid>
+            <pubDate>Mon, 27 Oct 2025 21:38:54 GMT</pubDate>
+            <content:encoded>&lt;![CDATA[&lt;p&gt;Hey everyone! We&apos;ve heard your feedback on creator withdrawal options, and we&apos;re excited to share that more are finally coming to Modrinth! Over the past month, we&apos;ve been working on overhauling the withdrawal experience and supporting more withdraw methods.&lt;/p&gt;&lt;p&gt;&lt;strong&gt;This update will roll out later this week&lt;/strong&gt;, but we wanted to give everyone an early heads-up so you can hold off on withdrawing when payouts go out in a couple days in case one of the new options interests you. There&apos;s a lot packed into this release, so let&apos;s dive in!&lt;/p&gt;&lt;div class=&quot;video-wrapper mb-8&quot;&gt;&lt;video autoplay loop muted playsinline&gt;&lt;source src=&quot;./revenue-page-from-home.mp4&quot; type=&quot;video/mp4&quot;&gt;&lt;/video&gt;&lt;/div&gt;&lt;h2&gt;&lt;strong&gt;TL;DR&lt;/strong&gt;&lt;/h2&gt;&lt;ul&gt;&lt;li&gt;New revenue page and withdrawal flow&lt;/li&gt;&lt;li&gt;New bank transfer option for 29 countries&lt;/li&gt;&lt;li&gt;New crypto (USDC) option for hard to reach countries&lt;/li&gt;&lt;li&gt;PayPal and Venmo moved to Tremendous for international users (lower to no FX fees)&lt;/li&gt;&lt;li&gt;Email notifications for payout updates (available, successful, failed, etc.)&lt;/li&gt;&lt;li&gt;New withdrawal compliance&lt;/li&gt;&lt;/ul&gt;&lt;hr&gt;&lt;h2&gt;Streamlined Withdrawal Experience&lt;/h2&gt;&lt;p&gt;A big goal for this release was to make payouts as clear as possible for creators. The revenue screen and withdrawal process has been completely overhauled.&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Your revenue is now displayed as a balance, with a detailed breakdown below.&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot;video-wrapper mb-8&quot;&gt;&lt;video autoplay loop muted playsinline&gt;&lt;source src=&quot;./balance-progress-bar.mp4&quot; type=&quot;video/mp4&quot;&gt;&lt;/video&gt;&lt;/div&gt;&lt;blockquote&gt;&lt;p&gt;Green shows available revenue, blue and purple show estimated revenue from the last two completed months, and grey shows the current month revenue that&apos;s still being processed.&lt;/p&gt;&lt;/blockquote&gt;&lt;p&gt;We&apos;ve also cleaned up the transaction history. You&apos;ll now see your most recent transactions directly on the revenue page, along with any deposits from Modrinth into your account.&lt;/p&gt;&lt;h2&gt;New Withdraw Methods&lt;/h2&gt;&lt;p&gt;The second big goal of this release was to bring more options, better fees, and new ways to withdraw from countries that were previously hard to reach.&lt;/p&gt;&lt;div class=&quot;video-wrapper mb-8&quot;&gt;&lt;video autoplay loop muted playsinline&gt;&lt;source src=&quot;./withdraw-example.mp4&quot; type=&quot;video/mp4&quot;&gt;&lt;/video&gt;&lt;/div&gt;&lt;p&gt;Withdrawing with ease from your balance using our new modal flow. Click the green Withdraw button to get started, and you&apos;ll immediately see all available methods and fees for your country, including a few new ones:&lt;/p&gt;&lt;h3&gt;Bank Transfers (29 Countries)&lt;/h3&gt;&lt;p&gt;You can now withdraw directly to your bank account via wire or ACH, depending on your country. Supported countries and their fees are listed below.&lt;/p&gt;&lt;p&gt;We&apos;re working to expand this list, most notably to Canada, the UK, and countries across Asia, but there&apos;s no timeline &lt;em&gt;yet&lt;/em&gt;.&lt;/p&gt;&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Country&lt;/th&gt;&lt;th&gt;Currency&lt;/th&gt;&lt;th&gt;Transaction Fee&lt;/th&gt;&lt;th&gt;FX Fee&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Total Fee&lt;/strong&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;🇺🇸 USA&lt;/td&gt;&lt;td&gt;USD&lt;/td&gt;&lt;td&gt;$0.50 + 1%&lt;/td&gt;&lt;td&gt;0.50%&lt;/td&gt;&lt;td&gt;&lt;strong&gt;~1.5% + $0.50&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;🇪🇺 EU&lt;/td&gt;&lt;td&gt;EUR&lt;/td&gt;&lt;td&gt;€1.00 + 1%&lt;/td&gt;&lt;td&gt;0.60%&lt;/td&gt;&lt;td&gt;&lt;strong&gt;~1.6% + €1.00&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;🇦🇷 Argentina&lt;/td&gt;&lt;td&gt;ARS&lt;/td&gt;&lt;td&gt;$0.00 + 1%&lt;/td&gt;&lt;td&gt;0.50%&lt;/td&gt;&lt;td&gt;&lt;strong&gt;~1.5%&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;🇲🇽 Mexico&lt;/td&gt;&lt;td&gt;MXN&lt;/td&gt;&lt;td&gt;$0.50 + 1%&lt;/td&gt;&lt;td&gt;0.90%&lt;/td&gt;&lt;td&gt;&lt;strong&gt;~1.9% + $0.50&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;🇧🇷 Brazil&lt;/td&gt;&lt;td&gt;BRL&lt;/td&gt;&lt;td&gt;$0.25 + 1%&lt;/td&gt;&lt;td&gt;1.30% (incl. IOF)&lt;/td&gt;&lt;td&gt;&lt;strong&gt;~2.3% + $0.25&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;🇨🇱 Chile&lt;/td&gt;&lt;td&gt;CLP&lt;/td&gt;&lt;td&gt;$1.20 + 1%&lt;/td&gt;&lt;td&gt;0.95%&lt;/td&gt;&lt;td&gt;&lt;strong&gt;~2.0% + $1.20&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;🇨🇷 Costa Rica&lt;/td&gt;&lt;td&gt;CRC&lt;/td&gt;&lt;td&gt;$0.80 + 1%&lt;/td&gt;&lt;td&gt;1.05%&lt;/td&gt;&lt;td&gt;&lt;strong&gt;~2.1% + $0.80&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;🇵🇪 Peru (PEN)&lt;/td&gt;&lt;td&gt;PEN&lt;/td&gt;&lt;td&gt;$1.00 + 1%&lt;/td&gt;&lt;td&gt;1.15%&lt;/td&gt;&lt;td&gt;&lt;strong&gt;~2.1% + $1.00&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;🇿🇦 South Africa&lt;/td&gt;&lt;td&gt;ZAR&lt;/td&gt;&lt;td&gt;$1.50 + 1%&lt;/td&gt;&lt;td&gt;1.40%&lt;/td&gt;&lt;td&gt;&lt;strong&gt;~2.4% + $1.50&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;🇵🇪 Peru (USD)&lt;/td&gt;&lt;td&gt;USD&lt;/td&gt;&lt;td&gt;$5.00 + 1%&lt;/td&gt;&lt;td&gt;0.50%&lt;/td&gt;&lt;td&gt;&lt;strong&gt;~1.5% + $5.00&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;🇨🇴 Colombia&lt;/td&gt;&lt;td&gt;COP&lt;/td&gt;&lt;td&gt;$0.35 + 1%&lt;/td&gt;&lt;td&gt;0.95% (incl. GMF)&lt;/td&gt;&lt;td&gt;&lt;strong&gt;~2.0% + $0.35&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;p&gt;&lt;em&gt;Total Fee includes both transaction and FX fees.&lt;/em&gt;&lt;/p&gt;&lt;blockquote&gt;&lt;p&gt;&lt;strong&gt;Supported EU countries:&lt;/strong&gt; Austria, Belgium, Cyprus, Estonia, Finland, France, Germany, Greece, Ireland, Italy, Latvia, Lithuania, Luxembourg, Malta, Netherlands, Portugal, Slovakia, Spain&lt;/p&gt;&lt;/blockquote&gt;&lt;h3&gt;Crypto Withdrawals (USDC)&lt;/h3&gt;&lt;p&gt;We&apos;ve also added USDC withdrawals on the Polygon network. This option is available worldwide, so everyone can now withdraw funds. Fees are a flat 1% + network fees, making it a great low-cost option.&lt;/p&gt;&lt;h3&gt;PayPal &amp;amp; Venmo&lt;/h3&gt;&lt;p&gt;We&apos;ve moved PayPal and Venmo to two different methods depending on your country:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;strong&gt;United States:&lt;/strong&gt; PayPal and Venmo will remain on the existing system with the same low fees: $0.25 + 2%, capped at $1.00.&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Outside of the United States:&lt;/strong&gt; PayPal and Venmo have been moved to Tremendous, which has zero FX fees and charges a flat 6%, capped at $25.00. This should be an improvement over the old method for larger creators, where PayPal charged high uncapped fees for currency conversion.&lt;/li&gt;&lt;/ul&gt;&lt;h2&gt;New Email Notifications&lt;/h2&gt;&lt;p&gt;Earlier this month, we quietly rolled out a new email system that lets us give both creators and users better feedback about what&apos;s going on.&lt;/p&gt;&lt;p&gt;This includes emails for things like project status changes, payouts available, and successful withdrawals. We plan to keep building on this and will be adding email preference settings soon!&lt;/p&gt;&lt;h2&gt;Tax Compliance&lt;/h2&gt;&lt;p&gt;Last but not least, we&apos;re also rolling out our new tax compliance system. We partially rolled this out earlier this month, but the full version is now live.&lt;/p&gt;&lt;p&gt;Creator withdrawals will now be limited to $600.00 USD per calendar year as of 2025, per U.S. regulations. As a creator approaches that threshold, they&apos;ll be prompted to fill out a W-8 or W-9 tax form, depending on their country.&lt;/p&gt;&lt;p&gt;&lt;img src=&quot;/news/article/creator-withdrawals-overhaul/tax-compliance.png&quot; alt=&quot;A snippet of the tax form stage of the new withdraw modal.&quot;&gt;&lt;/p&gt;&lt;p&gt;Completing this form helps Modrinth stay compliant and will automatically unlock withdrawals again once submitted. For non-US users, these details are not automatically sent to the US government! They are for our own records in the case of an audit and we need to prove where we&apos;re sending money to.&lt;/p&gt;&lt;hr&gt;&lt;p&gt;Thank you to all the creators and players supporting Modrinth, we hope you enjoy this long deserved update! 💚&lt;/p&gt;]]&gt;</content:encoded>
+        </item>
         <item>
             <title><![CDATA[Standing By Our Values]]></title>
             <description><![CDATA[Keeping LGBTQIA+ content visible despite demands from Russia.]]></description>

apps/frontend/src/public/news/article/creator-withdrawals-overhaul/tax-compliance.png

@@ -0,0 +1,110 @@
+---
+title: More Ways to Withdraw
+summary: 'Coming soon: new withdraw options and a redesigned revenue dashboard'
+date: 2025-10-27T16:30:00-07:00
+authors: ['AJfd8YH6', 'bOHH0P9Z', 'xSQqYYIN']
+---
+
+Hey everyone! We've heard your feedback on creator withdrawal options, and we're excited to share that more are finally coming to Modrinth! Over the past month, we've been working on overhauling the withdrawal experience and supporting more withdraw methods.
+
+**This update will roll out later this week**, but we wanted to give everyone an early heads-up so you can hold off on withdrawing when payouts go out in a couple days in case one of the new options interests you. There's a lot packed into this release, so let's dive in!
+
+<div class="video-wrapper mb-8">
+	<video autoplay loop muted playsinline>
+		<source src="./revenue-page-from-home.mp4" type="video/mp4" />
+	</video>
+</div>
+
+## **TL;DR**
+
+- New revenue page and withdrawal flow
+- New bank transfer option for 29 countries
+- New crypto (USDC) option for hard to reach countries
+- PayPal and Venmo moved to Tremendous for international users (lower to no FX fees)
+- Email notifications for payout updates (available, successful, failed, etc.)
+- New withdrawal compliance
+
+---
+
+## Streamlined Withdrawal Experience
+
+A big goal for this release was to make payouts as clear as possible for creators. The revenue screen and withdrawal process has been completely overhauled.
+
+**Your revenue is now displayed as a balance, with a detailed breakdown below.**
+
+<div class="video-wrapper mb-8">
+	<video autoplay loop muted playsinline>
+		<source src="./balance-progress-bar.mp4" type="video/mp4" />
+	</video>
+</div>
+
+> Green shows available revenue, blue and purple show estimated revenue from the last two completed months, and grey shows the current month revenue that's still being processed.
+
+We've also cleaned up the transaction history. You'll now see your most recent transactions directly on the revenue page, along with any deposits from Modrinth into your account.
+
+## New Withdraw Methods
+
+The second big goal of this release was to bring more options, better fees, and new ways to withdraw from countries that were previously hard to reach.
+
+<div class="video-wrapper mb-8">
+	<video autoplay loop muted playsinline>
+		<source src="./withdraw-example.mp4" type="video/mp4" />
+	</video>
+</div>
+
+Withdrawing with ease from your balance using our new modal flow. Click the green Withdraw button to get started, and you'll immediately see all available methods and fees for your country, including a few new ones:
+
+### Bank Transfers (29 Countries)
+
+You can now withdraw directly to your bank account via wire or ACH, depending on your country. Supported countries and their fees are listed below.
+
+We're working to expand this list, most notably to Canada, the UK, and countries across Asia, but there's no timeline _yet_.
+
+| Country         | Currency | Transaction Fee | FX Fee            | **Total Fee**     |
+| --------------- | -------- | --------------- | ----------------- | ----------------- |
+| 🇺🇸 USA          | USD      | $0.50 + 1%      | 0.50%             | **~1.5% + $0.50** |
+| 🇪🇺 EU           | EUR      | €1.00 + 1%      | 0.60%             | **~1.6% + €1.00** |
+| 🇦🇷 Argentina    | ARS      | $0.00 + 1%      | 0.50%             | **~1.5%**         |
+| 🇲🇽 Mexico       | MXN      | $0.50 + 1%      | 0.90%             | **~1.9% + $0.50** |
+| 🇧🇷 Brazil       | BRL      | $0.25 + 1%      | 1.30% (incl. IOF) | **~2.3% + $0.25** |
+| 🇨🇱 Chile        | CLP      | $1.20 + 1%      | 0.95%             | **~2.0% + $1.20** |
+| 🇨🇷 Costa Rica   | CRC      | $0.80 + 1%      | 1.05%             | **~2.1% + $0.80** |
+| 🇵🇪 Peru (PEN)   | PEN      | $1.00 + 1%      | 1.15%             | **~2.1% + $1.00** |
+| 🇿🇦 South Africa | ZAR      | $1.50 + 1%      | 1.40%             | **~2.4% + $1.50** |
+| 🇵🇪 Peru (USD)   | USD      | $5.00 + 1%      | 0.50%             | **~1.5% + $5.00** |
+| 🇨🇴 Colombia     | COP      | $0.35 + 1%      | 0.95% (incl. GMF) | **~2.0% + $0.35** |
+
+_Total Fee includes both transaction and FX fees._
+
+> **Supported EU countries:** Austria, Belgium, Cyprus, Estonia, Finland, France, Germany, Greece, Ireland, Italy, Latvia, Lithuania, Luxembourg, Malta, Netherlands, Portugal, Slovakia, Spain
+
+### Crypto Withdrawals (USDC)
+
+We've also added USDC withdrawals on the Polygon network. This option is available worldwide, so everyone can now withdraw funds. Fees are a flat 1% + network fees, making it a great low-cost option.
+
+### PayPal & Venmo
+
+We've moved PayPal and Venmo to two different methods depending on your country:
+
+- **United States:** PayPal and Venmo will remain on the existing system with the same low fees: $0.25 + 2%, capped at $1.00.
+- **Outside of the United States:** PayPal and Venmo have been moved to Tremendous, which has zero FX fees and charges a flat 6%, capped at $25.00. This should be an improvement over the old method for larger creators, where PayPal charged high uncapped fees for currency conversion.
+
+## New Email Notifications
+
+Earlier this month, we quietly rolled out a new email system that lets us give both creators and users better feedback about what's going on.
+
+This includes emails for things like project status changes, payouts available, and successful withdrawals. We plan to keep building on this and will be adding email preference settings soon!
+
+## Tax Compliance
+
+Last but not least, we're also rolling out our new tax compliance system. We partially rolled this out earlier this month, but the full version is now live.
+
+Creator withdrawals will now be limited to $600.00 USD per calendar year as of 2025, per U.S. regulations. As a creator approaches that threshold, they'll be prompted to fill out a W-8 or W-9 tax form, depending on their country.
+
+![A snippet of the tax form stage of the new withdraw modal.](./tax-compliance.png)
+
+Completing this form helps Modrinth stay compliant and will automatically unlock withdrawals again once submitted. For non-US users, these details are not automatically sent to the US government! They are for our own records in the case of an audit and we need to prove where we're sending money to.
+
+---
+
+Thank you to all the creators and players supporting Modrinth, we hope you enjoy this long deserved update! 💚