Add Calendar component

README.md

@@ -4,9 +4,9 @@
 
 # Installation
 ---
-Install this starter (assuming Gatsby is installed) by running from your CLI: 
+Run this starter (assuming Gatsby is installed) by running from your CLI: 
 ```
-gatsby new clean gh:brianstone/gatsby-starter-clean
+gatsby develop
 ```
 
 # Deploy

components/DateTime.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import moment from 'moment';
+import 'moment/locale/it';
+moment.locale('it');
+
+const DateTime = React.createClass({
+  render() {
+    const { start, end } = this.props;
+
+    let format = start.dateTime ? 'dddd, DD MMMM @ HH:mm' : 'dddd, DD MMMM';
+
+    return (
+      <span style={{
+        'color': 'gray',
+      }}>
+        <span> {moment(start.dateTime || start.date).format(format)} </span>
+        {(() => {
+          if (end.dateTime || end.date) {
+            const isSameDay = moment(end.dateTime || end.date).isSame(start.dateTime || start.date, 'day');
+            if (isSameDay) {
+              format = format.replace('dddd, DD MMMM @ ', '');
+            }
+
+            return (
+              <span>&#9679; {moment(end.dateTime || end.date).format(format)} </span>
+            );
+          }
+        })()}
+      </span>
+    );
+  }
+});
+
+export default DateTime;

config.toml

@@ -1,2 +1,2 @@
-siteTitle="Gatsby Starter Site"
+siteTitle="DevDay Calendar"
 linkPrefix = "/gatsby-starter-default"

css/styles.css

@@ -0,0 +1,13 @@
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #45484a;
+}
+
+.highlight {
+  color: #14c3f4;
+}

package.json

@@ -9,15 +9,18 @@
     "highlight.js": "^9.6.0",
     "history": "^2.0.2",
     "js-yaml": "^3.6.0",
+    "lodash": "^4.17.4",
     "markdown-it": "^7.0.1",
     "markdown-it-abbr": "^1.0.3",
     "markdown-it-attrs": "^0.6.3",
     "markdown-it-deflist": "^2.0.1",
     "markdown-it-footnote": "^3.0.1",
     "markdown-it-sub": "^1.0.0",
+    "moment": "^2.17.1",
     "object-assign": "^4.1.0",
-    "react-helmet": "^3.1.0",
     "react-headroom": "^2.1.2",
+    "react-helmet": "^3.1.0",
+    "react-refetch": "^1.0.0",
     "react-responsive-grid": "^0.3.3",
     "react-typography": "^0.12.0",
     "toml-js": "0.0.8",

pages/_template.jsx

@@ -1,11 +1,12 @@
-import React from 'react'
-import { Container } from 'react-responsive-grid'
-import { Link } from 'react-router'
-import { prefixLink } from 'gatsby-helpers'
-import Headroom from 'react-headroom'
-import '../css/markdown-styles'
+import React from 'react';
+import { Container } from 'react-responsive-grid';
+import Headroom from 'react-headroom';
+import { Link } from 'react-router';
+import { prefixLink } from 'gatsby-helpers';
 
