feat: lots of refactors and improvements

.env.example

@@ -7,15 +7,6 @@
 # @see https://github.com/rolodato/dotenv-safe for more details.
 # ------------------------------------------------------------------------------
 
-# Optional (for preview image support)
-#GOOGLE_APPLICATION_CREDENTIALS=
-
-# Optional (for preview image support)
-#GCLOUD_PROJECT=
-
-# Optional (for preview image support)
-#FIREBASE_COLLECTION_IMAGES=
-
 # Optional (for fathom analytics)
 #NEXT_PUBLIC_FATHOM_ID=
 

.eslintrc.json

@@ -0,0 +1,27 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "react", "react-hooks"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "prettier"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-non-null-assertion": 0,
+    "@typescript-eslint/no-unused-vars": 2,
+    "react/prop-types": 0
+  }
+}

components/Footer.tsx

@@ -26,7 +26,7 @@ export const Footer: React.FC<{
 
   return (
     <footer className={styles.footer}>
-      <div className={styles.copyright}>Copyright 2021 {config.author}</div>
+      <div className={styles.copyright}>Copyright 2022 {config.author}</div>
 
       {hasMounted ? (
         <div className={styles.settings}>

components/NotionPage.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import Image from 'next/image'
 import Head from 'next/head'
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
@@ -33,10 +34,13 @@ import { PageActions } from './PageActions'
 import { Footer } from './Footer'
 import { PageSocial } from './PageSocial'
 import { GitHubShareButton } from './GitHubShareButton'
-import { ReactUtterances } from './ReactUtterances'
 
 import styles from './styles.module.css'
 
+// -----------------------------------------------------------------------------
+// dynamic imports for optional components
+// -----------------------------------------------------------------------------
+
 // const Code = dynamic(() =>
 //   import('react-notion-x').then((notion) => notion.Code)
 // )
@@ -51,21 +55,15 @@ import styles from './styles.module.css'
 //     ssr: false
 //   }
 // )
-
-// TODO: PDF support via "react-pdf" package has numerous troubles building
-// with next.js
+//
 // const Pdf = dynamic(
-//   () => import('react-notion-x').then((notion) => notion.Pdf),
+//   () => import('react-notion-x').then((notion) => (notion as any).Pdf),
 //   { ssr: false }
 // )
-
-const Equation = dynamic(() =>
-  import('react-notion-x').then((notion) => notion.Equation)
-)
-
-// we're now using a much lighter-weight tweet renderer react-static-tweets
-// instead of the official iframe-based embed widget from twitter
-// const Tweet = dynamic(() => import('react-tweet-embed'))
+//
+// const Equation = dynamic(() =>
+//   import('react-notion-x').then((notion) => notion.Equation)
+// )
 
 const Modal = dynamic(
   () => import('react-notion-x').then((notion) => notion.Modal),
@@ -139,22 +137,10 @@ export const NotionPage: React.FC<types.PageProps> = ({
   const socialDescription =
     getPageDescription(block, recordMap) ?? config.description
 
-  let comments: React.ReactNode = null
   let pageAside: React.ReactChild = null
 
   // only display comments and page actions on blog post pages
   if (isBlogPost) {
-    if (config.utterancesGitHubRepo) {
-      comments = (
-        <ReactUtterances
-          repo={config.utterancesGitHubRepo}
-          issueMap='issue-term'
-          issueTerm='title'
-          theme={darkMode.value ? 'photon-dark' : 'github-light'}
-        />
-      )
-    }
-
     const tweet = getPageTweet(block, recordMap)
     if (tweet) {
       pageAside = <PageActions tweet={tweet} />
@@ -249,15 +235,43 @@ export const NotionPage: React.FC<types.PageProps> = ({
               <a {...props} />
             </Link>
           ),
+          image: ({
+            src,
+            alt,
+
+            width,
+            height,
+
+            className,
+            style,
+
+            ...rest
+          }) => {
+            const layout = width && height ? 'intrinsic' : 'fill'
+
+            return (
+              <Image
+                {...rest}
+                className={className}
+                src={src}
+                alt={alt}
+                width={layout === 'intrinsic' && width}
+                height={layout === 'intrinsic' && height}
+                objectFit={style?.objectFit}
+                objectPosition={style?.objectPosition}
+                layout={layout}
+              />
+            )
+          },
           code: Code,
           collection: Collection,
           collectionRow: CollectionRow,
           tweet: Tweet,
-          modal: Modal,
-          equation: Equation
+          modal: Modal
         }}
         recordMap={recordMap}
         rootPageId={site.rootNotionPageId}
+        rootDomain={site.domain}
         fullPage={!isLiteMode}
         darkMode={darkMode.value}
         previewImages={site.previewImages !== false}
@@ -270,7 +284,6 @@ export const NotionPage: React.FC<types.PageProps> = ({
         mapPageUrl={siteMapPageUrl}
         mapImageUrl={mapNotionImageUrl}
         searchNotion={searchNotion}
-        pageFooter={comments}
         pageAside={pageAside}
         footer={
           <Footer

components/Page404.tsx

@@ -28,7 +28,8 @@ export const Page404: React.FC<types.PageProps> = ({ site, pageId, error }) => {
           ) : (
             pageId && (
               <p>
-                Make sure that Notion page "{pageId}" is publicly accessible.
+                Make sure that Notion page &quot;{pageId}&quot; is publicly
+                accessible.
               </p>
             )
           )}