Support columns

Author: hatton

package.json

@@ -8,7 +8,7 @@
     "dist/**/*"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "cp ./src/css/*.css ./dist && tsc",
     "clean": "rm -rf ./dist/",
     "semantic-release": "semantic-release",
     "typecheck": "tsc --noEmit",

src/CustomTranformers.ts

@@ -28,6 +28,9 @@ async function notionColumnListToMarkdown(
   notionClient: Client,
   block: ListBlockChildrenResponseResult
 ): Promise<string> {
+  // Enhance: The @notionhq/client, which uses the official API, cannot yet get at column formatting information (column_ratio)
+  // However https://github1s.com/NotionX/react-notion-x/blob/master/packages/react-notion-x/src/block.tsx#L528 can get it.
+
   const { id, has_children } = block as any; // "any" because the notion api type system is complex with a union that don't know how to help TS to cope with
 
   if (!has_children) return "";
@@ -40,14 +43,15 @@ async function notionColumnListToMarkdown(
 
   const columns: string[] = await Promise.all(column_list_promise);
 
-  return `<div class='column_list'>${columns.join("\n\n")}</div>`;
+  return `<div class='notion-row'>\n${columns.join("\n\n")}\n</div>`;
 }
 
 async function notionColumnToMarkdown(
   notionToMarkdown: NotionToMarkdown,
   notionClient: Client,
   block: ListBlockChildrenResponseResult
 ): Promise<string> {
+  console.log(JSON.stringify(block));
   const { id, has_children } = block as any; // "any" because the notion api type system is complex with a union that don't know how to help TS to cope with
 
   if (!has_children) return "";
@@ -60,7 +64,11 @@ async function notionColumnToMarkdown(
 
   const childrenStrings: string[] = await Promise.all(childrenPromise);
 
-  return `<div class='column'>${childrenStrings.join("\n\n")}</div>`;
+  // note: it would look better in the markup with \n, but that
+  // causes notion-to-md to give us ":::A" instead of \n for some reason.
+  return `<div class='notion-column'>\n\n${childrenStrings.join(
+    "\n\n"
+  )}\n\n</div>`;
 }
 
 async function getBlockChildren(

src/css/notion-styles.css

@@ -0,0 +1,49 @@
+/* some things copied from https://github1s.com/NotionX/react-notion-x/blob/master/packages/react-notion-x/src/styles.css#L934 */
+/* note, I haven't figure out how a Docusaurus app can actually include this, yet */
+
+.notion-column {
+  display: flex;
+  flex-direction: column;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.notion-column > *:first-child {
+  margin-top: 0;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.notion-column > *:last-child {
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+}
+
+.notion-row {
+  display: grid;
+  grid-auto-flow: column;
+  /* at the moment, notion-pull doesn't give us column widths or ratios. So we
+  could let css layout decide the widths. Instead at the moment we're saying
+  let's just have each column be equal. This is easier for the author using
+  Notion to remember than having to guess at what the layout will be. */
+  grid-auto-columns: 1fr;
+  overflow: hidden;
+  width: 100%;
+  max-width: 100%;
+  gap: 30px;
+}
+
+@media (max-width: 640px) {
+  .notion-row {
+    flex-direction: column;
+  }
+
+  .notion-row .notion-column {
+    width: 100% !important;
+  }
+
+  .notion-row .notion-spacer {
+    display: none;
+  }
+}