Refactorized the [slug].tsx & index.tsx --- all of them were related …

…to blog

components/Navbar.tsx

@@ -41,7 +41,7 @@ export default function Navbar({}: Props) {
           onClick={() => setIsOpen(true)}
         />
         <ul className="hidden space-x-8 md:block">
-          <Link href={"/docs/intro"} className="opacity-80 hover:opacity-100">
+          <Link href={"/docs"} className="opacity-80 hover:opacity-100">
             Docs
           </Link>
           <Link href={"/pricing"} className="opacity-80 hover:opacity-100">

components/blog-styles/MDXComponents.tsx

@@ -0,0 +1,10 @@
+import { Heading, Heading2, Text, List, BlockQuote, Anchor } from "./elements";
+
+export const MDXComponents = {
+  h1: (props: any) => <Heading {...props}></Heading>,
+  h2: (props: any) => <Heading2 {...props}></Heading2>,
+  p: (props: any) => <Text {...props}></Text>,
+  ul: (props: any) => <List {...props}></List>,
+  blockquote: (props: any) => <BlockQuote {...props}></BlockQuote>,
+  a: (props: any) => <Anchor {...props}></Anchor>,
+};

components/blog-styles/Navbar.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import Link from "next/link";
+
+import { NavProps } from "@/types/Blogs";
+
+export default function Navbar({ links, technology, slug }: NavProps) {
+  return (
+    <nav
+      className={`fixed bg-white md:bg-transparent md:sticky top-0 md:top-24 left-0 h-screen md:h-auto z-50  duration-200`}
+    >
+      <div className="w-64 px-4 mt-4">
+        <h1 className="font-medium">{technology}</h1>
+        {links.map((d) => (
+          <Link
+            key={d.frontmatter.title}
+            href={`${
+              slug
+                ? d.slug.replace(".mdx", "")
+                : `${technology.toLowerCase()}/${d.slug.replace(".mdx", "")}`
+            }`}
+          >
+            <p
+              className={`px-4 py-1 mt-2 border-l-2 hover:border-primary capitalize ${
+                slug == d.slug.replace(".mdx", "") &&
+                "text-primary border-primary"
+              }`}
+            >
+              {d.slug.replace(".mdx", "").replaceAll("-", " ")}
+            </p>
+          </Link>
+        ))}
+      </div>
+    </nav>
+  );
+}

components/blog-styles/elements/index.tsx

@@ -0,0 +1,7 @@
+export { default as Heading } from "./Heading";
+export { default as Heading2 } from "./Heading2";
+export { default as BlockQuote } from "./BlockQuote";
+export { default as Image } from "./Image";
+export { default as List } from "./List";
+export { default as Text } from "./Text";
+export { default as Anchor } from "./Anchor";

pages/docs/css/[slug].tsx

@@ -1,10 +1,9 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { useRouter } from "next/router";
 import Head from "next/head";
 import fs from "fs";
 import path from "path";
 import matter from "gray-matter";
-import Link from "next/link";
 import { serialize } from "next-mdx-remote/serialize";
 import { MDXRemote } from "next-mdx-remote";
 import rehypeHighlight from "rehype-highlight";
@@ -15,12 +14,8 @@ import Container from "@/components/Container";
 import { cssPathFiles, cssFileNames } from "@/utils/mdxFies";
 import { AiOutlineMenu } from "react-icons/ai";
 
-import Heading from "@/components/blog-styles/Heading";
-import Heading2 from "@/components/blog-styles/Heading2";
-import Text from "@/components/blog-styles/Text";
-import List from "@/components/blog-styles/List";
-import BlockQuote from "@/components/blog-styles/BlockQuote";
-import Anchor from "@/components/blog-styles/Anchor";
+import Navbar from "@/components/blog-styles/Navbar";
+import { MDXComponents } from "@/components/blog-styles/MDXComponents";
 
 type Props = {
   data: {
@@ -35,15 +30,6 @@ type Props = {
   mdxSource: any;
 };
 
-const components = {
-  h1: (props: any) => <Heading {...props}></Heading>,
-  h2: (props: any) => <Heading2 {...props}></Heading2>,
-  p: (props: any) => <Text {...props}></Text>,
-  ul: (props: any) => <List {...props}></List>,
-  blockquote: (props: any) => <BlockQuote {...props}></BlockQuote>,
-  a: (props: any) => <Anchor {...props}></Anchor>,
-};
-
 export default function Slug({ data, mdxSource }: Props) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -63,25 +49,7 @@ export default function Slug({ data, mdxSource }: Props) {
         <link rel="icon" href="/favicon.svg" />
       </Head>
       <Container className="flex items-start gap-8 px-4 mt-24 md:px-8">
-        <nav
-          className={`fixed bg-white md:bg-transparent md:sticky top-0 md:top-24 left-0 h-screen md:h-auto z-50  duration-200`}
-        >
-          <div className="w-64 px-4 mt-4">
-            <h1 className="font-medium">CSS</h1>
-            {sortingArray.map((d) => (
-              <Link
-                key={d.frontmatter.title}
-                href={`${d.slug.replace(".mdx", "")}`}
-              >
-                <p
-                  className={`px-4 py-1 mt-2 border-l-2 hover:border-primary capitalize`}
-                >
-                  {d.slug.replace(".mdx", "").replaceAll("-", " ")}
-                </p>
-              </Link>
-            ))}
-          </div>
-        </nav>
+        <Navbar links={sortingArray} slug={slug} technology="CSS" />
 
         <div
           className={`md:hidden bg-black text-white p-3 rounded-full fixed bottom-4 left-4 ${
@@ -93,7 +61,7 @@ export default function Slug({ data, mdxSource }: Props) {
         </div>
 
         <div className="w-full pb-24" id="content">
-          <MDXRemote {...mdxSource} components={components}></MDXRemote>
+          <MDXRemote {...mdxSource} components={MDXComponents}></MDXRemote>
         </div>
       </Container>
     </>

pages/docs/css/index.tsx

@@ -4,21 +4,10 @@ import fs from "fs";
 import path from "path";
 import matter from "gray-matter";
 import { Container } from "@/components";
-import Link from "next/link";
+import Navbar from "@/components/blog-styles/Navbar";
+import { BlogProps } from "@/types/Blogs";
 
-type Props = {
-  blogs: {
-    frontmatter: {
-      title: string;
-      category: string[];
-      author: string;
-      order: number;
-    };
-    slug: string;
-  }[];
-};
-
-export default function Index({ blogs }: Props) {
+export default function Index({ blogs }: BlogProps) {
   const sortingArray = blogs.sort((a, b) => {
     return a.frontmatter.order - b.frontmatter.order;
   });
@@ -27,25 +16,7 @@ export default function Index({ blogs }: Props) {
 
   return (
     <Container className="mt-24">
-      <nav
-        className={`fixed bg-white md:bg-transparent md:sticky top-0 md:top-24 left-0 h-screen md:h-auto z-50  duration-200`}
-      >
-        <div className="w-64 px-4 mt-4">
-          <h1 className="font-medium">CSS</h1>
-          {sortingArray.map((d) => (
-            <Link
-              key={d.frontmatter.title}
-              href={`css/${d.slug.replace(".mdx", "")}`}
-            >
-              <p
-                className={`px-4 py-1 mt-2 border-l-2 hover:border-primary capitalize`}
-              >
-                {d.slug.replace(".mdx", "").replaceAll("-", " ")}
-              </p>
-            </Link>
-          ))}
-        </div>
-      </nav>
+      <Navbar links={sortingArray} technology="CSS" />
     </Container>
   );
 }

pages/docs/index.tsx

@@ -1,11 +1,16 @@
-import React, { useEffect } from "react";
-import { useRouter } from "next/router";
+import React from "react";
+import Link from "next/link";
+import { Container } from "@/components";
 
 type Props = {};
 
 export default function Index() {
-  const router = useRouter();
-  useEffect(() => {
-    router.pathname == "/docs" && router.push("/docs/intro");
-  }, []);
+  return (
+    <Container className="mt-24">
+      <Link href={"docs/html"}>HTML</Link>
+      <Link href={"docs/css"}>CSS</Link>
+      <Link href={"docs/js"}>JS</Link>
+      <Link href={"docs/open-source"}>Open Source</Link>
+    </Container>
+  );
 }

types/Blogs.ts

@@ -0,0 +1,25 @@
+export type BlogProps = {
+  blogs: {
+    frontmatter: {
+      title: string;
+      category: string[];
+      author: string;
+      order: number;
+    };
+    slug: string;
+  }[];
+};
+
+export type NavProps = {
+  links: {
+    frontmatter: {
+      title: string;
+      category: string[];
+      author: string;
+      order: number;
+    };
+    slug: string;
+  }[];
+  technology: string;
+  slug?: string | string[] | undefined;
+};

utils/mdxFies.ts

@@ -1,7 +1,26 @@
 import fs from "fs";
 import path from "path";
 
+// // HTML
+// export const htmlPathFiles = path.join(process.cwd(), "blog/html");
+// export const htmlFileNames = fs.readdirSync(htmlPathFiles, {
+//   withFileTypes: false,
+// });
+
+// CSS
 export const cssPathFiles = path.join(process.cwd(), "blog/css");
 export const cssFileNames = fs.readdirSync(cssPathFiles, {
   withFileTypes: false,
 });
+
+// // JS
+// export const jsPathFiles = path.join(process.cwd(), "blog/js");
+// export const jsFileNames = fs.readdirSync(jsPathFiles, {
+//   withFileTypes: false,
+// });
+
+// // open-source
+// export const openSourcePathFiles = path.join(process.cwd(), "blog/openSource");
+// export const openSourceFileNames = fs.readdirSync(openSourcePathFiles, {
+//   withFileTypes: false,
+// });