{/* Previous */}
{previous && (
diff --git a/src/components/mdx.tsx b/src/components/mdx.tsx
index d8771aa..da53109 100644
--- a/src/components/mdx.tsx
+++ b/src/components/mdx.tsx
@@ -1,12 +1,46 @@
-import { ReactElement, ReactNode } from "react";
+import { isValidElement, ReactElement, ReactNode } from "react";
import { MDXRemote } from "remote-mdx/rsc";
import { cn } from "@/lib/utils";
import remarkGfm from "remark-gfm";
+import {
+ Activity,
+ CircleAlert,
+ Lightbulb,
+ MessageSquareWarning,
+ OctagonAlert,
+ TriangleAlert,
+} from "lucide-react";
+import Link from "next/link";
+import { capitalizeWords } from "@/lib/string";
+
+const blockquoteStyles: { [key: string]: any } = {
+ NOTE: {
+ icon:
{children}
@@ -37,6 +71,8 @@ const components = {
{children}
),
+
+ // Text
a: ({
href,
children,
@@ -44,19 +80,57 @@ const components = {
href: string;
children: ReactNode;
}): ReactElement => (
-
{children}
-
+
),
p: ({ children }: { children: ReactNode }): ReactElement => (
- 
+ ),
+
+ // Lists
ul: ({ children }: { children: ReactNode }): ReactElement => (
- = 2 && "pt-7", className)}
+ className={cn(
+ "py-3 font-bold select-none",
+ size >= 2 && "pt-7",
+ className
+ )}
>
{children}
@@ -117,3 +198,16 @@ const slugify = (text: string): string =>
.replace(/[^\w\s-]/g, "")
.replace(/[\s_-]+/g, "-")
.trim();
+
+const extractBlockQuoteText = (node: ReactNode): string => {
+ if (typeof node === "string") {
+ return node;
+ }
+ if (Array.isArray(node)) {
+ return node.map(extractBlockQuoteText).join("");
+ }
+ if (isValidElement(node)) {
+ return extractBlockQuoteText(node.props.children);
+ }
+ return "";
+};
diff --git a/src/components/on-this-page.tsx b/src/components/on-this-page.tsx
index 5bd255f..c13f8c0 100644
--- a/src/components/on-this-page.tsx
+++ b/src/components/on-this-page.tsx
@@ -127,7 +127,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
{/* Footer */}
{children}
+{children}
), + + // Media + img: ({ src, alt }: { src: string; alt: string }): ReactElement => ( +- {children}
- {children}
{children}; + } + return ( +
++ ); + }, }; /** @@ -71,6 +145,8 @@ export const CustomMDX = (props: any): ReactElement => ( components={{ ...components, ...(props.components || {}), + Link, + Activity, }} options={{ mdxOptions: { @@ -83,6 +159,7 @@ export const CustomMDX = (props: any): ReactElement => ( /** * A heading component. * + * @param as the type of heading * @param className the class name of the heading * @param size the size of the heading * @param children the children within the heading @@ -104,7 +181,11 @@ const Heading = ({ return (+ {style.icon} + {capitalizeWords(match[1])} +
+{match[2]}
+
-
diff --git a/src/components/theme-switcher.tsx b/src/components/theme-switcher.tsx
index e32b9bf..03619c9 100644
--- a/src/components/theme-switcher.tsx
+++ b/src/components/theme-switcher.tsx
@@ -6,6 +6,8 @@ import { UseThemeProps } from "next-themes/dist/types";
import { Monitor, MoonStar, Sun } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
+import SimpleTooltip from "@/components/simple-tooltip";
+import { capitalizeWords } from "@/lib/string";
const themes = {
dark: