diff --git a/cms/cms.js b/cms/cms.js index 3d63aeb..5da9f8e 100644 --- a/cms/cms.js +++ b/cms/cms.js @@ -4,8 +4,9 @@ import '../src/globalStyles.css' import data from '../src/data.json' import Home from '../src/views/Home' import About from '../src/views/About' -import SinglePost from '../src/views/SinglePost' import Contact from '../src/views/Contact' +import Blog from '../src/views/Blog' +import SinglePost from '../src/views/SinglePost' console.log('React version', React.version) @@ -17,7 +18,10 @@ CMS.registerPreviewStyle('/admin/cms.bundle.css') const getDocument = (collection, name) => data[collection] && data[collection].filter(page => page.name === name)[0] +const getDocuments = (collection, name) => data[collection] + const globalSettings = getDocument('settings', 'global') +const posts = getDocuments('posts') // Preview Templates CMS.registerPreviewTemplate('home-page', ({ entry }) => ( @@ -29,6 +33,9 @@ CMS.registerPreviewTemplate('about-page', ({ entry }) => ( CMS.registerPreviewTemplate('contact-page', ({ entry }) => ( )) +CMS.registerPreviewTemplate('blog-page', ({ entry }) => ( + +)) CMS.registerPreviewTemplate('posts', ({ entry }) => ( )) diff --git a/content/pages/about.md b/content/pages/about.md index 4da7686..0ba7e1a 100644 --- a/content/pages/about.md +++ b/content/pages/about.md @@ -1,9 +1,8 @@ --- title: About page title -subtitle: featuredImage: /images/uploads/tim-marshall-155597.jpg section1: |- - ## Hello World! + ## Lorem Ipsum Netlify CMS works with both `.md` and `.json`. @@ -15,10 +14,9 @@ section1: |- -section2: >- +section2: |- ## This is a Container component - A sem vel nec sodales mi vivamus senectus sed potenti a parturient nascetur tincidunt nisi pulvinar rhoncus a. Risus imperdiet taciti suspendisse facilisi a per metus cubilia varius a nostra adipiscing amet ultrices quisque ac mi a. @@ -28,9 +26,7 @@ section2: >- bibendum duis netus a consectetur dui magnis ac aliquet sem posuere tincidunt vestibulum. - The image below will have a `srcset` attribute generated: - ![Tim Marshall](/images/uploads/tim-marshall-155597.jpg) --- diff --git a/content/pages/blog.md b/content/pages/blog.md new file mode 100644 index 0000000..21cb506 --- /dev/null +++ b/content/pages/blog.md @@ -0,0 +1,4 @@ +--- +title: Blog +featuredImage: /images/uploads/ng-32703.jpg +--- diff --git a/content/pages/contact.md b/content/pages/contact.md index ac27925..7d3bb8e 100644 --- a/content/pages/contact.md +++ b/content/pages/contact.md @@ -1,13 +1,18 @@ --- -title: Contact -subtitle: +title: Contact us +subtitle: '' +featuredImage: '/images/uploads/mark-chang-74-3.jpg' +address: 404 James St, Burleigh Heads QLD 4220 +phone: 0987 123 456 +email: example@example.com --- + # Example contact form This form is setup to use Netlify's form handling: -- the form action is set to the current absolute url: `action: '/contact/'` -- a name attribute is sent with the form's data `'form-name': 'Contact'` -- netlify data attributes are added to the form `data-netlify data-netlify-honeypot` +* the form action is set to the current absolute url: `action: '/contact/'` +* a name attribute is sent with the form's data `'form-name': 'Contact'` +* netlify data attributes are added to the form `data-netlify data-netlify-honeypot` Find out more in the [Netlify Docs](https://www.netlify.com/docs/form-handling/). diff --git a/content/pages/home.md b/content/pages/home.md index 5cbdee2..c26c2f3 100644 --- a/content/pages/home.md +++ b/content/pages/home.md @@ -1,13 +1,10 @@ --- title: Hello World! -subtitle: +subtitle: This is the home page subtitle +featuredImage: '/images/uploads/isabella juskova.jpg' --- -# 🌶 Netlify CMS + React Starter - -[![Standard - JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](http://standardjs.com/) -[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) -[![dependencies](https://david-dm.org/jinksi/netlify-cms-react-starter.svg)](https://david-dm.org/jinksi/netlify-cms-react-starter) +# Netlify CMS + React Starter A starter project for creating lightning-fast, offline-first websites with [Netlify CMS](https://netlifycms.org) and React. @@ -17,50 +14,6 @@ A starter project for creating lightning-fast, offline-first websites with [Netl * **[React Snapshot](https://github.com/geelen/react-snapshot)** for pre-rendering to static html so it works without Javascript ⭐️ * **[Netlify CMS](https://github.com/netlify/netlify-cms)** for content management -I aim to include commonly used components and best-practices e.g. forms, settings, tags, lazy-loading images, etc. - -## Get going - -[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/Jinksi/netlify-cms-react-starter) - -1. Hit the **Deploy to Netlify** button. This will: - - * Clone the repo into your Github account - * Create you a new project on Netlify, build & deploy - -1. Once your Netlify project has been created, change a couple of settings: - - * Enable **Identity** - * Change **Registration Preferences** to **Invite Only** - * Enable **Git Gateway** - -1. Invite users (probably yourself) to enable admin access - * Open the **Identity** tab and hit **Invite Users** - -## Developing - -1. Clone your repo to your local machine - -1. Install dependencies - - `yarn` or `npm install` - -1. Run the development server - - `yarn start` or `npm run start` - -If you are adding or editing content locally in the CMS, a couple of things to note: - -* Changes will be pushed to the remote repo. - -* You will be prompted to enter your site's url, this is necessary for Netlify Identity to manage user login. This is stored in `localStorage`, so you might have to empty your browser cache if you are switching projects but remaining on `localhost:3000`. - -## Editing CMS fields - -The Netlify CMS configuration is located in `public/admin/config.yml`. This is where you will configure the pages, fields, posts and settings that are editable by the CMS. - -Find out more in the [Netlify CMS Docs](https://www.netlifycms.org/docs/#configuration). - ## See also [Netlify CMS Docs](https://www.netlifycms.org/docs/) diff --git a/content/postCategories/fluff.md b/content/postCategories/fluff.md deleted file mode 100644 index 01303ba..0000000 --- a/content/postCategories/fluff.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Fluff ---- - diff --git a/content/postCategories/updates.md b/content/postCategories/updates.md new file mode 100644 index 0000000..b411e21 --- /dev/null +++ b/content/postCategories/updates.md @@ -0,0 +1,3 @@ +--- +title: Updates +--- diff --git a/content/posts/2018-05-25-testing-1-8-2.md b/content/posts/2018-05-25-testing-1-8-2.md index 16e6727..1bcee19 100644 --- a/content/posts/2018-05-25-testing-1-8-2.md +++ b/content/posts/2018-05-25-testing-1-8-2.md @@ -1,8 +1,11 @@ --- -title: Testing 1.8.2 +title: Post Three status: Published date: '2018-05-25' postFeaturedImage: /images/uploads/isabella juskova.jpg -excerpt: Test +excerpt: This is placeholder text that our web designers put here to make sure words appear properly on your website. This text is going to be replaced once the website is completed. You are currently reading text that is written in English, not any other language. --- -Test + +This is placeholder text that our web designers put here to make sure words appear properly on your website. This text is going to be replaced once the website is completed. You are currently reading text that is written in English, not any other language. + +Be careful not to waste too much time reading placeholder text! This text isn’t going to remain here because it doesn't pertain to the website. This paragraph has been copied from a program that automatically generates paragraphs like this. It is useful for web designers to use placeholder text so they can easily see what different fonts look like on a realistic paragraph. diff --git a/content/posts/post-two.md b/content/posts/post-two.md index a9664e8..d2a9a7e 100644 --- a/content/posts/post-two.md +++ b/content/posts/post-two.md @@ -2,7 +2,7 @@ title: Post Two status: Published categories: - - category: Fluff + - category: Updates date: '2018-03-28' postFeaturedImage: /images/uploads/vyouw5byhlc.jpeg excerpt: This is an excerpt of Post Two diff --git a/package.json b/package.json index 94d2443..bd87178 100644 --- a/package.json +++ b/package.json @@ -37,11 +37,12 @@ "dom-form-serializer": "^1.0.7", "intersection-observer": "^0.5.0", "lodash": "^4.17.10", + "modern-normalize": "^0.4.0", "moveto": "^1.7.1", "netlify-identity-widget": "^1.2.0", - "normalize.css": "^8.0.0", "react": "^16.0.0", "react-dom": "^16.0.0", + "react-feather": "^1.1.0", "react-helmet": "^5.1.3", "react-markdown": "3", "react-router-dom": "^4.1.1", diff --git a/public/admin/admin.css b/public/admin/admin.css index 30e8c7f..eed5f78 100644 --- a/public/admin/admin.css +++ b/public/admin/admin.css @@ -53,7 +53,7 @@ /* Custom logo */ -/* .nc-githubAuthenticationPage-logo { +.nc-githubAuthenticationPage-logo { background-image: url(/images/logo.svg); background-position: center; background-repeat: no-repeat; @@ -79,4 +79,4 @@ transform: translate(-50%, -50%); width: auto; text-indent: 0; -} */ +} diff --git a/public/admin/config.yml b/public/admin/config.yml index 4daa8eb..10c0af9 100644 --- a/public/admin/config.yml +++ b/public/admin/config.yml @@ -1,7 +1,7 @@ # See https://github.com/netlify/netlify-cms/blob/master/example/config.yml backend: name: git-gateway - branch: master # Branch to update (optional; defaults to master) + branch: 0.3.0 # Branch to update (optional; defaults to master) # display_url: https://netlify-cms-react-starter.netlify.com # This url will display in the top-right of the CMS media_folder: "public/images/uploads" # Media files will be stored in the repo under static/images/uploads @@ -19,7 +19,7 @@ collections: # A list of collections the CMS should be able to edit name: "home-page" fields: - {label: Title, name: title, widget: string} - - {label: Subtitle, name: subtitle, widget: string} + - {label: Subtitle, name: subtitle, widget: markdown} - {label: Body, name: body, widget: markdown} - file: "content/pages/about.md" @@ -27,7 +27,7 @@ collections: # A list of collections the CMS should be able to edit name: "about-page" fields: - {label: Title, name: title, widget: string} - - {label: Subtitle, name: subtitle, widget: string} + - {label: Subtitle, name: subtitle, widget: markdown} - {label: Featured Image, name: featuredImage, widget: image} - {label: Section 1, name: section1, widget: markdown} - {label: Section 2, name: section2, widget: markdown} @@ -37,8 +37,20 @@ collections: # A list of collections the CMS should be able to edit name: "contact-page" fields: - {label: Title, name: title, widget: string} - - {label: Subtitle, name: subtitle, widget: string} + - {label: Subtitle, name: subtitle, widget: markdown} + - {label: Featured Image, name: featuredImage, widget: image} - {label: Body, name: body, widget: markdown} + - {label: Address, name: address, widget: text} + - {label: Phone, name: phone, widget: string} + - {label: Email Address, name: email, widget: string} + + - file: "content/pages/blog.md" + label: "Blog Page" + name: "blog-page" + fields: + - {label: Title, name: title, widget: string} + - {label: Subtitle, name: subtitle, widget: markdown} + - {label: Featured Image, name: featuredImage, widget: image} - name: posts diff --git a/public/favicon.ico b/public/favicon.ico index d6282f8..652c842 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/images/logo.png b/public/images/logo.png index 86b9fd4..d12b45e 100644 Binary files a/public/images/logo.png and b/public/images/logo.png differ diff --git a/public/images/logo.svg b/public/images/logo.svg index bfe61df..2bf969f 100644 --- a/public/images/logo.svg +++ b/public/images/logo.svg @@ -1 +1,6 @@ - \ No newline at end of file + + + + + + diff --git a/public/images/uploads/ng-32703.jpg b/public/images/uploads/ng-32703.jpg new file mode 100644 index 0000000..6454149 Binary files /dev/null and b/public/images/uploads/ng-32703.jpg differ diff --git a/public/index.html b/public/index.html index 0a66ebc..27932d0 100644 --- a/public/index.html +++ b/public/index.html @@ -31,16 +31,16 @@ --> + // check for netlifyIdentity, redirect to admin if user is logging in +if (window.localStorage && window.netlifyIdentity) { + netlifyIdentity.on('init', function(user) { + if (!user) { + netlifyIdentity.on('login', function() { + document.location.href = '/admin/' + }) + } + }) +} + diff --git a/src/App.js b/src/App.js index 101f7c0..420e885 100644 --- a/src/App.js +++ b/src/App.js @@ -111,6 +111,7 @@ class App extends Component { exact render={props => ( return ( slugify(item.title) === slug ) const singlePost = posts[singlePostID] - const nextPost = posts[singlePostID + 1] - const prevPost = posts[singlePostID - 1] + const nextPost = posts[singlePostID - 1] + const prevPost = posts[singlePostID + 1] if (!singlePost) return return ( * + * { - margin-top: 1.5rem; + margin-top: 2rem; } .EnquiryForm--Label { @@ -21,21 +21,19 @@ .EnquiryForm--Input { font-family: inherit; - font-weight: 400; flex-grow: 1; box-sizing: border-box; display: block; margin: 0; - border: none; - border-bottom: 1px solid #bababa; - padding: 0.75rem 0.5rem; - line-height: 1; + border: 1px solid #bababa; + padding: 1.5rem 2rem; + border-radius: var(--borderRadius); + line-height: 1.25em; transition: border-color 0.2s; resize: none; } .EnquiryForm--Select { - border-radius: 0; background: none; appearance: none; } @@ -43,7 +41,7 @@ .EnquiryForm--Label.has-arrow:after { content: ''; position: absolute; - right: 3px; + right: 2.5rem; top: 50%; border-right: 1px solid; border-bottom: 1px solid; diff --git a/src/components/Footer.css b/src/components/Footer.css index c64a6da..f33dc74 100644 --- a/src/components/Footer.css +++ b/src/components/Footer.css @@ -1,10 +1,11 @@ .Footer { - background: var(--primary); + padding: 3rem 0; + background: var(--darkGrey); color: white; } .Footer--Lower { - background: var(--primary); + background: var(--darkGrey); padding: 1rem 0; font-weight: 100; } diff --git a/src/components/Logo.css b/src/components/Logo.css index 718f9c1..6ca7d06 100644 --- a/src/components/Logo.css +++ b/src/components/Logo.css @@ -1,9 +1,11 @@ .Logo { - display: block; + display: flex; background-size: contain; background-repeat: no-repeat; background-position: center; height: 2.5rem; width: 2.5rem; margin-right: 1rem; + align-items: center; + justify-content: center; } diff --git a/src/components/Nav.css b/src/components/Nav.css index 274fea6..96f12c7 100644 --- a/src/components/Nav.css +++ b/src/components/Nav.css @@ -7,4 +7,6 @@ .Nav--Container { display: flex; + align-items: center; + height: 6rem; } diff --git a/src/components/NavLink.css b/src/components/NavLink.css index 8393813..d58b1f3 100644 --- a/src/components/NavLink.css +++ b/src/components/NavLink.css @@ -1,14 +1,18 @@ .NavLink { padding: 0.5rem 1rem; display: block; - font-weight: 400; + font-weight: 500; transition: color 0.2s, border-bottom-color 0.2s; color: inherit; text-decoration: none; - border-bottom: 1px solid; + border-bottom: 2px solid; border-bottom-color: transparent; } +.NavLink + .NavLink { + margin-left: 1rem; +} + .NavLink:hover, .NavLink.active, .NavLink:focus { diff --git a/src/components/PageHeader.css b/src/components/PageHeader.css index 0fd2571..044c51d 100644 --- a/src/components/PageHeader.css +++ b/src/components/PageHeader.css @@ -1,13 +1,19 @@ .PageHeader { - line-height: 1em; - color: var(--primary); - background: var(--primary); + background-color: var(--darkGrey); color: white; + padding: 15rem 0; +} + +.PageHeader-large { + padding: 20rem 0; } .PageHeader--Title { + font-size: 6rem; + margin-bottom: 0; } .PageHeader--Subtitle { - font-weight: 200; + font-weight: 400; + font-size: 1.8rem; } diff --git a/src/components/PageHeader.js b/src/components/PageHeader.js index c50dbef..cc6256e 100644 --- a/src/components/PageHeader.js +++ b/src/components/PageHeader.js @@ -1,31 +1,39 @@ import React from 'react' import PropTypes from 'prop-types' +import Content from './Content' import BackgroundImage from './BackgroundImage' import './PageHeader.css' -const PageHeader = ({ title, subtitle, backgroundImage }) => ( -
- {backgroundImage && } -
-

