Skip to content

Commit fb02090

Browse files
nijamaDevnijamaDev
committed
react-icons for Social links and footer
- replaced @react-icons/all files with react-icons - use react icons instead of pure svg for the social links - Added Discord to the social links and footer
1 parent b858110 commit fb02090

File tree

11 files changed

+100
-38
lines changed

11 files changed

+100
-38
lines changed

‎components/Footer.tsx

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
1-
import { FaEnvelopeOpenText } from '@react-icons/all-files/fa/FaEnvelopeOpenText'
2-
import { FaGithub } from '@react-icons/all-files/fa/FaGithub'
3-
import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin'
4-
import { FaMastodon } from '@react-icons/all-files/fa/FaMastodon'
5-
import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
6-
import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube'
7-
import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
8-
import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
9-
import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
101
import * as React from 'react'
112

3+
import /* Ionicons 5 */
4+
{
5+
IoMoonSharp,
6+
IoSunnyOutline
7+
} from 'react-icons/io5'
8+
9+
import /* Font Awesome */
10+
{
11+
FaDiscord,
12+
FaYoutube,
13+
FaTwitter,
14+
FaMastodon,
15+
FaGithub,
16+
FaLinkedin,
17+
FaZhihu,
18+
FaEnvelopeOpenText
19+
} from "react-icons/fa";
20+
1221
import * as config from '@/lib/config'
1322
import { useDarkMode } from '@/lib/use-dark-mode'
1423

