Commit b1546c36 authored by alain's avatar alain 🐙
Browse files

more frontend basics

parent 6d1eebdf
...@@ -19,10 +19,13 @@ module.exports = { ...@@ -19,10 +19,13 @@ module.exports = {
options: { options: {
apiURL: process.env.API_URL || 'http://localhost:1337', apiURL: process.env.API_URL || 'http://localhost:1337',
contentTypes: [ contentTypes: [
'menu-item',
'domain', 'domain',
'use-case', 'use-case',
'alternative' 'alternative',
],
singleTypes: [
`header`,
`about`,
], ],
queryLimit: 1000 queryLimit: 1000
} }
......
...@@ -5,22 +5,23 @@ ...@@ -5,22 +5,23 @@
"version": "0.1.0", "version": "0.1.0",
"author": "Alain Otjens <alain@waag.org>", "author": "Alain Otjens <alain@waag.org>",
"dependencies": { "dependencies": {
"gatsby": "^2.24.27", "gatsby": "^2.24.32",
"gatsby-cli": "^2.12.72", "gatsby-cli": "^2.12.77",
"gatsby-image": "^2.4.9", "gatsby-image": "^2.4.9",
"gatsby-plugin-manifest": "^2.4.14", "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-react-helmet": "^3.3.6",
"gatsby-plugin-sass": "^2.3.12", "gatsby-plugin-sass": "^2.3.12",
"gatsby-plugin-sharp": "^2.6.14", "gatsby-plugin-sharp": "^2.6.25",
"gatsby-source-filesystem": "^2.3.14", "gatsby-source-filesystem": "^2.3.24",
"gatsby-source-strapi": "^0.0.12", "gatsby-source-strapi": "^0.0.12",
"gatsby-transformer-sharp": "^2.5.7", "gatsby-transformer-sharp": "^2.5.7",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^16.12.0", "react": "^16.12.0",
"react-dom": "^16.12.0", "react-dom": "^16.12.0",
"react-helmet": "^6.1.0" "react-helmet": "^6.1.0",
"react-showdown": "^2.1.0"
}, },
"devDependencies": { "devDependencies": {
"prettier": "2.0.5" "prettier": "2.0.5"
......
...@@ -2,8 +2,8 @@ import React from "react" ...@@ -2,8 +2,8 @@ import React from "react"
const Footer = () => ( const Footer = () => (
<footer> <footer>
{`© ${new Date().getFullYear()}, Built by `} {`built by `}
<a href="https://waag.org">Waag</a> <a href="https://waag.org">waag</a>
</footer> </footer>
) )
......
...@@ -3,34 +3,51 @@ import PropTypes from "prop-types" ...@@ -3,34 +3,51 @@ import PropTypes from "prop-types"
import React from "react" import React from "react"
const Header = ({ siteTitle }) => ( const Header = ({ siteTitle }) => (
<header > <StaticQuery query={graphql`
<nav className="menu-container"> query MenuQuery {
<input type="checkbox" aria-label="Toggle menu" /> strapiHeader {
<span></span> title
<span></span> subtitle
<span></span> 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"> <ul className="menu">
<StaticQuery query={graphql` { data.strapiHeader.primary_navigation.map(item => <li key={item.id} className="primary"><Link to={item.link}>
query MenuQuery { <span className="menu-item-title">{item.title}</span>
allStrapiMenuItem { {item.subtitle && <span className="menu-item-subtitle">{item.subtitle}</span> }
nodes { </Link></li>) }
id { data.strapiHeader.secondary_navigation.map(item => <li key={item.id} className="secondary"><Link to={item.link}>
title, <span className="menu-item-title">{item.title}</span>
subtitle, {item.subtitle && <span className="menu-item-subtitle">{item.subtitle}</span> }
link, </Link></li>) }
type </ul>
} </nav>
} </header>
} } />
`}
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>
) )
Header.propTypes = { Header.propTypes = {
......
/**
* 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 React from "react"
import PropTypes from "prop-types" import PropTypes from "prop-types"
import { Helmet } from "react-helmet" import { Helmet } from "react-helmet"
......
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
}
}
}
}
`
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
...@@ -8,14 +8,14 @@ const UseCasesPage = ({ data }) => ( ...@@ -8,14 +8,14 @@ const UseCasesPage = ({ data }) => (
<Layout> <Layout>
<SEO title="Use Cases" /> <SEO title="Use Cases" />
<h1>Use Cases</h1> <h1>Use Cases</h1>
<ul> <div className="items">
{ data.allStrapiUseCase.nodes.map(node => ( { data.allStrapiUseCase.nodes.map(node => (
<li key={node.id}> <div key={node.id} className="item">
<h3>{ node.title }</h3> <h3>{ node.title }</h3>
<p>{ node.description }</p> <p>{ node.description }</p>
</li> </div>
)) } )) }
</ul> </div>
</Layout> </Layout>
) )
......
...@@ -14,11 +14,20 @@ ...@@ -14,11 +14,20 @@
font-weight: 500; font-weight: 500;
} }
.menu-logo { #site-titles {
margin: 0 20px; #site-title {
white-space: nowrap; font-family: waax;
font-size: 44px; font-weight: 400;
margin-bottom: 0; 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 { .menu-container a {
...@@ -46,8 +55,8 @@ ...@@ -46,8 +55,8 @@
-webkit-touch-callout: none; -webkit-touch-callout: none;
} }
/* Burger menu */
.menu-container span { .menu-container .hamburger-bar {
display: block; display: block;
width: 14px; width: 14px;
height: 2px; height: 2px;
...@@ -60,21 +69,20 @@ ...@@ -60,21 +69,20 @@
transition: all 0.1s ease; 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 ~ .hamburger-bar {
.menu-container input:checked ~ span {
opacity: 1; opacity: 1;
transform: rotate(45deg) translate(3px,-1px); 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; opacity: 0;
transform: rotate(0deg) scale(0.1, 0.1); 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); transform: rotate(-45deg) translate(-1px, 6px);
} }
...@@ -86,25 +94,29 @@ ...@@ -86,25 +94,29 @@
.menu li { .menu li {
margin-bottom: 0; margin-bottom: 0;
padding: 10px 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) { @media only screen and (max-width: 1000px) {
.menu-container { .menu-container {
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
} }
.menu-logo { #site-titles {
position: absolute; position: absolute;
left: 0; left: 20px;
top: 50%; top: 20px;
transform: translateY(-50%);
}
.menu-logo img {
max-height: 30px;
} }
.menu { .menu {
...@@ -128,7 +140,7 @@ ...@@ -128,7 +140,7 @@
} }
} }
/* desktop styles */
@media only screen and (min-width: 1001px) { @media only screen and (min-width: 1001px) {
.menu-container { .menu-container {
width: 100%; width: 100%;
...@@ -142,8 +154,7 @@ ...@@ -142,8 +154,7 @@
display: none; display: none;
} }
/* Burger menu */ .menu-container .hamburger-bar {
.menu-container span {
display: none; display: none;
} }
......
...@@ -7,11 +7,47 @@ ...@@ -7,11 +7,47 @@
main { main {
flex: 1 0 auto; flex: 1 0 auto;
width: 100%; width: 100%;
max-width: 960px; max-width: 1200px;
margin: 3rem auto; margin: 3rem auto;
padding: 0 1rem; padding: 0 1rem;
} }
footer { footer {
flex-shrink: 0; 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
//@import url("https://styling.ao.waag.org/maax.css");
@import url("https://assets.waag.org/fonts/maax/font.css");
body { body {
font-family: maax, sans-serif; font-family: maax, sans-serif;
} }
h1 {
margin: 0 0 3rem 0;
}
h3 {
margin: 0;
}
\ No newline at end of file
...@@ -2919,10 +2919,10 @@ babel-polyfill@^6.26.0: ...@@ -2919,10 +2919,10 @@ babel-polyfill@^6.26.0:
core-js "^2.5.0" core-js "^2.5.0"
regenerator-runtime "^0.10.5" regenerator-runtime "^0.10.5"
   
babel-preset-gatsby@^0.5.4: babel-preset-gatsby@^0.5.5:
version "0.5.4" version "0.5.5"
resolved "https://registry.yarnpkg.com/babel-preset-gatsby/-/babel-preset-gatsby-0.5.4.tgz#a24f1d1a8b772ff229203b3739054bdc2e4153e1" resolved "https://registry.yarnpkg.com/babel-preset-gatsby/-/babel-preset-gatsby-0.5.5.tgz#f8d05aa407a56514d7786f7b576c1954e0a3f425"
integrity sha512-9n2qPnqiwpnkTM588uidovrf9k86353zEJ4hWCUyD/e2Up8zNSExA27BNp3sAq4KcNl3c8tDpuwWQQQf4aNn2g== integrity sha512-gkBRAEv5OvSerqh15gMHCCtExiUpTuKiKwb6QBImb3nSBAuCcjr0ESHzpgk4m0eZLbxUaeooVd0uPyC6FQsCBQ==
dependencies: dependencies:
"@babel/plugin-proposal-class-properties" "^7.10.1" "@babel/plugin-proposal-class-properties" "^7.10.1"
"@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.1" "@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.1"
...@@ -2936,7 +2936,7 @@ babel-preset-gatsby@^0.5.4: ...@@ -2936,7 +2936,7 @@ babel-preset-gatsby@^0.5.4:
babel-plugin-dynamic-import-node "^2.3.3" babel-plugin-dynamic-import-node "^2.3.3"
babel-plugin-macros "^2.8.0" babel-plugin-macros "^2.8.0"
babel-plugin-transform-react-remove-prop-types "^0.4.24" 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" gatsby-legacy-polyfills "^0.0.2"
   
babel-register@^6.26.0: babel-register@^6.26.0:
...@@ -5045,7 +5045,7 @@ dom-converter@^0.2: ...@@ -5045,7 +5045,7 @@ dom-converter@^0.2:
dependencies: dependencies:
utila "~0.4" utila "~0.4"
   
dom-serializer@0: dom-serializer@0, dom-serializer@^0.2.1:
version "0.2.2" version "0.2.2"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g== integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
...@@ -5088,6 +5088,13 @@ domhandler@^2.3.0: ...@@ -5088,6 +5088,13 @@ domhandler@^2.3.0:
dependencies: dependencies:
domelementtype "1" 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: domutils@1.5.1:
version "1.5.1" version "1.5.1"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf" resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
...@@ -5104,6 +5111,15 @@ domutils@^1.5.1, domutils@^1.7.0: ...@@ -5104,6 +5111,15 @@ domutils@^1.5.1, domutils@^1.7.0:
dom-serializer "0" dom-serializer "0"
domelementtype "1" 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: dot-prop@^4.1.0:
version "4.2.0"