Skip to content

Commit 3d6d5ae

Browse files
Ahmad Awais ⚡️amiller-gh
Ahmad Awais ⚡️
authored and
amiller-gh
committed
feat: SEO Component & Application Refactor. (nodejs#68)
* chore: Add description. * chore: Add featured image. * chore: Add URL. * refactor: Consisten punctuation. * refactor: Static alt value for logo. * feat: SEO Component. * refactor: SEO 404 page. * refactor: Separate SEO component. * refactor: Add Title, Author, Desc SEO. * chore: Add gatsby-plugin-canonical-urls. * feat: Auto-generate canonical-urls. * feat: Add common config file. * refactor: Dynamic values via config. * refactor: Meta data arrangment. * fix: Merge Conflicts. * refactor: Remove unused config. * refactor: Config site url val. * fix: Yarn lock file. * fix: Bad test. * fix: Merge Conflicts.
1 parent 6b3282e commit 3d6d5ae

11 files changed

Lines changed: 303 additions & 165 deletions

File tree

‎gatsby-config.js‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,25 @@ if (process.env.ENVIROMENT !== 'production') {
77
// accessToken: process.env.ACCESS_TOKEN,
88
// }
99

10+
const config = require('./src/config')
11+
1012
module.exports = {
1113
pathPrefix: process.env.PATH_PREFIX,
1214
siteMetadata: {
13-
title: 'Node.js',
15+
title: config.title,
16+
description: config.description,
17+
featuredImage: config.featuredImage,
18+
siteUrl: config.siteUrl,
1419
},
1520
plugins: [
1621
'gatsby-plugin-catch-links',
1722
'gatsby-plugin-react-helmet',
23+
{
24+
resolve: `gatsby-plugin-canonical-urls`,
25+
options: {
26+
siteUrl: config.siteUrl,
27+
},
28+
},
1829
`gatsby-plugin-sharp`,
1930
{
2031
resolve: `gatsby-source-filesystem`,
@@ -27,13 +38,13 @@ module.exports = {
2738
{
2839
resolve: `gatsby-plugin-manifest`,
2940
options: {
30-
name: 'nodejs.dev',
31-
short_name: 'nodejs.dev',
41+
name: config.title,
42+
short_name: config.title,
3243
start_url: '/',
33-
background_color: '#663399',
34-
theme_color: '#663399',
35-
display: 'minimal-ui',
36-
icon: 'src/images/favicon.png', // This path is relative to the root of the site.
44+
background_color: config.color,
45+
theme_color: config.color,
46+
display: config.display,
47+
icon: config.icon,
3748
},
3849
},
3950
'gatsby-plugin-offline',
@@ -45,21 +56,21 @@ module.exports = {
4556
{
4657
resolve: `gatsby-remark-prismjs`,
4758
options: {
48-
classPrefix: "language-",
59+
classPrefix: 'language-',
4960
inlineCodeMarker: null,
5061
aliases: { js: 'javascript' },
5162
showLineNumbers: false,
5263
noInlineHighlight: false,
53-
}
64+
},
5465
},
5566
{
5667
resolve: `gatsby-remark-images`,
5768
options: {
5869
maxWidth: 590,
5970
},
6071
},
61-
]
62-
}
72+
],
73+
},
6374
},
6475
// {
6576
// resolve: `gatsby-source-contentful`,

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"emotion": "^9.2.12",
1111
"emotion-server": "^9.2.12",
1212
"gatsby": "^2.0.0",
13+
"gatsby-plugin-canonical-urls": "^2.0.10",
1314
"gatsby-plugin-catch-links": "^2.0.9",
1415
"gatsby-plugin-emotion": "^2.0.5",
1516
"gatsby-plugin-manifest": "^2.0.2",

‎src/components/header.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
1-
import React from 'react';
2-
import { Link } from 'gatsby';
1+
import { Link } from 'gatsby'
2+
import React from 'react'
3+
import logo from '../images/logo.svg'
34

4-
import logo from '../images/logo.svg';
5-
6-
type Props = {
7-
siteTitle: string
8-
}
9-
10-
const Header = ({ siteTitle }: Props) => (
5+
const Header = () => (
116
<nav className="nav">
127
<ul
138
style={{
@@ -20,7 +15,7 @@ const Header = ({ siteTitle }: Props) => (
2015
>
2116
<li>
2217
<Link to="/">
23-
<img src={logo} alt={siteTitle} className="nav__logo"/>
18+
<img src={logo} alt="Node.js" className="nav__logo" />
2419
</Link>
2520
</li>
2621
</ul>

‎src/components/layout.tsx‎

Lines changed: 12 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,24 @@
1+
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
2+
import 'prismjs/themes/prism-okaidia.css';
13
import React from 'react';
2-
import Helmet from 'react-helmet';
3-
import { StaticQuery, graphql } from 'gatsby';
4-
54
import Header from './header';
6-
75
import './layout.css';
86
import './mobile.css';
9-
import 'prismjs/themes/prism-okaidia.css';
10-
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
7+
import SEO from './seo';
118

129
type Props = {
1310
children: React.ReactNode
11+
title?: string
12+
description?: string
13+
img?: string
1414
}
1515

16-
const Layout = ({ children }: Props) => (
17-
<StaticQuery
18-
query={graphql`
19-
query SiteTitleQuery {
20-
site {
21-
siteMetadata {
22-
title
23-
}
24-
}
25-
}
26-
`}
27-
render={data => (
28-
<>
29-
<Helmet
30-
title={data.site.siteMetadata.title}
31-
meta={[
32-
{ name: 'description', content: 'Sample' },
33-
{ name: 'keywords', content: 'sample, something' },
34-
]}
35-
>
36-
<html lang="en" />
37-
</Helmet>
38-
<Header siteTitle={data.site.siteMetadata.title} />
39-
<main>
40-
{children}
41-
</main>
42-
</>
43-
)}
44-
/>
16+
const Layout = ({ children, title, description, img }: Props) => (
17+
<>
18+
<SEO title={title} description={description} img={img} />
19+
<Header />
20+
<main>{children}</main>
21+
</>
4522
)
4623

4724
export default Layout

‎src/components/seo.tsx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import React from 'react'
2+
import { Helmet } from 'react-helmet'
3+
import config from '../config'
4+
5+
type Props = {
6+
title?: string
7+
description?: string
8+
img?: string
9+
}
10+
11+
const SEO = ({ title, description, img }: Props) => (
12+
<Helmet
13+
title={title || config.title}
14+
meta={[
15+
{
16+
name: 'description',
17+
content: `${description || config.description}`,
18+
},
19+
20+
{ property: 'og:type', content: config.ogType },
21+
{
22+
property: 'og:title',
23+
content: `${title || config.title}`,
24+
},
25+
{
26+
property: 'og:description',
27+
content: `${description || config.description}`,
28+
},
29+
{
30+
property: 'og:url',
31+
content: `${config.siteUrl}`,
32+
},
33+
{
34+
property: 'og:site_name',
35+
content: `${title || config.title}`,
36+
},
37+
{
38+
property: 'article:section',
39+
content: config.title,
40+
},
41+
{ property: 'og:image:type', content: config.ogImgType },
42+
{ property: 'og:image:width', content: config.ogImgWidth },
43+
{ property: 'og:image:height', content: config.ogImgHeight },
44+
{
45+
property: 'og:image',
46+
content: `${img || config.featuredImage}`,
47+
},
48+
{
49+
property: 'og:image:secure_url',
50+
content: `${img || config.featuredImage}`,
51+
},
52+
{
53+
property: 'article:author',
54+
content: config.facebook,
55+
},
56+
{
57+
property: 'article:publisher',
58+
content: config.facebook,
59+
},
60+
{
61+
name: 'twitter:url',
62+
content: `${config.siteUrl}`,
63+
},
64+
{
65+
name: 'twitter:creator',
66+
content: config.twitter,
67+
},
68+
{
69+
name: 'twitter:site',
70+
content: config.twitter,
71+
},
72+
{
73+
name: 'twitter:title',
74+
content: `${title || config.title}`,
75+
},
76+
{
77+
name: 'twitter:card',
78+
content: config.twitterCard,
79+
},
80+
{
81+
name: 'twitter:image',
82+
content: `${img || config.featuredImage}`,
83+
},
84+
{
85+
name: 'twitter:image:alt',
86+
content: config.twitterImgAlt,
87+
},
88+
{
89+
name: 'twitter:description',
90+
content: `${description || config.description}`,
91+
},
92+
]}
93+
>
94+
<html lang={config.lang} />
95+
</Helmet>
96+
)
97+
98+
export default SEO

‎src/config.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* Common App Configurations.
3+
*/
4+
5+
module.exports = {
6+
title: `Node.js`,
7+
description: `Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.`,
8+
siteUrl: `https://nodejs.dev/`,
9+
featuredImage: `https://nodejs.org/static/images/logo-hexagon-card.png`,
10+
color: `#6cc24a`,
11+
icon: `src/images/favicon.png`, // This path is relative to the root of the site.
12+
lang: `en`,
13+
display: `minimal-ui`,
14+
ogType: `website`,
15+
ogImgType: `image/png`,
16+
ogImgWidth: `224`,
17+
ogImgHeight: `256`,
18+
twitter: `@nodejs`,
19+
twitterCard: `summary`,
20+
twitterImgAlt: `The Node.js Hexagon Logo`,
21+
facebook: `https://www.facebook.com/nodejsfoundation/`,
22+
}

‎src/pages/404.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import React from 'react'
22
import Layout from '../components/layout'
33

4+
const title = 'NOT FOUND 404'
5+
const description =
6+
'You just hit a route that doesn&#39;t exist... the sadness.'
7+
48
const NotFoundPage = () => (
5-
<Layout>
6-
<h1>NOT FOUND</h1>
7-
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
9+
<Layout title={title} description={description}>
10+
<h1>{title}</h1>
11+
<p>{description}</p>
812
</Layout>
913
)
1014

0 commit comments

Comments
 (0)