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

continue setting up of the other pages..

parent 41468515
......@@ -33,6 +33,17 @@
},
"excerpt": {
"type": "richtext"
},
"image": {
"model": "file",
"via": "related",
"allowedTypes": [
"images",
"files",
"videos"
],
"plugin": "upload",
"required": false
}
}
}
......@@ -42,8 +42,19 @@ module.exports = {
queryLimit: 1000
}
},
`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`,
......
......@@ -45,7 +45,7 @@ exports.createPages = ({ actions, graphql }) => {
`).then(result => {
result.data.allStrapiDomain.edges.forEach(({ node }) => {
createPage({
path: `/domain/${node.slug}`,
path: `/domains/${node.slug}`,
component: path.resolve(`src/templates/domain.js`),
context: {
id: node.id,
......@@ -54,7 +54,7 @@ exports.createPages = ({ actions, graphql }) => {
})
result.data.allStrapiUseCase.edges.forEach(({ node }) => {
createPage({
path: `/use-case/${node.slug}`,
path: `/use-cases/${node.slug}`,
component: path.resolve(`src/templates/use-case.js`),
context: {
id: node.id,
......
......@@ -16,7 +16,7 @@ const Alternatives = ({ alternatives }) => {
<div dangerouslySetInnerHTML={{__html:alternative.description }} />
{ (alternative.domains || []).length > 0 &&
<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>
}
{ (alternative.layers || []).length > 0 &&
......
......@@ -2,9 +2,11 @@ import React from "react"
import { Link, graphql } from "gatsby"
import clip from "text-clipper"
import Img from 'gatsby-image'
import Layout from "../components/layout"
import SEO from "../components/seo"
const DomainsPage = ({ data }) => {
return (
<Layout>
......@@ -13,14 +15,17 @@ const DomainsPage = ({ data }) => {
<div className="row">
<div className="page-introduction" dangerouslySetInnerHTML={{ __html: data.strapiDomainsPage.introduction }}></div>
<div className="domains">
{ data.allStrapiDomain.nodes.map(node => {
const excerpt = node.excerpt ? node.excerpt : clip(node.description, 150, { html: true })
{ data.allStrapiDomain.nodes.map(domain => {
const excerpt = domain.excerpt ? domain.excerpt : clip(domain.description, 150, { html: true })
return (
<Link to={`/domain/${node.slug}`} key={node.id} className="domain">
<h3>{ node.title }</h3>
<p dangerouslySetInnerHTML={{ __html: excerpt }} />
{ node.order }
<Link to={`/domains/${domain.slug}`} key={domain.id} className="domain">
{ domain.image && <div className="image"><Img fluid={ domain.image.childImageSharp.fluid } fadeIn={false} /></div> }
<div className="text">
<h2>{ domain.title }</h2>
<div className="content" dangerouslySetInnerHTML={{ __html: excerpt }} />
{ domain.order }
</div>
</Link>
)
})}
......@@ -45,6 +50,14 @@ export const pageQuery = graphql`
title
excerpt
description
image {
#publicURL
childImageSharp {
fluid(maxWidth: 400, pngQuality: 80) {
...GatsbyImageSharpFluid_noBase64
}
}
}
}
}
}
......
......@@ -16,8 +16,8 @@ const UseCasesPage = ({ data }) => {
const excerpt = node.excerpt ? node.excerpt : clip(node.description, 150, { html: true })
return (
<Link key={node.id} className="item" to={`/use-case/${node.slug}`}>
<h3>{ node.title }</h3>
<Link key={node.id} className="item" to={`/use-cases/${node.slug}`}>
<h2>{ node.title }</h2>
<div dangerouslySetInnerHTML={{ __html: excerpt }} />
</Link>
)
......@@ -37,6 +37,7 @@ export const pageQuery = graphql`
id
slug
title
excerpt
description
}
}
......
.domains {
.domains {
a.domain {
display: block;
display: flex;
align-items: center;
text-decoration: none;
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 @@
h1 {
font-size: 5rem;
line-height: 1em;
word-break: keep-all;
}
h2 {
......@@ -44,9 +45,15 @@
@media (min-width: 481px) {
h3 {
font-size: 1.25rem;
}
p {
font-size: 1.25rem;
}
}
#phone {
......
@import url("https://assets.waag.org/fonts/maax/font.css");
::-moz-selection { background: #2FB6BC; color: #FFF; }
::selection { background: #2FB6BC; ; color: #FFF; }
body {
font-family: maax, sans-serif;
}
......@@ -17,6 +21,10 @@ h1 {
h2 {
font-size: 1.5rem;
margin: 0 0 2rem 0;
p + & {
margin-top: 4rem;
}
}
h3 {
......@@ -52,8 +60,9 @@ a.back {
}
.page-introduction {
max-width: 720px;
font-size: 1.2em;
margin-bottom: 4rem;
margin-bottom: 6rem;
}
.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