@@ -54,6 +63,17 @@ export function FooterImpl() {
5463
</div>
5564

5665
<div className={styles.social}>
66+
{config.discord_invite && (
67+
<a
68+
className={styles.discord}
69+
href={`${config.discord_invite}`}
70+
title={`${config.discord} on Discord`}
71+
target='_blank'
72+
rel='noopener noreferrer'
73+
>
74+
<FaDiscord />
75+
</a>
76+
)}
5777
{config.twitter && (
5878
<a
5979
className={styles.twitter}

‎components/NotionPageHeader.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import type * as types from 'notion-types'
2-
import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
3-
import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
2+
import /* Ionicons 5 */
3+
{
4+
IoMoonSharp,
5+
IoSunnyOutline
6+
} from 'react-icons/io5'
47
import cs from 'classnames'
58
import * as React from 'react'
69
import { Breadcrumbs, Header, Search, useNotionContext } from 'react-notion-x'

‎components/PageActions.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1-
import { AiOutlineRetweet } from '@react-icons/all-files/ai/AiOutlineRetweet'
2-
import { IoHeartOutline } from '@react-icons/all-files/io5/IoHeartOutline'
1+
import /* Ant Design Icons */
2+
{
3+
AiOutlineRetweet
4+
} from 'react-icons/ai'
5+
import /* Ionicons 5 */
6+
{
7+
IoHeartOutline
8+
} from 'react-icons/io5'
39

410
import styles from './styles.module.css'
511

‎components/PageSocial.module.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,13 @@
7979
border-color: #3b5998;
8080
}
8181

82+
.discord .actionBgPane {
83+
background: #5865f2;
84+
}
85+
.discord:hover {
86+
border-color: #5865f2;
87+
}
88+
8289
.twitter .actionBgPane {
8390
background: #2795e9;
8491
}

‎components/PageSocial.tsx

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,15 @@ import cs from 'classnames'
44
import * as config from '@/lib/config'
55

66
import styles from './PageSocial.module.css'
7-
7+
import
8+
{ /* Font Awesome Icons */
9+
FaDiscord,
10+
FaYoutube,
11+
FaTwitter,
12+
//FaMastodon,
13+
FaGithub,
14+
FaLinkedin,
15+
} from "react-icons/fa";
816
interface SocialLink {
917
name: string
1018
title: string
@@ -13,14 +21,30 @@ interface SocialLink {
1321
}
1422

1523
const socialLinks: SocialLink[] = [
24+
config.discord && {
25+
name: 'discord',
26+
href: `${config.discord_invite}`, // Invite URL of the Discord server
27+
title: `${config.discord} on Discord`, // Name of the Discord server
28+
icon: (
29+
<FaDiscord />
30+
)
31+
},
32+
33+
config.youtube && {
34+
name: 'youtube',
35+
href: `https://www.youtube.com/${config.youtube}`,
36+
title: `YouTube ${config.youtube}`,
37+
icon: (
38+
<FaYoutube />
39+
)
40+
},
41+
1642
config.twitter && {
1743
name: 'twitter',
1844
href: `https://twitter.com/${config.twitter}`,
1945
title: `Twitter @${config.twitter}`,
2046
icon: (
21-
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
22-
<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' />
23-
</svg>
47+
<FaTwitter />
2448
)
2549
},
2650

@@ -29,9 +53,7 @@ const socialLinks: SocialLink[] = [
2953
href: `https://github.com/${config.github}`,
3054
title: `GitHub @${config.github}`,
3155
icon: (
32-
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
33-
<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>
34-
</svg>
56+
<FaGithub />
3557
)
3658
},
3759

@@ -40,9 +62,7 @@ const socialLinks: SocialLink[] = [
4062
href: `https://www.linkedin.com/in/${config.linkedin}`,
4163
title: `LinkedIn ${config.author}`,
4264
icon: (
43-
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
44-
<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' />
45-
</svg>
65+
<FaLinkedin />
4666
)
4767
},
4868

@@ -57,16 +77,6 @@ const socialLinks: SocialLink[] = [
5777
)
5878
},
5979

60-
config.youtube && {
61-
name: 'youtube',
62-
href: `https://www.youtube.com/${config.youtube}`,
63-
title: `YouTube ${config.youtube}`,
64-
icon: (
65-
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
66-
<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' />
67-
</svg>
68-
)
69-
}
7080
].filter(Boolean)
7181

7282
export function PageSocial() {

‎components/styles.module.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,10 @@
9090
color: #2795e9;
9191
}
9292

93+
.discord:hover {
94+
color: #5865f2;
95+
}
96+
9397
.twitter:hover {
9498
color: #2795e9;
9599
}

‎lib/config.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,8 @@ export const description: string = getSiteConfig('description', 'Notion Blog')
5454
export const language: string = getSiteConfig('language', 'en')
5555

5656
// social accounts
57+
export const discord: string | null = getSiteConfig('discord', null)
58+
export const discord_invite: string | null = getSiteConfig('discord_invite', null)
5759
export const twitter: string | null = getSiteConfig('twitter', null)
5860
export const mastodon: string | null = getSiteConfig('mastodon', null)
5961
export const github: string | null = getSiteConfig('github', null)

‎lib/site-config.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ export interface SiteConfig {
1010
description?: string
1111
language?: string
1212

13+
discord?: string
14+
discord_invite?: string
1315
twitter?: string
1416
github?: string
1517
linkedin?: string

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@
3535
"@keyvhq/redis": "^1.6.10",
3636
"@react-icons/all-files": "^4.1.0",
3737
"classnames": "^2.5.1",
38+
"@vercel/og": "^0.0.19",
39+
"date-fns": "^2.28.0",
3840
"expiry-map": "^2.0.0",
3941
"fathom-client": "^3.4.1",
4042
"ky": "^1.7.2",
@@ -52,6 +54,8 @@
5254
"react-dom": "^18.2.0",
5355
"react-notion-x": "^7.2.3",
5456
"react-tweet": "^3.2.1",
57+
"react-icons": "^4.7.1",
58+
"react-tweet-embed": "^2.0.0",
5559
"react-use": "^17.4.2",
5660
"rss": "^1.2.2"
5761
},

‎pages/_document.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { IconContext } from '@react-icons/all-files'
21
import Document, { Head, Html, Main, NextScript } from 'next/document'
2+
import { IconContext } from 'react-icons'
33

44
export default class MyDocument extends Document {
55
render() {

‎site.config.ts

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,17 @@ export default siteConfig({
1616
// open graph metadata (optional)
1717
description: 'Example Next.js Notion Starter Kit Site',
1818

19-
// social usernames (optional)
19+
/* (optional)
20+
Social usernames
21+
*/
2022
twitter: 'transitive_bs',
2123
github: 'transitive-bullshit',
2224
linkedin: 'fisch2',
23-
// mastodon: '#', // optional mastodon profile URL, provides link verification
24-
// newsletter: '#', // optional newsletter URL
25-
// youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX`
25+
// discord: 'My Server', /* Server Name */
26+
// discord_invite: 'https://discord.gg/zf6g5KQ6H4', /* Discord invite link */
27+
// mastodon: '#', /* Optional mastodon profile URL, provides link verification */
28+
// newsletter: '#', /* Optional newsletter URL */
29+
// youtube: '#', /* Optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX` */
2630

2731
// default notion icon and cover images for site-wide consistency (optional)
2832
// page-specific values will override these site-wide defaults

0 commit comments

Comments
 (0)