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

continue setting up of the other pages..

parent 41468515
...@@ -33,6 +33,17 @@ ...@@ -33,6 +33,17 @@
}, },
"excerpt": { "excerpt": {
"type": "richtext" "type": "richtext"
},
"image": {
"model": "file",
"via": "related",
"allowedTypes": [
"images",
"files",
"videos"
],
"plugin": "upload",
"required": false
} }
} }
} }
...@@ -42,8 +42,19 @@ module.exports = { ...@@ -42,8 +42,19 @@ module.exports = {
queryLimit: 1000 queryLimit: 1000
} }
}, },
`gatsby-transformer-sharp`, `gatsby-transformer-sharp`,
`gatsby-plugin-sharp`, {
resolve: `gatsby-plugin-sharp`,
options: {
// Available options and their defaults:
base64Width: 20,
forceBase64Format: ``, // valid formats: png,jpg,webp
useMozJpeg: process.env.GATSBY_JPEG_ENCODER === `MOZJPEG`,
stripMetadata: true,
defaultQuality: 60,
}
},
{ {
resolve: `gatsby-plugin-manifest`, resolve: `gatsby-plugin-manifest`,
......
...@@ -45,7 +45,7 @@ exports.createPages = ({ actions, graphql }) => { ...@@ -45,7 +45,7 @@ exports.createPages = ({ actions, graphql }) => {
`).then(result => { `).then(result => {
result.data.allStrapiDomain.edges.forEach(({ node }) => { result.data.allStrapiDomain.edges.forEach(({ node }) => {
createPage({ createPage({
path: `/domain/${node.slug}`, path: `/domains/${node.slug}`,
component: path.resolve(`src/templates/domain.js`), component: path.resolve(`src/templates/domain.js`),
context: { context: {
id: node.id, id: node.id,
...@@ -54,7 +54,7 @@ exports.createPages = ({ actions, graphql }) => { ...@@ -54,7 +54,7 @@ exports.createPages = ({ actions, graphql }) => {
}) })
result.data.allStrapiUseCase.edges.forEach(({ node }) => { result.data.allStrapiUseCase.edges.forEach(({ node }) => {
createPage({ createPage({
path: `/use-case/${node.slug}`, path: `/use-cases/${node.slug}`,
component: path.resolve(`src/templates/use-case.js`), component: path.resolve(`src/templates/use-case.js`),
context: { context: {
id: node.id, id: node.id,
......
...@@ -16,7 +16,7 @@ const Alternatives = ({ alternatives }) => { ...@@ -16,7 +16,7 @@ const Alternatives = ({ alternatives }) => {
<div dangerouslySetInnerHTML={{__html:alternative.description }} /> <div dangerouslySetInnerHTML={{__html:alternative.description }} />
{ (alternative.domains || []).length > 0 && { (alternative.domains || []).length > 0 &&
<p className="meta"> <p className="meta">
Domain{ alternative.domains.length > 1 ? "s" : "" }: { alternative.domains.map(domain => <Link key={domain.slug} to={`/domain/${domain.slug}`}>{ domain.title}</Link>) } Domain{ alternative.domains.length > 1 ? "s" : "" }: { alternative.domains.map(domain => <Link key={domain.slug} to={`/domains/${domain.slug}`}>{ domain.title}</Link>) }
</p> </p>
} }
{ (alternative.layers || []).length > 0 && { (alternative.layers || []).length > 0 &&
......
...@@ -2,9 +2,11 @@ import React from "react" ...@@ -2,9 +2,11 @@ import React from "react"
import { Link, graphql } from "gatsby" import { Link, graphql } from "gatsby"
import clip from "text-clipper" import clip from "text-clipper"
import Img from 'gatsby-image'
import Layout from "../components/layout" import Layout from "../components/layout"
import SEO from "../components/seo" import SEO from "../components/seo"
const DomainsPage = ({ data }) => { const DomainsPage = ({ data }) => {
return ( return (
<Layout> <Layout>
...@@ -13,14 +15,17 @@ const DomainsPage = ({ data }) => { ...@@ -13,14 +15,17 @@ const DomainsPage = ({ data }) => {
<div className="row"> <div className="row">
<div className="page-introduction" dangerouslySetInnerHTML={{ __html: data.strapiDomainsPage.introduction }}></div> <div className="page-introduction" dangerouslySetInnerHTML={{ __html: data.strapiDomainsPage.introduction }}></div>
<div className="domains"> <div className="domains">
{ data.allStrapiDomain.nodes.map(node => { { data.allStrapiDomain.nodes.map(domain => {
const excerpt = node.excerpt ? node.excerpt : clip(node.description, 150, { html: true }) const excerpt = domain.excerpt ? domain.excerpt : clip(domain.description, 150, { html: true })
return ( return (
<Link to={`/domain/${node.slug}`} key={node.id} className="domain"> <Link to={`/domains/${domain.slug}`} key={domain.id} className="domain">
<h3>{ node.title }</h3> { domain.image && <div className="image"><Img fluid={ domain.image.childImageSharp.fluid } fadeIn={false} /></div> }
<p dangerouslySetInnerHTML={{ __html: excerpt }} /> <div className="text">
{ node.order } <h2>{ domain.title }</h2>
<div className="content" dangerouslySetInnerHTML={{ __html: excerpt }} />
{ domain.order }
</div>
</Link> </Link>
) )
})} })}
...@@ -45,6 +50,14 @@ export const pageQuery = graphql` ...@@ -45,6 +50,14 @@ export const pageQuery = graphql`
title title
excerpt excerpt
description description
image {
#publicURL
childImageSharp {
fluid(maxWidth: 400, pngQuality: 80) {
...GatsbyImageSharpFluid_noBase64
}
}
}
} }
} }
} }
......
...@@ -16,8 +16,8 @@ const UseCasesPage = ({ data }) => { ...@@ -16,8 +16,8 @@ const UseCasesPage = ({ data }) => {
const excerpt = node.excerpt ? node.excerpt : clip(node.description, 150, { html: true }) const excerpt = node.excerpt ? node.excerpt : clip(node.description, 150, { html: true })
return ( return (
<Link key={node.id} className="item" to={`/use-case/${node.slug}`}> <Link key={node.id} className="item" to={`/use-cases/${node.slug}`}>
<h3>{ node.title }</h3> <h2>{ node.title }</h2>
<div dangerouslySetInnerHTML={{ __html: excerpt }} /> <div dangerouslySetInnerHTML={{ __html: excerpt }} />
</Link> </Link>
) )
...@@ -37,6 +37,7 @@ export const pageQuery = graphql` ...@@ -37,6 +37,7 @@ export const pageQuery = graphql`
id id
slug slug
title title
excerpt
description description
} }
} }
......
.domains { .domains {
a.domain { a.domain {
display: block; display: flex;
align-items: center;
text-decoration: none; text-decoration: none;
margin-bottom: 2rem; margin-bottom: 2rem;
@media (max-width: 480px) {
flex-direction: column;
}
.image {
width: 260px;
}
.text {
padding: 2rem;
}
} }
} }
\ No newline at end of file
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
h1 { h1 {
font-size: 5rem; font-size: 5rem;
line-height: 1em; line-height: 1em;
word-break: keep-all;
} }
h2 { h2 {
...@@ -44,9 +45,15 @@ ...@@ -44,9 +45,15 @@
@media (min-width: 481px) { @media (min-width: 481px) {
h3 {
font-size: 1.25rem;
}
p { p {
font-size: 1.25rem; font-size: 1.25rem;
} }
} }
#phone { #phone {
......
@import url("https://assets.waag.org/fonts/maax/font.css"); @import url("https://assets.waag.org/fonts/maax/font.css");
::-moz-selection { background: #2FB6BC; color: #FFF; }
::selection { background: #2FB6BC; ; color: #FFF; }
body { body {
font-family: maax, sans-serif; font-family: maax, sans-serif;
} }
...@@ -17,6 +21,10 @@ h1 { ...@@ -17,6 +21,10 @@ h1 {
h2 { h2 {
font-size: 1.5rem; font-size: 1.5rem;
margin: 0 0 2rem 0; margin: 0 0 2rem 0;
p + & {
margin-top: 4rem;
}
} }
h3 { h3 {
...@@ -52,8 +60,9 @@ a.back { ...@@ -52,8 +60,9 @@ a.back {
} }
.page-introduction { .page-introduction {
max-width: 720px;
font-size: 1.2em; font-size: 1.2em;
margin-bottom: 4rem; margin-bottom: 6rem;
} }
.content { .content {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment