Skip to content

GitLab

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

more frontend basics

parent 6d1eebdf
Hide whitespace changes
Inline Side-by-side
frontend/gatsby-config.js
View file @ b1546c36
......@@ -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
View file @ b1546c36
......@@ -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
View file @ b1546c36
......@@ -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
View file @ b1546c36
......@@ -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
View file @ b1546c36
/**
* 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 0 → 100644
View file @ b1546c36
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 0 → 100644
View file @ b1546c36
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
View file @ b1546c36
......@@ -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
View file @ b1546c36
......@@ -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
View file @ b1546c36
......@@ -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
View file @ b1546c36
//@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
View file @ b1546c36
......@@ -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: