initial commit

src/components/mdx/Callout.astro

@@ -0,0 +1,15 @@
+---
+interface Props {
+  emoji: string;
+}
+
+const { emoji } = Astro.props;
+---
+
+<div
+  class="px-4 py-3 bg-[#F7F7F7] dark:bg-[#181818] rounded p-1 text-sm flex items-center text-neutral-900 dark:text-neutral-100 mb-8">
+  <div class="flex items-center w-4 mr-4">{emoji}</div>
+  <div class="w-full callout leading-relaxed">
+    <slot />
+  </div>
+</div>

src/components/mdx/Caption.astro

@@ -0,0 +1,12 @@
+---
+import { Balancer } from "react-wrap-balancer";
+---
+
+<span
+  class="block w-full text-xs my-3 font-mono text-gray-500 text-center leading-normal">
+  <Balancer>
+    <span class="">
+      <slot />
+    </span>
+  </Balancer>
+</span>

src/components/mdx/ImageGrid.astro

@@ -0,0 +1,54 @@
+---
+import { Image } from "astro:assets";
+
+interface ImageGridProps {
+  images: {
+    src: string;
+    alt: string;
+    href?: string;
+  }[];
+  columns?: 2 | 3 | 4;
+}
+
+const { images, columns = 3 } = Astro.props as ImageGridProps;
+
+const gridClass = {
+  2: "grid-cols-2 sm:grid-cols-2",
+  3: "grid-cols-2 sm:grid-cols-3",
+  4: "grid-cols-2 sm:grid-cols-4",
+}[columns];
+---
+
+<section>
+  <div class={`grid ${gridClass} gap-4 my-8`}>
+    {
+      images.map((image) => (
+        <div class="relative aspect-square">
+          {image.href ? (
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href={image.href}
+              class="block w-full h-full">
+              <Image
+                alt={image.alt}
+                src={image.src}
+                width={500}
+                height={500}
+                class="rounded-lg object-cover w-full h-full"
+              />
+            </a>
+          ) : (
+            <Image
+              alt={image.alt}
+              src={image.src}
+              width={500}
+              height={500}
+              class="rounded-lg object-cover w-full h-full"
+            />
+          )}
+        </div>
+      ))
+    }
+  </div>
+</section>

src/components/mdx/Table.astro

@@ -0,0 +1,31 @@
+---
+interface TableData {
+  headers: string[];
+  rows: string[][];
+}
+
+interface Props {
+  data: TableData;
+}
+
+const { data } = Astro.props;
+---
+
+<table>
+  <thead>
+    <tr class="text-left">
+      {data.headers.map((header) => <th>{header}</th>)}
+    </tr>
+  </thead>
+  <tbody>
+    {
+      data.rows.map((row) => (
+        <tr>
+          {row.map((cell) => (
+            <td>{cell}</td>
+          ))}
+        </tr>
+      ))
+    }
+  </tbody>
+</table>

src/components/mdx/Tweet.astro

@@ -0,0 +1,36 @@
+---
+import { getTweet } from "react-tweet/api";
+import { EmbeddedTweet, TweetNotFound, type TweetProps } from "react-tweet";
+import "./tweet.css";
+
+interface Props {
+  id: string;
+}
+
+const { id } = Astro.props;
+
+let tweet;
+let error;
+
+if (id) {
+  try {
+    tweet = await getTweet(id);
+  } catch (err) {
+    console.error(err);
+    error = err;
+  }
+}
+
+const TweetContent = () => {
+  if (!tweet) {
+    return <TweetNotFound error={error} />;
+  }
+  return <EmbeddedTweet tweet={tweet} />;
+};
+---
+
+<div class="tweet my-6">
+  <div class="flex justify-center">
+    <TweetContent />
+  </div>
+</div>

src/components/mdx/YouTube.astro

@@ -0,0 +1,20 @@
+---
+import YT from "react-youtube";
+
+interface Props {
+  videoId: string;
+}
+
+const { videoId } = Astro.props;
+---
+
+<div class="relative w-full h-0 pb-[56.25%] my-6">
+  <YT
+    opts={{
+      height: "100%",
+      width: "100%",
+    }}
+    videoId={videoId}
+    class="absolute top-0 left-0 w-full h-full"
+  />
+</div>