fix: gallery and text indent style

Signed-off-by: Innei <i@innei.in>
Innei · Mar 30, 2024 · 53b8b91 · 53b8b91
1 parent cb116f9
commit 53b8b91
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 14 deletions.
diff --git a/src/app/(app)/notes/[id]/page.module.css b/src/app/(app)/notes/[id]/page.module.css
@@ -12,8 +12,8 @@
       margin-bottom: 4rem;
     }
 
-    ul .indent,
-    .paragraph .indent {
+    ul span,
+    .paragraph span {
       border-bottom: 1px solid;
 
       /* @apply border-accent/20 dark:border-accent/20; */
@@ -29,7 +29,7 @@
         display: none !important;
       }
       & {
-        .paragraph > span.indent {
+        .paragraph > span {
           margin-left: 0 !important;
         }
 
@@ -71,10 +71,8 @@
       }
     }
 
-    .paragraph:not(:nth-child(1)) > span.indent {
-      &:nth-child(1) {
-        margin-left: 2rem;
-      }
+    .paragraph:not(:nth-child(1)) {
+      text-indent: 2rem;
     }
 
     main {

diff --git a/src/app/(app)/notes/[id]/pageExtra.tsx b/src/app/(app)/notes/[id]/pageExtra.tsx
@@ -138,11 +138,7 @@ export const NoteHeaderMetaInfoSetting = () => {
 const MarkdownRenderers: { [name: string]: Partial<MarkdownToJSX.Rule> } = {
   text: {
     react(node, _, state) {
-      return (
-        <span className="indent" key={state?.key}>
-          {node.content}
-        </span>
-      )
+      return <span key={state?.key}>{node.content}</span>
     },
   },
 }

diff --git a/src/components/ui/gallery/Gallery.tsx b/src/components/ui/gallery/Gallery.tsx
@@ -10,7 +10,9 @@ import { throttle } from '~/lib/lodash'
 import { useMarkdownImageRecord } from '~/providers/article/MarkdownImageRecordProvider'
 import { useWrappedElementSize } from '~/providers/shared/WrappedElementProvider'
 
+import { MotionButtonBase } from '../button'
 import { FixedZoomedImage } from '../image'
+import { MarkdownImage } from '../markdown/renderers/image'
 import styles from './Gallery.module.css'
 
 const IMAGE_CONTAINER_MARGIN_INSET = 60
@@ -139,6 +141,14 @@ export const Gallery: FC<GalleryProps> = (props) => {
     }
   }, [])
 
+  if (!images.length) {
+    return null
+  }
+  if (images.length === 1) {
+    const image = images[0]
+    return <MarkdownImage src={image.url} alt={image.footnote} />
+  }
+
   return (
     <div
       className={clsx('w-full', 'relative', styles['root'])}
@@ -162,6 +172,38 @@ export const Gallery: FC<GalleryProps> = (props) => {
         })}
       </div>
 
+      {currentIndex > 0 && (
+        <div className="pointer-events-none absolute inset-y-0 left-2 flex items-center [&_*]:duration-200">
+          <MotionButtonBase
+            onClick={() => {
+              if (!containerRef) {
+                return
+              }
+              const index = currentIndex - 1
+              handleScrollTo(index)
+            }}
+            className="border-border pointer-events-auto flex size-6 rounded-full border bg-base-100 p-1 opacity-80 center hover:opacity-100"
+          >
+            <i className="icon-[mingcute--left-fill]" />
+          </MotionButtonBase>
+        </div>
+      )}
+      {currentIndex < images.length - 1 && (
+        <div className="pointer-events-none absolute inset-y-0 right-2 flex items-center [&_*]:duration-200">
+          <MotionButtonBase
+            onClick={() => {
+              if (!containerRef) {
+                return
+              }
+              const index = currentIndex + 1
+              handleScrollTo(index)
+            }}
+            className="border-border pointer-events-auto flex size-6 rounded-full border bg-base-100 p-1 opacity-80 center hover:opacity-100"
+          >
+            <i className="icon-[mingcute--right-fill]" />
+          </MotionButtonBase>
+        </div>
+      )}
       <div className={clsx(styles['indicator'], 'space-x-2')}>
         {Array.from({
           length: images.length,

diff --git a/src/components/ui/markdown/renderers/image.tsx b/src/components/ui/markdown/renderers/image.tsx
@@ -18,15 +18,15 @@ import {
 import { Divider } from '../../divider/Divider'
 import { FixedZoomedImage } from '../../image/ZoomedImage'
 
-export const MarkdownImage = (props: any) => {
+export const MarkdownImage = (props: { src: string; alt?: string }) => {
   const { src, alt } = props
   const nextProps = {
     ...props,
   }
   nextProps.alt = alt?.replace(/^[¡!]/, '')
   const { w } = useWrappedElementSize()
 
-  const ext = src.split('.').pop()
+  const ext = src.split('.').pop()!
   if (isVideoExt(ext)) {
     const figcaption = alt?.replace(/^[¡!]/, '')
     return (

diff --git a/storybook/vite.config.mts b/storybook/vite.config.mts
@@ -37,6 +37,7 @@ export default defineConfig({
     __ROOT__: `"${__dirname}"`,
     __COMPONENT_ROOT__: `"${resolve(__dirname, '..')}"`,
     'process.env': { ...env },
+    __dirname: `"${__dirname}"`,
   },
   base: '',
   resolve: {