Skip to content

Commit 7c686eb

Browse files
jacubsmithjacubsmith
committed
Adding element page
1 parent af736d3 commit 7c686eb

File tree

7 files changed

+90
-115
lines changed

7 files changed

+90
-115
lines changed

‎data/SiteConfig.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@ module.exports = {
88
googleMapsAPI: 'AIzaSyCBuhRGo10RKonSPoRw0L-93jJ2npEWtFs',
99
postDefaultCategoryID: 'Tech', // Default category for posts.
1010
copyright: 'Copyright © 2018. Jake Smith', // Copyright string for the footer of the website and RSS feed.
11+
pathPrefix: '/', // Prefixes all links. For cases when deployed to example.github.io/gatsby-advanced-starter/.
1112
};
1213

13-
// pathPrefix: '/gatsby-advanced-starter', // Prefixes all links. For cases when deployed to example.github.io/gatsby-advanced-starter/.

‎gatsby-config.js

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ module.exports = {
4141
// This feature is untested for sites hosted on Wordpress.com.
4242
// Defaults to true.
4343
useACF: true,
44+
verbose: true,
4445
},
4546
},
4647
],

‎src/components/Map/GoogleMapContainer.jsx renamed to ‎src/components/Layout/Flexible-Content/WordPressAcfMap.jsx

