From 54e0617b438317daae49237c53ff85fac1ad7a41 Mon Sep 17 00:00:00 2001
From: Travis Fischer <fisch0920@gmail.com>
Date: Sun, 17 Jan 2021 15:04:53 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=97=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/NotionPage.tsx    |  3 +++
 components/styles.module.css |  1 +
 lib/map-image-url.ts         | 14 +++++++---
 styles/notion.css            | 51 +++++++++++++++++++++++++++++++++++-
 4 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/components/NotionPage.tsx b/components/NotionPage.tsx
index cf7ceb1..336430a 100644
--- a/components/NotionPage.tsx
+++ b/components/NotionPage.tsx
@@ -158,6 +158,9 @@ export const NotionPage: React.FC<types.PageProps> = ({
         darkMode={isDarkMode}
         previewImages={site.previewImages !== false}
         showCollectionViewDropdown={false}
+        defaultPageIcon='https://ssfy.io/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F797768e4-f24a-4e65-bd4a-b622ae9671dc%252Fprofile-2020-280w-circle.png%3Ftable%3Dblock%26id%3D78fc5a4b-88d7-4b0e-824e-29407e9f1ec1%26cache%3Dv2'
+        defaultPageCover='https://ssfy.io/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F9fc5ecae-2b4b-4e73-b0d4-918c829ba69f%252FIMG_0259-opt.jpg%3Ftable%3Dblock%26id%3D78fc5a4b-88d7-4b0e-824e-29407e9f1ec1%26cache%3Dv2'
+        defaultPageCoverPosition={0.1862}
         mapPageUrl={siteMapPageUrl}
         mapImageUrl={mapNotionImageUrl}
         searchNotion={searchNotion}
diff --git a/components/styles.module.css b/components/styles.module.css
index 638faa6..50eaa4d 100644
--- a/components/styles.module.css
+++ b/components/styles.module.css
@@ -13,6 +13,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 2vmin;
 
   font-size: 16px;
   line-height: 1.5;
diff --git a/lib/map-image-url.ts b/lib/map-image-url.ts
index 1f2c052..c1f6330 100644
--- a/lib/map-image-url.ts
+++ b/lib/map-image-url.ts
@@ -1,15 +1,21 @@
 import { Block } from 'notion-types'
 
+const imageCDNHost = 'https://ssfy.io'
+
 export const mapNotionImageUrl = (url: string, block: Block) => {
   if (!url) {
     return null
   }
 
   if (url.startsWith('data:')) {
-    return null
+    return url
   }
 
-  const origUrl = url
+  if (url.startsWith(imageCDNHost)) {
+    return url
+  }
+
+  // const origUrl = url
 
   if (url.startsWith('/images')) {
     url = `https://www.notion.so${url}`
@@ -36,9 +42,9 @@ export const mapNotionImageUrl = (url: string, block: Block) => {
 
 export const mapImageUrl = (imageUrl: string) => {
   if (imageUrl.startsWith('data:')) {
-    return null
+    return imageUrl
   }
 
   // Our proxy uses Cloudflare's global CDN to cache these image assets
-  return `https://ssfy.io/${encodeURIComponent(imageUrl)}`
+  return `${imageCDNHost}/${encodeURIComponent(imageUrl)}`
 }
diff --git a/styles/notion.css b/styles/notion.css
index 7f42668..104f341 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -77,7 +77,7 @@
 .notion-h1,
 .notion-h2,
 .notion-h3 {
-  margin-bottom: 0.5em;
+  margin-bottom: 0.25em;
 }
 
 .notion-callout {
@@ -92,3 +92,52 @@
   border: 1px solid var(--fg-color-0);
   box-shadow: unset;
 }
+
+@media only screen and (max-width: 900px) {
+  .notion-collection {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .notion-search-button {
+    display: none !important;
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  .notion-gallery-grid {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-gap: 10vmin;
+    gap: 10vmin;
+  }
+}
+
+.notion .notion-page-icon-cover {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.notion img.notion-page-icon-cover {
+  margin-top: -62px;
+}
+
+.notion-title {
+  display: block;
+  text-align: center;
+  margin-top: 4vmin;
+}
+
+.notion-collection-column-title {
+  display: none !important;
+}
+
+.notion-collection-row-property .notion-property {
+  display: flex;
+  justify-content: center;
+}
+
+.notion-collection-row-value {
+  padding: 0;
+}