First commit

.gitignore

@@ -0,0 +1,9 @@
+# Project dependencies
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+.cache/
+# Build directory
+public/
+.DS_Store
+yarn-error.log
+.env

.nvmrc

@@ -0,0 +1 @@
+v8.1.4

README.md

@@ -0,0 +1,45 @@
+# Gatsby Portfolio Website
+
+This repo contains a working static website written with [Gatsby](https://www.gatsbyjs.org/), integrated with content coming from this [DatoCMS administrative area](https://dashboard.datocms.com/account/sites/template?name=Portfolio&siteId=604).
+
+[See the demo](http://cranky-edison-12166d.netlify.com/)
+
+## Usage
+
+First, install the dependencies of this project:
+
+```
+yarn install
+```
+
+Add an `.env` file containing the read-only API token of your DatoCMS site:
+
+```
+echo 'DATO_API_TOKEN=abc123' >> .env
+```
+
+Then, to run this website in development mode (with live-reload):
+
+```
+yarn develop
+```
+
+To build the final, production ready static website:
+
+```
+yarn build
+```
+
+The final result will be saved in the `public` directory.
+
+## About
+
+The goal of this project is to show how easily you can create static sites using the content (text, images, links, etc.) stored on [DatoCMS](https://www.datocms.com). This project is configured to fetch data from a specific administrative area using [the API DatoCMS provides](https://docs.datocms.com/api/reference.html).
+
+You can find further information about how to integrate DatoCMS with Gatsby in [our documentation](https://docs.datocms.com/gatsby/overview.html).
+
+This websites uses:
+
+* [Yarn](https://yarnpkg.com/) as package manager;
+* [GatsbyJS](https://github.com/gatsbyjs/gatsby) as website generator;
+* [gatsby-source-datocms](https://github.com/datocms/gatsby-source-datocms) to integrate the website with DatoCMS.

gatsby-config.js

@@ -0,0 +1,18 @@
+require('dotenv').config()
+
+module.exports = {
+  siteMetadata: {
+    title: `Creative Portfolio`,
+  },
+  plugins: [
+    `gatsby-plugin-react-helmet`,
+    `gatsby-plugin-sass`,
+    `gatsby-transformer-remark`,
+    {
+      resolve: `gatsby-source-datocms`,
+      options: {
+        apiToken: process.env.DATO_API_TOKEN,
+      },
+    },
+  ],
+}

gatsby-node.js

@@ -0,0 +1,31 @@
+const path = require(`path`)
+const { createFilePath } = require(`gatsby-source-filesystem`)
+
+exports.createPages = ({ graphql, boundActionCreators }) => {
+  const { createPage } = boundActionCreators
+
+  return new Promise((resolve, reject) => {
+    graphql(`
+      {
+        allDatoCmsWork {
+          edges {
+            node {
+              slug
+            }
+          }
+        }
+      }
+    `).then(result => {
+      result.data.allDatoCmsWork.edges.map(({ node: work }) => {
+        createPage({
+          path: `works/${work.slug}`,
+          component: path.resolve(`./src/templates/work.js`),
+          context: {
+            slug: work.slug,
+          },
+        })
+      })
+      resolve()
+    })
+  })
+}

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "gatsby-datocms-demo",
+  "description": "Gatsby DatoCMS creative portfolio demo",
+  "version": "1.0.0",
+  "author": "Stefano Verna <s.verna@datocms.com>",
+  "dependencies": {
+    "dotenv": "4.0.0",
+    "gatsby": "^1.9.194",
+    "gatsby-image": "1.0.27",
+    "gatsby-link": "^1.6.28",
+    "gatsby-plugin-react-helmet": "^1.0.8",
+    "gatsby-plugin-sass": "1.0.14",
+    "gatsby-source-datocms": ">=1.0.26",
+    "gatsby-source-filesystem": "1.5.9",
+    "gatsby-transformer-remark": "1.7.23",
+    "react-masonry-component": "6.0.1",
+    "react-slick": "0.15.4"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "license": "MIT",
+  "main": "n/a",
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\""
+  },
+  "devDependencies": {
+    "prettier": "^1.8.2"
+  }
+}

src/layouts/index.js

@@ -0,0 +1,98 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Link from 'gatsby-link'
+import { HelmetDatoCms } from 'gatsby-source-datocms'
+
+import '../styles/index.sass'
+
+const TemplateWrapper = ({ children, data }) => (
+  <div className="container">
+    <HelmetDatoCms
+      favicon={data.datoCmsSite.faviconMetaTags}
+      seo={data.datoCmsHome.seoMetaTags}
+    />
+    <div className="container__sidebar">
+      <div className="sidebar">
+        <h6 className="sidebar__title">
+          <Link to="/">{data.datoCmsSite.globalSeo.siteName}</Link>
+        </h6>
+        <div
+          className="sidebar__intro"
+          dangerouslySetInnerHTML={{
+            __html: data.datoCmsHome.introTextNode.childMarkdownRemark.html,
+          }}
+        />
+        <ul className="sidebar__menu">
+          <li>
+            <Link to="/">Home</Link>
+          </li>
+          <li>
+            <Link to="/about">About</Link>
+          </li>
+        </ul>
+        <p className="sidebar__social">
+          {data.allDatoCmsSocialProfile.edges.map(({ node: profile }) => (
+            <a
+              key={profile.profileType}
+              href={profile.url}
+              target="blank"
+              className={`social social--${profile.profileType.toLowerCase()}`}
+            />
+          ))}
+        </p>
+        <div className="sidebar__copyright">{data.datoCmsHome.copyright}</div>
+      </div>
+    </div>
+    <div className="container__body">
+      <div className="container__mobile-header">
+        <div className="mobile-header">
+          <div className="mobile-header__menu">
+            <Link to="#" data-js="toggleSidebar" />
+          </div>
+          <div className="mobile-header__logo">
+            <Link to="/">{data.datoCmsSite.globalSeo.siteName}</Link>
+          </div>
+        </div>
+      </div>
+      {children()}
+    </div>
+  </div>
+)
+
+TemplateWrapper.propTypes = {
+  children: PropTypes.func,
+}
+
+export default TemplateWrapper
+
+export const query = graphql`
+  query LayoutQuery {
+    datoCmsSite {
+      globalSeo {
+        siteName
+      }
+      faviconMetaTags {
+        ...GatsbyDatoCmsFaviconMetaTags
+      }
+    }
+    datoCmsHome {
+      seoMetaTags {
+        ...GatsbyDatoCmsSeoMetaTags
+      }
+      introTextNode {
+        childMarkdownRemark {
+          html
+        }
+      }
+      copyright
+    }
+    allDatoCmsSocialProfile(sort: { fields: [position], order: ASC }) {
+      edges {
+        node {
+          profileType
+          url
+        }
+      }
+    }
+  }
+`

src/pages/404.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+const NotFoundPage = () => (
+  <div>
+    <h1>NOT FOUND</h1>
+    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+  </div>
+)
+
+export default NotFoundPage

src/pages/about.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import Link from 'gatsby-link'
+import { HelmetDatoCms } from 'gatsby-source-datocms'
+import Img from 'gatsby-image'
+
+const About = ({ data: { about } }) => (
+  <article className="sheet">
+    <HelmetDatoCms seo={about.seoMetaTags} />
+    <div className="sheet__inner">
+      <h1 className="sheet__title">{about.title}</h1>
+      <p className="sheet__lead">{about.subtitle}</p>
+      <div className="sheet__gallery">
+        <Img sizes={about.photo.sizes} />
+      </div>
+      <div
+        className="sheet__body"
+        dangerouslySetInnerHTML={{
+          __html: about.bioNode.childMarkdownRemark.html,
+        }}
+      />
+    </div>
+  </article>
+)
+
+export default About
+
+export const query = graphql`
+  query AboutQuery {
+    about: datoCmsAboutPage {
+      seoMetaTags {
+        ...GatsbyDatoCmsSeoMetaTags
+      }
+      title
+      subtitle
+      photo {
+        sizes(maxWidth: 600, imgixParams: { fm: "jpg", auto: "compress" }) {
+          ...GatsbyDatoCmsSizes
+        }
+      }
+      bioNode {
+        childMarkdownRemark {
+          html
+        }
+      }
+    }
+  }
+`

src/pages/index.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import Link from 'gatsby-link'
+import Masonry from 'react-masonry-component'
+import Img from 'gatsby-image'
+
+const IndexPage = ({ data }) => (
+  <Masonry className="showcase">
+    {data.allDatoCmsWork.edges.map(({ node: work }) => (
+      <div key={work.id} className="showcase__item">
+        <figure className="card">
+          <Link to={`/works/${work.slug}`} className="card__image">
+            <Img sizes={work.coverImage.sizes} />
+          </Link>
+          <figcaption className="card__caption">
+            <h6 className="card__title">
+              <Link to={`/works/${work.slug}`}>{work.title}</Link>
+            </h6>
+            <div className="card__description">
+              <p>{work.excerpt}</p>
+            </div>
+          </figcaption>
+        </figure>
+      </div>
+    ))}
+  </Masonry>
+)
+
+export default IndexPage
+
+export const query = graphql`
+  query IndexQuery {
+    allDatoCmsWork(sort: { fields: [position], order: ASC }) {
+      edges {
+        node {
+          id
+          title
+          slug
+          excerpt
+          coverImage {
+            sizes(maxWidth: 450, imgixParams: { fm: "jpg", auto: "compress" }) {
+              ...GatsbyDatoCmsSizes
+            }
+          }
+        }
+      }
+    }
+  }
+`