added syntex hightlighting

Author: ariflogs

app/(docs)/docs/[[...slug]]/page.tsx

@@ -6,7 +6,6 @@ import MDX from "@/components/MDX";
 import { H2 } from "@/packages/ui";
 
 function getDocParams(slug: string) {
-  console.log(slug);
   const doc = allDocs.find((doc) => doc.url === slug);
 
   if (!doc) {

app/global.css

@@ -12,3 +12,69 @@
   text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
     2px 2px 0 #000; /* Black outline */
 }
+
+/* Syntax Highlighting stuff */
+
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+code.hljs {
+  padding: 3px 5px
+}
+
+.hljs {
+  background: #222;
+  color: #aaa
+}
+.hljs-subst {
+  color: #aaa
+}
+.hljs-section {
+  color: #fff
+}
+.hljs-comment,
+.hljs-quote,
+.hljs-meta {
+  color: #444
+}
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-regexp {
+  color: #ffcc33
+}
+.hljs-number,
+.hljs-addition {
+  color: #00cc66
+}
+.hljs-built_in,
+.hljs-literal,
+.hljs-type,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-link {
+  color: #32aaee
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #6644aa
+}
+.hljs-title,
+.hljs-variable,
+.hljs-deletion,
+.hljs-template-tag {
+  color: #bb1166
+}
+.hljs-section,
+.hljs-doctag,
+.hljs-strong {
+  font-weight: bold
+}
+.hljs-emphasis {
+  font-style: italic
+}

components/ComponentShowcase.tsx

@@ -1,6 +1,9 @@
+// import { Code } from "bright";
 import { componentConfig } from "@/config";
+import dynamic from "next/dynamic";
 import { H5 } from "@/packages/ui";
-import React, { HTMLAttributes } from "react";
+import React, { HTMLAttributes, Suspense } from "react";
+const Code = dynamic(() => import("bright").then(mod => mod.Code));
 
 interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {
   name: keyof typeof componentConfig.registry;
@@ -19,10 +22,10 @@ export function ComponentShowcase({ name }: IComponentShowcase) {
 
       <div>
         <H5>Code</H5>
-        <div className="mt-2 border relative rounded p-6 bg-[#222222] text-zinc-200 overflow-auto">
-          <code>
-            <pre>{codeHtml}</pre>
-          </code>
+        <div className="relative rounded  overflow-auto">
+          <Suspense fallback={<div>Loading...</div>}>
+            <Code lang="html" theme="dracula-soft">{codeHtml}</Code>
+          </Suspense>
         </div>
       </div>
     </div>

components/MDX.tsx

@@ -1,6 +1,9 @@
 import { H1, H2, H3, H4, H5, H6 } from "@/packages/ui";
 import { useMDXComponent } from "next-contentlayer/hooks";
 import React, { HTMLAttributes } from "react";
+import { ComponentShowcase } from "./ComponentShowcase";
+import dynamic from "next/dynamic";
+const Code = dynamic(() => import("bright").then(mod => mod.Code));
 
 const components = {
   h1: H1,
@@ -11,6 +14,8 @@ const components = {
   h4: H4,
   h5: H5,
   h6: H6,
+  pre: Code,
+  ComponentShowcase
 };
 
 export default function MDX({ code }: { code: string }) {

components/index.ts

@@ -1,2 +1,2 @@
 export * from "./ComponentShowcase";
-export * from "./JoinNewsletter";
+export * from "./JoinNewsletter";

content/docs/components/accordion.mdx

@@ -4,6 +4,4 @@ description: This collapsible component let's your users read only the content t
 lastUpdated: 30 Sep, 2024
 ---
 
-import {ComponentShowcase} from "@/components"
-
-<ComponentShowcase name="accordion-style-default" />
+<ComponentShowcase name="accordion-style-default" />

content/docs/components/button.mdx

@@ -3,7 +3,8 @@ title: Default Button
 description: This bold button makes sure your users click on it and perform the actions you want! 🚀
 lastUpdated: 30 Sep, 2024
 ---
+"use client"
 
 import {ComponentShowcase} from "@/components"
 
-<ComponentShowcase name="button-style-default" />
+<ComponentShowcase name="button-style-default" />

content/docs/index.mdx

@@ -15,6 +15,7 @@ Installation form Google Fonts:
 ```
 
 Save the fonts in `global.css`:
+
 ```
 :root {
   --font-head: "Archivo Black", sans-serif;
@@ -25,6 +26,7 @@ Save the fonts in `global.css`:
 <br />
 
 ### 2. Add the theme to your tailwind.config.js file.
+
 ```
 import type { Config } from "tailwindcss";
 

package.json

@@ -9,14 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "bright": "^0.8.5",
     "contentlayer": "^0.3.4",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.445.0",
     "next": "14.2.7",
     "next-contentlayer": "^0.3.4",
     "react": "^18",
-    "react-dom": "^18",
-    "react-element-to-jsx-string": "^15.0.0"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@types/node": "^20",