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

single view for domains

parent 7a962965
......@@ -31,11 +31,13 @@
},
"domains": {
"collection": "domain",
"via": "alternative"
"via": "alternatives",
"dominant": true
},
"use_cases": {
"collection": "use-case",
"via": "alternative"
"via": "alternatives",
"dominant": true
}
}
}
......@@ -17,9 +17,19 @@
"description": {
"type": "richtext"
},
"alternative": {
"slug": {
"type": "string",
"required": true,
"regex": "^[a-z0-9-_.~]*$"
},
"order": {
"type": "integer",
"unique": false,
"default": 1
},
"alternatives": {
"via": "domains",
"model": "alternative"
"collection": "alternative"
}
}
}
......@@ -17,9 +17,9 @@
"description": {
"type": "richtext"
},
"alternative": {
"alternatives": {
"via": "use_cases",
"model": "alternative"
"collection": "alternative"
}
}
}
......@@ -5,3 +5,52 @@
*/
// 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 { graphql } from "gatsby"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
......@@ -10,10 +10,10 @@ const DomainsPage = ({ data }) => (
<h1>Domains</h1>
<div className="items">
{ 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>
<p>{ node.description }</p>
</div>
<p dangerouslySetInnerHTML={{ __html: node.description }} />
</Link>
)) }
</div>
</Layout>
......@@ -26,6 +26,7 @@ export const pageQuery = graphql`
allStrapiDomain {
nodes {
id
slug
title
description
}
......
import React, { useRef, useEffect } from "react"
import { graphql } from "gatsby"
import gsap, { Power1 } from 'gsap';
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
import { ScrollTrigger } from "gsap/ScrollTrigger";
......
......@@ -70,4 +70,14 @@ section {
width: 340px;
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");
body {
......@@ -18,4 +17,15 @@ h2 {
h3 {
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