initial docs

2025-04-12 14:34:53 +07:00
commit ea9a71e23c
138 changed files with 23045 additions and 0 deletions
--- a/contents/docs/getting-started/customize/index.mdx
+++ b/contents/docs/getting-started/customize/index.mdx
@@ -0,0 +1,94 @@
+---
+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)