diff --git a/components/Footer.tsx b/components/Footer.tsx index 9500ce7fab..04c3005857 100644 --- a/components/Footer.tsx +++ b/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() {
+ {config.discord_invite && ( + + + + )} {config.twitter && ( + ) + }, + + config.youtube && { + name: 'youtube', + href: `https://www.youtube.com/${config.youtube}`, + title: `YouTube ${config.youtube}`, + icon: ( + + ) + }, + config.twitter && { name: 'twitter', href: `https://twitter.com/${config.twitter}`, title: `Twitter @${config.twitter}`, icon: ( - - - + ) }, @@ -29,9 +54,7 @@ const socialLinks: SocialLink[] = [ href: `https://github.com/${config.github}`, title: `GitHub @${config.github}`, icon: ( - - - + ) }, @@ -40,9 +63,7 @@ const socialLinks: SocialLink[] = [ href: `https://www.linkedin.com/in/${config.linkedin}`, title: `LinkedIn ${config.author}`, icon: ( - - - + ) }, @@ -57,16 +78,6 @@ const socialLinks: SocialLink[] = [ ) }, - config.youtube && { - name: 'youtube', - href: `https://www.youtube.com/${config.youtube}`, - title: `YouTube ${config.youtube}`, - icon: ( - - - - ) - } ].filter(Boolean) export function PageSocial() { diff --git a/components/styles.module.css b/components/styles.module.css index f5f636cb37..53532246da 100644 --- a/components/styles.module.css +++ b/components/styles.module.css @@ -91,6 +91,10 @@ color: #2795e9; } +.discord:hover { + color: #5865f2; +} + .twitter:hover { color: #2795e9; } diff --git a/lib/config.ts b/lib/config.ts index 119f375cf2..e4d792ad10 100644 --- a/lib/config.ts +++ b/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) { diff --git a/lib/site-config.ts b/lib/site-config.ts index fd76b0abab..b5b638d0ba 100644 --- a/lib/site-config.ts +++ b/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 diff --git a/package.json b/package.json index 4dc3cb76d2..9d7ba270ef 100644 --- a/package.json +++ b/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": { diff --git a/pages/_document.tsx b/pages/_document.tsx index 77a5ae7766..60cb33af83 100644 --- a/pages/_document.tsx +++ b/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() { diff --git a/site.config.ts b/site.config.ts index cded79c3bf..5161fb65d6 100644 --- a/site.config.ts +++ b/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' // } // ] })