Commit 0e66e4de authored by alain's avatar alain 🐙
Browse files

single view for domains

parent 7a962965
...@@ -31,11 +31,13 @@ ...@@ -31,11 +31,13 @@
}, },
"domains": { "domains": {
"collection": "domain", "collection": "domain",
"via": "alternative" "via": "alternatives",
"dominant": true
}, },
"use_cases": { "use_cases": {
"collection": "use-case", "collection": "use-case",
"via": "alternative" "via": "alternatives",
"dominant": true
} }
} }
} }
...@@ -17,9 +17,19 @@ ...@@ -17,9 +17,19 @@
"description": { "description": {
"type": "richtext" "type": "richtext"
}, },
"alternative": { "slug": {
"type": "string",
"required": true,
"regex": "^[a-z0-9-_.~]*$"
},
"order": {
"type": "integer",
"unique": false,
"default": 1
},
"alternatives": {
"via": "domains", "via": "domains",
"model": "alternative" "collection": "alternative"
} }
} }
} }
...@@ -17,9 +17,9 @@ ...@@ -17,9 +17,9 @@
"description": { "description": {
"type": "richtext" "type": "richtext"
}, },
"alternative": { "alternatives": {
"via": "use_cases", "via": "use_cases",
"model": "alternative" "collection": "alternative"
} }
} }
} }
...@@ -5,3 +5,52 @@ ...@@ -5,3 +5,52 @@
*/ */
// You can delete this file if you're not using it // You can delete this file if you're not using it
const path = require(`path`);
const makeRequest = (graphql, request) => new Promise((resolve, reject) => {
// Query for nodes to use in creating pages.
resolve(
graphql(request).then(result => {
if (result.errors) {
reject(result.errors)
}
return result;
})
)
});
// Implement the Gatsby API “createPages”. This is called once the
// data layer is bootstrapped to let plugins create pages from data.
exports.createPages = ({ actions, graphql }) => {
const { createPage } = actions;
const getDomains = makeRequest(graphql, `
{
allStrapiDomain {
edges {
node {
id
slug
}
}
}
}
`).then(result => {
// Create pages for each article.
result.data.allStrapiDomain.edges.forEach(({ node }) => {
createPage({
path: `/domain/${node.slug}`,
component: path.resolve(`src/templates/domain.js`),
context: {
id: node.id,
},
})
})
});
// Query for articles nodes to use in creating pages.
return getDomains;
};
\ No newline at end of file
import React from "react" import React from "react"
import { graphql } from "gatsby" import { Link, graphql } from "gatsby"
import Layout from "../components/layout" import Layout from "../components/layout"
import SEO from "../components/seo" import SEO from "../components/seo"
...@@ -10,10 +10,10 @@ const DomainsPage = ({ data }) => ( ...@@ -10,10 +10,10 @@ const DomainsPage = ({ data }) => (
<h1>Domains</h1> <h1>Domains</h1>
<div className="items"> <div className="items">
{ data.allStrapiDomain.nodes.map(node => ( { data.allStrapiDomain.nodes.map(node => (
<div key={node.id} className="item"> <Link to={`/domain/${node.slug}`} key={node.id} className="item">
<h3>{ node.title }</h3> <h3>{ node.title }</h3>
<p>{ node.description }</p> <p dangerouslySetInnerHTML={{ __html: node.description }} />
</div> </Link>
)) } )) }
</div> </div>
</Layout> </Layout>
...@@ -26,6 +26,7 @@ export const pageQuery = graphql` ...@@ -26,6 +26,7 @@ export const pageQuery = graphql`
allStrapiDomain { allStrapiDomain {
nodes { nodes {
id id
slug
title title
description description
} }
......
import React, { useRef, useEffect } from "react" import React, { useRef, useEffect } from "react"
import { graphql } from "gatsby"
import gsap, { Power1 } from 'gsap'; import gsap, { Power1 } from 'gsap';
import { MotionPathPlugin } from "gsap/MotionPathPlugin"; import { MotionPathPlugin } from "gsap/MotionPathPlugin";
import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollTrigger } from "gsap/ScrollTrigger";
......
...@@ -70,4 +70,14 @@ section { ...@@ -70,4 +70,14 @@ section {
width: 340px; width: 340px;
margin: 0 1rem 2rem; margin: 0 1rem 2rem;
} }
a.item {
text-decoration: none;
color: #000;
&:hover {
transition: all 200ms ease;
transform: translateY(2px);
}
}
} }
\ No newline at end of file
//@import url("https://styling.ao.waag.org/maax.css");
@import url("https://assets.waag.org/fonts/maax/font.css"); @import url("https://assets.waag.org/fonts/maax/font.css");
body { body {
...@@ -18,4 +17,15 @@ h2 { ...@@ -18,4 +17,15 @@ h2 {
h3 { h3 {
margin: 0; margin: 0;
}
a.back {
display: inline-block;
text-decoration: none;
color: #000;
&:hover {
transition: all 200ms ease;
transform: translateX(-2px);
}
} }
\ No newline at end of file
import React from 'react'
import { Link, graphql } from 'gatsby'
import Layout from '../components/layout'
const DomainTemplate = ({ data }) => (
<Layout>
<h1>{data.strapiDomain.title}</h1>
{/* <p>by <Link to={`/authors/User_${data.strapiArticle.author.id}`}>{data.strapiArticle.author.username}</Link></p> */}
<p dangerouslySetInnerHTML={{ __html:data.strapiDomain.description }} />
{ data.strapiDomain.alternatives.length !== 0 && <>
<h3>Related alternatives</h3>
<ul>
{ data.strapiDomain.alternatives.map(alternative => <li key={alternative.id}>
<h2>{alternative.title}</h2>
<p dangerouslySetInnerHTML={{ __html: alternative.description }} />
</li>) }
</ul>
</> }
<Link to="/domains/" className="back">&laquo; all domains</Link>
</Layout>
)
export default DomainTemplate
export const query = graphql`
query DomainTemplate($id: String!) {
strapiDomain(id: {eq: $id}) {
id
title
description
alternatives {
id
title
description
link
logo {
childImageSharp {
fluid(maxWidth: 340) {
...GatsbyImageSharpFluid_noBase64
}
}
}
}
}
}
`
\ No newline at end of file
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