-import { rhythm } from '../utils/typography'
+import { rhythm } from '../utils/typography';
+
+import 'css/styles.css';
 
 module.exports = React.createClass({
   propTypes () {
@@ -20,26 +21,18 @@ module.exports = React.createClass({
           wrapperStyle={{
             marginBottom: rhythm(1),
           }}
-          style={{
-            background: '#252525'
-          }}
         >
           <Container
             style={{
-              maxWidth: 960,
-              paddingTop: 0,
-              padding: `${rhythm(1)} ${rhythm(3/4)}`,
+              'maxWidth'          : 960,
+              'padding'           : `${rhythm(0.5)}`,
+              // 'backgroundImage'   : `url(${prefixLink('devday.png')})`,
+              // 'backgroundSize'    : 'contain',
+              // 'backgroundRepeat'  : 'no-repeat',
+              // 'backgroundPosition': '50%',
             }}
           >
-            <Link
-              to={prefixLink('/')}
-              style={{
-                color: 'white',
-                textDecoration: 'none',
-              }}
-            >
-              Your Brand!
-            </Link>
+            <h1><span className="highlight">P</span>rossimi <span className="highlight">E</span>venti</h1>
           </Container>
         </Headroom>
         <Container

pages/index.js

@@ -1,25 +1,76 @@
-import React from 'react'
-import { Link } from 'react-router'
-import { prefixLink } from 'gatsby-helpers'
-import Helmet from "react-helmet"
-import { config } from 'config'
-
-export default class Index extends React.Component {
-  render () {
+import React from 'react';
+import { connect, PromiseState } from 'react-refetch';
+import Helmet from "react-helmet";
+
+import _ from 'lodash';
+
+import { rhythm } from '../utils/typography';
+
+import DateTime from '../components/DateTime';
+
+import { config } from 'config';
+
+class Index extends React.Component {
+  render() {
+    const { calendarFetch } = this.props
+
+    if (calendarFetch.pending || calendarFetch.rejected) {
+      return (
+        null
+      );
+    }
+
+    // calendarFetch.fulfilled
+    const events = calendarFetch.value.items;
+
     return (
       <div>
         <Helmet
           title={config.siteTitle}
           meta={[
-            {"name": "description", "content": "Sample"},
-            {"name": "keywords", "content": "sample, something"},
+            {"name": "description", "content": "DevDay Calendar"},
+            {"name": "keywords", "content": "DevDay Calendar"},
           ]}
         />
-        <h1>
-          Hello World!
-        </h1>
-        <p>Welcome to your new clean Gatsby site</p>
+
+      {_.sortBy(events, [(o) => {
+        if (o.start.dateTime) return o.start.dateTime;
+        if (o.start.date) return o.start.date;
+      }]).map((event) => {
+          const { id, start, end, location, description } = event;
+          return (
+            <div key={id}>
+              <hr />
+
+              <p style={{
+                'marginBottom': 0,
+              }}>
+                <DateTime start={start} end={end} />
+              </p>
+              <h1 style={{
+                'marginBottom': `${rhythm(0.5)}`,
+              }}>
+                <span className="highlight">{event.summary}</span>
+
+              </h1>
+              <p style={{
+                'marginBottom': `${rhythm(0.5)}`,
+              }}><strong>{location}</strong></p>
+
+            </div>
+          );
+        })}
       </div>
-    )
+    );
+
   }
 }
+
+export default connect(props => {
+  const CALENDAR  = '[email protected]';
+  const KEY       = 'AIzaSyBnJSFE54r9rHTAys4y6-A5h8pdU8KKoSA';
+
+  return {
+    'calendarFetch': `https://www.googleapis.com/calendar/v3/calendars/${CALENDAR}/events?singleEvents=true&key=${KEY}`,
+  }
+})(Index);

utils/typography.js

@@ -1,22 +1,20 @@
-import ReactDOM from 'react-dom/server'
-import React from 'react'
-import Typography from 'typography'
-import { GoogleFont } from 'react-typography'
-import CodePlugin from 'typography-plugin-code'
+import ReactDOM from 'react-dom/server';
+import React from 'react';
+import Typography from 'typography';
+import { GoogleFont } from 'react-typography';
+import CodePlugin from 'typography-plugin-code';
 
 const options = {
   googleFonts: [
     {
-      name: 'Roboto',
+      name: 'Montserrat',
       styles: [
         '400',
-        '400i',        
-        '700'
       ]
     }
   ],
-  headerFontFamily: ['Roboto', 'sans-serif'],
-  bodyFontFamily: ['Roboto', 'sans-serif'],
+  headerFontFamily: ['Montserrat', 'sans-serif'],
+  bodyFontFamily: ['Montserrat', 'sans-serif'],
   baseFontSize: '18px',
   baseLineHeight: 1.65,
   scale: 2.25,
@@ -29,14 +27,14 @@ const typography = new Typography(options)
 
 // Hot reload typography in development.
 if (process.env.NODE_ENV !== 'production') {
-  typography.injectStyles()
+  typography.injectStyles();
   if (typeof document !== 'undefined') {
     const googleFonts = ReactDOM.renderToStaticMarkup(
       React.createFactory(GoogleFont)({ typography })
-    )
-    const head = document.getElementsByTagName('head')[0]
-    head.insertAdjacentHTML('beforeend', googleFonts)
+    );
+    const head = document.getElementsByTagName('head')[0];
+    head.insertAdjacentHTML('beforeend', googleFonts);
   }
 }
 
-export default typography
+export default typography;