zootopi.github.io/mdx-components.tsx at main · ZootoPi/zootopi.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import type { MDXComponents } from "mdx/types";
import Image, { type ImageProps } from "next/image";
import { cn } from "@/lib/utils";

const MyImage = (props: ImageProps) => {
  const src = props.src;
  if (!src) {
    return (
      <Image
        {...props}
        alt={props.alt || ""}
        className={cn(props.className, "h-auto w-full rounded-2xl")}
      />
    );
  }

  if (typeof src !== "string") {
    return (
      <Image
        {...props}
        alt={props.alt || ""}
        className={cn(props.className, "h-auto w-full rounded-2xl")}
      />
    );
  }

  // Handle absolute URLs
  if (src.startsWith("http://") || src.startsWith("https://")) {
    return (
      <Image
        {...props}
        alt={props.alt || ""}
        className={cn(props.className, "h-auto w-full rounded-2xl")}
      />
    );
  }

  // Handle images from public folder (including /contents/...)
  if (src.startsWith("/")) {
    return (
      <Image
        alt={props.alt || ""}
        className={cn(props.className, "h-auto w-full rounded-2xl")}
        height={props.height ? Number(props.height) : undefined}
        src={src}
        unoptimized
        width={props.width ? Number(props.width) : undefined}
      />
    );
  }

  // For relative paths, they should have been converted to absolute paths
  // But if not, fallback to regular img tag
  return (
    <Image
      {...props}
      alt={props.alt || ""}
      className={cn(props.className, "h-auto w-full rounded-2xl")}
      height={props.height}
      width={props.width}
    />
  );
};

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
    img: MyImage,
  };
}