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>
-
-      <h1 className="menu-logo"><Link to="/" >{ siteTitle }</Link></h1>
-
-      <ul className="menu">
   <StaticQuery query={graphql`
     query MenuQuery {
-              allStrapiMenuItem {
-                nodes {
+      strapiHeader {
+        title
+        subtitle
+        primary_navigation {
+          id
+          title
+          subtitle
+          link
+        }
+        secondary_navigation {
           id
-                  title,
-                  subtitle,
-                  link,
-                  type
+          title
+          # subtitle
+          link
         }
       }
     }
-          `}
-        render={data => data.allStrapiMenuItem.nodes.map(item => <li key={item.id} className={item.type}><Link to={item.link}>{item.title}</Link></li>)}
-        />
+  `} 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>
+
+        <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">
+          { 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;
+#site-titles {
+  #site-title {
+    font-family: waax;
+    font-weight: 400;
     font-size: 44px;
-  margin-bottom: 0;
+    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 span:nth-child(3) { transform-origin: 0% 100%; }
+.menu-container .hamburger-bar:first-child { transform-origin: 0% 0%; }
+.menu-container .hamburger-bar: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;
+
+  .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,7 +7,7 @@
 main {
   flex: 1 0 auto;
   width: 100%;
-  max-width: 960px;
+  max-width: 1200px;
   margin: 3rem auto;
   padding: 0 1rem;
 }
@@ -15,3 +15,39 @@ main {
 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: