From b9c132b3298f6e75d4d2931af9fed106813e41c8 Mon Sep 17 00:00:00 2001
From: Travis Fischer <fisch0920@gmail.com>
Date: Sat, 30 Jan 2021 21:13:34 -0500
Subject: [PATCH] feat: add PageSocial aside for non-article pages

---
 components/Footer.tsx            |   4 +-
 components/NotionPage.tsx        |   7 +-
 components/PageSocial.module.css | 127 +++++++++++++++++++++++++++++++
 components/PageSocial.tsx        |  71 +++++++++++++++++
 styles/notion.css                |   4 +-
 5 files changed, 209 insertions(+), 4 deletions(-)
 create mode 100644 components/PageSocial.module.css
 create mode 100644 components/PageSocial.tsx

diff --git a/components/Footer.tsx b/components/Footer.tsx
index 28b6d26..aeb70da 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -5,6 +5,8 @@ import * as config from 'lib/config'
 
 import styles from './styles.module.css'
 
+// TODO: merge the data and icons from PageSocial with the social links in Footer
+
 export const Footer: React.FC<{
   isDarkMode: boolean
   toggleDarkMode: () => void
@@ -19,7 +21,7 @@ export const Footer: React.FC<{
 
   return (
     <footer className={styles.footer}>
-      <div className={styles.copyright}>Copyright 2021 Travis Fischer</div>
+      <div className={styles.copyright}>Copyright 2021 {config.author}</div>
 
       <div className={styles.settings}>
         <a
diff --git a/components/NotionPage.tsx b/components/NotionPage.tsx
index afafff3..a395eb0 100644
--- a/components/NotionPage.tsx
+++ b/components/NotionPage.tsx
@@ -12,7 +12,7 @@ import useDarkMode from 'use-dark-mode'
 import { NotionRenderer, Code, Collection, CollectionRow } from 'react-notion-x'
 
 // utils
-import { getBlockTitle } from 'notion-utils'
+import { getBlockTitle, parsePageId } from 'notion-utils'
 import { mapPageUrl, getCanonicalPageUrl } from 'lib/map-page-url'
 import { mapNotionImageUrl } from 'lib/map-image-url'
 import { getPageDescription } from 'lib/get-page-description'
@@ -29,6 +29,7 @@ import { Page404 } from './Page404'
 import { PageHead } from './PageHead'
 import { PageActions } from './PageActions'
 import { Footer } from './Footer'
+import { PageSocial } from './PageSocial'
 import { GitHubShareButton } from './GitHubShareButton'
 import { ReactUtterances } from './ReactUtterances'
 
@@ -112,6 +113,8 @@ export const NotionPage: React.FC<types.PageProps> = ({
   const canonicalPageUrl =
     !config.isDev && getCanonicalPageUrl(site, recordMap)(pageId)
 
+  const isRootPage =
+    parsePageId(block.id) === parsePageId(site.rootNotionPageId)
   const isBlogPost =
     block.type === 'page' && block.parent_table === 'collection'
   const showTableOfContents = !!isBlogPost
@@ -141,6 +144,8 @@ export const NotionPage: React.FC<types.PageProps> = ({
     if (tweet) {
       pageAside = <PageActions tweet={tweet} />
     }
+  } else {
+    pageAside = <PageSocial />
   }
 
   return (
diff --git a/components/PageSocial.module.css b/components/PageSocial.module.css
new file mode 100644
index 0000000..bb16f8d
--- /dev/null
+++ b/components/PageSocial.module.css
@@ -0,0 +1,127 @@
+.pageSocial {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  color: var(--fg-color);
+}
+
+.action {
+  position: relative;
+  border-radius: 50%;
+  border: 2px solid var(--fg-color-6);
+  transition: all 300ms ease-out;
+  width: 3.5em;
+  height: 3.5em;
+  margin: 0 0 1em;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none !important;
+  user-select: none;
+  cursor: pointer;
+}
+
+.action:last-child {
+  margin-bottom: 0;
+}
+
+.actionBg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.actionBg svg {
+  width: 50%;
+  height: 50%;
+  fill: var(--fg-color-6);
+}
+
+.actionBgPane {
+  transition: all 300ms ease-out;
+  border-radius: 50%;
+  width: 0;
+  height: 0;
+}
+
+.action:hover {
+  transition: all 100ms ease-out;
+}
+
+.action:hover .actionBgPane {
+  width: 100%;
+  height: 100%;
+  transition: all 100ms ease-out;
+}
+
+.action:hover svg {
+  transition: fill 100ms ease-out;
+  fill: var(--bg-color);
+}
+
+:global(.dark-mode) .action:hover svg {
+  fill: var(--fg-color);
+}
+
+.facebook .actionBgPane {
+  background: #3b5998;
+}
+.facebook:hover {
+  border-color: #3b5998;
+}
+
+.twitter .actionBgPane {
+  background: #2795e9;
+}
+.twitter:hover {
+  border-color: #2795e9;
+}
+
+.linkedin .actionBgPane {
+  background: #0077b5;
+}
+.linkedin:hover {
+  border-color: #0077b5;
+}
+
+.github .actionBgPane {
+  background: #c9510c;
+}
+.github:hover {
+  border-color: #c9510c;
+}
+
+.medium .actionBgPane {
+  background: #00ab6c;
+}
+.medium:hover {
+  border-color: #00ab6c;
+}
+
+.email .actionBgPane {
+  background: #777;
+}
+.email:hover {
+  border-color: #777;
+}
+
+@media only screen and (max-width: 768px) {
+  .links {
+    position: relative;
+    left: 0.5em;
+    flex-wrap: wrap;
+  }
+
+  .action:last-child {
+    margin-right: 1em;
+  }
+}
diff --git a/components/PageSocial.tsx b/components/PageSocial.tsx
new file mode 100644
index 0000000..2de726c
--- /dev/null
+++ b/components/PageSocial.tsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import cs from 'classnames'
+
+import * as config from 'lib/config'
+
+import styles from './PageSocial.module.css'
+
+interface SocialLink {
+  name: string
+  title: string
+  icon: React.ReactNode
+  href?: string
+}
+
+const socialLinks: SocialLink[] = [
+  config.twitter && {
+    name: 'twitter',
+    href: `https://twitter.com/${config.twitter}`,
+    title: `Twitter @${config.twitter}`,
+    icon: (
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
+        <path d='M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z' />
+      </svg>
+    )
+  },
+
+  config.github && {
+    name: 'github',
+    href: `https://github.com/${config.github}`,
+    title: `GitHub @${config.github}`,
+    icon: (
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
+        <path d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'></path>
+      </svg>
+    )
+  },
+
+  config.linkedin && {
+    name: 'linkedin',
+    href: `https://www.linkedin.com/in/${config.linkedin}`,
+    title: `LinkedIn ${config.author}`,
+    icon: (
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
+        <path d='M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z' />
+      </svg>
+    )
+  }
+].filter(Boolean)
+
+export const PageSocial: React.FC = () => {
+  return (
+    <div className={styles.pageSocial}>
+      {socialLinks.map((action) => (
+        <a
+          className={cs(styles.action, styles[action.name])}
+          href={action.href}
+          key={action.name}
+          title={action.title}
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          <div className={styles.actionBg}>
+            <div className={styles.actionBgPane} />
+          </div>
+
+          <div className={styles.actionBg}>{action.icon}</div>
+        </a>
+      ))}
+    </div>
+  )
+}
diff --git a/styles/notion.css b/styles/notion.css
index c508edc..c64e7be 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -13,13 +13,13 @@
 
 .notion-page {
   margin: 0 12px;
-  width: 720px;
+  width: var(--notion-max-width);
   padding-bottom: calc(max(5vh, 32px)) !important;
   line-height: 1.65;
 }
 
 .index-page {
-  width: 900px;
+  --notion-max-width: 900px;
 }
 
 .notion-text {