feat: add twitter like / retweet actions

components/NotionPage.tsx

@@ -15,6 +15,7 @@ import { getBlockTitle } 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'
+import { getPageTweet } from 'lib/get-page-tweet'
 import { searchNotion } from 'lib/search-notion'
 import * as types from 'lib/types'
 import * as config from 'lib/config'
@@ -25,6 +26,7 @@ import { CustomHtml } from './CustomHtml'
 import { Loading } from './Loading'
 import { Page404 } from './Page404'
 import { PageHead } from './PageHead'
+import { PageActions } from './PageActions'
 import { Footer } from './Footer'
 import { ReactUtterances } from './ReactUtterances'
 
@@ -96,6 +98,7 @@ 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 on blog post pages
   if (isBlogPost) {
@@ -109,6 +112,11 @@ export const NotionPage: React.FC<types.PageProps> = ({
         />
       )
     }
+
+    const tweet = getPageTweet(block, recordMap)
+    if (tweet) {
+      pageAside = <PageActions tweet={tweet} />
+    }
   }
 
   return (
@@ -205,6 +213,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
         mapImageUrl={mapNotionImageUrl}
         searchNotion={searchNotion}
         pageFooter={comments}
+        pageAside={pageAside}
         footer={<Footer isDarkMode={isDarkMode} setDarkMode={setDarkMode} />}
       />
 

components/PageActions.tsx

@@ -1,9 +1,31 @@
 import React from 'react'
+import { IoHeartOutline } from 'react-icons/io5'
+import { AiOutlineRetweet } from 'react-icons/ai'
 
-import * as types from 'lib/types'
+import styles from './styles.module.css'
 
-// import styles from './styles.module.css'
+export const PageActions: React.FC<{ tweet: string }> = ({ tweet }) => {
+  return (
+    <div className={styles.pageActions}>
+      <a
+        className={styles.likeTweet}
+        href={`https://twitter.com/intent/like?tweet_id=${tweet}`}
+        target='_blank'
+        rel='noopener noreferrer'
+        title='Like this post on Twitter'
+      >
+        <IoHeartOutline />
+      </a>
 
-export const PageHead: React.FC<types.PageProps> = ({ site }) => {
-  return null
+      <a
+        className={styles.retweet}
+        href={`https://twitter.com/intent/retweet?tweet_id=${tweet}`}
+        target='_blank'
+        rel='noopener noreferrer'
+        title='Retweet this post on Twitter'
+      >
+        <AiOutlineRetweet />
+      </a>
+    </div>
+  )
 }

components/styles.module.css

@@ -119,3 +119,39 @@
     left: -60px;
   }
 }
+
+.pageActions {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 6px 12px 12px;
+}
+
+.pageActions a {
+  cursor: pointer;
+  font-size: 24px;
+  display: inline-flex;
+  padding: 12px;
+  margin-right: 1vw;
+  border-radius: 50%;
+  background: transparent;
+  transition: all 250ms ease-out;
+}
+
+.pageActions a:last-of-type {
+  margin-right: 0;
+}
+
+.pageActions a:hover {
+  transition: all 50ms ease-out;
+}
+
+.likeTweet:hover {
+  background: #f6e3e8;
+  color: #e0265e;
+}
+
+.retweet:hover {
+  color: #19bf64;
+  background: #e5f2e8;
+}