[EPIC] GatsbyJS Redesign

.dependabot/config.yml

@@ -0,0 +1,14 @@
+version: 1
+
+update_configs:
+  - package_manager: javascript
+    directory: /
+    update_schedule: live
+    allowed_updates:
+      - match:
+          update_type: security
+    automerged_updates:
+      - match:
+          dependency_type: all
+          update_type: in_range
+    version_requirement_updates: widen_ranges

.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

README.md

@@ -1,2 +1,35 @@
-# website
-GatsbyJs Repository for AK Dev Alliance website
+# Alaska Developer Alliance Website
+
+This is the repository for the https://akdevalliance.com/
+
+## Development
+
+### Clone & Run Locally
+
+Make sure you have `node v8.2.0` or higher installed.
+
+Pull down a local copy of the Github repository
+
+```
+$ git clone [email protected]:akdevalliance/website.git
+$ cd website
+$ yarn add global gatsby-dev-cli
+$ yarn
+$ yarn start
+```
+
+## Contributing
+
+1.  Fork this repository to your own github account
+2.  Run `git checkout epic/gatsbyjs-redesign` to switch to this epic
+3.  Run `git checkout -b feature/your-branch-name-here` to create a new branch
+4.  Run `git commit -a --alow-empty` and enter something like "Empty commit to open {Your Branch Name Here} PR"
+5.  Run `git push -u origin HEAD` to push that new branch to your github repo
+6.  Create a new Pull Request from your repo targeting this `akdevalliance/website#epic/gatsbyjs-redesign` branch using a good title / description (bonus points: you can create checklist items using `* [ ] Title of checklist item`)
+7.  Add the `WIP` label to indicate that you are still working on it
+8.  Code away!
+9.  When you are ready, remove the `WIP` label and add `Needs Review` and add one or more people under the "Reviewers" section
+10. Make any changes requested during the review process
+11. When you get one or more `LGTM 👍` reponses from reviewers, hit merge, and pat yourself on the back
+12. Find a new task on Trello
+13. Rinse & repeat!

_headers

@@ -0,0 +1,4 @@
+[[headers]]
+for = "/static/*"
+[headers.values]
+Cache-Control = "public, max-age=360000"

gatsby-config.js

@@ -0,0 +1,71 @@
+module.exports = {
+  siteMetadata: {
+    title: "Alaska Developer Alliance",
+    description:
+      "The Alaska Developers Alliance is an organization focused on bringing together all segments of programmers from video game development and virtual reality to web development and enterprise software tooling. It was built as a community to get students plugged in earlier, provide continued learning opportunities for professionals, and inspire and educate the community. The Alliance bridges the geography of Alaska with chapters in Juneau, Anchorage, and Fairbanks, along with specific groups like the VMWare users group joining under the umbrella. It currently has over 200 members and regularly has meetups  digitally joining all three locations including more than 50 people and streaming live on facebook."
+  },
+  plugins: [
+    "gatsby-plugin-react-helmet",
+    "gatsby-plugin-sass",
+    {
+      // keep as first gatsby-source-filesystem plugin for gatsby image support
+      resolve: "gatsby-source-filesystem",
+      options: {
+        path: `${__dirname}/static/img`,
+        name: "uploads"
+      }
+    },
+    {
+      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-remark-relative-images",
+            options: {
+              name: "uploads"
+            }
+          },
+          {
+            resolve: "gatsby-remark-images",
+            options: {
+              // It's important to specify the maxWidth (in pixels) of
+              // the content container as this plugin uses this as the
+              // base for generating different widths of each image.
+              maxWidth: 2048
+            }
+          },
+          {
+            resolve: "gatsby-remark-copy-linked-files",
+            options: {
+              destinationDir: "static"
+            }
+          }
+        ]
+      }
+    },
+    {
+      resolve: "gatsby-plugin-purgecss", // purges all unused/unreferenced css rules
+      options: {
+        develop: true, // Activates purging in npm run develop
+        purgeOnly: ["/all.sass"] // applies purging only on the bulma css file
+      }
+    }, // must be after other CSS plugins
+    "gatsby-plugin-netlify" // make sure to keep it last in the array
+  ]
+};

gatsby-node.js

@@ -0,0 +1,63 @@
+const _ = require("lodash");
+const path = require("path");
+const { createFilePath } = require("gatsby-source-filesystem");
+const { fmImagesToRelative } = require("gatsby-remark-relative-images");
+
+exports.createPages = ({ actions, graphql }) => {
+  const { createPage } = actions;
+
+  return graphql(`
+    {
+      allMarkdownRemark(limit: 1000) {
+        edges {
+          node {
+            id
+            fields {
+              slug
+            }
+            frontmatter {
+              templateKey
+            }
+          }
+        }
+      }
+    }
+  `).then(result => {
+    if (result.errors) {
+      result.errors.forEach(e => console.error(e.toString()));
+      return Promise.reject(result.errors);
+    }
+
+    const documents = result.data.allMarkdownRemark.edges;
+
+    documents.forEach(edge => {
+      const id = edge.node.id;
+      const templateKey = String(edge.node.frontmatter.templateKey);
+
+      if (templateKey === "partner") return;
+
+      createPage({
+        path: edge.node.fields.slug,
+        component: path.resolve(`src/templates/${templateKey}.js`),
+        // additional data can be passed via context
+        context: {
+          id
+        }
+      });
+    });
+  });
+};
+
+exports.onCreateNode = ({ node, actions, getNode }) => {
+  const { createNodeField } = actions;
+  fmImagesToRelative(node); // convert image paths for gatsby images
+
+  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 = "yarn build"
+[build.environment]
+  YARN_VERSION = "1.9.4"
+  YARN_FLAGS = "--no-ignore-optional"

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "alaska-developer-alliance",
+  "description": "The Alaska Developer Alliance Website",
+  "version": "0.0.1",
+  "author": "The Alaska Developer Alliance",
+  "dependencies": {
+    "bulma": "^0.7.0",
+    "gatsby": "^2.13.31",
+    "gatsby-image": "^2.0.23",
+    "gatsby-plugin-netlify": "^2.0.6",
+    "gatsby-plugin-purgecss": "^4.0.0",
+    "gatsby-plugin-react-helmet": "^3.0.4",
+    "gatsby-plugin-sass": "^2.0.7",
+    "gatsby-plugin-sharp": "^2.2.9",
+    "gatsby-remark-copy-linked-files": "^2.0.7",
+    "gatsby-remark-images": "^3.1.6",
+    "gatsby-remark-relative-images": "^0.2.1",
+    "gatsby-source-filesystem": "^2.0.26",
+    "gatsby-transformer-remark": "^2.6.9",
+    "gatsby-transformer-sharp": "^2.1.9",
+    "lodash": "^4.17.15",
+    "lodash-webpack-plugin": "^0.11.4",
+    "node-sass": "^4.11.0",
+    "parcel-bundler": "^1.9.4",
+    "prop-types": "^15.6.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-helmet": "^5.2.0",
+    "uuid": "^3.2.1"
+  },
+  "keywords": [],
+  "license": "MIT",
+  "main": "n/a",
+  "scripts": {
+    "clean": "gatsby clean",
+    "start": "yarn develop",
+    "build": "yarn clean && gatsby build",
+    "develop": "yarn clean && gatsby develop",
+    "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.15.3"
+  }
+}

renovate.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["github>netlify/renovate-config:netlify-cms-starter"]
+}

src/components/Content.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export const HTMLContent = ({ content, className }) => (
+  <div className={className} dangerouslySetInnerHTML={{ __html: content }} />
+)
+
+const Content = ({ content, className }) => (
+  <div className={className}>{content}</div>
+)
+
+Content.propTypes = {
+  content: PropTypes.node,
+  className: PropTypes.string,
+}
+
+HTMLContent.propTypes = Content.propTypes
+
+export default Content

src/components/DocumentList.js

@@ -0,0 +1,80 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Link, graphql, StaticQuery } from "gatsby";
+
+class DocumentList extends React.Component {
+  render() {
+    const { data } = this.props;
+    const { edges: documents } = data.allMarkdownRemark;
+
+    return (
+      <div className="columns is-multiline">
+        {documents &&
+          documents.map(({ node: document }) => (
+            <div className="is-parent column is-6" key={document.id}>
+              <article
+                className={`blog-list-item tile is-child box notification`}
+              >
+                <header>
+                  <p className="document-meta">
+                    <Link
+                      className="title has-text-primary is-size-4"
+                      to={document.fields.slug}
+                    >
+                      {document.frontmatter.title}
+                    </Link>
+                  </p>
+                </header>
+                <p>
+                  {document.excerpt}
+                  <br />
+                  <br />
+                  <Link className="button" to={document.fields.slug}>
+                    Keep Reading →
+                  </Link>
+                </p>
+              </article>
+            </div>
+          ))}
+      </div>
+    );
+  }
+}
+
+DocumentList.propTypes = {
+  data: PropTypes.shape({
+    allMarkdownRemark: PropTypes.shape({
+      edges: PropTypes.array
+    })
+  })
+};
+
+export default () => (
+  <StaticQuery
+    query={graphql`
+      query DocumentListQuery {
+        allMarkdownRemark(
+          sort: { order: DESC, fields: [frontmatter___date] }
+          filter: { frontmatter: { templateKey: { eq: "document" } } }
+        ) {
+          edges {
+            node {
+              excerpt(pruneLength: 400)
+              id
+              fields {
+                slug
+              }
+              frontmatter {
+                title
+                templateKey
+                date(formatString: "MMMM DD, YYYY")
+                featuredDocument
+              }
+            }
+          }
+        }
+      }
+    `}
+    render={(data, count) => <DocumentList data={data} count={count} />}
+  />
+);