🗿

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}

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;

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)}`
 }

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;
+}