[part-09] Added a custom template for "design" detail pages

- Updated page creation filters to include "design" contentKeys along with "page"
- Added links to the designs listing page

gatsby-node.js

@@ -12,7 +12,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
       allMarkdownRemark(
         filter: {
           # Same filter duplicated here to demonstrate. One is adequate to filter the "pages" collection.
-          frontmatter: {contentKey: {eq: "page"}},
+          frontmatter: {contentKey: {in: ["page", "design"]}},
           fields: {slug: {ne: null}}
         }
       ) {
@@ -62,10 +62,10 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
 exports.onCreateNode = ({ node, getNode, actions }) => {
   const { createNodeField } = actions;
   if (node.internal.type === `MarkdownRemark`) {
-    // Create node filed "slug" for only "page" content.
+    // Create node filed "slug" for only "page" and "design" content types.
     // At least a single page with a "contentKey" has to be exist! If not you should add manually to the markdown files!
-    if (node.frontmatter.contentKey === 'page') {
-      const slug = createFilePath({ node, getNode, basePath: `src/pages` });
+    if (['page', 'design'].includes(node.frontmatter.contentKey)) {
+      const slug = createFilePath({ node, getNode, basePath: `src` });
       createNodeField({
         node,
         name: `slug`,

src/templates/design-template.js

@@ -0,0 +1,36 @@
+// src/templates/design-template.js
+
+import { graphql } from 'gatsby';
+import React from 'react'
+import Layout from '../components/Layout.js';
+
+const DesignTemplate = (props) => {
+
+  console.log(props.data);
+
+  return (
+    <Layout>
+      <div>
+        <h1>Design Content Template</h1>
+        <div>{props.data.markdownRemark.frontmatter.title}</div>
+        <div>{props.data.markdownRemark.frontmatter.description}</div>
+      </div>
+    </Layout>
+  )
+}
+
+export const query = graphql`
+  query($pageId: String = "") {
+    markdownRemark(
+      id: { eq: $pageId }
+    ) {
+      id
+      frontmatter {
+        title
+        description
+      }
+    }
+  }
+`
+
+export default DesignTemplate

src/templates/designs-template.js

@@ -1,6 +1,6 @@
 // src/templates/designs-template.js
 
-import { graphql } from 'gatsby';
+import { graphql, Link } from 'gatsby';
 import React from 'react'
 import Layout from '../components/Layout.js';
 
@@ -26,6 +26,7 @@ const DesignsTemplate = (props) => {
                 <li key={edge.node.id}>
                   <h1>{edge.node.frontmatter.title}</h1>
                   <p>{edge.node.frontmatter.description}</p>
+                  <Link to={edge.node.fields.slug}>{edge.node.fields.slug}</Link>
                 </li>
               );
             })
@@ -51,12 +52,15 @@ export const query = graphql`
       }
       html
     }
-     allMarkdownRemark(
-        filter: {frontmatter: {contentKey: {eq: "design"}}}
+    allMarkdownRemark(
+      filter: {frontmatter: {contentKey: {eq: "design"}}}
     ) {
       edges {
         node {
           id
+          fields {
+            slug
+          }
           frontmatter {
             title
             description