d0zingcat/nextjs-notion-starter-kit
1
0
Fork 0
mirror of https://github.com/d0zingcat/nextjs-notion-starter-kit.git synced 2026-05-17 15:10:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix social descriptions

Browse Source
This commit is contained in:
Travis Fischer
2022-03-29 07:26:06 -04:00
parent 79d4cea1b4
commit eb695aa5ec
10 changed files with 69 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/CustomFont.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react'
import Head from 'next/head'
import * as React from 'react'
import * as types from '../lib/types'
export const CustomFont: React.FC<{ site: types.Site }> = ({ site }) => {

10
components/ErrorPage.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react'
import Head from 'next/head'
import { PageHead } from './PageHead'
import styles from './styles.module.css'
@@ -9,14 +8,7 @@ export const ErrorPage: React.FC<{ statusCode: number }> = ({ statusCode }) => {
return (
<>
<PageHead />
<Head>
<meta property='og:site_name' content={title} />
<meta property='og:title' content={title} />
<title>{title}</title>
</Head>
<PageHead title={title} />
<div className={styles.container}>
<main className={styles.main}>

2
components/Footer.tsx
View File

@@ -1,4 +1,4 @@
import * as React from 'react'
import React from 'react'
import { FaTwitter, FaZhihu, FaGithub, FaLinkedin } from 'react-icons/fa'
import { IoSunnyOutline, IoMoonSharp } from 'react-icons/io5'
import * as config from 'lib/config'

2
components/Loading.tsx
View File

@@ -1,4 +1,4 @@
import * as React from 'react'
import React from 'react'
import { LoadingIcon } from './LoadingIcon'
import styles from './styles.module.css'

2
components/LoadingIcon.tsx
View File

@@ -1,4 +1,4 @@
import * as React from 'react'
import React from 'react'
import cs from 'classnames'
import styles from './styles.module.css'

51
components/NotionPage.tsx
View File

@@ -1,5 +1,4 @@
import * as React from 'react'
import Head from 'next/head'
import React from 'react'
import Link from 'next/link'
import Image from 'next/image'
import dynamic from 'next/dynamic'
@@ -154,47 +153,13 @@ export const NotionPage: React.FC<types.PageProps> = ({
}
}}
>
<PageHead site={site} />
<Head>
<meta property='og:title' content={title} />
<meta property='og:site_name' content={site.name} />
<meta name='twitter:title' content={title} />
<meta property='twitter:domain' content={site.domain} />
{config.twitter && (
<meta name='twitter:creator' content={`@${config.twitter}`} />
)}
{socialDescription && (
<>
<meta name='description' content={socialDescription} />
<meta property='og:description' content={socialDescription} />
<meta name='twitter:description' content={socialDescription} />
</>
)}
{socialImage ? (
<>
<meta name='twitter:card' content='summary_large_image' />
<meta name='twitter:image' content={socialImage} />
<meta property='og:image' content={socialImage} />
</>
) : (
<meta name='twitter:card' content='summary' />
)}
{canonicalPageUrl && (
<>
<link rel='canonical' href={canonicalPageUrl} />
<meta property='og:url' content={canonicalPageUrl} />
<meta property='twitter:url' content={canonicalPageUrl} />
</>
)}
<title>{title}</title>
</Head>
<PageHead
site={site}
title={title}
description={socialDescription}
image={socialImage}
url={canonicalPageUrl}
/>
<CustomFont site={site} />

12
components/Page404.tsx
View File

@@ -1,5 +1,4 @@
import Head from 'next/head'
import * as React from 'react'
import React from 'react'
import * as types from 'lib/types'
import { PageHead } from './PageHead'
@@ -10,14 +9,7 @@ export const Page404: React.FC<types.PageProps> = ({ site, pageId, error }) => {
return (
<>
<PageHead site={site} />
<Head>
<meta property='og:site_name' content={title} />
<meta property='og:title' content={title} />
<title>{title}</title>
</Head>
<PageHead site={site} title={title} />
<div className={styles.container}>
<main className={styles.main}>

60
components/PageHead.tsx
View File

@@ -1,10 +1,20 @@
import Head from 'next/head'
import * as React from 'react'
import React from 'react'
import * as types from 'lib/types'
import * as config from 'lib/config'
// TODO: remove duplication between PageHead and NotionPage Head
export const PageHead: React.FC<
types.PageProps & {
title?: string
description?: string
image?: string
url?: string
}
> = ({ site, title, description, image, url }) => {
title = title ?? site?.name
description = description ?? site?.description
export const PageHead: React.FC<types.PageProps> = ({ site }) => {
return (
<Head>
<meta charSet='utf-8' />
@@ -14,15 +24,49 @@ export const PageHead: React.FC<types.PageProps> = ({ site }) => {
content='width=device-width, initial-scale=1, shrink-to-fit=no'
/>
{site?.description && (
<meta name='theme-color' content='#EB625A' />
<meta property='og:type' content='website' />
{site && (
<>
<meta name='description' content={site.description} />
<meta property='og:description' content={site.description} />
<meta property='og:site_name' content={site.name} />
<meta property='twitter:domain' content={site.domain} />
</>
)}
<meta name='theme-color' content='#EB625A' />
<meta property='og:type' content='website' />
{config.twitter && (
<meta name='twitter:creator' content={`@${config.twitter}`} />
)}
{description && (
<>
<meta name='description' content={description} />
<meta property='og:description' content={description} />
<meta name='twitter:description' content={description} />
</>
)}
{image ? (
<>
<meta name='twitter:card' content='summary_large_image' />
<meta name='twitter:image' content={image} />
<meta property='og:image' content={image} />
</>
) : (
<meta name='twitter:card' content='summary' />
)}
{url && (
<>
<link rel='canonical' href={url} />
<meta property='og:url' content={url} />
<meta property='twitter:url' content={url} />
</>
)}
<meta property='og:title' content={title} />
<meta name='twitter:title' content={title} />
<title>{title}</title>
</Head>
)
}

9
lib/config.ts
View File

@@ -51,15 +51,6 @@ export const zhihu: string | null = getSiteConfig('zhihu', null)
export const github: string | null = getSiteConfig('github', null)
export const linkedin: string | null = getSiteConfig('linkedin', null)
export const socialImageTitle: string | null = getSiteConfig(
'socialImageTitle',
null
)
export const socialImageSubtitle: string | null = getSiteConfig(
'socialImageSubtitle',
null
)
// default notion values for site-wide consistency (optional; may be overridden on a per-page basis)
export const defaultPageIcon: string | null = getSiteConfig(
'defaultPageIcon',

6
site.config.js
View File

@@ -8,13 +8,11 @@ export default {
// basic site info (required)
name: 'Transitive Bullshit',
domain: 'transitivebullsh.it',
domain: 'nextjs-notion-starter-kit.transitivebullsh.it',
author: 'Travis Fischer',
// open graph metadata (optional)
description: 'Example site description',
socialImageTitle: 'Transitive Bullshit',
socialImageSubtitle: 'Hello World! 👋',
description: 'Example Next.js Notion Starter Kit Site',
// social usernames (optional)
twitter: 'transitive_bs',