single view for domains

backend/api/alternative/models/alternative.settings.json

@@ -31,11 +31,13 @@
     },
     "domains": {
       "collection": "domain",
-      "via": "alternative"
+      "via": "alternatives",
+      "dominant": true
     },
     "use_cases": {
       "collection": "use-case",
-      "via": "alternative"
+      "via": "alternatives",
+      "dominant": true
     }
   }
 }

backend/api/domain/models/domain.settings.json

@@ -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"
     }
   }
 }

backend/api/use-case/models/use-case.settings.json

@@ -17,9 +17,9 @@
     "description": {
       "type": "richtext"
     },
-    "alternative": {
+    "alternatives": {
       "via": "use_cases",
-      "model": "alternative"
+      "collection": "alternative"
     }
   }
 }

frontend/gatsby-node.js

@@ -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

frontend/src/pages/domains.js

 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
       }

frontend/src/pages/index.js

 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";

frontend/src/styles/_layout.scss

@@ -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

frontend/src/styles/_typography.scss

 
-//@import url("https://styling.ao.waag.org/maax.css");
 @import url("https://assets.waag.org/fonts/maax/font.css");
 
 body {
@@ -19,3 +18,14 @@ 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

frontend/src/templates/domain.js

+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