From 4faa89c0ee3d051400c77aedab97a067a774e460 Mon Sep 17 00:00:00 2001 From: javayhu Date: Sun, 31 Aug 2025 14:55:19 +0800 Subject: [PATCH] custom: replace premium Fumadocs blog post and integrate premium badge display --- content/blog/premium-fumadocs.mdx | 67 ------------------- content/blog/premium.mdx | 56 ++++++++++++++++ .../(marketing)/blog/[...slug]/page.tsx | 5 +- 3 files changed, 60 insertions(+), 68 deletions(-) delete mode 100644 content/blog/premium-fumadocs.mdx create mode 100644 content/blog/premium.mdx diff --git a/content/blog/premium-fumadocs.mdx b/content/blog/premium-fumadocs.mdx deleted file mode 100644 index 45c8d3a..0000000 --- a/content/blog/premium-fumadocs.mdx +++ /dev/null @@ -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. - - - -**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! - - diff --git a/content/blog/premium.mdx b/content/blog/premium.mdx new file mode 100644 index 0000000..53f887f --- /dev/null +++ b/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. + + + Don't worry, you don't actually pay any cents, because we are in the sandbox environment of Stripe. + + +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. + + + + + This is the beginning of the premium content part. + + +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. + + + This is the end of the premium content part. + + + diff --git a/src/app/[locale]/(marketing)/blog/[...slug]/page.tsx b/src/app/[locale]/(marketing)/blog/[...slug]/page.tsx index 0a544e2..62fbbf0 100644 --- a/src/app/[locale]/(marketing)/blog/[...slug]/page.tsx +++ b/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) { )} - {/* blog post date */} + {/* blog post date and premium badge */}
@@ -139,6 +140,8 @@ export default async function BlogPostPage(props: BlogPostPageProps) { {publishDate}
+ + {premium && }
{/* blog post title */}