+6-13
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
import React, { Component } from 'react';
22
import { Map, Marker, GoogleApiWrapper } from 'google-maps-react';
33
import PropTypes from 'prop-types';
4-
import config from '../../../data/SiteConfig';
5-
6-
class GoogleMapContainer extends Component {
7-
// getCenter() {
8-
// const { lat, lng } = this.props.page.acf.maps;
9-
// return {
10-
// lat,
11-
// lng,
12-
// };
13-
// }
4+
import { googleMapsAPI } from '../../../../data/SiteConfig';
145

6+
class WordPressAcfMap extends Component {
157
render() {
168
const mapStyles = {
179
position: 'relative',
@@ -22,7 +14,7 @@ class GoogleMapContainer extends Component {
2214
return <div>Loading...</div>;
2315
}
2416

25-
const { lat, lng } = this.props.initialCenter;
17+
const { lat, lng } = this.props.item.map;
2618

2719
return (
2820
<div style={mapStyles}>
@@ -49,5 +41,6 @@ class GoogleMapContainer extends Component {
4941
}
5042

5143
export default GoogleApiWrapper({
52-
apiKey: config.googleMapsAPI,
53-
})(GoogleMapContainer);
44+
apiKey: googleMapsAPI,
45+
})(WordPressAcfMap);
46+

‎src/components/Layout/Flexible-Content/WordPressAcfTextBlock.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import React, { Component } from 'react';
33
class WordPressAcfTextBlock extends Component {
44
render() {
55
return (
6-
<div dangerouslySetInnerHTML={{
7-
__html: this.props.item.content,
8-
}}
6+
<div
7+
className="editor"
8+
dangerouslySetInnerHTML={{
9+
__html: this.props.item.content,
10+
}}
911
/>
1012
);
1113
}

‎src/components/SEO/SEO.jsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,9 @@ class SEO extends Component {
1111
let postURL;
1212
if (postSEO) {
1313
const postMeta = postNode;
14-
title = postMeta.title;
15-
description = postMeta.description
16-
? postMeta.description
17-
: postNode.excerpt;
18-
image = postMeta.cover;
14+
title = postMeta.seo_title;
15+
description = postMeta.seo_description;
16+
image = postMeta.seo_image.localFile.childImageSharp.sizes.src;
1917
postURL = config.siteUrl + config.pathPrefix + postPath;
2018
} else {
2119
title = config.siteTitle;

‎src/pages/contact.jsx

-55
This file was deleted.

‎src/templates/Page.jsx

+74-38
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import React, { Component } from 'react';
22
import Link from 'gatsby-link';
33
import Img from 'gatsby-image';
4+
import Helmet from 'react-helmet';
5+
import SEO from '../components/SEO/SEO';
6+
import config from '../../data/SiteConfig';
47
import SocialLinks from '../components/SocialLinks/SocialLinks';
58
import PostListing from '../components/Post/PostListing';
69
import WordPressAcfTextBlock from '../components/Layout/Flexible-Content/WordPressAcfTextBlock';
710
import WordPressAcfWysiwyg from '../components/Layout/Flexible-Content/WordPressAcfWysiwyg';
11+
import WordPressAcfMap from '../components/Layout/Flexible-Content/WordPressAcfMap';
812

913
export default class Page extends Component {
1014
render() {
@@ -14,48 +18,59 @@ export default class Page extends Component {
1418

1519
return (
1620
<div>
17-
<h1
18-
className="alpha"
19-
dangerouslySetInnerHTML={{
20-
__html: page.title,
21-
}}
22-
/>
23-
{page.featured_media !== null ?
24-
<Img
25-
sizes={page.featured_media.localFile.childImageSharp.sizes}
26-
alt={page.featured_media.alt_text}
27-
style={{
28-
position: 'relative',
29-
left: 0,
30-
top: 0,
31-
width: '100%',
32-
height: '100%',
21+
<Helmet>
22+
<title>{`${page.title} | ${config.siteTitle}`}</title>
23+
</Helmet>
24+
<div>
25+
<h1
26+
className="alpha"
27+
dangerouslySetInnerHTML={{
28+
__html: page.title,
3329
}}
34-
/> : ''
35-
}
36-
<div dangerouslySetInnerHTML={{
37-
__html: page.content,
38-
}}
39-
/>
40-
{page.acf !== null && page.acf.flexible_content_page !== null ?
41-
page.acf.flexible_content_page.map((item) => {
42-
switch (item.__typename) {
43-
case 'WordPressAcf_blog_posts':
44-
return <PostListing postEdges={this.props.data.allWordpressPost.edges} />;
30+
/>
31+
{page.featured_media !== null ?
32+
<Img
33+
sizes={page.featured_media.localFile.childImageSharp.sizes}
34+
alt={page.featured_media.alt_text}
35+
style={{
36+
position: 'relative',
37+
left: 0,
38+
top: 0,
39+
width: '100%',
40+
height: '100%',
41+
}}
42+
/> : ''
43+
}
44+
<div dangerouslySetInnerHTML={{
45+
__html: page.content,
46+
}}
47+
/>
48+
{page.acf !== null && page.acf.flexible_content_page !== null ?
49+
page.acf.flexible_content_page.map((item) => {
50+
switch (item.__typename) {
51+
case 'WordPressAcf_blog_posts':
52+
return <PostListing postEdges={this.props.data.allWordpressPost.edges} />;
4553

46-
case 'WordPressAcf_text_block':
47-
return <WordPressAcfTextBlock item={item} key={item.id} />;
54+
case 'WordPressAcf_text_block':
55+
return <WordPressAcfTextBlock item={item} key={item.id} />;
4856

49-
case 'WordPressAcf_wysiwyg':
50-
return <WordPressAcfWysiwyg item={item} key={item.id} />;
57+
case 'WordPressAcf_wysiwyg':
58+
return <WordPressAcfWysiwyg item={item} key={item.id} />;
5159

52-
default:
53-
return null;
54-
}
55-
})
56-
: ''}
57-
<div className="post-meta">
58-
<SocialLinks postPath={slug} postNode={pageNode} />
60+
case 'WordPressAcf_map':
61+
return <WordPressAcfMap item={item} />;
62+
63+
case 'WordPressAcf_seo':
64+
return <SEO postPath={page.slug} postNode={item} postSEO />;
65+
66+
default:
67+
return null;
68+
}
69+
})
70+
: ''}
71+
<div className="post-meta">
72+
<SocialLinks postPath={slug} postNode={pageNode} />
73+
</div>
5974
</div>
6075
</div>
6176
);
@@ -87,6 +102,27 @@ export const pageQuery = graphql`
87102
... on WordPressAcf_wysiwyg {
88103
editor
89104
}
105+
... on WordPressAcf_seo {
106+
seo_title
107+
seo_keywords
108+
seo_description
109+
seo_image {
110+
localFile {
111+
childImageSharp {
112+
sizes(maxWidth: 1280) {
113+
...GatsbyImageSharpSizes
114+
}
115+
}
116+
}
117+
}
118+
}
119+
... on WordPressAcf_map {
120+
map {
121+
address
122+
lat
123+
lng
124+
}
125+
}
90126
}
91127
}
92128
}

0 commit comments

Comments
 (0)