Customize

This guide provides instructions on customizing our application.

Markdown Options

To customize Markdown parsing, navigate to @lib/markdown.ts and locate the parseMdx function. You can add your desired plugins in the mdxOptions. Here’s an example:

lib/markdown.ts
async function parseMdx<Frontmatter>(rawMdx: string) {
    return await compileMDX<Frontmatter>({
        source: rawMdx,
        options: {
            parseFrontmatter: true,
            mdxOptions: {
                // Add your plugins here
                rehypePlugins: [Shiki],
                remarkPlugins: [remarkGfm],
            },
        },
        components,
    });
}

Fonts

Currently, this project uses the Geist font. If you want to use other fonts, you can change the configuration in the main layout as shown below:

Google Fonts

To use a Google font, import your desired font from next/font/google, initialize it with options, and apply the variable to the body:

app/layout.tsx
import { Space_Grotesk } from "next/font/google";

const fontSans = Space_Grotesk({
    display: "swap",
    variable: "--font-regular",
    weight: "400",
    subsets: ["latin"],
});

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body className={`${fontSans.variable} font-regular`}>
                {children}
            </body>
        </html>
    );
}

Local Fonts

To use a local font, you need to use the local font loader from Next.js. Pass the options and apply them to the body:

app/layout.tsx
import localFont from "next/font/local";

const geistSans = localFont({
    src: "./fonts/GeistVF.woff",
    variable: "--font-regular",
    weight: "100 900",
});

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body className={`${geistSans.variable} font-regular`}>
                {children}
            </body>
        </html>
    );
}

For both options, ensure that you add the variable to tailwind.config.ts:

tailwind.config.ts
{
    // ...
    extend: {
        fontFamily: {
            regular: ["var(--font-regular)"],
        },
    }
}

For theme and colors, refer to the Theme section