maverick/netlify-cms-react-starter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Social Meta to <head>

Browse source
This commit is contained in:
Eric Jinks 2017-11-22 15:55:20 +10:00
parent 73d73f64b0
commit 96bf6ed460
4 changed files with 74 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/admin/config.yml
View file

@ -18,6 +18,10 @@ collections: # A list of collections the CMS should be able to edit
name: "global-settings"
fields:
- {label: Site Title, name: siteTitle, widget: string}
- {label: Site Url, name: siteUrl, widget: string, required: false}
- {label: Social Media Card Image, name: siteCardImage, widget: image, required: false}
- {label: Twitter Site Account, name: twitterSiteAccount, widget: string, required: false}
- {label: Twitter Creator Account, name: twitterCreatorAccount, widget: string, required: false}
- name: "pages"
label: "Pages"
files:

52
src/App.js
View file

@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Helmet from 'react-helmet'
import ScrollToTop from './components/ScrollToTop'
import SocialMeta from './components/SocialMeta'
import Home from './views/Home'
import About from './views/About'
import Contact from './views/Contact'
@ -24,29 +25,60 @@ class App extends Component {
}
getDocument = (collection, name) =>
this.state.data[collection] && this.state.data[collection].filter(page => page.name === name)[0]
this.state.data[collection] &&
this.state.data[collection].filter(page => page.name === name)[0]
getDocuments = (collection) => this.state.data[collection]
getDocuments = collection => this.state.data[collection]
render () {
const site = this.getDocument('settings', 'global')
const {
siteTitle,
siteUrl,
siteDescription,
siteCardImage,
twitterSiteAccount,
twitterCreatorAccount
} = this.getDocument('settings', 'global')
return (
<Router>
<div>
<ScrollToTop />
<ServiceWorkerNotifications reloadOnUpdate />
<GithubCorner url='https://github.com/Jinksi/netlify-cms-react-starter' />
<Helmet titleTemplate={`${site.siteTitle} | %s`} />
<Helmet titleTemplate={`${siteTitle} | %s`} />
<SocialMeta
title={siteTitle}
url={siteUrl}
description={siteDescription}
absoluteImageUrl={siteCardImage}
twitterCreatorAccount={twitterCreatorAccount}
twitterSiteAccount={twitterSiteAccount}
/>
<Nav />
<Switch>
<Route path='/' exact
render={(props) => <Home page={this.getDocument('pages', 'home')} {...props} />}
<Route
path='/'
exact
render={props => (
<Home page={this.getDocument('pages', 'home')} {...props} />
)}
/>
<Route path='/about/' exact
render={(props) => <About page={this.getDocument('pages', 'about')} {...props} />}
<Route
path='/about/'
exact
render={props => (
<About page={this.getDocument('pages', 'about')} {...props} />
)}
/>
<Route path='/contact/' exact
render={(props) => <Contact page={this.getDocument('pages', 'contact')} site={site} {...props} />}
<Route
path='/contact/'
exact
render={props => (
<Contact
page={this.getDocument('pages', 'contact')}
{...props}
/>
)}
/>
<Route component={NoMatch} />
</Switch>

27
src/components/SocialMeta.js Normal file
View file

@ -0,0 +1,27 @@
import React from 'react'
import Helmet from 'react-helmet'
const SocialMeta = ({
title,
url,
description,
absoluteImageUrl,
twitterSiteAccount,
twitterCreatorAccount
}) => (
<Helmet>
<meta property='og:title' content={title} />
<meta property='og:type' content='website' />
<meta property='og:url' content={url} />
<meta property='og:image' content={absoluteImageUrl} />
<meta property='og:description' content={description} />
<meta name='twitter:card' content='summary_large_image' />
{twitterSiteAccount && (
<meta name='twitter:site' content={twitterSiteAccount} />
)}
{twitterCreatorAccount && (
<meta name='twitter:creator' content={twitterCreatorAccount} />
)}
</Helmet>
)
export default SocialMeta

2
src/views/Contact.js
View file

@ -7,7 +7,7 @@ import NetlifySimpleForm from '../components/NetlifySimpleForm'
import { Container, Section } from '../components/common'
import Marked from 'react-markdown'
export default ({ page, site }) => (
export default ({ page }) => (
<Page>
<PageHeader title={page.title} subtitle='<Contact />' />
<Section thin>