fix: images grids

Signed-off-by: Innei <i@innei.in>
Innei · Jan 16, 2024 · 1f43e6c · 1f43e6c
1 parent 2a393b7
commit 1f43e6c
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 19 deletions.
diff --git a/src/components/ui/markdown/customize.md b/src/components/ui/markdown/customize.md
@@ -184,6 +184,28 @@ https://loremflickr.com/640/480/city?3
 ![](https://loremflickr.com/640/480/city?4)
 :::
 
+```
+::: grid {cols=3,rows=2,gap=12,type=images}
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+:::
+
+```
+
+::: grid {cols=3,rows=2,gap=12,type=images}
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+:::
+
+
 
 ## Rich Link
 

diff --git a/src/components/ui/markdown/parsers/container.tsx b/src/components/ui/markdown/parsers/container.tsx
@@ -143,6 +143,7 @@ export const ContainerRule: MarkdownToJSX.Rule = {
 
             return (
               <GridMarkdownImages
+                height={rows && cols ? +rows / +cols : 1}
                 key={state.key}
                 imagesSrc={imagesSrc}
                 Wrapper={Grid}

diff --git a/src/components/ui/markdown/renderers/image.tsx b/src/components/ui/markdown/renderers/image.tsx
@@ -56,9 +56,15 @@ export const GridMarkdownImage = (props: any) => {
 export const GridMarkdownImages: FC<{
   imagesSrc: string[]
   Wrapper: Component
-}> = ({ imagesSrc, Wrapper }) => {
+  height: number
+}> = ({ imagesSrc, Wrapper, height = 1 }) => {
   return (
-    <div className="relative pb-[100%]">
+    <div
+      className="relative"
+      style={{
+        paddingBottom: `${height * 100}%`,
+      }}
+    >
       <Wrapper className="absolute inset-0">
         {imagesSrc.map((src) => {
           return <GridZoomImage key={src} src={src} />

diff --git a/src/lib/image.ts b/src/lib/image.ts
@@ -40,25 +40,16 @@ export function getDominantColor(imageObject: HTMLImageElement) {
     .slice(1)}`
 }
 
-export const addImageUrlCropSizeQuery = (url: string, size: number) => {
-  const parsedUrl = new URL(url)
-
-  // Tencent Cloud 数据万象
-  // ?imageMogr2/thumbnail/300x/crop/300x300/gravity/center
-  parsedUrl.searchParams.set(
-    `imageMogr2/thumbnail/${size}x/crop/${size}x${size}/gravity/center/strip`,
-    '',
-  )
-
-  return parsedUrl.toString().replace(/=$/, '')
-}
-
+const TENCENT_CDN_DOMAIN = 'cdn.innei.ren'
 export const addImageUrlResizeQuery = (url: string, size: number) => {
   const parsedUrl = new URL(url)
 
-  // Tencent Cloud 数据万象
-  // ?imageMogr2/thumbnail/300x
-  parsedUrl.searchParams.set(`imageMogr2/thumbnail/${size}x/strip`, '')
+  if (parsedUrl.host === TENCENT_CDN_DOMAIN) {
+    // Tencent Cloud 数据万象
+    // ?imageMogr2/thumbnail/300x
+
+    return `${url}?imageMogr2/thumbnail/${size}x/strip`
+  }
 
-  return parsedUrl.toString().replace(/=$/, '')
+  return url
 }