Initial commit

Author: robertcoopercode

.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/
+static/admin/*.bundle.*
+.DS_Store
+yarn-error.log

.nvmrc

@@ -0,0 +1 @@
+v9.10.0

LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 gatsbyjs
+
+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,37 @@
+# Gatsby & Netlify CMS Example
+
+An example website built using Gatsby V2 and Netlify CMS. The website is a fake JavaScript meetup site that lists upcoming meetups, information about the meetup group, as well as a list of past meetups.
+
+The purpose of the repository is to provide an idea of how a Gatsby project is structured with Netlify CMS. You can easily deploy your own instance of this application by clicking the button below:
+
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/robertcoopercode/gatsby-netlify-cms)
+
+## Local Development
+
+### Prerequisites
+
+- Node (see [.nvmrc](./.nvmrc) for version)
+
+### Run the project
+
+```
+$ git clone [email protected]:robertcoopercode/gatsby-netlify-cms.git
+$ cd gatsby-netlify-cms
+$ yarn
+$ yarn develop
+```
+
+To test the CMS locally, you'll to need run a production build of the site:
+
+```
+$ yarn build
+$ yarn serve
+```
+
+### Setting up the CMS
+
+For details on how to configure the CMS, take a look at the [Netlify CMS Docs](https://www.netlifycms.org/docs/intro).
+
+## Useful Ressources
+- ["Official" Gatsby and Netlify CMS starter](https://github.com/netlify-templates/gatsby-starter-netlify-cms)
+This starter includes a blog built with Gatsby and Netlify CMS. It was actually used as the starting off point for this repository.

gatsby-config.js

@@ -0,0 +1,44 @@
+module.exports = {
+  siteMetadata: {
+    title: "Gatsby + Netlify CMS Starter",
+  },
+  plugins: [
+    "gatsby-plugin-react-helmet",
+    "gatsby-plugin-sass",
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        path: `${__dirname}/src/pages`,
+        name: "pages",
+      },
+    },
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        path: `${__dirname}/src/img`,
+        name: "images",
+      },
+    },
+    "gatsby-plugin-sharp",
+    "gatsby-transformer-sharp",
+    {
+      resolve: "gatsby-transformer-remark",
+      options: {
+        plugins: [],
+      },
+    },
+    {
+      resolve: "gatsby-plugin-netlify-cms",
+      options: {
+        modulePath: `${__dirname}/src/cms/cms.js`,
+      },
+    },
+    {
+      resolve: `gatsby-plugin-favicon`,
+      options: {
+        logo: "./src/img/favicon.png",
+      },
+    },
+    "gatsby-plugin-netlify", // make sure to keep it last in the array
+  ],
+};

gatsby-node.js

@@ -0,0 +1,75 @@
+const _ = require("lodash");
+const path = require("path");
+const { createFilePath } = require("gatsby-source-filesystem");
+
+exports.createPages = ({ actions, graphql }) => {
+  const { createPage } = actions;
+
+  return graphql(`
+    {
+      allMarkdownRemark(limit: 1000) {
+        edges {
+          node {
+            id
+            fields {
+              slug
+            }
+            frontmatter {
+              path
+              templateKey
+            }
+          }
+        }
+      }
+    }
+  `).then(result => {
+    if (result.errors) {
+      result.errors.forEach(e => console.error(e.toString()));
+      return Promise.reject(result.errors);
+    }
+
+    // Filter out the footer, navbar, and meetups so we don't create pages for those
+    const postOrPage = result.data.allMarkdownRemark.edges.filter(edge => {
+      if (edge.node.frontmatter.templateKey === "navbar") {
+        return false;
+      } else if (edge.node.frontmatter.templateKey === "footer") {
+        return false;
+      } else {
+        return !Boolean(edge.node.fields.slug.match(/^\/meetups\/.*$/));
+      }
+    });
+
+    postOrPage.forEach(edge => {
+      let component, pathName;
+      if (edge.node.frontmatter.templateKey === "home-page") {
+        pathName = "/";
+        component = path.resolve(`src/pages/index.js`);
+      } else {
+        pathName = edge.node.frontmatter.path || edge.node.fields.slug;
+        component = path.resolve(`src/templates/${String(edge.node.frontmatter.templateKey)}.js`);
+      }
+      const id = edge.node.id;
+      createPage({
+        path: pathName,
+        component,
+        // additional data can be passed via context
+        context: {
+          id,
+        },
+      });
+    });
+  });
+};
+
+exports.onCreateNode = ({ node, actions, getNode }) => {
+  const { createNodeField } = actions;
+
+  if (node.internal.type === `MarkdownRemark`) {
+    const value = createFilePath({ node, getNode });
+    createNodeField({
+      name: `slug`,
+      node,
+      value,
+    });
+  }
+};

netlify.toml

@@ -0,0 +1,6 @@
+[build]
+  publish = "public"
+  command = "npm run build"
+[build.environment]
+  YARN_VERSION = "1.3.2"
+  YARN_FLAGS = "--no-ignore-optional"

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "gatsby-starter-netlify-cms",
+  "description": "Example Gatsby, and Netlify CMS project",
+  "version": "1.1.3",
+  "author": "Robert Cooper",
+  "dependencies": {
+    "date-fns": "^1.29.0",
+    "gatsby": "^2.0.0",
+    "gatsby-plugin-favicon": "^3.1.4",
+    "gatsby-plugin-netlify": "^2.0.0",
+    "gatsby-plugin-netlify-cms": "^3.0.0",
+    "gatsby-plugin-react-helmet": "^3.0.0",
+    "gatsby-plugin-sass": "^2.0.1",
+    "gatsby-plugin-sharp": "^2.0.5",
+    "gatsby-remark-images": "^2.0.1",
+    "gatsby-source-filesystem": "^2.0.1",
+    "gatsby-transformer-remark": "^2.1.1",
+    "gatsby-transformer-sharp": "^2.1.1",
+    "lodash": "^4.17.5",
+    "lodash-webpack-plugin": "^0.11.4",
+    "netlify-cms": "^2.1.1",
+    "node-sass": "^4.9.2",
+    "parcel-bundler": "^1.9.4",
+    "prop-types": "^15.6.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.4.1",
+    "react-google-maps": "^9.4.5",
+    "react-helmet": "^5.2.0",
+    "react-markdown": "^4.0.3",
+    "uuid": "^3.2.1"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "license": "MIT",
+  "main": "n/a",
+  "scripts": {
+    "start": "npm run develop",
+    "clean": "rimraf .cache public",
+    "build": "npm run clean && gatsby build",
+    "develop": "npm run clean && gatsby develop",
+    "serve": "gatsby serve",
+    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "prettier": "^1.7.4",
+    "rimraf": "^2.6.2"
+  }
+}

renovate.json

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "config:base"
+  ],
+  "rangeStrategy": "replace",
+  "lockFileMaintenance": {
+    "enabled": true,
+    "extends": "schedule:weekly"
+  }
+}

src/cms/cms.js

@@ -0,0 +1,15 @@
+import CMS from "netlify-cms";
+
+import AboutPagePreview from "./preview-templates/AboutPagePreview";
+import HomePagePreview from "./preview-templates/HomePagePreview";
+import MeetupPreview from "./preview-templates/MeetupPreview";
+import FooterPreview from "./preview-templates/FooterPreview";
+import NavbarPreview from "./preview-templates/NavbarPreview";
+import PastMeetupsPagePreview from "./preview-templates/PastMeetupsPagePreview";
+
+CMS.registerPreviewTemplate("meetups", MeetupPreview);
+CMS.registerPreviewTemplate("footer", FooterPreview);
+CMS.registerPreviewTemplate("navbar", NavbarPreview);
+CMS.registerPreviewTemplate("about", AboutPagePreview);
+CMS.registerPreviewTemplate("home", HomePagePreview);
+CMS.registerPreviewTemplate("pastMeetups", PastMeetupsPagePreview);

src/cms/preview-templates/AboutPagePreview.js

@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { AboutPageTemplate } from "../../templates/about-page";
+
+const AboutPagePreview = ({ entry, widgetFor }) => (
+  <AboutPageTemplate
+    page={{
+      frontmatter: entry.getIn(["data"]).toJS(),
+      html: entry.getIn(["data", "body"]),
+      bodyIsMarkdown: true,
+    }}
+  />
+);
+
+AboutPagePreview.propTypes = {
+  entry: PropTypes.shape({
+    getIn: PropTypes.func,
+  }),
+  widgetFor: PropTypes.func,
+};
+
+export default AboutPagePreview;

src/cms/preview-templates/FooterPreview.js

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { FooterTemplate } from "../../components/Footer";
+
+const FooterPreview = ({ entry }) => {
+  const data = entry.getIn(["data"]).toJS();
+  return <FooterTemplate data={data} />;
+};
+
+FooterPreview.propTypes = {
+  entry: PropTypes.shape({
+    getIn: PropTypes.func,
+  }),
+};
+
+export default FooterPreview;

src/cms/preview-templates/HomePagePreview.js

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { HomePageTemplate } from "../../pages/index";
+
+const HomePagePreview = ({ entry }) => {
+  const home = entry.getIn(["data"]).toJS();
+  return <HomePageTemplate home={home} />;
+};
+
+HomePagePreview.propTypes = {
+  entry: PropTypes.shape({
+    getIn: PropTypes.func,
+  }),
+};
+
+export default HomePagePreview;

src/cms/preview-templates/MeetupPreview.js

@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from "prop-types";
+import format from "date-fns/format";
+
+import MeetupTemplate from "../../templates/meetup";
+
+const MeetupPreview = ({ entry }) => {
+  const meetup = entry.getIn(["data"]).toJS();
+  const rawDate = meetup.date;
+  const formattedDate = format(rawDate, "MMMM Do YYYY @ h:mm A");
+  return <MeetupTemplate meetup={{ ...meetup, formattedDate, rawDate }} />;
+};
+
+MeetupPreview.propTypes = {
+  entry: PropTypes.shape({
+    getIn: PropTypes.func,
+  }),
+};
+
+export default MeetupPreview;

src/cms/preview-templates/NavbarPreview.js

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { NavbarTemplate } from "../../components/Navbar";
+
+const NavbarPreview = ({ entry }) => {
+  const data = entry.getIn(["data"]).toJS();
+  return <NavbarTemplate data={data} />;
+};
+
+NavbarPreview.propTypes = {
+  entry: PropTypes.shape({
+    getIn: PropTypes.func,
+  }),
+};
+
+export default NavbarPreview;