more frontend basics

frontend/gatsby-config.js

@@ -19,10 +19,13 @@ module.exports = {
       options: {
         apiURL: process.env.API_URL || 'http://localhost:1337',
         contentTypes: [
-          'menu-item',
           'domain',
           'use-case',
-          'alternative'
+          'alternative',
+        ],
+        singleTypes: [
+          `header`,
+          `about`,
         ],
         queryLimit: 1000
       }

frontend/package.json

@@ -5,22 +5,23 @@
   "version": "0.1.0",
   "author": "Alain Otjens <alain@waag.org>",
   "dependencies": {
-    "gatsby": "^2.24.27",
-    "gatsby-cli": "^2.12.72",
+    "gatsby": "^2.24.32",
+    "gatsby-cli": "^2.12.77",
     "gatsby-image": "^2.4.9",
     "gatsby-plugin-manifest": "^2.4.14",
-    "gatsby-plugin-offline": "^3.2.13",
+    "gatsby-plugin-offline": "^3.2.22",
     "gatsby-plugin-react-helmet": "^3.3.6",
     "gatsby-plugin-sass": "^2.3.12",
-    "gatsby-plugin-sharp": "^2.6.14",
-    "gatsby-source-filesystem": "^2.3.14",
+    "gatsby-plugin-sharp": "^2.6.25",
+    "gatsby-source-filesystem": "^2.3.24",
     "gatsby-source-strapi": "^0.0.12",
     "gatsby-transformer-sharp": "^2.5.7",
     "node-sass": "^4.14.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-helmet": "^6.1.0"
+    "react-helmet": "^6.1.0",
+    "react-showdown": "^2.1.0"
   },
   "devDependencies": {
     "prettier": "2.0.5"

frontend/src/components/footer.js

@@ -2,8 +2,8 @@ import React from "react"
 
 const Footer = () => (
   <footer>
-    {`© ${new Date().getFullYear()}, Built by `}
-    <a href="https://waag.org">Waag</a>
+    {`built by `}
+    <a href="https://waag.org">waag</a>
   </footer>
 )
 

frontend/src/components/header.js

@@ -3,34 +3,51 @@ import PropTypes from "prop-types"
 import React from "react"
 
 const Header = ({ siteTitle }) => (
-  <header >
-    <nav className="menu-container">
-      <input type="checkbox" aria-label="Toggle menu" />
-      <span></span>
-      <span></span>
-      <span></span>
+  <StaticQuery query={graphql`
+    query MenuQuery {
+      strapiHeader {
+        title
+        subtitle
+        primary_navigation {
+          id
+          title
+          subtitle
+          link
+        }
+        secondary_navigation {
+          id
+          title
+          # subtitle
+          link
+        }
+      }
+    }
+  `} render={ data =>
+    <header>
+      <nav className="menu-container">
+        <input type="checkbox" aria-label="Toggle menu" />
+        <span className="hamburger-bar"></span>
+        <span className="hamburger-bar"></span>
+        <span className="hamburger-bar"></span>
 
-      <h1 className="menu-logo"><Link to="/" >{ siteTitle }</Link></h1>
+        <div id="site-titles">
+          <h1 id="site-title"><Link to="/" >{ data.strapiHeader.title }</Link></h1>
+          <h2 id="site-subtitle">{ data.strapiHeader.subtitle }</h2>
+        </div>
 
-      <ul className="menu">
-        <StaticQuery query={graphql`
-            query MenuQuery {
-              allStrapiMenuItem {
-                nodes {
-                  id
-                  title,
-                  subtitle,
-                  link,
-                  type
-                }
-              }
-            }
-          `}
-        render={data => data.allStrapiMenuItem.nodes.map(item => <li key={item.id} className={item.type}><Link to={item.link}>{item.title}</Link></li>)}
-        />
-      </ul>
-    </nav>
-  </header>
+        <ul className="menu">
+          { data.strapiHeader.primary_navigation.map(item => <li key={item.id} className="primary"><Link to={item.link}>
+            <span className="menu-item-title">{item.title}</span>
+            {item.subtitle && <span className="menu-item-subtitle">{item.subtitle}</span> }
+          </Link></li>) }
+          { data.strapiHeader.secondary_navigation.map(item => <li key={item.id} className="secondary"><Link to={item.link}>
+            <span className="menu-item-title">{item.title}</span>
+            {item.subtitle && <span className="menu-item-subtitle">{item.subtitle}</span> }
+          </Link></li>) }
+        </ul>
+      </nav>
+    </header>
+  } />
 )
 
 Header.propTypes = {

frontend/src/components/seo.js

-/**
- * SEO component that queries for data with
- *  Gatsby's useStaticQuery React hook
- *
- * See: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
 import React from "react"
 import PropTypes from "prop-types"
 import { Helmet } from "react-helmet"

frontend/src/pages/about.js

+import React from "react"
+import { graphql } from "gatsby"
+
+import MarkdownView from 'react-showdown';
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+
+const AboutPage = ({ data }) => (
+  <Layout>
+    <SEO title="About" />
+    <h1>{ data.strapiAbout.title }</h1>
+    <section>
+      { data.strapiAbout.rows.map(row =>
+        <div key={row.id} className={ `row columns-${row.columns.length}` }>
+          { row.columns.map(column => <div key={column.id} className="column">
+            <MarkdownView markdown={column.content} />
+          </div>) }
+        </div>
+      ) }
+    </section>
+    <section>
+      <h2>Colofon</h2>
+      <p>...</p>
+    </section>
+  </Layout>
+)
+
+export default AboutPage
+
+
+export const pageQuery = graphql`
+  query AboutQuery {
+    strapiAbout {
+      title
+      rows {
+        id
+        columns {
+          id
+          content
+        }
+      }
+    }
+  }
+`

frontend/src/pages/alternatives.js

+import React from "react"
+import { graphql } from "gatsby"
+import Img from 'gatsby-image'
+
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+
+const AlternativesPage = ({ data }) => (
+  <Layout>
+    <SEO title="Alternatives" />
+    <h1>Alternatives</h1>
+    <div className="items">
+      { data.allStrapiAlternative.nodes.map(node => (
+        <div key={node.id} className="item">
+          <h3>{ node.title }</h3>
+          { node.logo && <Img fluid={ node.logo.childImageSharp.fluid } fadeIn={false} /> }
+          { node.domains && <ul>{node.domains.map(domain => <li key={domain.id}>{ domain.title}</li>) }</ul> }
+          {/* <p>{ node.description }</p> */}
+        </div>
+      )) }
+    </div>
+  </Layout>
+)
+
+export default AlternativesPage
+
+export const pageQuery = graphql`
+  query AlternativesQuery {
+    allStrapiAlternative {
+      nodes {
+        id
+        title
+        description
+        logo {
+          childImageSharp {
+            fluid(maxWidth: 340) {
+              ...GatsbyImageSharpFluid_noBase64
+            }
+          }
+        }
+        domains {
+          id
+          title
+        }
+      }
+    }
+  }
+`
\ No newline at end of file

