feat: added utils in docs

Author: ariflogs

.github/workflows/deploy.yml

@@ -1,8 +1,9 @@
 name: "Deploy to VPS"
 
 on:
-  release:
-    types: [published]
+  push:
+    branches:
+      [main]
 
 jobs:
   build-and-deploy:

app/layout.tsx

@@ -7,18 +7,21 @@ const archivoBlack = Archivo_Black({
   subsets: ["latin"],
   weight: "400",
   variable: "--font-head",
+  display: "swap",
 });
 
 const shareTech = Share_Tech({
   subsets: ["latin"],
   weight: "400",
   variable: "--font-sans",
+  display: "swap",
 });
 
 const shareTechMono = Share_Tech_Mono({
   subsets: ["latin"],
   weight: "400",
   variable: "--font-mono",
+  display: "swap",
 });
 
 export const metadata: Metadata = {

components/MDX.tsx

@@ -29,7 +29,7 @@ const components = {
   }: React.HTMLAttributes<HTMLElement>) => (
     <code
       className={cn(
-        "relative rounded bg-[#282A36] py-1 px-2 text-primary-500 text-sm",
+        "relative rounded bg-[#282A36] p-1 text-primary-500 text-sm",
         className
       )}
       {...props}

config/navigation.ts

@@ -1,6 +1,7 @@
 import { INavigationConfig } from "@/types";
 
 const componentsRoute = "/docs/components";
+const utilsRoute = "/docs/utils";
 
 export const navConfig: INavigationConfig = {
   topNavItems: [
@@ -26,5 +27,9 @@ export const navConfig: INavigationConfig = {
         { title: "Typography", href: `${componentsRoute}/typography` },
       ],
     },
+    {
+      title: "Utilities",
+      children: [{ title: "cn", href: `${utilsRoute}/cn` }],
+    },
   ],
 };

content/docs/utils/cn.mdx

@@ -0,0 +1,24 @@
+---
+title: cn
+description: A utilily function that saves you from style conflicts.
+lastUpdated: 17 Oct, 2024
+---
+
+The `cn` utility function combines `clsx` and `tw-merge`.
+This enables you to construct className strings conditionally without having to worry about Tailwind CSS style conflicts.
+
+<br />
+<br />
+
+## Installation
+
+#### 1. Copy the code 👇 into your `lib/utils.ts` file:
+
+```ts
+import clsx from "clsx";
+import { ClassNameValue, twMerge } from "tailwind-merge";
+
+export function cn(...classes: ClassNameValue[]) {
+  return twMerge(clsx(classes));
+}
+```