feat: add PageSocial aside for non-article pages

2026-05-13 15:09:47 +00:00 · 2021-01-30 21:13:34 -05:00
parent 88e7fdc438
commit b9c132b329
5 changed files with 209 additions and 4 deletions
--- 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
--- 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 (
--- a/components/PageSocial.module.css
+++ 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;
+  }
+}
--- a/components/PageSocial.tsx
+++ 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>
+  )
+}