adds next components and storyblok service

storyblok · Jan 27, 2018 · 3cb8df7 · 3cb8df7
1 parent b607bad
commit 3cb8df7
Show file tree

Hide file tree

Showing 22 changed files with 598 additions and 103 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,5 @@
+root = true
+
+[**/*]
+indent_style = space
+indent_size = 2
diff --git a/.upignore b/.upignore
@@ -0,0 +1,3 @@
+!/.next
+!/build
+!/dist
diff --git a/components/Feature.js b/components/Feature.js
@@ -0,0 +1,36 @@
+import Components from './index'
+import SbEditable from 'storyblok-react'
+import React from 'react'
+
+export default class extends React.Component {
+  resizedIcon(index) {
+    if (typeof this.props.content.icon !== 'undefined') {
+      return '//img2.storyblok.com/80x80' + this.props.content.icon.replace('//a.storyblok.com', '')
+    }
+    return null
+  }
+
+  render() {
+    return (
+      <SbEditable content={this.props.content}>
+        <div className="feature util__flex-eq">
+          <img src={this.resizedIcon()} className="feature__icon" />
+          <h2>{this.props.content.name}</h2>
+          <div className="feature__description">
+            {this.props.content.description}
+          </div>
+          <style jsx>{`
+            .feature {
+              text-align: center;
+              padding: 30px 10px 100px;
+            }
+
+            .feature__icon {
+              max-width: 80px;
+            }
+          `}</style>
+        </div>
+      </SbEditable>
+    )
+  }
+}
diff --git a/components/Footer.js b/components/Footer.js
@@ -0,0 +1,14 @@
+export default (props) => (
+  <div className="footer">
+    <div className="util__container">
+      My Next.js website
+    </div>
+    <style jsx>{`
+      .footer {
+        background: #e3f2ed;
+        padding: 40px 0 120px 0;
+        text-align: center;
+      }
+    `}</style>
+  </div>
+)
diff --git a/components/Grid.js b/components/Grid.js
@@ -0,0 +1,12 @@
+import Components from './index'
+import SbEditable from 'storyblok-react'
+
+export default (props) => (
+  <SbEditable content="props.content">
+    <div className="util__flex">
+      {props.content.columns.map((blok) =>
+        Components(blok)
+      )}
+    </div>
+  </SbEditable>
+)
diff --git a/components/Layout.js b/components/Layout.js
@@ -0,0 +1,60 @@
+import Head from '../components/Head'
+import Nav from '../components/Nav'
+import Footer from '../components/Footer'
+
+export default ({ children, settings = {} }) => (
+  <div>
+    <Head />
+    <Nav settings={settings} />
+    <div className="util__container">
+      {children}
+    </div>
+    <Footer />
+
+    <style jsx global>{`
+      article, aside, footer, header, hgroup, main, nav, section {
+        display: block;
+      }
+
+      body {
+        font-family: 'Zilla Slab', Helvetica, sans-serif;
+        line-height: 1;
+        font-size: 18px;
+        color: #000;
+        margin: 0;
+        padding: 0;
+      }
+
+      .util__flex {
+        display: flex;
+      }
+
+      .util__flex-col {
+        flex: 0 0 auto;
+      }
+
+      .util__flex-eq {
+        flex: 1;
+      }
+
+      .util__container {
+        max-width: 75rem;
+        margin-left: auto;
+        margin-right: auto;
+        padding-left: 20px;
+        padding-right: 20px;
+        box-sizing: border-box;
+      }
+
+      #nprogress .bar {
+        background: #29d;
+        position: fixed;
+        z-index: 1031;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 2px;
+      }
+    `}</style>
+  </div>
+)
diff --git a/components/NotFound.js b/components/NotFound.js
@@ -0,0 +1,3 @@
+export default (props) => (
+  <div>The component {props.content.component} has not been created yet.</div>
+)
diff --git a/components/Slide.js b/components/Slide.js
@@ -0,0 +1,14 @@
+import SbEditable from 'storyblok-react'
+
+export default (props) => (
+  <SbEditable content={props.content}>
+    <div className="slide">
+      <img src={props.content.image} />
+      <style jsx>{`
+        .slide img {
+          width: 100%;
+        }
+      `}</style>
+    </div>
+  </SbEditable>
+)
diff --git a/components/Teaser.js b/components/Teaser.js
@@ -0,0 +1,72 @@
+import Components from './index'
+import SbEditable from 'storyblok-react'
+import React from 'react'
+
+export default class extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {currentSlide: 0}
+  }
+
+  slide() {
+    let slides = this.props.content.body.filter((slide, index) => {
+      return this.state.currentSlide === index
+    })
+    if (slides.length) {
+      return slides[0]
+    }
+    return null
+  }
+
+  pagClass(index) {
+    return 'teaser__pag-dot ' + (index == this.state.currentSlide ? 'teaser__pag-dot--current' : '')
+  }
+
+  handleDotClick(index) {
+    this.setState({
+      currentSlide: index
+    })
+  }
+
+  render() {
+    return (
+      <SbEditable content={this.props.content}>
+        <div className="teaser">
+          {this.slide() ? Components(this.slide()) : ''}
+
+          <div className="teaser__pag">
+            {this.props.content.body.map((blok, index) =>
+              <button key={index} onClick={() => this.handleDotClick(index)}
+                className={this.pagClass(index)}>Next</button>
+            )}
+          </div>
+
+          <style jsx>{`
+            .teaser__pag {
+              width: 100%;
+              text-align: center;
+              margin: 30px 0;
+            }
+
+            .teaser__pag-dot {
+              text-indent: -9999px;
+              border: 0;
+              border-radius: 50%;
+              width: 17px;
+              height: 17px;
+              padding: 0;
+              margin: 5px 6px;
+              background-color: #ccc;
+              -webkit-appearance: none;
+              cursor: pointer;
+            }
+
+            .teaser__pag-dot--current {
+              background-color: #000;
+            }
+          `}</style>
+        </div>
+      </SbEditable>
+    )
+  }
+}
diff --git a/components/head.js b/components/head.js
@@ -1,13 +1,22 @@
 import NextHead from 'next/head'
 import { string } from 'prop-types'
+import NProgress from 'nprogress'
+import Router from 'next/router'
+
+Router.onRouteChangeStart = (url) => {
+  console.log(`Loading: ${url}`)
+  NProgress.start()
+}
+Router.onRouteChangeComplete = () => NProgress.done()
+Router.onRouteChangeError = () => NProgress.done()
 
 const defaultDescription = ''
 const defaultOGURL = ''
 const defaultOGImage = ''
 
 const Head = (props) => (
   <NextHead>
-    <meta charset="UTF-8" />
+    <meta charSet="UTF-8" />
     <title>{props.title || ''}</title>
     <meta name="description" content={props.description || defaultDescription} />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -24,6 +33,8 @@ const Head = (props) => (
     <meta property="og:image" content={props.ogImage || defaultOGImage} />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
+
+    <script src="//app.storyblok.com/f/storyblok-latest.js?t=qvOwrwasP7686hfwBsTumAtt"></script>
   </NextHead>
 )
 

diff --git a/components/index.js b/components/index.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import NotFound from './NotFound'
+import Teaser from './Teaser'
+import Feature from './Feature'
+import Slide from './Slide'
+import Grid from './Grid'
+
+const Components = {
+  'teaser': Teaser,
+  'feature': Feature,
+  'slide': Slide,
+  'grid': Grid
+}
+
+export default (blok) => {
+  if (typeof Components[blok.component] !== 'undefined') {
+    return React.createElement(Components[blok.component], {key: blok._uid, content: blok})
+  }
+  return React.createElement(NotFound, {key: blok._uid, content: blok})
+}