From 71ad925c091da5b5fb0e73d8fdcfa63b81b4f1b7 Mon Sep 17 00:00:00 2001
From: Wiwi Kuan <wiwi@noreply.localhost>
Date: Fri, 27 Mar 2026 01:20:40 +0000
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E5=82=B3=E6=AA=94=E6=A1=88=E5=88=B0?=
 =?UTF-8?q?=E3=80=8C/=E3=80=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 PhotoGrid.jsx | 78 +++++++++++++++++++++++++++++++++++++++++++++++++++
 crepe.mdx     | 18 ++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 PhotoGrid.jsx
 create mode 100644 crepe.mdx

diff --git a/PhotoGrid.jsx b/PhotoGrid.jsx
new file mode 100644
index 0000000..b370f7f
--- /dev/null
+++ b/PhotoGrid.jsx
@@ -0,0 +1,78 @@
+import React from "react";
+
+/**
+ * PhotoGrid — Instagram-style masonry grid for Docusaurus.
+ *
+ * Usage in any .mdx page:
+ *
+ *   import PhotoGrid from "@site/src/components/PhotoGrid";
+ *
+ *   <PhotoGrid
+ *     photos={[
+ *       "/img/gallery/cat-01.jpg",
+ *       "/img/gallery/sunset-02.webp",
+ *       "/img/gallery/meme-03.png",
+ *     ]}
+ *   />
+ *
+ * Props:
+ *   photos   — string[]  — paths relative to /static (required)
+ *   columns  — number    — desktop columns, default 3
+ *   gap      — string    — grid gap, default "12px"
+ */
+export default function PhotoGrid({ photos = [], columns = 3, gap = "12px" }) {
+  if (!photos.length) return null;
+
+  return (
+    <>
+      <style>{`
+        .photo-grid {
+          column-count: ${columns};
+          column-gap: ${gap};
+        }
+        .photo-grid__item {
+          break-inside: avoid;
+          margin-bottom: ${gap};
+          cursor: pointer;
+          display: block;
+          border-radius: 6px;
+          overflow: hidden;
+          line-height: 0;
+          transition: opacity 0.2s ease;
+        }
+        .photo-grid__item:hover {
+          opacity: 0.85;
+        }
+        .photo-grid__item img {
+          width: 100%;
+          height: auto;
+          display: block;
+        }
+        @media (max-width: 768px) {
+          .photo-grid {
+            column-count: 1 !important;
+          }
+        }
+        @media (min-width: 769px) and (max-width: 1024px) {
+          .photo-grid {
+            column-count: 2 !important;
+          }
+        }
+      `}</style>
+
+      <div className="photo-grid">
+        {photos.map((src, i) => (
+          <a
+            key={i}
+            className="photo-grid__item"
+            href={src}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src={src} alt="" loading="lazy" />
+          </a>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/crepe.mdx b/crepe.mdx
new file mode 100644
index 0000000..5548a0f
--- /dev/null
+++ b/crepe.mdx
@@ -0,0 +1,18 @@
+---
+title: ᓚᘏᗢ
+description: 貓貓貓
+hide_table_of_contents: true
+---
+
+import PhotoGrid from "@site/src/components/PhotoGrid";
+
+# ᓚᘏᗢ `/crepe`
+
+<PhotoGrid
+  photos={[
+    "/img/cat/tail.webp",    
+    "/img/cat/cat-tag.jpg",
+    "/img/cat/cat-blog-paper.jpg",
+    // ↑ 加圖就在這裡多塞一行，就這樣，沒了
+  ]}
+/>