jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace next-seo with custom header

Browse Source
This commit is contained in:
Timothy Lin
2021-06-22 23:51:41 +08:00
parent 322ddc4a2d
commit 04ad7617de
11 changed files with 50 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
components/SEO.js
View File

@@ -1,53 +1,31 @@
import { NextSeo, ArticleJsonLd } from 'next-seo'
import Head from 'next/head'
import { useRouter } from 'next/router'
import siteMetadata from '@/data/siteMetadata'
export const SEO = {
title: siteMetadata.title,
description: siteMetadata.description,
openGraph: {
type: 'website',
locale: siteMetadata.language,
url: siteMetadata.siteUrl,
title: siteMetadata.title,
description: siteMetadata.description,
images: [
{
url: `${siteMetadata.siteUrl}${siteMetadata.socialBanner}`,
alt: siteMetadata.title,
width: 1200,
height: 600,
},
],
},
twitter: {
handle: siteMetadata.twitter,
site: siteMetadata.twitter,
cardType: 'summary_large_image',
},
additionalMetaTags: [
{
name: 'author',
content: siteMetadata.author,
},
],
}
export const PageSeo = ({ title, description, url }) => {
export const PageSeo = ({ title, description }) => {
const router = useRouter()
return (
<NextSeo
title={`${title} – ${siteMetadata.title}`}
description={description}
canonical={url}
openGraph={{
url,
title,
description,
}}
/>
<Head>
<title>{`${title}`}</title>
<meta name="robots" content="follow, index" />
<meta name="description" content={description} />
<meta property="og:url" content={`${siteMetadata.siteUrl}${router.asPath}`} />
<meta property="og:type" content="website" />
<meta property="og:site_name" content={siteMetadata.title} />
<meta property="og:description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:image" content={`${siteMetadata.siteUrl}${siteMetadata.socialBanner}`} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content={siteMetadata.twitter} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={`${siteMetadata.siteUrl}${siteMetadata.socialBanner}`} />
</Head>
)
}
export const BlogSeo = ({ title, summary, date, lastmod, url, tags, images = [] }) => {
export const BlogSeo = ({ title, summary, date, lastmod, images = [] }) => {
const router = useRouter()
const publishedAt = new Date(date).toISOString()
const modifiedAt = new Date(lastmod || date).toISOString()
let imagesArr =
@@ -66,40 +44,27 @@ export const BlogSeo = ({ title, summary, date, lastmod, url, tags, images = []
return (
<>
<NextSeo
title={`${title} – ${siteMetadata.title}`}
description={summary}
canonical={url}
openGraph={{
type: 'article',
article: {
publishedTime: publishedAt,
modifiedTime: modifiedAt,
authors: [`${siteMetadata.siteUrl}/about`],
tags,
},
url,
title,
description: summary,
images: featuredImages,
}}
additionalMetaTags={[
{
name: 'twitter:image',
content: featuredImages[0].url,
},
]}
/>
<ArticleJsonLd
authorName={siteMetadata.author}
dateModified={modifiedAt}
datePublished={publishedAt}
description={summary}
images={featuredImages}
publisherName={siteMetadata.author}
title={title}
url={url}
/>
<Head>
<title>{`${title}`}</title>
<meta name="robots" content="follow, index" />
<meta name="description" content={summary} />
<meta property="og:url" content={`${siteMetadata.siteUrl}${router.asPath}`} />
<meta property="og:type" content="article" />
<meta property="og:site_name" content={siteMetadata.title} />
<meta property="og:description" content={summary} />
<meta property="og:title" content={title} />
{featuredImages.map((img) => (
<meta property="og:image" content={img.url} key={img.url} />
))}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content={siteMetadata.twitter} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={summary} />
<meta name="twitter:image" content={featuredImages[0].url} />
{date && <meta property="article:published_time" content={publishedAt} />}
{lastmod && <meta property="article:modified_time" content={modifiedAt} />}
<link rel="canonical" href={`${siteMetadata.siteUrl}${router.asPath}`} />
</Head>
</>
)
}

6
layouts/AuthorLayout.js
View File

@@ -7,11 +7,7 @@ export default function AuthorLayout({ children, frontMatter }) {
return (
<>
<PageSeo
title={`About - ${name}`}
description={`About me - ${name}`}
url={`${siteMetadata.siteUrl}/about`}
/>
<PageSeo title={`About - ${name}`} description={`About me - ${name}`} />
<div className="divide-y">
<div className="pt-6 pb-8 space-y-2 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">

5
package-lock.json generated
View File

@@ -5397,11 +5397,6 @@
}
}
},
"next-seo": {
"version": "4.24.0",
"resolved": "https://registry.npmjs.org/next-seo/-/next-seo-4.24.0.tgz",
"integrity": "sha512-9VQXfXAelhE+hAWzJ4azigQaW3FPX0kU0eYKFQXKsQjgY7AWtukjRGXls0oSIk8khhDJwmCt46EwsO9n5DDW6Q=="
},
"next-themes": {
"version": "0.0.14",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.0.14.tgz",

1
package.json
View File

@@ -19,7 +19,6 @@
"image-size": "1.0.0",
"next": "10.2.3",
"next-mdx-remote": "^3.0.1",
"next-seo": "4.24.0",
"next-themes": "^0.0.14",
"postcss": "^8.2.15",
"preact": "^10.5.13",

3
pages/_app.js
View File

@@ -1,10 +1,8 @@
import '@/css/tailwind.css'
import { ThemeProvider } from 'next-themes'
import { DefaultSeo } from 'next-seo'
import Head from 'next/head'
import { SEO } from '@/components/SEO'
import LayoutWrapper from '@/components/LayoutWrapper'
export default function App({ Component, pageProps }) {
@@ -13,7 +11,6 @@ export default function App({ Component, pageProps }) {
<Head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
</Head>
<DefaultSeo {...SEO} />
<LayoutWrapper>
<Component {...pageProps} />
</LayoutWrapper>

8
pages/blog.js
View File

@@ -3,7 +3,7 @@ import siteMetadata from '@/data/siteMetadata'
import ListLayout from '@/layouts/ListLayout'
import { PageSeo } from '@/components/SEO'
export const POSTS_PER_PAGE = 10
export const POSTS_PER_PAGE = 5
export async function getStaticProps() {
const posts = await getAllFilesFrontMatter('blog')
@@ -19,11 +19,7 @@ export async function getStaticProps() {
export default function Blog({ posts, initialDisplayPosts, pagination }) {
return (
<>
<PageSeo
title={`Blog - ${siteMetadata.author}`}
description={siteMetadata.description}
url={`${siteMetadata.siteUrl}/blog`}
/>
<PageSeo title={`Blog - ${siteMetadata.author}`} description={siteMetadata.description} />
<ListLayout
posts={posts}
initialDisplayPosts={initialDisplayPosts}

6
pages/blog/page/[page].js
View File

@@ -44,11 +44,7 @@ export async function getStaticProps(context) {
export default function PostPage({ posts, initialDisplayPosts, pagination }) {
return (
<>
<PageSeo
title={siteMetadata.title}
description={siteMetadata.description}
url={`${siteMetadata.siteUrl}/blog/${pagination.currentPage}`}
/>
<PageSeo title={siteMetadata.title} description={siteMetadata.description} />
<ListLayout
posts={posts}
initialDisplayPosts={initialDisplayPosts}

6
pages/index.js
View File

@@ -16,11 +16,7 @@ export async function getStaticProps() {
export default function Home({ posts }) {
return (
<>
<PageSeo
title={siteMetadata.title}
description={siteMetadata.description}
url={siteMetadata.siteUrl}
/>
<PageSeo title={siteMetadata.title} description={siteMetadata.description} />
<div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="pt-6 pb-8 space-y-2 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">

6
pages/projects.js
View File

@@ -8,11 +8,7 @@ import { PageSeo } from '@/components/SEO'
export default function Projects() {
return (
<>
<PageSeo
title={`Projects - ${siteMetadata.author}`}
description={siteMetadata.description}
url={`${siteMetadata.siteUrl}/projects`}
/>
<PageSeo title={`Projects - ${siteMetadata.author}`} description={siteMetadata.description} />
<div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="pt-6 pb-8 space-y-2 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">

6
pages/tags.js
View File

@@ -15,11 +15,7 @@ export default function Tags({ tags }) {
const sortedTags = Object.keys(tags).sort((a, b) => tags[b] - tags[a])
return (
<>
<PageSeo
title={`Tags - ${siteMetadata.author}`}
description="Things I blog about"
url={`${siteMetadata.siteUrl}/tags`}
/>
<PageSeo title={`Tags - ${siteMetadata.author}`} description="Things I blog about" />
<div className="flex flex-col items-start justify-start divide-y divide-gray-200 dark:divide-gray-700 md:justify-center md:items-center md:divide-y-0 md:flex-row md:space-x-6 md:mt-24">
<div className="pt-6 pb-8 space-x-2 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 md:border-r-2 md:px-6">

1
pages/tags/[tag].js
View File

@@ -46,7 +46,6 @@ export default function Tag({ posts, tag }) {
<PageSeo
title={`${tag} - ${siteMetadata.title}`}
description={`${tag} tags - ${siteMetadata.title}`}
url={`${siteMetadata.siteUrl}/tags/${tag}`}
/>
<ListLayout posts={posts} title={title} />
</>