Further improve style accuracy

- Style videos & iframes correctly
- Align some margins with Notion
- Add breakpoint for responsive reflow

Author: timolins

src/block.tsx

@@ -4,13 +4,12 @@ import Asset from "./components/asset";
 import Code from "./components/code";
 
 export const renderChildText = (properties: DecorationType[]) => {
-  if (!properties) return null;
   return properties.map(([text, decorations], i) => {
     if (!decorations) {
-      return text;
+      return <React.Fragment key={i}>{text}</React.Fragment>;
     }
 
-    return decorations.reduce((element, decorator) => {
+    return decorations.reduceRight((element, decorator) => {
       switch (decorator[0]) {
         case "h":
           return (
@@ -78,7 +77,7 @@ export const Block: React.FC<Block> = props => {
         </h3>
       );
     case "divider":
-      return <hr />;
+      return <hr className="notion-hr" />;
     case "text":
       if (!blockValue.properties) {
         return <p style={{ height: "1rem" }}> </p>;
@@ -124,14 +123,17 @@ export const Block: React.FC<Block> = props => {
       const value = block.value as ContentValueType;
 
       return (
-        <div className="notion-asset-wrapper">
+        <figure
+          className="notion-asset-wrapper"
+          style={{ width: value.format.block_width }}
+        >
           <Asset block={block} />
           {value.properties.caption && (
-            <div className="notion-image-caption">
+            <figcaption className="notion-image-caption">
               {renderChildText(value.properties.caption)}
-            </div>
+            </figcaption>
           )}
-        </div>
+        </figure>
       );
     case "code": {
       if (blockValue.properties.title) {

src/components/asset.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { CSSProperties } from "react";
 import { BlockType, ContentValueType } from "../types";
 
 const types = ["video", "image", "embed"];
@@ -14,26 +13,24 @@ const Asset: React.FC<{ block: BlockType }> = ({ block }) => {
 
   const format = value.format;
   const {
-    block_width,
-    block_height,
     display_source,
-    block_aspect_ratio
+    block_aspect_ratio,
+    block_height,
+    block_width
   } = format;
 
-  const isImage = type === "image";
-
-  const style: CSSProperties = {
-    maxWidth: "100%",
-    border: "none",
-    display: "block",
-    marginLeft: "auto",
-    marginRight: "auto",
-    width: block_width,
-    ...(!isImage && { height: block_height })
-  };
-
-  if (type === "embed") {
-    return <iframe style={style} src={display_source} />;
+  if (type === "embed" || type === "video") {
+    return (
+      <div
+        style={{
+          paddingBottom: `${(block_aspect_ratio || block_height / block_width) *
+            100}%`,
+          position: "relative"
+        }}
+      >
+        <iframe className="notion-image-inset" src={display_source} />
+      </div>
+    );
   }
 
   const src = `https://notion.so/image/${encodeURIComponent(
@@ -46,7 +43,6 @@ const Asset: React.FC<{ block: BlockType }> = ({ block }) => {
       return (
         <div
           style={{
-            ...style,
             paddingBottom: `${block_aspect_ratio * 100}%`,
             position: "relative"
           }}
@@ -55,14 +51,10 @@ const Asset: React.FC<{ block: BlockType }> = ({ block }) => {
         </div>
       );
     } else {
-      return <img style={style} alt={caption} src={src} />;
+      return <img alt={caption} src={src} />;
     }
   }
 
-  if (type === "video") {
-    return <video style={style} src={src} />;
-  }
-
   return null;
 };
 

src/components/code.tsx

@@ -10,14 +10,12 @@ const Code: React.FC<{ code: string; language: string }> = ({
     languages[language.toLowerCase()] || languages.javascript;
 
   return (
-    <pre>
-      <code
-        className="notion-code"
-        dangerouslySetInnerHTML={{
-          __html: highlight(code, prismLanguage, language)
-        }}
-      />
-    </pre>
+    <code
+      className="notion-code"
+      dangerouslySetInnerHTML={{
+        __html: highlight(code, prismLanguage, language)
+      }}
+    />
   );
 };
 

src/styles.css

@@ -9,7 +9,7 @@
   padding: 3px 0px;
 }
 
-* {
+.notion * {
   margin-block-start: 0px;
   margin-block-end: 0px;
 }
@@ -134,21 +134,22 @@ h3 {
   white-space: pre-wrap;
   word-break: break-word;
   border-left: 3px solid currentcolor;
-  padding-left: 0.9em;
-  padding-right: 0.9em;
+  padding: 0.2em 0.9em;
+  margin: 0;
   font-size: 1.2em;
 }
 .notion-hr {
   margin: 6px 0px;
+  padding: 0;
+  border-top: none;
   border-color: rgba(55, 53, 47, 0.09);
 }
-.notion-column {
-  padding-top: 12px;
-  padding-bottom: 12px;
-}
 .notion-link {
+  color: inherit;
   text-decoration: underline;
+  text-decoration-color: inherit;
 }
+
 .notion-inline-code {
   color: #eb5757;
   padding: 0.2em 0.4em;
@@ -186,17 +187,19 @@ h3 {
   padding-left: 0.2em;
 }
 
-li {
+.notion-list li {
   padding: 6px 0px;
 }
 
 .notion-asset-wrapper {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  margin-top: 2px;
-  margin-bottom: 0.5em;
+  margin: 2px auto 0.5rem;
+  max-width: 100%;
+}
+
+.notion-asset-wrapper iframe {
+  border: none;
 }
+
 .notion-text {
   white-space: pre-wrap;
   word-break: break-word;
@@ -205,9 +208,50 @@ li {
 .notion-block {
   padding: 3px 2px;
 }
+
+.notion-code {
+  padding: 30px 16px 30px 20px;
+  margin: 4px 0;
+  tab-size: 2;
+  font-size: 85%;
+  display: block;
+  background: rgb(247, 246, 243);
+  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier,
+    monospace;
+}
+
+.notion-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: flex;
 }
+
+@media (max-width: 640px) {
+  .notion-row {
+    flex-direction: column;
+  }
+
+  .notion-row > *,
+  .notion-column > * {
+    width: 100% !important;
+  }
+}
+
 .notion-spacer:last-child {
   display: none;
 }
@@ -219,6 +263,7 @@ li {
   right: 0;
   bottom: 0;
   width: 100%;
+  height: 100%;
 }
 
 .notion-image-caption {
@@ -245,13 +290,3 @@ li {
 .notion-callout-text {
   margin-left: 8px;
 }
-.notion-code {
-  padding: 30px 16px 30px 20px;
-  margin: 4px 0;
-  tab-size: 2;
-  font-size: 85%;
-  display: block;
-  background: rgb(247, 246, 243);
-  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier,
-    monospace;
-}