frontend/src/pages/use-cases.js

@@ -8,14 +8,14 @@ const UseCasesPage = ({ data }) => (
   <Layout>
     <SEO title="Use Cases" />
     <h1>Use Cases</h1>
-    <ul>
+    <div className="items">
       { data.allStrapiUseCase.nodes.map(node => (
-        <li key={node.id}>
+        <div key={node.id} className="item">
           <h3>{ node.title }</h3>
           <p>{ node.description }</p>
-        </li>
+        </div>
       )) }
-    </ul>
+    </div>
   </Layout>
 )
 

frontend/src/styles/_header.scss

@@ -14,11 +14,20 @@
   font-weight: 500;
 }
 
-.menu-logo {
-  margin: 0 20px;
-  white-space: nowrap;
-  font-size: 44px;
-  margin-bottom: 0;
+#site-titles {
+  #site-title {
+    font-family: waax;
+    font-weight: 400;
+    font-size: 44px;
+    margin: 10px 0;
+    white-space: nowrap;
+  }
+  #site-subtitle {
+    font-size: 20px;
+    max-width: 11em;
+    font-weight: 400;
+    margin: 0;
+  }
 }
 
 .menu-container a {
@@ -46,8 +55,8 @@
   -webkit-touch-callout: none;
 }
 
