Add Disqus Comments, Google Analytics, and Privacy Policy support

components/Footer.tsx

@@ -14,12 +14,14 @@ import * as config from '@/lib/config'
 import { useDarkMode } from '@/lib/use-dark-mode'
 
 import styles from './styles.module.css'
+import { useNotionContext } from 'react-notion-x'
 
 // TODO: merge the data and icons from PageSocial with the social links in Footer
 
 export const FooterImpl: React.FC = () => {
   const [hasMounted, setHasMounted] = React.useState(false)
   const { isDarkMode, toggleDarkMode } = useDarkMode()
+  const { mapPageUrl } = useNotionContext()
 
   const onToggleDarkMode = React.useCallback(
     (e) => {
@@ -36,7 +38,17 @@ export const FooterImpl: React.FC = () => {
   return (
     <footer className={styles.footer}>
       <div className={styles.copyright}>Copyright 2022 {config.author}</div>
-
+      {config.privacyPolicy && (
+        <a 
+          className={styles.copyright}
+          href={mapPageUrl(config.privacyPolicy)}
+          title='Privacy Policy'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          Privacy Policy
+        </a>
+      )}
       <div className={styles.settings}>
         {hasMounted && (
           <a

components/NotionPage.tsx

@@ -28,6 +28,9 @@ import { PageAside } from './PageAside'
 import { PageHead } from './PageHead'
 import styles from './styles.module.css'
 
+import { DiscussionEmbed } from 'disqus-react';
+
+
 // -----------------------------------------------------------------------------
 // dynamic imports for optional components
 // -----------------------------------------------------------------------------
@@ -80,6 +83,7 @@ const Collection = dynamic(() =>
 const Equation = dynamic(() =>
   import('react-notion-x/build/third-party/equation').then((m) => m.Equation)
 )
+
 const Pdf = dynamic(
   () => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf),
   {
@@ -165,7 +169,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
       propertyLastEditedTimeValue,
       propertyTextValue,
       propertyDateValue
-    }),
+      }),
     []
   )
 
@@ -210,6 +214,8 @@ export const NotionPage: React.FC<types.PageProps> = ({
     return <Page404 site={site} pageId={pageId} error={error} />
   }
 
+  const canonicalPageUrl =
+    !config.isDev && getCanonicalPageUrl(site, recordMap)(pageId)
   const title = getBlockTitle(block, recordMap) || site.name
 
   console.log('notion page', {
@@ -228,9 +234,6 @@ export const NotionPage: React.FC<types.PageProps> = ({
     g.block = block
   }
 
-  const canonicalPageUrl =
-    !config.isDev && getCanonicalPageUrl(site, recordMap)(pageId)
-
   const socialImage = mapImageUrl(
     getPageProperty<string>('Social Image', block, recordMap) ||
       (block as PageBlock).format?.page_cover ||
@@ -242,6 +245,16 @@ export const NotionPage: React.FC<types.PageProps> = ({
     getPageProperty<string>('Description', block, recordMap) ||
     config.description
 
+
+  const disqus =<DiscussionEmbed
+    shortname={config.disqusShortname}
+    config={ {
+      url: (canonicalPageUrl ? canonicalPageUrl : ""),
+      title: title
+    } }
+  />
+
+
   return (
     <>
       <PageHead
@@ -278,6 +291,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
         mapImageUrl={mapImageUrl}
         searchNotion={config.isSearchEnabled ? searchNotion : null}
         pageAside={pageAside}
+        pageFooter={pageId === site.rootNotionPageId ? null : (config.disqusShortname ? disqus : null)}
         footer={footer}
       />
 

components/PageActions.tsx

@@ -30,6 +30,7 @@ export const PageActions: React.FC<{ tweet: string }> = ({ tweet }) => {
       >
         <AiOutlineRetweet />
       </a>
+
     </div>
   )
 }

lib/config.ts

@@ -61,7 +61,7 @@ export const youtube: string | null = getSiteConfig('youtube', null)
 export const linkedin: string | null = getSiteConfig('linkedin', null)
 export const newsletter: string | null = getSiteConfig('newsletter', null)
 export const zhihu: string | null = getSiteConfig('zhihu', null)
-
+export const privacyPolicy : string | null = getSiteConfig('privacyPolicy', null)
 export const getMastodonHandle = (): string | null => {
   if (!mastodon) {
     return null
@@ -109,6 +109,9 @@ export const navigationLinks: Array<NavigationLink | null> = getSiteConfig(
   null
 )
 
+export const googleAnalyticsId : string | null = getSiteConfig('googleAnalyticsId', null)
+export const disqusShortname : string | null = getSiteConfig('disqusShortname', null)
+
 // Optional site search
 export const isSearchEnabled: boolean = getSiteConfig('isSearchEnabled', true)
 
@@ -167,6 +170,8 @@ export const fathomConfig = fathomId
     }
   : undefined
 
+
+
 export const posthogId = process.env.NEXT_PUBLIC_POSTHOG_ID
 export const posthogConfig: posthog.Config = {
   api_host: 'https://app.posthog.com'

lib/map-page-url.ts

@@ -18,7 +18,7 @@ export const mapPageUrl =
       return createUrl('/', searchParams)
     } else {
       return createUrl(
-        `/${getCanonicalPageId(pageUuid, recordMap, { uuid })}`,
+        `/post/${getCanonicalPageId(pageUuid, recordMap, { uuid })}`,
         searchParams
       )
     }
@@ -32,7 +32,7 @@ export const getCanonicalPageUrl =
     if (uuidToId(pageId) === site.rootNotionPageId) {
       return `https://${site.domain}`
     } else {
-      return `https://${site.domain}/${getCanonicalPageId(pageUuid, recordMap, {
+      return `https://${site.domain}/post/${getCanonicalPageId(pageUuid, recordMap, {
         uuid
       })}`
     }

lib/resolve-notion-page.ts

@@ -12,8 +12,11 @@ export async function resolveNotionPage(domain: string, rawPageId?: string) {
   let recordMap: ExtendedRecordMap
 
   if (rawPageId && rawPageId !== 'index') {
-    pageId = parsePageId(rawPageId)
-
+    if (rawPageId.substring(0,5) === "post/") {
+      pageId = parsePageId(rawPageId.substring(6))
+    } else {
+      pageId = parsePageId(rawPageId)
+    }
     if (!pageId) {
       // check if the site configuration provides an override or a fallback for
       // the page's URI

lib/site-config.ts

@@ -17,6 +17,10 @@ export interface SiteConfig {
   youtube?: string
   zhihu?: string
   mastodon?: string;
+  privacyPolicy?: string;
+
+  googleAnalyticsId?: string | null
+  disqusShortname?: string | null
 
   defaultPageIcon?: string | null
   defaultPageCover?: string | null