Enhancement: Discord Added for Social links and footer and use react-icons instead

components/Footer.tsx

@@ -1,13 +1,19 @@
-import { FaEnvelopeOpenText } from '@react-icons/all-files/fa/FaEnvelopeOpenText'
-import { FaGithub } from '@react-icons/all-files/fa/FaGithub'
-import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin'
-import { FaMastodon } from '@react-icons/all-files/fa/FaMastodon'
-import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
-import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube'
-import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
-import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
-import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
 import * as React from 'react'
+import /* Font Awesome */
+{ 
+  FaDiscord,
+  FaEnvelopeOpenText,
+  FaGithub,
+  FaLinkedin,
+  FaMastodon,
+  FaTwitter,
+  FaYoutube,
+  FaZhihu} from "react-icons/fa";
+import /* Ionicons 5 */
+{ 
+  IoMoonSharp,
+  IoSunnyOutline
+} from 'react-icons/io5'
 
 import * as config from '@/lib/config'
 import { useDarkMode } from '@/lib/use-dark-mode'
@@ -54,6 +60,17 @@ export function FooterImpl() {
       </div>
 
       <div className={styles.social}>
+        {config.discord_invite && (
+          <a
+            className={styles.discord}
+            href={`${config.discord_invite}`}
+            title={`${config.discord} on Discord`}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <FaDiscord />
+          </a>
+        )}
         {config.twitter && (
           <a
             className={styles.twitter}

components/NotionPageHeader.tsx

@@ -1,8 +1,11 @@
 import type * as types from 'notion-types'
-import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
-import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
 import cs from 'classnames'
 import * as React from 'react'
+import /* Ionicons 5 */
+{ 
+  IoMoonSharp,
+  IoSunnyOutline
+} from 'react-icons/io5'
 import { Breadcrumbs, Header, Search, useNotionContext } from 'react-notion-x'
 
 import { isSearchEnabled, navigationLinks, navigationStyle } from '@/lib/config'

components/PageActions.tsx

@@ -1,5 +1,11 @@
-import { AiOutlineRetweet } from '@react-icons/all-files/ai/AiOutlineRetweet'
-import { IoHeartOutline } from '@react-icons/all-files/io5/IoHeartOutline'
+import /* Ant Design Icons */
+{ 
+  AiOutlineRetweet
+} from 'react-icons/ai'
+import /* Ionicons 5 */
+{ 
+  IoHeartOutline
+} from 'react-icons/io5'
 
 import styles from './styles.module.css'
 

components/PageSocial.module.css

@@ -79,6 +79,13 @@
   border-color: #3b5998;
 }
 
+.discord .actionBgPane {
+  background: #5865f2;
+}
+.discord:hover {
+  border-color: #5865f2;
+}
+
 .twitter .actionBgPane {
   background: #2795e9;
 }

components/PageSocial.tsx

@@ -1,5 +1,14 @@
 import type * as React from 'react'
 import cs from 'classnames'
+import 
+{ /* Font Awesome Icons */
+  FaDiscord,
+  //FaMastodon,
+  FaGithub,
+  FaLinkedin,
+  FaTwitter,
+  FaYoutube,
+} from "react-icons/fa";
 
 import * as config from '@/lib/config'
 
@@ -13,14 +22,30 @@ interface SocialLink {
 }
 
 const socialLinks: SocialLink[] = [
+  config.discord && {
+    name: 'discord',
+    href: `${config.discord_invite}`, // Invite URL of the Discord server
+    title: `${config.discord} on Discord`, // Name of the Discord server
+    icon: (
+      <FaDiscord />
+    )
+  },
+
+  config.youtube && {
+    name: 'youtube',
+    href: `https://www.youtube.com/${config.youtube}`,
+    title: `YouTube ${config.youtube}`,
+    icon: (
+      <FaYoutube />
+    )
+  },
+
   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>
+      <FaTwitter />
     )
   },
 
@@ -29,9 +54,7 @@ const socialLinks: SocialLink[] = [
     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>
+      <FaGithub />
     )
   },
 
@@ -40,9 +63,7 @@ const socialLinks: SocialLink[] = [
     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>
+      <FaLinkedin />
     )
   },
 
@@ -57,16 +78,6 @@ const socialLinks: SocialLink[] = [
     )
   },
 
-  config.youtube && {
-    name: 'youtube',
-    href: `https://www.youtube.com/${config.youtube}`,
-    title: `YouTube ${config.youtube}`,
-    icon: (
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
-        <path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z' />
-      </svg>
-    )
-  }
 ].filter(Boolean)
 
 export function PageSocial() {

components/styles.module.css

@@ -91,6 +91,10 @@
   color: #2795e9;
 }
 
+.discord:hover {
+  color: #5865f2;
+}
+
 .twitter:hover {
   color: #2795e9;
 }

lib/config.ts

@@ -63,6 +63,8 @@ export const youtube: string | undefined = getSiteConfig('youtube')
 export const linkedin: string | undefined = getSiteConfig('linkedin')
 export const newsletter: string | undefined = getSiteConfig('newsletter')
 export const zhihu: string | undefined = getSiteConfig('zhihu')
