fix: hack nextjs bug 60021

Signed-off-by: Innei <i@innei.in>
Innei · Dec 29, 2023 · ef7a0d8 · ef7a0d8 · vercel · Dec 29, 2023
1 parent 5aa9c85
commit ef7a0d8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/src/app/notes/[id]/pageImpl.tsx b/src/app/notes/[id]/pageImpl.tsx
@@ -38,7 +38,7 @@ const NotePage = function (props: NoteModel) {
     <>
       <AckRead id={props.id} type="note" />
 
-      {props.meta?.cover && <NoteHeadCover image={props.meta.cover} />}
+      <NoteHeadCover image={props.meta?.cover} />
       <NoteHeaderMetaInfoSetting />
       <IndentArticleContainer>
         <header>

diff --git a/src/components/widgets/note/NoteHeadCover.tsx b/src/components/widgets/note/NoteHeadCover.tsx
@@ -56,8 +56,12 @@ function cropImageTo16by9(src: string): Promise<string> {
     img.src = src
   })
 }
+export const NoteHeadCover = ({ image }: { image?: string }) => {
+  if (!image) return null
 
-export const NoteHeadCover = ({ image }: { image: string }) => {
+  return <NoteHeadCoverImpl image={image} />
+}
+const NoteHeadCoverImpl = ({ image }: { image: string }) => {
   const [imageBlob, setImageBlob] = useState<string | null>(null)
   useLayoutEffect(() => {
     let isMounted = true
@@ -69,23 +73,26 @@ export const NoteHeadCover = ({ image }: { image: string }) => {
       isMounted = false
     }
   }, [image])
+
   return (
     <>
       <AutoResizeHeight>
-        <div
-          data-hide-print
-          className={clsx(
-            'z-1 absolute left-0 right-0 top-0',
-            imageBlob ? 'h-[224px]' : '0',
-          )}
-        >
+        {imageBlob && (
           <div
-            style={{
-              backgroundImage: `url(${imageBlob})`,
-            }}
-            className="cover-mask-b h-full w-full bg-cover bg-center bg-no-repeat"
-          />
-        </div>
+            data-hide-print
+            className={clsx(
+              'z-1 absolute left-0 right-0 top-0',
+              imageBlob ? 'h-[224px]' : '0',
+            )}
+          >
+            <div
+              style={{
+                backgroundImage: `url(${imageBlob})`,
+              }}
+              className="cover-mask-b h-full w-full bg-cover bg-center bg-no-repeat"
+            />
+          </div>
+        )}
       </AutoResizeHeight>
 
       <AutoResizeHeight>

diff --git a/src/components/widgets/peek/NotePreview.tsx b/src/components/widgets/peek/NotePreview.tsx
@@ -60,7 +60,7 @@ export const NotePreview: FC<NotePreviewProps> = (props) => {
       <CurrentNoteDataProvider data={data} />
       {!!note.id && <AckRead id={note.id} type="note" />}
       <Paper>
-        {note.meta?.cover && <NoteHeadCover image={note.meta.cover} />}
+        <NoteHeadCover image={note.meta?.cover} />
         <IndentArticleContainer>
           <header>
             <NoteTitle />