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

continue setting up of the other pages

parent 411aeaad
......@@ -2,7 +2,7 @@
"kind": "singleType",
"collectionName": "abouts",
"info": {
"name": "About"
"name": "About page"
},
"options": {
"increments": true,
......
......@@ -30,12 +30,17 @@
"required": false
},
"domains": {
"collection": "domain",
"via": "alternatives",
"collection": "domain",
"dominant": true
},
"use_cases": {
"via": "alternatives",
"collection": "use-case",
"dominant": true
},
"layers": {
"collection": "layer",
"via": "alternatives",
"dominant": true
}
......
......@@ -28,8 +28,11 @@
"default": 1
},
"alternatives": {
"via": "domains",
"collection": "alternative"
"collection": "alternative",
"via": "domains"
},
"excerpt": {
"type": "richtext"
}
}
}
{
"routes": [
{
"method": "GET",
"path": "/domains-page",
"handler": "domains-page.find",
"config": {
"policies": []
}
},
{
"method": "PUT",
"path": "/domains-page",
"handler": "domains-page.update",
"config": {
"policies": []
}
},
{
"method": "DELETE",
"path": "/domains-page",
"handler": "domains-page.delete",
"config": {
"policies": []
}
}
]
}
'use strict';
/**
* Read the documentation (https://strapi.io/documentation/v3.x/concepts/controllers.html#core-controllers)
* to customize this controller
*/
module.exports = {};
'use strict';
/**
* Read the documentation (https://strapi.io/documentation/v3.x/concepts/models.html#lifecycle-hooks)
* to customize this model
*/
module.exports = {};
{
"kind": "singleType",
"collectionName": "domains_pages",
"info": {
"name": "Domains page"
},
"options": {
"increments": true,
"timestamps": true
},
"attributes": {
"introduction": {
"type": "richtext"
}
}
}
'use strict';
/**
* Read the documentation (https://strapi.io/documentation/v3.x/concepts/services.html#core-services)
* to customize this service
*/
module.exports = {};
......@@ -31,6 +31,10 @@
"type": "string",
"regex": "^[a-z0-9-_.~]*$",
"required": true
},
"alternatives": {
"via": "layers",
"collection": "alternative"
}
}
}
......@@ -18,8 +18,15 @@
"type": "richtext"
},
"alternatives": {
"via": "use_cases",
"collection": "alternative"
"collection": "alternative",
"via": "use_cases"
},
"excerpt": {
"type": "richtext"
},
"slug": {
"type": "string",
"regex": "^[a-z0-9-_.~]*$"
}
}
}
......@@ -36,6 +36,7 @@ module.exports = {
singleTypes: [
'header',
'home',
'domains-page',
'about',
],
queryLimit: 1000
......
......@@ -37,6 +37,7 @@ exports.createPages = ({ actions, graphql }) => {
edges {
node {
id
slug
}
}
}
......@@ -53,7 +54,7 @@ exports.createPages = ({ actions, graphql }) => {
})
result.data.allStrapiUseCase.edges.forEach(({ node }) => {
createPage({
path: `/use-case/${node.id}`,
path: `/use-case/${node.slug}`,
component: path.resolve(`src/templates/use-case.js`),
context: {
id: node.id,
......
......@@ -24,7 +24,7 @@
"react-dom": "^16.12.0",
"react-helmet": "^6.1.0",
"react-responsive": "^8.1.0",
"react-showdown": "^2.1.0"
"text-clipper": "^2.1.0"
},
"devDependencies": {
"prettier": "2.0.5"
......
import React from "react"
import { Link } from "gatsby"
import Img from 'gatsby-image'
const Alternatives = ({ alternatives }) => {
return (
<div className="alternatives">
{ alternatives.map(alternative => (
<div key={alternative.id} className="alternative">
<div className="logo">
{ alternative.logo && <Img fluid={ alternative.logo.childImageSharp.fluid } fadeIn={false} /> }
</div>
<div className="text">
<h2>{ alternative.title }</h2>
<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>) }
</p>
}
{ (alternative.layers || []).length > 0 &&
<p className="meta">
Layer{ alternative.layers.length > 1 ? "s" : "" }: { alternative.layers.map(layer => <Link key={layer.slug} to={`/layers/#${layer.slug}`}>{ layer.title }</Link>) }
</p>
}
</div>
</div>
)) }
</div>
)
}
export default Alternatives
\ No newline at end of file
......@@ -36,7 +36,6 @@ const Layers = ({ location }) => {
return (
<section id="layers">
<div className="row">
<h1>The layers of the stack</h1>
<div className="columns-2">
<div className="column" onClick={e => { handleClick(e, "0") }}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 637.96 794.17"><g style={{ transform: "translateY(120px)" }}>
......
import React from "react"
import { graphql } from "gatsby"
import MarkdownView from 'react-showdown';
import Layout from "../components/layout"
import SEO from "../components/seo"
......@@ -13,7 +12,7 @@ const AboutPage = ({ data }) => (
{ 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 dangerouslySetInnerHTML={{ __html: column.content}} />
</div>) }
</div>
) }
......
import React from "react"
import { graphql } from "gatsby"
import Img from 'gatsby-image'
import Layout from "../components/layout"
import SEO from "../components/seo"
import Alternatives from "../components/alternatives"
const AlternativesPage = ({ data }) => (
<Layout id="page-alternatives">
<SEO title="Alternatives" />
<h1 className="page-title">Alternatives</h1>
<div className="items">
{ data.allStrapiAlternative.nodes.map(node => (
<div key={node.id} className="item">
<h3>{ node.title }</h3>
{ node.logo && <Img className="logo" 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>
<section>
<div className="row">
<h1 className="page-title">Alternatives</h1>
<Alternatives alternatives={data.allStrapiAlternative.nodes} />
</div>
</section>
</Layout>
)
......@@ -33,13 +28,17 @@ export const pageQuery = graphql`
description
logo {
childImageSharp {
fluid(maxWidth: 340) {
fluid(maxWidth: 200, maxHeight: 100, fit: INSIDE, background: "rgba(0,0,0,0)" ) {
...GatsbyImageSharpFluid_noBase64
}
}
}
domains {
id
slug
title
}
layers {
slug
title
}
}
......
import React from "react"
import { Link, graphql } from "gatsby"
import clip from "text-clipper"
import Layout from "../components/layout"
import SEO from "../components/seo"
const DomainsPage = ({ data }) => (
<Layout>
<SEO title="Domains" />
<h1 className="page-title">Domains</h1>
<div className="items">
{ data.allStrapiDomain.nodes.map(node => (
<Link to={`/domain/${node.slug}`} key={node.id} className="item">
<h3>{ node.title }</h3>
<p dangerouslySetInnerHTML={{ __html: node.description }} />
{ node.order }
</Link>
)) }
</div>
</Layout>
)
const DomainsPage = ({ data }) => {
return (
<Layout>
<SEO title="Domains" />
<section>
<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 })
return (
<Link to={`/domain/${node.slug}`} key={node.id} className="domain">
<h3>{ node.title }</h3>
<p dangerouslySetInnerHTML={{ __html: excerpt }} />
{ node.order }
</Link>
)
})}
</div>
</div>
</section>
</Layout>
)
}
export default DomainsPage
export const pageQuery = graphql`
query DomainQuery {
strapiDomainsPage {
introduction
}
allStrapiDomain(sort: {fields: order}) {
nodes {
id
slug
title
excerpt
description
}
}
......
......@@ -17,7 +17,7 @@ import PhoneS3 from "../images/inline/phone-s-3.svg"
import Stack from "../images/inline/stack.svg"
//import Layers from "../images/inline/layers.svg"
import Layers from "../components/layers.js"
//import Layers from "../components/layers.js"
gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);
......@@ -165,7 +165,7 @@ const IndexPage = ({ data, location }) => {
</div>
</section>
<Layers id="stack" location={location} />
{/* <Layers id="stack" location={location} /> */}
</Layout>
)
}
......
import React from "react"
import { graphql } from "gatsby"
import { graphql, Link } from "gatsby"
import clip from "text-clipper"
import Layout from "../components/layout"
import SEO from "../components/seo"
const UseCasesPage = ({ data }) => (
<Layout>
<SEO title="Use Cases" />
<h1 className="page-title">Use Cases</h1>
<div className="items">
{ data.allStrapiUseCase.nodes.map(node => (
<div key={node.id} className="item">
<h3>{ node.title }</h3>
<p>{ node.description }</p>
const UseCasesPage = ({ data }) => {
return (
<Layout>
<SEO title="Use Cases" />
<div className="row">
<h1 className="page-title">Use Cases</h1>
<div className="items">
{ data.allStrapiUseCase.nodes.map(node => {
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>
<div dangerouslySetInnerHTML={{ __html: excerpt }} />
</Link>
)
}) }
</div>
)) }
</div>
</Layout>
)
</div>
</Layout>
)
}
export default UseCasesPage
......@@ -26,6 +35,7 @@ export const pageQuery = graphql`
allStrapiUseCase {
nodes {
id
slug
title
description
}
......
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