Skip to content
Permalink
Browse files

Add site-wide meta tags + images

  • Loading branch information...
lachlanjc committed Nov 5, 2019
1 parent 8d12f2c commit 345afbf4b512e5d5f4c66a15fab1d1be8ce46297
Showing with 158 additions and 30 deletions.
  1. +2 −1 gatsby-config.js
  2. +32 −0 package-lock.json
  3. +8 −6 package.json
  4. +23 −0 src/components/meta.js
  5. +22 −22 src/index.js
  6. +12 −1 src/layout.js
  7. +59 −0 src/util.js
@@ -5,6 +5,7 @@ module.exports = {
plugins: [
'gatsby-plugin-mdx',
'gatsby-plugin-theme-ui',
'gatsby-plugin-catch-links'
'gatsby-plugin-catch-links',
'gatsby-plugin-react-helmet'
]
}

Some generated files are not rendered by default. Learn more.

@@ -16,18 +16,20 @@
"@mdx-js/react": "^1.5.1",
"@theme-ui/preset-base": "^0.2.44",
"@theme-ui/prism": "^0.2.46",
"date-fns": "^2.6.0",
"gatsby": "^2.17.8",
"gatsby-plugin-catch-links": "^2.1.15",
"gatsby-plugin-mdx": "^1.0.55",
"gatsby-plugin-react-helmet": "^3.1.13",
"gatsby-plugin-theme-ui": "^0.2.43",
"lodash": "^4.17.15",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"resize-observer-polyfill": "^1.5.1",
"theme-ui": "^0.2.46",
"lodash": "^4.17.15",
"rebass": "^4.0.7",
"date-fns": "^2.6.0",
"react-helmet": "^5.2.1",
"react-music-embed": "^1.0.1",
"react-song-embed": "^1.0.0"
"react-song-embed": "^1.0.0",
"rebass": "^4.0.7",
"resize-observer-polyfill": "^1.5.1",
"theme-ui": "^0.2.46"
}
}
@@ -0,0 +1,23 @@
import React from 'react'
import Helmet from 'react-helmet'

export default ({
title = '@lachlanjc/notebook',
name = '@lachlanjc/notebook',
description = 'Lachlan Campbell’s daily blog, Notebook.',
image = 'https://notebook-cards.lachlanjc.now.sh/Notebook.png?theme=dark'
}) => (
<Helmet>
<title>{title}</title>
<meta property="og:title" content={name} />
<meta name="twitter:title" content={name} />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="@lachlanjc/notebook" />
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="twitter:description" content={description} />
<meta property="og:image" content={image} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content={image} />
</Helmet>
)
@@ -3,7 +3,8 @@ import { jsx } from 'theme-ui'
import { graphql, useStaticQuery, Link } from 'gatsby'
import theme from './gatsby-plugin-theme-ui'
import Layout from './layout'
import { filter, startCase, includes, isEmpty, orderBy } from 'lodash'
import { hasDate, getDate, getName } from './util'
import { filter, includes, isEmpty, orderBy } from 'lodash'
import { format } from 'date-fns'

