Initial 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 @@
+v10

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Cantiere Creativo SRL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,53 @@
+# Gatsby Portfolio Website
+
+This repo contains a static website written with [GatsbyJS](https://www.gatsbyjs.org/), integrated with content coming from [DatoCMS](https://www.datocms.com).
+
+![Preview](preview.png)
+
+[See the live demo](https://demo-datocms-gatsby.netlify.com/)
+
+If you want to use try this out yourself, you first need to set up a project on DatoCMS which will host your data.
+
+You can [sign up for a free account](https://dashboard.datocms.com/signup) and then you can simply click this button:
+
+[![Deploy with DatoCMS](https://dashboard.datocms.com/deploy/button.svg)](https://dashboard.datocms.com/projects/new-from-template/static-website/gatsby-portfolio)
+
+## Repo 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://www.datocms.com/docs/content-management-api).
+
+You can find further information about how to integrate DatoCMS with Gatsby in [our documentation](https://www.datocms.com/docs/static-generators/gatsbyjs).
+
+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.

datocms.json

@@ -0,0 +1,11 @@
+{
+  "name": "Gatsby Portfolio Website",
+  "description": "Simple portfolio website built with Gatsby.js and DatoCMS source plugin",
+  "previewImage": "https://www.datocms-assets.com/205/1584546486-screen-shot-2020-03-18-at-16-47-38-fullpage.png?crop=top&fit=crop&h=500&w=600&auto=format",
+  "datocmsProjectId": "604",
+  "deploymentType": "static",
+  "buildCommand": "yarn build",
+  "datocmsApiTokenEnvName": "DATO_API_TOKEN",
+  "buildDirectory": "public",
+  "livePreviewUrl": "https://adoring-carson-24f43a.netlify.com/"
+}

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, actions }) => {
+  const { createPage } = actions
+
+  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,36 @@
+{
+  "name": "gatsby-datocms-demo",
+  "description": "Gatsby DatoCMS creative portfolio demo",
+  "version": "1.0.0",
+  "author": "Stefano Verna <[email protected]>",
+  "dependencies": {
+    "dotenv": "^8.1.0",
+    "gatsby": "^2.20.0",
+    "gatsby-image": "^2.2.34",
+    "gatsby-plugin-react-helmet": "^3.1.16",
+    "gatsby-plugin-sass": "^2.1.24",
+    "gatsby-source-datocms": "^2.2.0",
+    "gatsby-source-filesystem": "^2.1.40",
+    "gatsby-transformer-remark": "^2.6.39",
+    "node-sass": "^4.13.0",
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2",
+    "react-helmet": "^5.2.0",
+    "react-masonry-component": "^6.2.1",
+    "react-slick": "^0.25.2",
+    "slick-carousel": "^1.8.1"
+  },
+  "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.17.0"
+  }
+}

src/components/layout.js

@@ -0,0 +1,118 @@
+/* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid*/
+
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Link } from "gatsby";
+import { StaticQuery, graphql } from "gatsby";
+import { HelmetDatoCms } from "gatsby-source-datocms";
+
+import "../styles/index.sass";
+
+const TemplateWrapper = ({ children }) => {
+  const [showMenu, setShowMenu] = useState(false);
+  return (
+    <StaticQuery
+      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
+              }
+            }
+          }
+        }
+      `}
+      render={data => (
+        <div className={`container ${showMenu ? "is-open" : ""}`}>
+          <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()}`}
+                  >
+                    {" "}
+                  </a>
+                ))}
+              </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">
+                  <button
+                    onClick={e => {
+                      e.preventDefault();
+                      setShowMenu(!showMenu);
+                    }}
+                  />
+                </div>
+                <div className="mobile-header__logo">
+                  <Link to="/">{data.datoCmsSite.globalSeo.siteName}</Link>
+                </div>
+              </div>
+            </div>
+            {children}
+          </div>
+        </div>
+      )}
+    />
+  );
+};
+
+TemplateWrapper.propTypes = {
+  children: PropTypes.object
+};
+
+export default TemplateWrapper;
+/* eslint-enable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid*/

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,50 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+import { HelmetDatoCms } from 'gatsby-source-datocms'
+import Img from 'gatsby-image'
+import Layout from "../components/layout"
+
+const About = ({ data: { about } }) => (
+  <Layout>
+    <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 fluid={about.photo.fluid} />
+        </div>
+        <div
+          className="sheet__body"
+          dangerouslySetInnerHTML={{
+            __html: about.bioNode.childMarkdownRemark.html,
+          }}
+        />
+      </div>
+    </article>
+  </Layout>
+)
+
+export default About
+
+export const query = graphql`
+  query AboutQuery {
+    about: datoCmsAboutPage {
+      seoMetaTags {
+        ...GatsbyDatoCmsSeoMetaTags
+      }
+      title
+      subtitle
+      photo {
+        fluid(maxWidth: 600, imgixParams: { fm: "jpg", auto: "compress" }) {
+          ...GatsbyDatoCmsSizes
+        }
+      }
+      bioNode {
+        childMarkdownRemark {
+          html
+        }
+      }
+    }
+  }
+`