-/* Burger menu */
-.menu-container span {
+
+.menu-container .hamburger-bar {
   display: block;
   width: 14px;
   height: 2px;
@@ -60,21 +69,20 @@
   transition: all 0.1s ease;
 }
 
-.menu-container span:first-child { transform-origin: 0% 0%; }
+.menu-container .hamburger-bar:first-child { transform-origin: 0% 0%; }
+.menu-container .hamburger-bar:nth-child(3) { transform-origin: 0% 100%; }
 
-.menu-container span:nth-child(3) { transform-origin: 0% 100%; }
-
-.menu-container input:checked ~ span {
+.menu-container input:checked ~ .hamburger-bar {
   opacity: 1;
   transform: rotate(45deg) translate(3px,-1px);
 }
 
-.menu-container input:checked ~ span:nth-child(4) {
+.menu-container input:checked ~ .hamburger-bar:nth-child(4) {
   opacity: 0;
   transform: rotate(0deg) scale(0.1, 0.1);
 }
 
-.menu-container input:checked ~ span:nth-child(3) {
+.menu-container input:checked ~ .hamburger-bar:nth-child(3) {
   transform: rotate(-45deg) translate(-1px, 6px);
 }
 
@@ -86,25 +94,29 @@
 .menu li {
   margin-bottom: 0;
   padding: 10px 0;
-  font-size: 20px;
+
+  .menu-item-title {
+    display: block;
+    font-size: 20px;
+    font-weight: 700;
+  }
+
+  .menu-item-subtitle {
+    font-size: 16px;
+  }
 }
 
-/* mobile styles */
+
 @media only screen and (max-width: 1000px) { 
   .menu-container {
     flex-direction: column;
     align-items: flex-end;
   }
   
-  .menu-logo {
+  #site-titles {
     position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .menu-logo img {
-    max-height: 30px;
+    left: 20px;
+    top: 20px;
   }
 
   .menu {
@@ -128,7 +140,7 @@
   }
 }
 
-/* desktop styles */
+
 @media only screen and (min-width: 1001px) { 
   .menu-container {
     width: 100%;
@@ -142,8 +154,7 @@
     display: none;
   }
 
-  /* Burger menu */
-  .menu-container span {
+  .menu-container .hamburger-bar {
     display: none;
   }
 

frontend/src/styles/_layout.scss

@@ -7,11 +7,47 @@
 main {
   flex: 1 0 auto;
   width: 100%;
-  max-width: 960px;
+  max-width: 1200px;
   margin: 3rem auto;
   padding: 0 1rem;
 }
 
 footer {
   flex-shrink: 0;
+}
+
+section {
+  margin-bottom: 4rem;
+}
+
+.row {
+  display: flex;
+  margin: 0 -1rem;
+
+  &.columns-1 .column {
+    width: 100%;
+  }
+
+  &.columns-2 .column {
+    width: 50%;
+  }
+
+  .column {
+    padding: 0 1rem;
+  }
+}
+
+
+.item {
+  margin-bottom: 2rem;
+}
+
+.items {
+  display: flex;
+  flex-wrap: wrap;
+
+  .item {
+    width: 340px;
+    margin: 0 1rem 2rem;
+  }
 }
\ No newline at end of file

frontend/src/styles/_typography.scss

 
+//@import url("https://styling.ao.waag.org/maax.css");
+@import url("https://assets.waag.org/fonts/maax/font.css");
+
 body {
   font-family: maax, sans-serif;
 }
+
+h1 {
+  margin: 0 0 3rem 0;
+}
+
+
+h3 {
+  margin: 0;
+}
\ No newline at end of file

frontend/yarn.lock

@@ -2919,10 +2919,10 @@ babel-polyfill@^6.26.0:
     core-js "^2.5.0"
     regenerator-runtime "^0.10.5"
-babel-preset-gatsby@^0.5.4:
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/babel-preset-gatsby/-/babel-preset-gatsby-0.5.4.tgz#a24f1d1a8b772ff229203b3739054bdc2e4153e1"
-  integrity sha512-9n2qPnqiwpnkTM588uidovrf9k86353zEJ4hWCUyD/e2Up8zNSExA27BNp3sAq4KcNl3c8tDpuwWQQQf4aNn2g==
+babel-preset-gatsby@^0.5.5:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/babel-preset-gatsby/-/babel-preset-gatsby-0.5.5.tgz#f8d05aa407a56514d7786f7b576c1954e0a3f425"
+  integrity sha512-gkBRAEv5OvSerqh15gMHCCtExiUpTuKiKwb6QBImb3nSBAuCcjr0ESHzpgk4m0eZLbxUaeooVd0uPyC6FQsCBQ==
   dependencies:
     "@babel/plugin-proposal-class-properties" "^7.10.1"
     "@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.1"
@@ -2936,7 +2936,7 @@ babel-preset-gatsby@^0.5.4:
     babel-plugin-dynamic-import-node "^2.3.3"
     babel-plugin-macros "^2.8.0"
     babel-plugin-transform-react-remove-prop-types "^0.4.24"
-    gatsby-core-utils "^1.3.14"
+    gatsby-core-utils "^1.3.15"
     gatsby-legacy-polyfills "^0.0.2"
 babel-register@^6.26.0:
@@ -5045,7 +5045,7 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
-dom-serializer@0:
+dom-serializer@0, dom-serializer@^0.2.1:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
   integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
@@ -5088,6 +5088,13 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
+domhandler@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-3.0.0.tgz#51cd13efca31da95bbb0c5bee3a48300e333b3e9"
+  integrity sha512-eKLdI5v9m67kbXQbJSNn1zjh0SDzvzWVWtX+qEI3eMjZw8daH9k8rlj1FZY9memPwjiskQFbe7vHVVJIAqoEhw==
+  dependencies:
+    domelementtype "^2.0.1"
+
 domutils@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
@@ -5104,6 +5111,15 @@ domutils@^1.5.1, domutils@^1.7.0:
     dom-serializer "0"
     domelementtype "1"
+domutils@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.1.0.tgz#7ade3201af43703fde154952e3a868eb4b635f16"
+  integrity sha512-CD9M0Dm1iaHfQ1R/TI+z3/JWp/pgub0j4jIQKH89ARR4ATAV2nbaOQS5XxU9maJP5jHaPdDDQSEHuE2UmpUTKg==
+  dependencies:
+    dom-serializer "^0.2.1"
+    domelementtype "^2.0.1"
+    domhandler "^3.0.0"
+
 dot-prop@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
@@ -6419,10 +6435,10 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
-gatsby-cli@^2.12.72:
-  version "2.12.72"
-  resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-2.12.72.tgz#951c33ea0563b4b75127f99a26f1695eb71c1a4f"
-  integrity sha512-iuo3TMlMofDMKW31Mq6RYnCDKxcNukvu/7fzQSBrRGnADxFMmgRNe0d2H2dL2V+Sr1YDOaOtxnXO2gkVTLlziw==
+gatsby-cli@^2.12.77:
+  version "2.12.77"
+  resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-2.12.77.tgz#d17ced52a46776b51b31609ba8ec511bdd01600d"
+  integrity sha512-6x4OcXXmhVaXJk+1OS8iHAUzgEQk/bny4tVkZc5o1merV4tInmbWDGNkezjou+ahRwyHp0fxfHFrN/fcoCKivw==
   dependencies:
     "@babel/code-frame" "^7.10.3"
     "@hapi/joi" "^15.1.1"
@@ -6437,9 +6453,9 @@ gatsby-cli@^2.12.72:
     execa "^3.4.0"
     fs-exists-cached "^1.0.0"
     fs-extra "^8.1.0"
-    gatsby-core-utils "^1.3.14"
-    gatsby-recipes "^0.2.2"
-    gatsby-telemetry "^1.3.25"
+    gatsby-core-utils "^1.3.15"
+    gatsby-recipes "^0.2.7"
+    gatsby-telemetry "^1.3.26"
     hosted-git-info "^3.0.4"
     ink "^2.7.1"
     ink-spinner "^3.1.0"
@@ -6476,6 +6492,18 @@ gatsby-core-utils@^1.3.14:
     proper-lockfile "^4.1.1"
     xdg-basedir "^4.0.0"
+gatsby-core-utils@^1.3.15:
+  version "1.3.15"
+  resolved "https://registry.yarnpkg.com/gatsby-core-utils/-/gatsby-core-utils-1.3.15.tgz#6fad76a238df514afa70fed0f94427fbb39762ca"
+  integrity sha512-np1tJCGejhCHtgHdFl6+y5EwVAzdrieJZ3hdvpeOrJ22bL9ktl5XVLy4K937ThgxHLp8+ElMDVdziNun5tC8eg==
+  dependencies:
+    ci-info "2.0.0"
+    configstore "^5.0.1"
+    fs-extra "^8.1.0"
+    node-object-hash "^2.0.0"
+    proper-lockfile "^4.1.1"
+    xdg-basedir "^4.0.0"
+
 gatsby-design-tokens@^2.0.2:
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/gatsby-design-tokens/-/gatsby-design-tokens-2.0.10.tgz#cade197f538f93196b4e2253e48f09b9cac6cf68"
@@ -6544,16 +6572,16 @@ gatsby-node-helpers@^0.3.0:
     lodash "^4.17.4"
     p-is-promise "^1.1.0"
-gatsby-page-utils@^0.2.19:
-  version "0.2.19"
-  resolved "https://registry.yarnpkg.com/gatsby-page-utils/-/gatsby-page-utils-0.2.19.tgz#1614783a1d4c7c368d83cabbacf6c0ac4d3baae8"
-  integrity sha512-aGF6OVXpQy0odwn4kwiSXhdOcFlLl2Vx5mWYupjEkGzcZjwUjloOj800DIoH4yZmuGNQVrfpBag5ta50VKrtiQ==
+gatsby-page-utils@^0.2.20:
+  version "0.2.20"
+  resolved "https://registry.yarnpkg.com/gatsby-page-utils/-/gatsby-page-utils-0.2.20.tgz#2d9360f274b09476224f178b23d7cb106afc961a"
+  integrity sha512-waq2TpDjNxH5+Q+xFnuf9of3Xt0wxBkJwb6VbCGz4LS0XQ6c9KYMgC2OCBwPJOnv2Vo/6BglpRyn4lYcJEQJdw==
   dependencies:
     "@babel/runtime" "^7.10.3"
     bluebird "^3.7.2"
     chokidar "3.4.0"
     fs-exists-cached "^1.0.0"
-    gatsby-core-utils "^1.3.14"
+    gatsby-core-utils "^1.3.15"
     glob "^7.1.6"
     lodash "^4.17.15"
     micromatch "^3.1.10"
@@ -6568,28 +6596,28 @@ gatsby-plugin-manifest@^2.4.14:
     semver "^5.7.1"
     sharp "^0.25.1"
-gatsby-plugin-offline@^3.2.13:
-  version "3.2.21"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-offline/-/gatsby-plugin-offline-3.2.21.tgz#c308c7eb571b98effbb134a706c7af49711fc637"
-  integrity sha512-MvkWmieiXIlm70xawJgIQFUnGlMUWhrRk6jGoVCiiZ8xrViiluZONttCm/tiDdiZTFOwvOPN7RQj/zB+50grMg==
+gatsby-plugin-offline@^3.2.22:
+  version "3.2.22"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-offline/-/gatsby-plugin-offline-3.2.22.tgz#28824402e31a9a1697d971fcd96ef323c3afe1b0"
+  integrity sha512-kaydtoYpsSzFaj7pYnI4rOSsAIZz2yZocpIeg+or6f63EKRMaR4eABXuIeOou6unmFvQ1azJcaVi09Zbi0kGBg==
   dependencies:
     "@babel/runtime" "^7.10.3"
     cheerio "^1.0.0-rc.3"
-    gatsby-core-utils "^1.3.14"
+    gatsby-core-utils "^1.3.15"
     glob "^7.1.6"
     idb-keyval "^3.2.0"
     lodash "^4.17.15"
     workbox-build "^4.3.1"
-gatsby-plugin-page-creator@^2.3.19:
-  version "2.3.19"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-page-creator/-/gatsby-plugin-page-creator-2.3.19.tgz#53e00600b95b563f78b64f956494d08ca14033ff"
-  integrity sha512-BMEIjg+B05eWeZutgV3bP2o7WZyC3lmZzAhGwWfEi0IYy0zRtH3jRNPCv1qrcyXKI6n5GFUhas4NGiRHmc7vLg==
+gatsby-plugin-page-creator@^2.3.20:
+  version "2.3.20"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-page-creator/-/gatsby-plugin-page-creator-2.3.20.tgz#7172680f178426cb35ae29175f4cf9a9afbefcd7"
+  integrity sha512-EtoKgXNXvkY5IA4XvBPhlM5TelR6R04e3fpcGWuYO4oqts/9Ih0GGI9CzUBRXNwM5MplNBUcUutyAwMtT9NzVA==
   dependencies:
     "@babel/runtime" "^7.10.3"
     bluebird "^3.7.2"
     fs-exists-cached "^1.0.0"
-    gatsby-page-utils "^0.2.19"
+    gatsby-page-utils "^0.2.20"
     glob "^7.1.6"
     lodash "^4.17.15"
     micromatch "^3.1.10"
@@ -6609,16 +6637,16 @@ gatsby-plugin-sass@^2.3.12:
     "@babel/runtime" "^7.10.3"
     sass-loader "^7.3.1"
-gatsby-plugin-sharp@^2.6.14:
-  version "2.6.24"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.6.24.tgz#af93bcb155861413d3e003c631e67623e90c3406"
-  integrity sha512-tMcfnT4clBMv4Sok4sUvP7k+EIGKvQ9o8XGUT7QmKO/dybdXGhmH6N2jdSeL2Zt9xZliW5lxK5eLBTt5dH+VjQ==