prismicio-community · levimykel · May 24, 2019 · May 21, 2019 · May 21, 2019 · May 24, 2019
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-[![Dependency Status](https://david-dm.org/raulg/nextjs-blog.svg)](https://david-dm.org/raulg/nextjs-blog)
+[![Dependency Status](https://david-dm.org/prismicio/nextjs-blog.svg)](https://david-dm.org/prismicio/nextjs-blog)
 
 # Prismic Next.js Blog Site Example
 This project is an implementation of the Prismic blog site demo using Next.js. Built up from the starter project, it's meant to provide you with an idea of how to build your own sites using the Prismic features. Read our [user guide](https://user-guides.prismic.io/examples/next-js-samples/sample-blog-with-api-based-cms-in-nextjs) if you need guidance on how to use this repository.
@@ -29,13 +29,13 @@ As of version 15.0.0 of `now` you can use the `now dev` command to run the proje
 ```
 or 
 ```
-> $ npm run now-dev
+> $ npm run dev
 ```
 
 ### Alternative local development mode
-If you find required rebuild process with `now dev` slows down your development workflow, you can run the included Express server file which will handle the same custom routing needs. Keep in mind that the routes defined here are different from the ones defined in `now.json`, always check your routes with `now dev` before deploying live to production. Development server will be running in `http:https://localhost:3000/` 
+If your workflow favors working with Node, you can run the included Express server file which will handle the same custom routing needs. Keep in mind that the routes defined here are different from the ones defined in `now.json`, make sure to replicate and check your routing before deploying to production on Now. Development server will be running in `http:https://localhost:3000/` 
 ```
-> $ npm run dev
+> $ npm run node-dev
 ```
 
 ## Deploy to Now 2.0 serverless mode
@@ -51,7 +51,7 @@ or
 
 ## Get started with Prismic
 
-You can find out how to get started with Prismic from [our React documentation](https://prismic.io/docs/reactjs/getting-started/getting-started-from-scratch).
+You can find out how to get started with Prismic from [our React documentation](https://prismic.io/docs/reactjs/getting-started/prismic-nextjs).
 
 ## License
 

diff --git a/components/Footer.js b/components/Footer.js
@@ -1,15 +1,15 @@
 import React from 'react'
 
 const Footer = () => (
-<footer>
- <p>
- Proudly published with &nbsp;<a href="https://prismic.io" target="_blank" rel="noopener noreferrer">Prismic</a>
- <br/>
- <a href="https://prismic.io" target="_blank" rel="noopener noreferrer">
- <img className="footer-logo" src="/static/images/logo-prismic.svg" alt="Gray Prismic logo"/>
- </a>
- </p>
- <style jsx>{`
+ <footer>
+  <p>
+ Proudly published with &nbsp;<a href='https://prismic.io' target='_blank' rel='noopener noreferrer'>Prismic</a>
+  <br />
+  <a href='https://prismic.io' target='_blank' rel='noopener noreferrer'>
+  <img className='footer-logo' src='/static/images/logo-prismic.svg' alt='Gray Prismic logo' />
+  </a>
+  </p>
+  <style jsx>{`
  footer {
  max-width: 700px;
  margin: 0 auto;
@@ -32,7 +32,7 @@ const Footer = () => (
  margin-top: 10px;
  }
  `}</style>
-</footer>
-);
+ </footer>
+)
 
-export default Footer;
+export default Footer
diff --git a/components/Meta.js b/components/Meta.js
@@ -1,22 +1,22 @@
 import { Fragment } from 'react'
 import Head from 'next/head'
-import { apiEndpoint } from 'prismic-configuration';
-import { reset, globals, medias } from 'styles';
+import { apiEndpoint } from 'prismic-configuration'
+import { reset, globals, medias } from 'styles'
 
 export default () => (
  <Fragment>
  <Head>
- <meta charSet="utf-8" />
- <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" />
- <link rel="icon" href="/static/favicon.png" type="image/png" />
+ <meta charSet='utf-8' />
+ <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' />
+ <link rel='icon' href='/static/favicon.png' type='image/png' />
  <script dangerouslySetInnerHTML={{
  __html: `
  window.prismic = { endpoint: "${apiEndpoint}" }
- `}} />
- <script src="//static.cdn.prismic.io/prismic.min.js" />
+ ` }} />
+ <script src='//static.cdn.prismic.io/prismic.min.js' />
  </Head>
  <style jsx global>{ reset }</style>
  <style jsx global>{ globals }</style>
  <style jsx global>{ medias }</style>
  </Fragment>
-)
+)
diff --git a/components/slices/ImageCaption.js b/components/slices/ImageCaption.js
@@ -1,34 +1,33 @@
-import React, { Fragment } from 'react';
-import { RichText } from 'prismic-reactjs';
+import React, { Fragment } from 'react'
+import { RichText } from 'prismic-reactjs'
 
-import { imagePropType } from 'utils/propTypes';
+import { imagePropType } from 'utils/propTypes'
 
 import {
  shape,
- string,
- array,
-} from 'prop-types';
+ array
+} from 'prop-types'
 
 const DefaultComp = (props) => (
- <div className="post-part single container">
- <div className="block-img">
+ <div className='post-part single container'>
+ <div className='block-img'>
  <img src={props.imageUrl} alt={props.imageAlt} />
- {RichText.asText(props.caption) !== ""
- ? <p><span className="image-label">
+ {RichText.asText(props.caption) !== ''
+ ? <p><span className='image-label'>
  {RichText.asText(props.caption)}
  </span></p>
- : <p></p>
+ : <p />
  }
  </div>
  </div>
-);
+)
 
 const EmphasizedComp = (props) => (
- <div className="post-part single container">
- <div className="block-img emphasized">
+ <div className='post-part single container'>
+ <div className='block-img emphasized'>
  <img src={props.imageUrl} alt={props.imageAlt} />
- {RichText.asText(props.caption) !== ""
- ? <p><span className="image-label">
+ {RichText.asText(props.caption) !== ''
+ ? <p><span className='image-label'>
  {RichText.asText(props.caption)}
  </span></p>
  : null
@@ -43,14 +42,14 @@ const EmphasizedComp = (props) => (
  }
  `}</style>
  </div>
-);
+)
 
 const FullWidthComp = (props) => (
  <Fragment>
- <div className="blog-header single"
+ <div className='blog-header single'
  style={{ backgroundImage: 'url(' + props.imageUrl + ')' }}>
- <div className="wrapper">
- {RichText.asText(props.caption) !== ""
+ <div className='wrapper'>
+ {RichText.asText(props.caption) !== ''
  ? <h1>{RichText.asText(props.caption)}</h1>
  : null
  }
@@ -131,17 +130,17 @@ const FullWidthComp = (props) => (
  }
  `}</style>
  </Fragment>
-);
+)
 
 const ImageCaption = ({ slice }) => {
- const imageUrl = slice.primary.image.url;
- const imageAlt = slice.primary.image.alt;
- const caption  = slice.primary.caption;
+ const imageUrl = slice.primary.image.url
+ const imageAlt = slice.primary.image.alt
+ const caption = slice.primary.caption
 
  switch (slice.slice_label) {
- case "image-full-width":
+ case 'image-full-width':
  return <FullWidthComp caption={caption} imageUrl={imageUrl} imageAlt={imageAlt} />
- case "emphasized":
+ case 'emphasized':
  return <EmphasizedComp caption={caption} imageUrl={imageUrl} imageAlt={imageAlt} />
  default:
  return <DefaultComp caption={caption} imageUrl={imageUrl} imageAlt={imageAlt} />
@@ -152,9 +151,9 @@ ImageCaption.propTypes = {
  slice: shape({
  primary: shape({
  caption: array,
- image: imagePropType.isRequired,
+ image: imagePropType.isRequired
  })
  }).isRequired
 }
 
-export default ImageCaption;
+export default ImageCaption
diff --git a/components/slices/Quote.js b/components/slices/Quote.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import { RichText } from 'prismic-reactjs';
+import React from 'react'
+import { RichText } from 'prismic-reactjs'
 
 const Quote = ({ slice }) => (
- <div className="post-part single container">
- <blockquote className="block-quotation">
+ <div className='post-part single container'>
+ <blockquote className='block-quotation'>
  {RichText.asText(slice.primary.quote)}
  </blockquote>
  <style jsx>{`
@@ -31,6 +31,6 @@ const Quote = ({ slice }) => (
  }
  `}</style>
  </div>
-);
+)
 
-export default Quote;
+export default Quote
diff --git a/components/slices/Text.js b/components/slices/Text.js
@@ -1,12 +1,12 @@
-import React from 'react';
-import { RichText } from 'prismic-reactjs';
-import { linkResolver } from 'prismic-configuration';
-import htmlSerializer from 'utils/htmlSerializer';
+import React from 'react'
+import { RichText } from 'prismic-reactjs'
+import { linkResolver } from 'prismic-configuration'
+import htmlSerializer from 'utils/htmlSerializer'
 
 const Text = ({ slice }) => (
- <div className="post-part single container">
+ <div className='post-part single container'>
  {RichText.render(slice.primary.text, linkResolver, htmlSerializer)}
  </div>
-);
+)
 
-export default Text;
+export default Text
diff --git a/components/slices/index.js b/components/slices/index.js
@@ -1,3 +1,3 @@
-export { default as Text } from './Text';
-export { default as Quote } from './Quote';
-export { default as ImageCaption } from './ImageCaption';
+export { default as Text } from './Text'
+export { default as Quote } from './Quote'
+export { default as ImageCaption } from './ImageCaption'
diff --git a/layouts/index.js b/layouts/index.js
@@ -7,6 +7,6 @@ const DefaultLayout = ({ children }) => (
  <main>{children}</main>
  <Footer />
  </div>
-);
+)
 
-export default DefaultLayout;
+export default DefaultLayout
diff --git a/next.config.js b/next.config.js
@@ -2,8 +2,8 @@ const path = require('path')
 
 module.exports = {
  target: 'serverless',
- webpack(config) {
+ webpack (config) {
  config.resolve.modules.push(path.resolve('./'))
  return config
  }
-}
+}
diff --git a/now.json b/now.json
@@ -3,7 +3,7 @@
  "name": "prismic-nextjs-blog",
  "builds": [{ "src": "next.config.js", "use": "@now/next" }],
  "routes": [
- { "src": "/preview\\?(?<query>.*)", "dest": "/preview?query=$query" },
+ { "src": "/preview", "dest": "/preview" },
  { "src": "/blog/?", "status": 302, "headers": { "Location": "/" } },
  { "src": "/blog/(?<uid>[^/]+)$", "dest": "/post?uid=$uid" }
  ]