Add blog and add react-image-gallery component

blog/arthur-drift-202406.mdx

@@ -0,0 +1,108 @@
+---
+date: 2024-06-12
+authors: arthur
+image: https://cos.codec.wang/photograph/arthur-drift-hk-5.jpg
+tags: ["摄影", "街拍", "香港", "澳门", "street photography"]
+---
+
+import ImageGallery from "react-image-gallery";
+
+# 「Arthur 漂流计划」•港澳街拍
+
+港澳通行证办了这么久，端午假期终于用上了！计划了两天 HK，一天 MACAO，特种兵作战，走起～
+
+### 香港
+
+<ImageGallery
+  thumbnailPosition="left"
+  showPlayButton={false}
+  items={[
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-hk-5.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-hk-5.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-hk-1.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-hk-1.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-hk-8.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-hk-8.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-hk-2.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-hk-2.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-hk-3.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-hk-3.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-hk-4.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-hk-4.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-hk-6.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-hk-6.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-hk-7.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-hk-7.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-hk-9.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-hk-9.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-hk-10.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-hk-10.jpg",
+    },
+  ]}
+/>
+
+<!--truncate-->
+
+### 澳门
+
+<ImageGallery
+  thumbnailPosition="left"
+  showPlayButton={false}
+  items={[
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-macao-7.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-macao-7.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-macao-2.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-macao-2.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-macao-1.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-macao-1.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-macao-3.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-macao-3.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-macao-4.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-macao-4.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-macao-5.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-macao-5.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-macao-6.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-macao-6.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-macao-8.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-macao-8.jpg",
+    },
+    {
+      original: "https://cos.codec.wang/photograph/arthur-drift-macao-9.jpg",
+      thumbnail: "https://cos.codec.wang/photograph/arthur-drift-macao-9.jpg",
+    },
+  ]}
+/>

package.json

@@ -23,6 +23,7 @@
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-image-gallery": "^1.3.0",
     "rehype-katex": "^5.0.0",
     "remark-math": "^3.0.1"
   },

src/css/custom.css

@@ -4,6 +4,8 @@
  * work well for content-centric websites.
  */
 
+@import "~react-image-gallery/styles/css/image-gallery.css";
+
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #2e8555;
@@ -18,7 +20,7 @@
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
+[data-theme="dark"] {
   --ifm-color-primary: #25c2a0;
   --ifm-color-primary-dark: #21af90;
   --ifm-color-primary-darker: #1fa588;