custom: replace premium Fumadocs blog post and integrate premium badge display

content/blog/premium-fumadocs.mdx

@@ -1,67 +0,0 @@
----
-title: "Premium: What is Fumadocs"
-description: "Introducing Fumadocs, a docs framework that you can break."
-date: "2025-08-30"
-published: true
-premium: true
-categories: ["development", "nextjs"]
-author: "fox"
-image: "/images/blog/post-1.png"
----
-
-Fumadocs was created because I wanted a more customisable experience for building docs, to be a docs framework that is not opinionated, **a "framework" that you can break**.
-
-## Philosophy
-
-**Less Abstraction:** Fumadocs expects you to write code and cooperate with the rest of your software.
-While most frameworks are configured with a configuration file, they usually lack flexibility when you hope to tune its details.
-You can't control how they render the page nor the internal logic. Fumadocs shows you how the app works, instead of a single configuration file.
-
-**Next.js Fundamentals:** It gives you the utilities and a good-looking UI.
-You are still using features of Next.js App Router, like **Static Site Generation**. There is nothing new for Next.js developers, so you can use it with confidence.
-
-<PremiumContent>
-
-**Opinionated on UI:** The only thing Fumadocs UI (the default theme) offers is **User Interface**. The UI is opinionated for bringing better mobile responsiveness and user experience.
-Instead, we use a much more flexible approach inspired by Shadcn UI — [Fumadocs CLI](/docs/cli), so we can iterate our design quick, and welcome for more feedback about the UI.
-
-## Why Fumadocs
-
-Fumadocs is designed with flexibility in mind.
-
-You can use `fumadocs-core` as a headless UI library and bring your own styles.
-Fumadocs MDX is also a useful library to handle MDX content in Next.js. It also includes:
-
-- Many built-in components.
-- Typescript Twoslash, OpenAPI, and Math (KaTeX) integrations.
-- Fast and optimized by default, natively built on App Router.
-- Tight integration with Next.js, you can add it to an existing Next.js project easily.
-
-You can read [Comparisons](/docs/comparisons) if you're interested.
-
-### Documentation
-
-Fumadocs focuses on **authoring experience**, it provides a beautiful theme and many docs automation tools.
-
-It helps you to iterate your codebase faster while never leaving your docs behind.
-You can take this site as an example of docs site built with Fumadocs.
-
-### Blog sites
-
-Since Next.js is already a powerful framework, most features can be implemented with **just Next.js**.
-
-Fumadocs provides additional tooling for Next.js, including syntax highlighting, document search, and a default theme (Fumadocs UI).
-It helps you to avoid reinventing the wheels.
-
-## When to use Fumadocs
-
-For most of the web applications, vanilla React.js is no longer enough.
-Nowadays, we also wish to have a blog, a showcase page, a FAQ page, etc. With a
-fancy UI that's breathtaking, in these cases, Fumadocs can help you build the
-docs easier, with less boilerplate.
-
-Fumadocs is maintained by Fuma and many contributors, with care on the maintainability of codebase.
-While we don't aim to offer every functionality people wanted, we're more focused on making basic features perfect and well-maintained.
-You can also help Fumadocs to be more useful by contributing!
-
-</PremiumContent>

content/blog/premium.mdx

@@ -0,0 +1,56 @@
+---
+title: "Premium Blog Post"
+description: "This blog post is a test for premium content."
+date: "2025-08-30"
+published: true
+premium: true
+categories: ["development"]
+author: "fox"
+image: "/images/blog/post-7.png"
+---
+
+This blog post is a test for premium content.
+
+You can read this part of the blog post if you are not a premium user.
+
+But for the rest of the blog post, you need to be logged in as a premium user.
+
+You can click the "Sign In" button to sign in as a user with free plan.
+
+Then you can click the "Upgrade Now" button to upgrade to a premium plan.
+
+<Callout type="warn">
+  Don't worry, you don't actually pay any cents, because we are in the sandbox environment of Stripe.
+</Callout>
+
+You can use the test card number to pay for monthly or yearly PRO plan or LIFETIME plan.
+
+```
+4242 4242 4242 4242
+Exp: 12/34
+CVV: 567
+```
+
+After that, you can return to the blog post and you can read the rest of the blog post.
+
+For more details, please check out the documentation: [Blog](https://mksaas.com/docs/blog).
+
+Now the rest of the blog post is premium content.
+
+<PremiumContent>
+
+<Callout type="info">
+  This is the beginning of the premium content part.
+</Callout>
+
+This is the premium content part.
+
+You can read this paragraph only if you are a premium user.
+
+Please don't share this blog post with others.
+
+<Callout type="info">
+  This is the end of the premium content part.
+</Callout>
+
+</PremiumContent>

src/app/[locale]/(marketing)/blog/[...slug]/page.tsx

@@ -23,6 +23,7 @@ import Image from 'next/image';
 import { notFound } from 'next/navigation';
 
 import '@/styles/mdx.css';
+import { PremiumBadge } from '@/components/blog/premium-badge';
 import { InlineTOC } from 'fumadocs-ui/components/inline-toc';
 
 /**
@@ -131,7 +132,7 @@ export default async function BlogPostPage(props: BlogPostPageProps) {
               )}
             </div>
 
-            {/* blog post date */}
+            {/* blog post date and premium badge */}
             <div className="flex items-center justify-between gap-2">
               <div className="flex items-center gap-2">
                 <CalendarIcon className="size-4 text-muted-foreground" />
@@ -139,6 +140,8 @@ export default async function BlogPostPage(props: BlogPostPageProps) {
                   {publishDate}
                 </span>
               </div>
+
+              {premium && <PremiumBadge size="sm" />}
             </div>
 
             {/* blog post title */}