feat: fixed mermaid configuration for docs

components/MDX.tsx

@@ -93,10 +93,8 @@ function MermaidDiagram({ graph }: MermaidDiagramProps) {
     }
 
     try {
-      const svgElement = document.createElement('div');
-
-      mermaid.mermaidAPI.render(uuid(), graph, svgElement).then(() => {
-        setSvg(svgElement.innerHTML);
+      mermaid.mermaidAPI.render(uuid(), graph, (svgGraph) => {
+        setSvg(svgGraph);
       });
     } catch (e) {
       setSvg(null);
@@ -258,7 +256,7 @@ export function getMDXComponents() {
         className={`${props.className || ''} border-b border-gray-200 px-6 py-4 text-sm leading-5 tracking-tight text-gray-700`}
       />
     ),
-    pre: (props: React.HTMLProps<HTMLPreElement>) => CodeComponent(props.children as CodeComponentProps),
+    pre: (props: React.HTMLProps<HTMLPreElement>) => CodeComponent((props.children as React.ReactElement)?.props),
     code: (props: React.HTMLProps<HTMLElement>) => (
       <code
         {...props}

components/docs/DocsCards.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import type { Bucket } from '../data/buckets';
 import { buckets } from '../data/buckets';
 import Card from './Card';
 
@@ -9,7 +10,7 @@ import Card from './Card';
 export default function DocsCards() {
   return (
     <div className='grid grid-cols-1 gap-4 sm:grid-cols-2' data-testid='Docs-main-div'>
-      {buckets.map(({ title, description, link, className, icon }) => (
+      {buckets.map(({ title, description, link, className, icon }: Bucket) => (
         <Card key={title} title={title} description={description} link={link} className={className} Icon={icon} />
       ))}
     </div>

components/helpers/applyFilter.ts

@@ -9,7 +9,6 @@ interface FilterCriteria {
 
 interface Filter {
   [key: string]: string;
-  value: string;
 }
 
 interface FilterOption {

components/illustrations/Empty.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+interface EmptyProps {
+  className?: string;
+}
+
+/**
+ * @description The Empty component is an illustration for when there is no data to display.
+ *
+ * @param props.className Additional CSS classes for styling.
+ */
+export default function Empty({ className }: EmptyProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      version='1.1'
+      width='150'
+      height='150'
+      x='0'
+      y='0'
+      viewBox='0 0 512.00032 512'
+      xmlSpace='preserve'
+      className={className}
+      style={{
+        display: 'initial'
+      }}
+    >
+      <g>
+        <path
+          xmlns='http://www.w3.org/2000/svg'
+          d='m440.929688 375.699219-184.929688 101.546875-184.929688-101.546875v-203.089844l184.929688-101.546875 184.929688 101.546875zm0 0'
+          fill='#b3dfff'
+          className=''
+        />
+        <path
+          xmlns='http://www.w3.org/2000/svg'
+          d='m71.070312 172.609375v.003906l184.929688 101.546875 184.929688-101.546875v-.003906l-184.929688-101.546875zm0 0'
+          fill='#ffffff'
+          className=''
+        />
+        <path
+          xmlns='http://www.w3.org/2000/svg'
+          d='m71.070312 172.671875v203.027344l184.929688 101.546875.109375-.058594v-203.03125l-184.929687-101.546875zm0 0'
+          fill='#b3dfff'
+          className=''
+        />
+        <g xmlns='http://www.w3.org/2000/svg' fill='#feda9b'>
+          <path
+            d='m440.929688 172.613281 61.070312 61.066407-184.929688 101.546874-61.070312-61.070312zm0 0'
+            fill='#63b3ed'
+            className=''
+          />
+          <path
+            d='m71.070312 172.613281-61.070312 61.066407 184.929688 101.546874 61.070312-61.070312zm0 0'
+            fill='#63b3ed'
+            className=''
+          />
+          <path
+            d='m440.929688 172.613281 61.070312-61.066406-184.929688-101.546875-61.070312 61.070312zm0 0'
+            fill='#63b3ed'
+            className=''
+          />
+          <path
+            d='m71.070312 172.613281-61.070312-61.066406 184.929688-101.546875 61.070312 61.070312zm0 0'
+            fill='#63b3ed'
+            className=''
+          />
+        </g>
+        <path
+          xmlns='http://www.w3.org/2000/svg'
+          d='m455.074219 172.613281 53.996093-53.996093c2.226563-2.222657 3.273438-5.367188 2.828126-8.480469-.441407-3.113281-2.328126-5.839844-5.085938-7.355469l-64.914062-35.644531c-4.839844-2.65625-10.917969-.886719-13.578126 3.953125-2.65625 4.84375-.890624 10.921875 3.953126 13.578125l53.234374 29.230469-46.339843 46.335937-166.667969-91.519531 46.335938-46.335938 46.839843 25.722656c4.839844 2.65625 10.921875.890626 13.578125-3.953124 2.660156-4.839844.890625-10.921876-3.953125-13.578126l-53.417969-29.335937c-3.898437-2.140625-8.742187-1.449219-11.882812 1.695313l-54 54-54-54c-3.144531-3.144532-7.988281-3.832032-11.882812-1.695313l-184.929688 101.546875c-2.757812 1.515625-4.644531 4.238281-5.085938 7.355469-.445312 3.113281.601563 6.257812 2.828126 8.480469l53.996093 53.996093-53.996093 53.992188c-2.226563 2.226562-3.273438 5.367187-2.828126 8.484375.441407 3.113281 2.328126 5.839844 5.085938 7.351562l55.882812 30.6875v102.570313c0 3.652343 1.988282 7.011719 5.1875 8.769531l184.929688 101.542969c1.5.824219 3.15625 1.234375 4.8125 1.234375s3.3125-.410156 4.8125-1.234375l184.929688-101.542969c3.199218-1.757812 5.1875-5.117188 5.1875-8.769531v-102.570313l55.882812-30.683594c2.757812-1.515624 4.644531-4.242187 5.085938-7.355468.445312-3.113282-.601563-6.257813-2.828126-8.480469zm-199.074219 90.132813-164.152344-90.136719 164.152344-90.140625 164.152344 90.140625zm-62.832031-240.367188 46.332031 46.335938-166.667969 91.519531-46.335937-46.335937zm-120.328125 162.609375 166.667968 91.519531-46.339843 46.339844-166.671875-91.519531zm358.089844 184.796875-164.929688 90.5625v-102.222656c0-5.523438-4.476562-10-10-10s-10 4.476562-10 10v102.222656l-164.929688-90.5625v-85.671875l109.046876 59.878907c1.511718.828124 3.167968 1.234374 4.808593 1.234374 2.589844 0 5.152344-1.007812 7.074219-2.929687l54-54 54 54c1.921875 1.925781 4.484375 2.929687 7.074219 2.929687 1.640625 0 3.296875-.40625 4.808593-1.234374l109.046876-59.878907zm-112.09375-46.9375-46.339844-46.34375 166.667968-91.515625 46.34375 46.335938zm0 0'
+          fill='#323232'
+          className=''
+        />
+        <path
+          xmlns='http://www.w3.org/2000/svg'
+          d='m404.800781 68.175781c2.628907 0 5.199219-1.070312 7.070313-2.933593 1.859375-1.859376 2.929687-4.4375 2.929687-7.066407 0-2.632812-1.070312-5.210937-2.929687-7.070312-1.859375-1.863281-4.441406-2.929688-7.070313-2.929688-2.640625 0-5.210937 1.066407-7.070312 2.929688-1.871094 1.859375-2.929688 4.4375-2.929688 7.070312 0 2.628907 1.058594 5.207031 2.929688 7.066407 1.859375 1.863281 4.441406 2.933593 7.070312 2.933593zm0 0'
+          fill='#323232'
+          className=''
+        />
+        <path
+          xmlns='http://www.w3.org/2000/svg'
+          d='m256 314.925781c-2.628906 0-5.210938 1.066407-7.070312 2.929688-1.859376 1.867187-2.929688 4.4375-2.929688 7.070312 0 2.636719 1.070312 5.207031 2.929688 7.078125 1.859374 1.859375 4.441406 2.921875 7.070312 2.921875s5.210938-1.0625 7.070312-2.921875c1.859376-1.871094 2.929688-4.441406 2.929688-7.078125 0-2.632812-1.070312-5.203125-2.929688-7.070312-1.859374-1.863281-4.441406-2.929688-7.070312-2.929688zm0 0'
+          fill='#323232'
+        />
+      </g>
+    </svg>
+  );
+}

components/navigation/Filter.tsx

@@ -1,20 +1,19 @@
-import type { NextRouter } from 'next/router';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
 import Select from '../form/Select';
 import { applyFilterList, onFilterApply } from '../helpers/applyFilter';
 
-export interface Option {
-  value: string;
-  text: string;
+interface Check {
+  name: string;
+  [key: string]: any;
 }
 
-export interface FilterProps {
+interface FilterProps {
   data: any[];
   onFilter: (data: any[]) => void;
-  checks: { name: string; options?: Option[] }[];
-  className: string;
+  checks: Check[];
+  className?: string;
 }
 
 /**
@@ -26,68 +25,59 @@ export interface FilterProps {
  * @param {string} [props.className] - Additional CSS classes for styling.
  */
 export default function Filter({ data, onFilter, checks, className }: FilterProps) {
-  const router: NextRouter = useRouter();
-  const [filters, setFilters] = useState<{ [key: string]: Option[] }>({});
-  const [query, setQuery] = useState<{ [key: string]: string }>({});
+  const route = useRouter();
+  const [filters, setFilters] = useState<Record<string, any>>({});
+  const [routeQuery, setQuery] = useState<Record<string, any>>({});
 
-  // Set initial query and filter options when router changes
   useEffect(() => {
-    setQuery(router.query as { [key: string]: string });
+    setQuery(route.query);
     applyFilterList(checks, data, setFilters);
-  }, [router]);
+  }, [route]);
 
-  // Apply filter when query or data changes
   useEffect(() => {
-    const filterWithValue = { value: JSON.stringify(query), ...query };
+    onFilterApply(data, onFilter, routeQuery);
+  }, [routeQuery]);
 
-    onFilterApply(data, onFilter, filterWithValue);
-  }, [query, data, onFilter]);
+  return checks.map((check) => {
+    let selected = '';
 
-  return (
-    <>
-      {checks.map((check) => {
-        let selected = '';
+    if (Object.keys(routeQuery).length) {
+      if (routeQuery[check.name]) {
+        selected = `${routeQuery[check.name]}`;
+      }
+    }
+    const selectOptions = [
+      {
+        value: '',
+        text: `Filter by ${check.name}...`
+      },
+      ...(filters[check.name] || [])
+    ];
 
-        if (Object.keys(query).length) {
-          if (query[check.name]) {
-            selected = `${query[check.name]}`;
-          }
-        }
-
-        const selectOptions: Option[] = [
-          {
-            value: '',
-            text: `Filter by ${check.name}...`
-          },
-          ...(filters[check.name] || [])
-        ];
-
-        return (
-          <Select
-            key={check.name}
-            options={selectOptions}
-            onChange={(e) => {
-              const { query: currentQuery } = router;
-              const newQuery = {
-                ...currentQuery,
-                [check.name]: e
-              };
+    return (
+      <Select
+        key={check.name}
+        options={selectOptions}
+        onChange={(e) => {
+          const { query } = route;
+          const newQuery = {
+            ...query
+          };
 
-              if (!e) {
-                delete newQuery[check.name];
-              }
-
-              const queryParams = new URLSearchParams(newQuery as { [key: string]: string }).toString();
+          if (e) {
+            newQuery[check.name] = e;
+          }
+          if (newQuery) {
+            const queryParams = new URLSearchParams(newQuery as { [key: string]: string }).toString();
 
-              router.push(`${router.pathname}?${queryParams}`, undefined, {
-                shallow: true
-              });
-            }}
-            selected={selected}
-            className={`${className} md:mr-4`}
-          />
-        );
-      })}
-    </>
-  );
+            route.push(`${route.pathname}?${queryParams}`, undefined, {
+              shallow: true
+            });
+          }
+        }}
+        selected={selected}
+        className={`${className} md:mr-4`}
+      />
+    );
+  });
 }

context/BlogContext.tsx

@@ -4,5 +4,5 @@ import type { IBlog } from '@/types/post';
 
 export default createContext<{ post?: IBlog[number]; navItems?: IBlog }>({
   post: undefined,
-  navItems: undefined
+  navItems: []
 });

next.config.mjs

@@ -10,30 +10,16 @@ import withMDX from '@next/mdx';
  * @type {import('next').NextConfig}
  */
 const nextConfig = {
-  pageExtensions: ['tsx', 'ts', 'md'],
+  pageExtensions: ['tsx', 'ts', 'md', 'mdx'],
   eslint: {
     ignoreDuringBuilds: true
   },
   output: 'export',
-  webpack(config, { isServer, defaultLoaders }) {
+  webpack(config, { isServer }) {
     if (!isServer) {
       config.resolve.fallback.fs = false;
     }
 
-    // This is the new part
-    config.module.rules.push({
-      test: /\.md$/,
-      use: [
-        defaultLoaders.babel,
-        {
-          loader: '@mdx-js/loader',
-          options: {
-            remarkPlugins: [frontmatter, gemoji, headingId, slug, images, a11yEmoji]
-          }
-        }
-      ]
-    });
-
     return config;
   }
 };
@@ -46,7 +32,4 @@ const mdxConfig = withMDX({
   }
 });
 
-export default {
-  ...mdxConfig,
-  ...nextConfig
-};
+export default mdxConfig(nextConfig);