initial commit

components/mdx/H2.tsx

@@ -0,0 +1,9 @@
+import { fontFzxbs } from "@/styles/font";
+
+export const H2 = (props: JSX.IntrinsicElements["h2"]) => {
+  return (
+    <h2 className={`${fontFzxbs.className} mt-3 mb-1 scroll-mt-20`} id={props.id}>
+      {props.children}
+    </h2>
+  );
+};

components/mdx/ImageWrapper.tsx

@@ -0,0 +1,12 @@
+// Unlike other mdx elements, it does not receive the converted img tag,
+// but all the attributes of the img tag.
+const ImageWrapper = (props: JSX.IntrinsicElements["img"]) => {
+  return (
+    <div className="flex flex-col my-5">
+      <img alt={props.alt} className="mx-auto my-0" src={props.src} />
+      <div className="mx-auto my-1 text-sm text-gray-500 dark:text-gray-300">{props.alt}</div>
+    </div>
+  );
+};
+
+export default ImageWrapper;

components/mdx/PreWrapper.tsx

@@ -0,0 +1,68 @@
+import { useRef, useState } from "react";
+
+const PreWrapper = ({ children }: { children: JSX.Element }) => {
+  const textInput = useRef(null);
+  const [hovered, setHovered] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const onEnter = () => {
+    setHovered(true);
+  };
+  const onExit = () => {
+    setHovered(false);
+    setCopied(false);
+  };
+  const onCopy = () => {
+    setCopied(true);
+    //@ts-ignore
+    textInput.current && navigator.clipboard.writeText(textInput.current.textContent);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+
+  return (
+    <div ref={textInput} onMouseEnter={onEnter} onMouseLeave={onExit} className="relative">
+      {hovered && (
+        <button
+          aria-label="Copy code"
+          className={`absolute right-2 top-2 h-8 w-8 rounded border-2 bg-gray-700 p-1 dark:bg-gray-800 ${
+            copied ? "border-green-400 focus:border-green-400 focus:outline-none" : "border-gray-300"
+          }`}
+          onClick={onCopy}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            fill="none"
+            className={copied ? "text-green-400" : "text-gray-300"}
+          >
+            {copied ? (
+              <>
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+                />
+              </>
+            ) : (
+              <>
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                />
+              </>
+            )}
+          </svg>
+        </button>
+      )}
+      <pre>{children}</pre>
+    </div>
+  );
+};
+
+export default PreWrapper;

components/mdx/TableWrapper.tsx

@@ -0,0 +1,9 @@
+const TableWrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="w-full overflow-x-auto">
+      <table>{children}</table>
+    </div>
+  );
+};
+
+export default TableWrapper;

components/mdx/index.ts

@@ -0,0 +1,11 @@
+import { H2 } from "./H2";
+import ImageWrapper from "./ImageWrapper";
+import PreWrapper from "./PreWrapper";
+import TableWrapper from "./TableWrapper";
+
+export const MDXComponentsSet = {
+  pre: PreWrapper,
+  table: TableWrapper,
+  img: ImageWrapper,
+  h2: H2,
+};