From f38b24af4e1d2a6dfaf544afb711be811f91e276 Mon Sep 17 00:00:00 2001
From: Xennis <code@xennis.org>
Date: Sun, 9 Jun 2024 21:21:29 +0200
Subject: [PATCH 1/3] [render] Fix columns for small screens

---
 packages/render/src/block.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/render/src/block.tsx b/packages/render/src/block.tsx
index 46125eb..ad86bbb 100644
--- a/packages/render/src/block.tsx
+++ b/packages/render/src/block.tsx
@@ -219,7 +219,7 @@ const Block = ({ block, options }: { block: BlockObjectResponseWithChildren; opt
       }
       return (
         // ref: .notion-row
-        <div className="flex gap-4">
+        <div className="sm:flex sm:flex-row gap-4">
           {columnListChildren.map((column, index) => {
             return (
               // ref: .notion-column

From 189cf3e6340198fa24e7b8c28d517c6eee8c3eb7 Mon Sep 17 00:00:00 2001
From: Xennis <code@xennis.org>
Date: Sun, 9 Jun 2024 21:21:51 +0200
Subject: [PATCH 2/3] [render] Simplify image handling

---
 packages/render/src/block.tsx | 32 +++++---------------------------
 1 file changed, 5 insertions(+), 27 deletions(-)

diff --git a/packages/render/src/block.tsx b/packages/render/src/block.tsx
index ad86bbb..bd8de97 100644
--- a/packages/render/src/block.tsx
+++ b/packages/render/src/block.tsx
@@ -219,7 +219,7 @@ const Block = ({ block, options }: { block: BlockObjectResponseWithChildren; opt
       }
       return (
         // ref: .notion-row
-        <div className="sm:flex sm:flex-row gap-4">
+        <div className="gap-4 sm:flex sm:flex-row">
           {columnListChildren.map((column, index) => {
             return (
               // ref: .notion-column
@@ -287,38 +287,16 @@ const Block = ({ block, options }: { block: BlockObjectResponseWithChildren; opt
       )
     case "image":
       const imageUrl = block.image.type === "external" ? block.image.external.url : block.image.file.url
-      if (!imageUrl) {
-        console.warn(`image for ${block.id} missing`)
-        break
-      }
       const imageHasCaption = block.image.caption.length > 0
       // note(not implemented): .notion-image
       return (
         // ref: .notion-asset-wrapper
         // note: original breakpoint for max-w: `only screen and (max-width: 730px)`
-        <figure className="mx-0 my-2 flex min-w-full max-w-full flex-col self-center sm:max-w-[100vw]">
-          {/* If you delete this div the images are centered. If you wanna delete it adjust the CSS. */}
-          <div>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={imageUrl}
-              alt={imageHasCaption ? block.image.caption[0].plain_text : "image"}
-              style={{
-                alignSelf: "center",
-                display: "flex",
-                flexDirection: "column",
-                height: "100%",
-                justifyContent: "center",
-                maxHeight: "100%",
-                maxWidth: "100%",
-                position: "relative",
-                borderRadius: "0.25rem",
-              }}
-            />
-          </div>
+        <figure className="my-2 w-full">
+          <img src={imageUrl} alt={imageHasCaption ? block.image.caption[0].plain_text : "image"} className="rounded" />
           {imageHasCaption ? (
             // ref: .notion-asset-caption
-            <figcaption className="whitespace-pre-wrap break-words py-1.5 pe-0 ps-0.5 text-sm leading-[1.4] text-[color:var(--fg-color-3)] caret-[color:var(--fg-color)]">
+            <figcaption className="whitespace-pre-wrap break-words py-1.5 ps-0.5 text-sm leading-[1.4] text-[color:var(--fg-color-3)] caret-[color:var(--fg-color)]">
               <RichTexts value={block.image.caption} options={options} />
             </figcaption>
           ) : (
@@ -332,7 +310,7 @@ const Block = ({ block, options }: { block: BlockObjectResponseWithChildren; opt
       break
     case "numbered_list_item":
       return (
-        <li style={notionColor(block.numbered_list_item.color)} className="py-1.4 whitespace-pre-wrap pe-0 ps-[0.2em]">
+        <li style={notionColor(block.numbered_list_item.color)} className="py-1.4 whitespace-pre-wrap ps-[0.2em]">
           <RichTexts value={block.numbered_list_item.rich_text} options={options} />
           {block._children && <RenderBlocks blocks={block._children} options={options} />}
         </li>

From 903cd4e869bf2334c551cb7fbe212dfcfb74c85c Mon Sep 17 00:00:00 2001
From: Xennis <code@xennis.org>
Date: Sun, 9 Jun 2024 21:33:10 +0200
Subject: [PATCH 3/3] CD: Just set base path for GitHub page

---
 .github/workflows/examples-cd.yml | 1 +
 examples/nextjs/next.config.mjs   | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/examples-cd.yml b/.github/workflows/examples-cd.yml
index 63a9488..ec66a0c 100644
--- a/.github/workflows/examples-cd.yml
+++ b/.github/workflows/examples-cd.yml
@@ -68,6 +68,7 @@ jobs:
         run: "pnpm run build"
         working-directory: "./examples/nextjs"
         env:
+          GITHUB_PAGE_BASE_PATH: "/react-notion-render"
           NOTION_ACCESS_TOKEN: ${{ secrets.NOTION_ACCESS_TOKEN }}
           NOTION_PAGES_DB_ID: ${{ vars.NOTION_PAGES_DB_ID }}
       - name: Upload artifact
diff --git a/examples/nextjs/next.config.mjs b/examples/nextjs/next.config.mjs
index 28b56b7..1fd2e2b 100644
--- a/examples/nextjs/next.config.mjs
+++ b/examples/nextjs/next.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   // Just set for GitHub Page: https://<username>.github.io/<basePath>/
-  basePath: "/react-notion-render",
+  basePath: process.env.GITHUB_PAGE_BASE_PATH,
   output: "export",
 }