➕ADD, FIX: mdx, remove ghost cms, dark mode

Author: manuarora700

components/ConsCard.js

@@ -0,0 +1,28 @@
+export default function ConsCard({ title, cons }) {
+  return (
+    <div className="border border-red-200 dark:border-red-900 bg-red-50 dark:bg-red-900 rounded p-6 my-6 w-full">
+      <span>{`You might not use ${title} if...`}</span>
+      <div className="mt-4">
+        {cons.map((con) => (
+          <div key={con} className="flex font-medium items-baseline mb-2">
+            <div className="h-4 w-4 mr-2">
+              <svg className="h-4 w-4 text-red-500" viewBox="0 0 24 24">
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                  <path d="M22 4L12 14.01l-3-3" />
+                </g>
+              </svg>
+            </div>
+            <span>{con}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

components/Contact.js

@@ -61,7 +61,7 @@ export default function Contact() {
       </p>
       <a
         href="https://wa.me/919587738861?text=I want to work on a project with you"
-        className="mt-4 px-4 text-center w-full font-bold h-8 bg-green-400 dark:bg-gray-700 text-gray-900 py-1 dark:text-gray-100 rounded"
+        className="mt-4 px-4 text-center w-full font-bold h-8 bg-green-400 dark:bg-green-400 text-gray-900 py-1 dark:text-gray-900 rounded"
         type="submit"
       >
         Chat on WhatsApp

components/Container.js

@@ -2,11 +2,13 @@ import Head from "next/head";
 import { useRouter } from "next/router";
 import { useState, useEffect } from "react";
 import NextLink from "next/link";
+import { useTheme } from "next-themes";
 
 import Footer from "@/components/Footer";
 
 export default function Container(props) {
   const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
 
   // After mounting, we have access to the theme
   useEffect(() => setMounted(true), []);
@@ -54,7 +56,7 @@ export default function Container(props) {
           aria-label="Toggle Dark Mode"
           type="button"
           className="bg-gray-200 dark:bg-gray-800 rounded p-3 h-10 w-10"
-          //   onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
         >
           {mounted && (
             <svg
@@ -64,21 +66,21 @@ export default function Container(props) {
               stroke="currentColor"
               className="h-4 w-4 text-gray-800 dark:text-gray-200"
             >
-              {/* {theme === "dark" ? (
+              {theme === "dark" ? (
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={2}
                   d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
                 />
-              ) : ( */}
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
-              />
-              {/* )} */}
+              ) : (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+                />
+              )}
             </svg>
           )}
         </button>
@@ -109,7 +111,7 @@ export default function Container(props) {
       </nav>
       <main
         id="skip"
-        className="flex flex-col justify-center bg-white dark:bg-black px-8"
+        className="flex flex-col justify-center bg-white dark:bg-black px-8 text-gray-900 dark:text-gray-100"
       >
         {children}
         <Footer />

components/MDXComponents.js

@@ -0,0 +1,37 @@
+import Link from "next/link";
+import Image from "next/image";
+import Tweet from "react-tweet-embed";
+
+import ProsCard from "@/components/ProsCard";
+import ConsCard from "@/components/ConsCard";
+// import Gumroad from "@/components/metrics/Gumroad";
+// import Unsplash from "@/components/metrics/Unsplash";
+// import Analytics from "@/components/metrics/Analytics";
+// import YouTube from "@/components/metrics/Youtube";
+import Step from "@/components/Step";
+
+const CustomLink = (props) => {
+  const href = props.href;
+  const isInternalLink = href && (href.startsWith("/") || href.startsWith("#"));
+
+  if (isInternalLink) {
+    return (
+      <Link href={href}>
+        <a {...props} />
+      </Link>
+    );
+  }
+
+  return <a target="_blank" rel="noopener noreferrer" {...props} />;
+};
+
+const MDXComponents = {
+  Image,
+  a: CustomLink,
+  ConsCard,
+  ProsCard,
+  Step,
+  Tweet,
+};
+
+export default MDXComponents;

components/ProjectCard.js

@@ -244,7 +244,7 @@ export default function ProjectCard({ title, description, href, icon, tags }) {
                 {tags?.map((tag, idx) => (
                   <p
                     key={idx}
-                    className={`leading-5 text-gray-700 dark:text-gray-300 rounded-md text-xs italic bg-gray-50  `}
+                    className={`leading-5 dark:border text-gray-700 dark:text-gray-300 dark:bg-transparent rounded-md text-xs italic bg-gray-50  `}
                   >
                     {tag}
                   </p>

components/ProsCard.js

@@ -0,0 +1,28 @@
+export default function ProsCard({ title, pros }) {
+  return (
+    <div className="border border-green-200 dark:border-green-900 bg-green-50 dark:bg-green-900 rounded p-6 my-4 w-full">
+      <span>{`You might use ${title} if...`}</span>
+      <div className="mt-4">
+        {pros.map((pro) => (
+          <div key={pro} className="flex font-medium items-baseline mb-2">
+            <div className="h-4 w-4 mr-2">
+              <svg className="h-4 w-4 text-green-500" viewBox="0 0 24 24">
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                  <path d="M22 4L12 14.01l-3-3" />
+                </g>
+              </svg>
+            </div>
+            <span>{pro}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

components/Step.js

@@ -0,0 +1,10 @@
+export default function Step({ number, title }) {
+  return (
+    <div className="step flex items-center py-4">
+      <div className="flex items-center justify-center border border-gray-200 font-bold dark:border-gray-900 rounded-full h-8 w-8 text-blue-500">
+        {number}
+      </div>
+      <h3 className="ml-3 tracking-tight font-bold">{title}</h3>
+    </div>
+  );
+}