export const wrapPageElement = ({ element, props }) => (
@@ -54,27 +55,26 @@ export const Banner = props => (

export const Nav = props => {
const data = useStaticQuery(pages)
const nodes = filter(data.allSitePage.nodes, n => !includes(['/', '/dev-404-page/'], n.path))

const getName = path => startCase(
path.replace(/(\d{4}-\d{2}-\d{2})/, '').replace('-', ' ').replace('/', '')
).replace('Ipad', 'iPad').replace('Iphone', 'iPhone').replace('Macbook', 'MacBook').replace('Ios', 'iOS').replace('iPados', 'iPadOS')
.replace('Mdx', 'MDX').replace('Ui', 'UI')
.replace('A ', 'a ').replace('In ', 'in ').replace('Via', 'via')
const hasDate = path => !isEmpty(path.match(/^\/\d{4}-/))
const getDate = path => path.match(/(\d{4}-\d{2}-\d{2})/)[0]

const links = orderBy(nodes.map(node => {
const { path } = node
node.name = getName(path)
node.date = hasDate(path) ? getDate(path) : null
if (hasDate(path) && node.name === '') {
const date = new Date(node.date)
date.setDate(date.getDate() + 1) // I hate everything & everything hates me
node.name = format(date, 'MMMM dd, yyyy')
}
return node
}), ['date', 'name'], ['desc', 'asc'])
const nodes = filter(
data.allSitePage.nodes,
n => !includes(['/', '/dev-404-page/'], n.path)
)

const links = orderBy(
nodes.map(node => {
const { path } = node
node.name = getName(path)
node.date = hasDate(path) ? getDate(path) : null
if (hasDate(path) && node.name === '') {
const date = new Date(node.date)
date.setDate(date.getDate() + 1) // I hate everything & everything hates me
node.name = format(date, 'MMMM dd, yyyy')
}
return node
}),
['date', 'name'],
['desc', 'asc']
)

return (
<ul
@@ -3,6 +3,8 @@ import { jsx, Styled, useColorMode } from 'theme-ui'
import { Link } from 'gatsby'
import Avatar from './components/avatar'
import Icon from './components/icon'
import Meta from './components/meta'
import { getName, getDescription, getImage } from './util'
import theme from './gatsby-plugin-theme-ui'

const ColorSwitcher = props => {
@@ -53,8 +55,11 @@ const ColorSwitcher = props => {
}

export default ({ xl, ...props }) => {
const home = props.location.pathname === '/'
const path = props.location.pathname
const home = path === '/'
if (home) xl = true
const base = '@lachlanjc/notebook'
const name = home ? base : getName(path)

return (
<Styled.root
@@ -66,6 +71,12 @@ export default ({ xl, ...props }) => {
mx: 'auto'
}}
>
<Meta
title={home ? base : `${name}${base}`}
name={name}
description={getDescription(path)}
image={getImage(path)}
/>
<header
sx={{
display: 'flex',
@@ -0,0 +1,59 @@
import { isEmpty, startCase } from 'lodash'
import { format } from 'date-fns'

export const getName = path =>
startCase(
path
.replace(/(\d{4}-\d{2}-\d{2})/, '')
.replace('-', ' ')
.replace('/', '')
)
.replace('Ipad', 'iPad')
.replace('Iphone', 'iPhone')
.replace('Macbook', 'MacBook')
.replace('Ios', 'iOS')
.replace('iPados', 'iPadOS')
.replace('Mdx', 'MDX')
.replace('Ui', 'UI')
.replace('A ', 'a ')
.replace('In ', 'in ')
.replace('Via', 'via')

export const hasDate = path =>
!isEmpty(path.toString().match(/\d{4}-\d{2}-\d{2}/))

export const getDate = path => {
const match = path.match(/(\d{4}-\d{2}-\d{2})/)
return match ? match[0] : ''
}

export const getDescription = path => {
if (path === '/') {
return 'Lachlan Campbell’s daily blog, Notebook.'
}
let date = ''
if (hasDate(path)) {
date = new Date(getDate(path))
date = ` on ${format(date, 'MMMM d, yyyy')}`
}
return `Post by Lachlan Campbell${date} on their daily blog, Notebook.`
}

export const getImage = path => {
if (path === '/') {
return 'https://notebook-cards.lachlanjc.now.sh/Notebook.png?theme=dark'
}
let name = getName(path.toString())
let caption
if (hasDate(path)) {
let date = getDate(path)
if (name === '') {
name = format(new Date(date), 'MMMM d, yyyy')
} else {
caption = format(new Date(date), 'MMM d, yyyy')
}
}
name = encodeURIComponent(name)
caption = encodeURIComponent(caption)
return `https://notebook-cards.lachlanjc.now.sh/${name}.png?caption=${caption}`
}

0 comments on commit 345afbf

Please sign in to comment.
You can’t perform that action at this time.