- {title} -

- {subtitle ? ( -

- {subtitle} -

- ) : ( - '' +const PageHeader = ({ + title, + subtitle, + backgroundImage, + large, + className = '' +}) => { + if (large) className += ' PageHeader-large' + return ( +
+ {backgroundImage && ( + )} +
+

+ {title} +

+ {subtitle && ( + + )} +
-
-) - + ) +} PageHeader.propTypes = { title: PropTypes.string, subtitle: PropTypes.string diff --git a/src/globalStyles.css b/src/globalStyles.css index d715849..3ab9b81 100644 --- a/src/globalStyles.css +++ b/src/globalStyles.css @@ -1,9 +1,10 @@ :root { - --primary: #ff3d3d; - --primary-light: #ff6f6f; + --primary: #0984d2; + --primary-light: #6fadff; --secondary: #212121; --lightGrey: whitesmoke; --midGrey: #cacaca; + --darkGrey: #272727; --danger: #ff3d3d; --font-primary: 'Open Sans', sans-serif; --font-system: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', @@ -26,18 +27,12 @@ body { background: white; color: var(--secondary); font-size: 1.6em; - font-weight: 300; + font-weight: 400; letter-spacing: 0.01em; line-height: 1.6; -webkit-font-smoothing: antialiased; } -*, -*:before, -*:after { - box-sizing: border-box; -} - a { color: var(--primary); } @@ -140,13 +135,13 @@ blockquote { .section { width: 100%; - padding: 5rem 0; + padding: 7.5rem 0; } .section.thick { padding: 10rem 0; } .section.thin { - padding: 2.5rem 0; + padding: 3.5rem 0; } .section.noPadding { padding: 0; @@ -171,11 +166,11 @@ blockquote { color: white; text-transform: uppercase; text-decoration: none; - font-weight: 400; - letter-spacing: 0.15em; + font-weight: 700; + letter-spacing: 0.05em; font-size: 1.4rem; display: inline-block; - padding: 1rem 2rem; + padding: 1.25rem 3rem; border: none; transition: all 0.2s ease; cursor: pointer; diff --git a/src/index.js b/src/index.js index 55be430..5821e49 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ import 'core-js/es6' import React from 'react' import { render } from 'react-snapshot' -import 'normalize.css' +import 'modern-normalize/modern-normalize.css' import './globalStyles.css' import App from './App' import registerServiceWorker, { unregister } from './registerServiceWorker' diff --git a/src/views/About.js b/src/views/About.js index d40de37..67e9801 100644 --- a/src/views/About.js +++ b/src/views/About.js @@ -6,27 +6,30 @@ import LazyImage from '../components/LazyImage' import Content from '../components/Content.js' import './About.css' -export default ({ page }) => ( -
- - {page.title} - - -
-
- +export default ({ page }) => { + const { title, subtitle, featuredImage, section1, section2 } = page + return ( +
+ + {title} + + +
+
+ +
+
+
+
+ +

The image below is a {''}

+ +
-
-
- -

The image below is a {''}

- -
-
-
-) + ) +} diff --git a/src/views/Blog.js b/src/views/Blog.js index 6737d18..38df724 100644 --- a/src/views/Blog.js +++ b/src/views/Blog.js @@ -8,17 +8,30 @@ import PostSection from '../components/PostSection' import './Blog.css' -export default ({ page, posts, postCategories, showFeatured = true }) => { +export default ({ + page, + posts = [], + postCategories = [], + showFeatured = true +}) => { + const { title, subtitle, featuredImage } = page posts = _sortBy(posts, ['date']).reverse() return (
- Blog + {title} - - + + + {!!postCategories.length && ( + + )} {!!posts.length && }
) diff --git a/src/views/Contact.css b/src/views/Contact.css index a5c31ad..0b2659c 100644 --- a/src/views/Contact.css +++ b/src/views/Contact.css @@ -1,2 +1,36 @@ .Contact { } + +.Contact--Section1--Container { + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +.Contact--Section1--Container > * { + width: calc(50% - 2rem); +} + +.Contact--Details { + margin-top: 3rem; +} + +.Contact--Details--Item { + display: flex; + padding: 2rem 0; + border-top: 1px solid var(--lightGrey); + font-weight: 500; + text-decoration: none; + color: inherit; + transition: color 0.2s ease-in-out; +} + +.Contact--Details--Item:hover, +.Contact--Details--Item:focus { + color: var(--primary); +} + +.Contact--Details--Item svg { + margin-right: 1.5rem; + color: var(--primary); +} diff --git a/src/views/Contact.js b/src/views/Contact.js index 50b2bbf..102405c 100644 --- a/src/views/Contact.js +++ b/src/views/Contact.js @@ -1,35 +1,61 @@ import React from 'react' import Helmet from 'react-helmet' +import { MapPin, Smartphone, Mail } from 'react-feather' import PageHeader from '../components/PageHeader' -import EnquiryFormControlled from '../components/EnquiryFormControlled' -import EnquiryFormSimple from '../components/EnquiryFormSimple' import EnquiryFormSimpleAjax from '../components/EnquiryFormSimpleAjax' import Content from '../components/Content' import './Contact.css' -export default ({ page, siteTitle }) => ( -
- -
-
- -

{''}

- -
-

{''}

- -
-

{''}

- -
- Note: these will only work when deployed on Netlify -
- Also, they are active and I will receive submissions 😉 +export default ({ page }) => { + const { title, subtitle, featuredImage, address, phone, email } = page + return ( +
+ + {page.title} + + + + +
+
+
+ + +
+ {address && ( + + {address} + + )} + {phone && ( + + {phone} + + )} + {email && ( + + {email} + + )} +
+
+ +
+ +
+
- - {page.title} - -
-) + ) +} diff --git a/src/views/Home.js b/src/views/Home.js index 84eb4cb..a90f9c3 100644 --- a/src/views/Home.js +++ b/src/views/Home.js @@ -6,18 +6,23 @@ import PageHeader from '../components/PageHeader' import './Home.css' export default ({ page }) => { - const { title, subtitle, body } = page + const { title, subtitle, featuredImage, body } = page return (
- -
+ + {title} + + +
- - {title} -
) } diff --git a/src/views/SinglePost.css b/src/views/SinglePost.css index 4893214..d08fce0 100644 --- a/src/views/SinglePost.css +++ b/src/views/SinglePost.css @@ -5,6 +5,27 @@ height: 50rem; } +.SinglePost--BackButton { + color: white; + position: relative; + display: flex; + align-items: center; + font-weight: 600; + text-decoration: none; + letter-spacing: 0.1em; +} + +.SinglePost--BackButton svg { + transition: transform 0.2s ease-out; + transform: translateX(0); + height: 1.2em; +} + +.SinglePost--BackButton:hover svg, +.SinglePost--BackButton:focus svg { + transform: translateX(-0.25em); +} + .SinglePost--Content { background: white; margin-top: 30rem; @@ -43,10 +64,19 @@ } .SinglePost--Pagination { - margin: 6rem 0 0 0; + margin: 4rem 0 0 0; + display: flex; + align-items: center; + justify-content: space-between; } .SinglePost--Pagination--Link { text-transform: uppercase; font-size: 1.2rem; + font-weight: 600; + text-decoration: none; +} + +.SinglePost--Pagination--Link.next { + margin-left: auto; } diff --git a/src/views/SinglePost.js b/src/views/SinglePost.js index 89b4b3d..d221f7a 100644 --- a/src/views/SinglePost.js +++ b/src/views/SinglePost.js @@ -1,6 +1,7 @@ import React from 'react' import Helmet from 'react-helmet' import { Link } from 'react-router-dom' +import { ChevronLeft } from 'react-feather' import Content from '../components/Content' import BackgroundImage from '../components/BackgroundImage' @@ -9,12 +10,13 @@ import { dateFormatted } from '../util/date' import './SinglePost.css' export default ({ singlePost, nextPostURL, prevPostURL }) => { - const { body, categories, postFeaturedImage, title, date } = singlePost + const { title, date, postFeaturedImage, body, categories = [] } = singlePost return (
{title} + {postFeaturedImage && ( { )}
+ + BACK +
- {!!categories && + {!!categories.length && categories.map(obj => ( {obj.category} @@ -45,15 +50,21 @@ export default ({ singlePost, nextPostURL, prevPostURL }) => {
-
- {nextPostURL && ( - - Next Post +
+ {prevPostURL && ( + + Previous Post )} - {prevPostURL && ( - - Previous Post + {nextPostURL && ( + + Next Post )}
diff --git a/yarn.lock b/yarn.lock index f372c0d..7957dca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5792,6 +5792,10 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@ dependencies: minimist "0.0.8" +modern-normalize@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-0.4.0.tgz#1ccbc52861e1bce258144d28e890dc709b120ed2" + moment@^2.21.0: version "2.22.1" resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.1.tgz#529a2e9bf973f259c9643d237fda84de3a26e8ad" @@ -5996,10 +6000,6 @@ normalize-url@^1.4.0: query-string "^4.1.0" sort-keys "^1.0.0" -normalize.css@^8.0.0: - version "8.0.0" - resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.0.tgz#14ac5e461612538a4ce9be90a7da23f86e718493" - npm-bundled@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.3.tgz#7e71703d973af3370a9591bafe3a63aca0be2308" @@ -7417,6 +7417,10 @@ react-error-overlay@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4" +react-feather@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-1.1.0.tgz#f0aa692497de952237ca1f3b118ebcb5427152e1" + react-helmet@^5.1.3: version "5.2.0" resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.0.tgz#a81811df21313a6d55c5f058c4aeba5d6f3d97a7"