+export const discord: string | undefined = getSiteConfig('discord')
+export const discord_invite: string | undefined = getSiteConfig('discord_invite')
 
 export const getMastodonHandle = (): string | undefined => {
   if (!mastodon) {

lib/site-config.ts

@@ -10,6 +10,8 @@ export interface SiteConfig {
   description?: string
   language?: string
 
+  discord?: string
+  discord_invite?:  string
   twitter?: string
   github?: string
   linkedin?: string

package.json

@@ -36,6 +36,8 @@
     "@keyvhq/redis": "^1.6.10",
     "@react-icons/all-files": "^4.1.0",
     "classnames": "^2.5.1",
+    "@vercel/og": "^0.0.19",
+    "date-fns": "^2.28.0",
     "expiry-map": "^2.0.0",
     "fathom-client": "^3.4.1",
     "ky": "^1.8.1",
@@ -54,6 +56,8 @@
     "react-notion-x": "^7.7.0",
     "react-tweet": "^3.2.2",
     "react-use": "^17.6.0",
+    "react-icons": "^4.7.1",
+    "react-tweet-embed": "^2.0.0",
     "rss": "^1.2.2"
   },
   "devDependencies": {

pages/_document.tsx

@@ -1,5 +1,5 @@
-import { IconContext } from '@react-icons/all-files'
 import Document, { Head, Html, Main, NextScript } from 'next/document'
+import { IconContext } from 'react-icons'
 
 export default class MyDocument extends Document {
   override render() {

site.config.ts

@@ -1,55 +1,78 @@
 import { siteConfig } from './lib/site-config'
 
 export default siteConfig({
-  // the site's root Notion page (required)
+  /* (required)
+    The site's root Notion page
+  */
   rootNotionPageId: '7875426197cf461698809def95960ebf',
 
-  // if you want to restrict pages to a single notion workspace (optional)
-  // (this should be a Notion ID; see the docs for how to extract this)
+  /* (optional)
+    if you want to restrict pages to a single notion workspace
+    (this should be a Notion ID; see the docs for how to extract this) 
+  */
   rootNotionSpaceId: null,
 
-  // basic site info (required)
+  /* (required)
+    Basic site info
+  */
   name: 'Next.js Notion Starter Kit',
   domain: 'nextjs-notion-starter-kit.transitivebullsh.it',
   author: 'Travis Fischer',
 
-  // open graph metadata (optional)
+  /* (optional)
+    Open graph metadata
+  */
   description: 'Example Next.js Notion Starter Kit Site',
 
-  // social usernames (optional)
+  /* (optional)
+    Social usernames
+  */
   twitter: 'transitive_bs',
   github: 'transitive-bullshit',
   linkedin: 'fisch2',
-  // mastodon: '#', // optional mastodon profile URL, provides link verification
-  // newsletter: '#', // optional newsletter URL
-  // youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX`
+  // discord: 'My Server',  /* Server Name */
+  // discord_invite: 'https://discord.gg/zf6g5KQ6H4', /* Discord invite link */
+  // mastodon: '#', /* Optional mastodon profile URL, provides link verification */
+  // newsletter: '#', /* Optional newsletter URL */
+  // youtube: '#', /* Optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX` */
 
-  // default notion icon and cover images for site-wide consistency (optional)
-  // page-specific values will override these site-wide defaults
+  /* (optional)
+    Default notion icon and cover images for site-wide consistency.
+    Page-specific values will override these site-wide defaults.
+  */
   defaultPageIcon: null,
   defaultPageCover: null,
   defaultPageCoverPosition: 0.5,
 
-  // whether or not to enable support for LQIP preview images (optional)
+  /* (optional)
+    Whether or not to enable support for LQIP preview images.
+  */
   isPreviewImageSupportEnabled: true,
 
-  // whether or not redis is enabled for caching generated preview images (optional)
-  // NOTE: if you enable redis, you need to set the `REDIS_HOST` and `REDIS_PASSWORD`
-  // environment variables. see the readme for more info
+  /* (optional)
+    Whether or not redis is enabled for caching generated preview images.
+    NOTE: if you enable redis, you need to set the `REDIS_HOST` 
+    and `REDIS_PASSWORD` environment variables.
+    See the readme for more info.
+  */
   isRedisEnabled: false,
 
-  // map of notion page IDs to URL paths (optional)
-  // any pages defined here will override their default URL paths
-  // example:
-  //
+  /* (optional)
+    Map of notion page IDs to URL paths.
+    Any pages defined here will override their default URL paths.
+    Example:
+  */
   // pageUrlOverrides: {
   //   '/foo': '067dd719a912471ea9a3ac10710e7fdf',
   //   '/bar': '0be6efce9daf42688f65c76b89f8eb27'
   // }
   pageUrlOverrides: null,
 
-  // whether to use the default notion navigation style or a custom one with links to
-  // important pages. To use `navigationLinks`, set `navigationStyle` to `custom`.
+  /* 
+    Whether to use the default notion navigation style
+    or a custom one with links to important pages.
+    To use `navigationLinks`, set `navigationStyle` to `custom`.
+  */
   navigationStyle: 'default'
   // navigationStyle: 'custom',
   // navigationLinks: [
@@ -59,7 +82,7 @@ export default siteConfig({
   //   },
   //   {
   //     title: 'Contact',
-  //     pageId: '6a29ebcb935a4f0689fe661ab5f3b8d1'
+  //     url: 'https://twitter.com/transitive_bs'
   //   }
   // ]
 })