95 lines
2.3 KiB
Plaintext
95 lines
2.3 KiB
Plaintext
---
|
||
title: Customize
|
||
description: This guide provides instructions on customizing our application.
|
||
date: 29-11-2024
|
||
---
|
||
|
||
## 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:
|
||
|
||
```ts: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`:
|
||
|
||
```tsx: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`:
|
||
|
||
```tsx: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`:
|
||
|
||
```ts:tailwind.config.ts
|
||
{
|
||
// ...
|
||
extend: {
|
||
fontFamily: {
|
||
regular: ["var(--font-regular)"],
|
||
},
|
||
}
|
||
}
|
||
```
|
||
|
||
For theme and colors, refer to the [Theme section](/docs/getting-started/themes)
|