Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
Menu
Open sidebar
code
Public Stack Site
Commits
b1546c36
Commit
b1546c36
authored
Aug 07, 2020
by
alain
🐙
Browse files
more frontend basics
parent
6d1eebdf
Changes
12
Show whitespace changes
Inline
Side-by-side
frontend/gatsby-config.js
View file @
b1546c36
...
@@ -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
}
}
...
...
frontend/package.json
View file @
b1546c36
...
@@ -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.2
7
"
,
"gatsby"
:
"^2.24.
3
2"
,
"gatsby-cli"
:
"^2.12.7
2
"
,
"gatsby-cli"
:
"^2.12.7
7
"
,
"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.
1
4"
,
"gatsby-source-filesystem"
:
"^2.3.
2
4"
,
"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"
...
...
frontend/src/components/footer.js
View file @
b1546c36
...
@@ -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
()}
, B
uilt by `
}
{
`
b
uilt by `
}
<
a
href
=
"
https://waag.org
"
>
W
aag
<
/a
>
<
a
href
=
"
https://waag.org
"
>
w
aag
<
/a
>
<
/footer
>
<
/footer
>
)
)
...
...
frontend/src/components/header.js
View file @
b1546c36
...
@@ -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
>
<
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
`
<
StaticQuery
query
=
{
graphql
`
query MenuQuery {
query MenuQuery {
allStrapiMenuItem {
strapiHeader {
nodes {
title
subtitle
primary_navigation {
id
title
subtitle
link
}
secondary_navigation {
id
id
title,
title
subtitle,
# subtitle
link,
link
type
}
}
}
}
}
}
`
}
`
}
render
=
{
data
=>
render
=
{
data
=>
data
.
allStrapiMenuItem
.
nodes
.
map
(
item
=>
<
li
key
=
{
item
.
id
}
className
=
{
item
.
type
}
><
Link
to
=
{
item
.
link
}
>
{
item
.
title
}
<
/Link></
li
>
)}
<
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
>
<
/ul
>
<
/nav
>
<
/nav
>
<
/header
>
<
/header
>
}
/
>
)
)
Header
.
propTypes
=
{
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
React
from
"
react
"
import
PropTypes
from
"
prop-types
"
import
PropTypes
from
"
prop-types
"
import
{
Helmet
}
from
"
react-helmet
"
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>
)
}</u
l
>
}
{
/* <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 }) => (
...
@@ -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
>
)
)
...
...
frontend/src/styles/_header.scss
View file @
b1546c36
...
@@ -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-weight
:
400
;
font-size
:
44px
;
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
{
.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
~
span
{
.menu-container
input
:checked
~
.hamburger-bar
{
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
;
.menu-item-title
{
display
:
block
;
font-size
:
20px
;
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
;
}
}
...
...
frontend/src/styles/_layout.scss
View file @
b1546c36
...
@@ -7,7 +7,7 @@
...
@@ -7,7 +7,7 @@
main
{
main
{
flex
:
1
0
auto
;
flex
:
1
0
auto
;
width
:
100%
;
width
:
100%
;
max-width
:
96
0px
;
max-width
:
120
0px
;
margin
:
3rem
auto
;
margin
:
3rem
auto
;
padding
:
0
1rem
;
padding
:
0
1rem
;
}
}
...
@@ -15,3 +15,39 @@ main {
...
@@ -15,3 +15,39 @@ main {
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
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
{
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
frontend/yarn.lock
View file @
b1546c36
...
@@ -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.1
4
"
gatsby-core-utils "^1.3.1
5
"
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: