Site updates to add demo day information

* added logo block
* added demo day tickets form
* added gatsby-image and gatsby-image related plugins
* updated all packages to latest (to fix gatsby image bug)

gatsby-config.js

@@ -17,10 +17,20 @@ module.exports = {
       },
       resolve: 'gatsby-plugin-mailchimp',
       options: {
-          endpoint: 'https://hackoregon.us3.list-manage.com/subscribe/post?u=6bed8811c700af6cf48dfe893&id=b11a78686d', // add your MC list endpoint here; see instructions below
+        endpoint:
+          'https://hackoregon.us3.list-manage.com/subscribe/post?u=6bed8811c700af6cf48dfe893&id=b11a78686d', // add your MC list endpoint here; see instructions below
       },
     },
     'gatsby-plugin-offline',
     'gatsby-plugin-sass',
+    `gatsby-plugin-sharp`,
+    `gatsby-transformer-sharp`,
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `images`,
+        path: `${__dirname}/src/images/`,
+      },
+    },
   ],
 }

package.json

@@ -3,17 +3,21 @@
   "description": "Odyssy Gatsby starter",
   "version": "1.0.0",
   "dependencies": {
-    "gatsby": "^2.0.0",
-    "gatsby-plugin-mailchimp": "^5.1.0",
-    "gatsby-plugin-manifest": "^2.0.2",
-    "gatsby-plugin-offline": "^2.0.5",
-    "gatsby-plugin-react-helmet": "^3.0.0",
-    "gatsby-plugin-sass": "^2.0.1",
-    "node-sass": "^4.9.3",
-    "react": "^16.5.1",
-    "react-dom": "^16.5.1",
-    "react-helmet": "^5.2.0",
-    "react-typeform-embed": "^0.2.0"
+    "gatsby": "^2.13.64",
+    "gatsby-image": "^2.2.8",
+    "gatsby-plugin-mailchimp": "^5.1.2",
+    "gatsby-plugin-manifest": "^2.2.5",
+    "gatsby-plugin-offline": "^2.2.6",
+    "gatsby-plugin-react-helmet": "^3.1.3",
+    "gatsby-plugin-sass": "^2.1.8",
+    "gatsby-plugin-sharp": "^2.2.11",
+    "gatsby-source-filesystem": "^2.1.9",
+    "gatsby-transformer-sharp": "^2.2.6",
+    "node-sass": "^4.12.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-helmet": "^5.2.1",
+    "react-typeform-embed": "^0.2.1"
   },
   "keywords": [
     "gatsby"
@@ -26,7 +30,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
-    "prettier": "^1.14.2"
+    "prettier": "^1.18.2"
   },
   "repository": {
     "type": "git",

src/components/shared/logos/logos.js

@@ -0,0 +1,72 @@
+import React from 'react'
+import { useStaticQuery, graphql } from 'gatsby'
+import Img from 'gatsby-image'
+
+import './logos.scss'
+
+const NonStretchedImg = props => {
+  let normalizedProps = props
+  if (props.fluid && props.fluid.presentationWidth) {
+    normalizedProps = {
+      ...props,
+      style: {
+        ...(props.style || {}),
+        maxWidth: props.fluid.presentationWidth,
+        margin: '0 auto', // Used to center the image
+      },
+    }
+  }
+
+  return <Img {...normalizedProps} />
+}
+
+export const squareImage = graphql`
+  fragment squareImage on File {
+    childImageSharp {
+      fluid(maxWidth: 500, quality: 100) {
+        ...GatsbyImageSharpFluid
+        presentationWidth
+      }
+    }
+  }
+`
+
+export default () => {
+  const data = useStaticQuery(graphql`
+    query ImageQuery {
+      moovel: file(relativePath: { eq: "logos/moovel.png" }) {
+        ...squareImage
+      }
+      omsi: file(relativePath: { eq: "logos/omsi.jpg" }) {
+        ...squareImage
+      }
+      ocf: file(relativePath: { eq: "logos/ocf.jpg" }) {
+        ...squareImage
+      }
+      city: file(relativePath: { eq: "logos/cityofportland.png" }) {
+        ...squareImage
+      }
+      county: file(relativePath: { eq: "logos/multnomahcounty.png" }) {
+        ...squareImage
+      }
+      gates: file(relativePath: { eq: "logos/gates.png" }) {
+        ...squareImage
+      }
+    }
+  `)
+  return (
+    <div className="LogosContainer">
+      <div className="Logos">
+        <NonStretchedImg fluid={data.gates.childImageSharp.fluid} />
+        <NonStretchedImg fluid={data.county.childImageSharp.fluid} />
+        <NonStretchedImg fluid={data.city.childImageSharp.fluid} />
+        <NonStretchedImg fluid={data.moovel.childImageSharp.fluid} />
+        <NonStretchedImg fluid={data.ocf.childImageSharp.fluid} />
+        <NonStretchedImg fluid={data.omsi.childImageSharp.fluid} />
+      </div>
+      <p className="LogosThankYouText">
+        <strong>Thank you to our partners!</strong>
+      </p>
+    </div>
+  )
+}

src/components/shared/logos/logos.scss

@@ -0,0 +1,16 @@
+.Logos {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 1fr 1fr;
+  div {
+    width: 100%;
+  }
+}
+
+.LogosContainer {
+  margin: 60px 0;
+}
+
+.LogosThankYouText {
+  margin: 20px 0;
+}

src/components/shared/typeform/tickets-form.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import { ReactTypeformEmbed } from 'react-typeform-embed'
+
+class TicketsForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.openForm = this.openForm.bind(this);
+  }
+
+  openForm() {
+    this.typeformEmbed.typeform.open();
+  }
+
+  render() {
+    return (
+      <div className="Typeform">
+        <button
+          className="button"
+          onClick={this.openForm}
+          style={{ cursor: 'pointer' }}
+        >
+          Get your tickets now
+        </button>
+        <ReactTypeformEmbed
+          popup
+          autoOpen={false}
+          url="https://ven386248.typeform.com/to/uIZ2AA"
+          hideHeaders
+          hideFooter
+          buttonText="Submit!"
+          style={{ height: '0%' }}
+          ref={tf => {
+            this.typeformEmbed = tf
+          }}
+        />
+      </div>
+    )
+  }
+}
+
+export default TicketsForm;