feat(sandbox): card retrieval for a unique editorial dashboard

gatsby-config.js

@@ -75,6 +75,13 @@ module.exports = {
         path: `${__dirname}/static/images/`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `editorialBoard`,
+        path: `./src/data/editorial-board`,
+      },
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {

gatsby-node.js

@@ -75,6 +75,7 @@ exports.onCreateNode = async ({
   getCache,
 }) => {
   const CONTENT_NODE_TYPE = "Content";
+  const EDITORIALBOARD_NODE_TYPE = "EditorialBoard";
 
   if (node.internal.type === "RemoteAsset") {
     const fileNode = await createRemoteFileNode({
@@ -89,29 +90,89 @@ exports.onCreateNode = async ({
     }
   } else if (
     node.internal.type === "File" &&
-    node.sourceInstanceName === "content" &&
     (node.extension === "yaml" || node.extension === "yml")
   ) {
-    const content = await loadNodeContent(node);
-    const parsedContent = jsYaml.load(content);
-
-    const contentNode = {
-      ...parsedContent,
-      id: createNodeId(`${CONTENT_NODE_TYPE}-${node.id}`),
-      parent: node.id,
-      children: [],
-      internal: {
-        type: CONTENT_NODE_TYPE,
-        contentDigest: createContentDigest(node),
-      },
-      relativePath: node.relativePath.replace(/(\.yaml$|\.yml$)/i, ""),
-    };
+    // content
+    if (node.sourceInstanceName === "content") {
+      const content = await loadNodeContent(node);
+      const parsedContent = jsYaml.load(content);
+
+      const contentNode = {
+        ...parsedContent,
+        id: createNodeId(`${CONTENT_NODE_TYPE}-${node.id}`),
+        parent: node.id,
+        children: [],
+        internal: {
+          type: CONTENT_NODE_TYPE,
+          contentDigest: createContentDigest(node),
+        },
+        relativePath: node.relativePath.replace(/(\.yaml$|\.yml$)/i, ""),
+      };
+
+      createNode(contentNode);
+      createParentChildLink({ parent: node, child: contentNode });
+    } else if (node.sourceInstanceName === "editorialBoard") {
+      // editorialboard setting nodes
+      // XXX > NOW WE HAVE THEM ON THE GRAPHQL SCHEMA, we have just to read them... and create the right array for the right page below... who know if it's the best way to do this...
+      /*
+      try this query: 
+
+      { allEditorialBoard {
+          nodes {
+            highlightedCards {
+              page
+              sections {
+                section
+              }
+            }
+          }
+        }
+      }
+      */
+      const content = await loadNodeContent(node);
+      const parsedContent = jsYaml.load(content);
 
-    createNode(contentNode);
-    createParentChildLink({ parent: node, child: contentNode });
+      const editorialBoardNode = {
+        ...parsedContent,
+        id: createNodeId(`${EDITORIALBOARD_NODE_TYPE}-${node.id}`),
+        parent: node.id,
+        children: [],
+        internal: {
+          type: EDITORIALBOARD_NODE_TYPE,
+          contentDigest: createContentDigest(node),
+        },
+        relativePath: node.relativePath.replace(/(\.yaml$|\.yml$)/i, ""),
+      };
+
+      createNode(editorialBoardNode);
+      createParentChildLink({ parent: node, child: editorialBoardNode });
+    }
   }
 };
 
+/* eslint-disable consistent-return */
+exports.onCreatePage = async ({ page, actions }) => {
+  // add variables to pageContext
+  if (page.context.highlighted) {
+    return "Skipping already highlighted page";
+  }
+  const { createPage, deletePage } = actions;
+  deletePage(page);
+  createPage({
+    ...page,
+    context: {
+      ...page.context,
+      highlighted: [
+        // editorial settings > we have to move this inside graphql loaded from the dedicated .yaml
+        "Il 2023 di Designers Italia ",
+        "Esperienza del cittadino nei servizi pubblici: dalla Misura alla pratica",
+        "Prendi parte anche tu all’evoluzione del design system del Paese",
+        "Modelli di siti e servizi di Designers Italia: nuovi file in formato aperto",
+      ],
+    },
+  });
+};
+
 exports.createPages = async ({ graphql, actions }) => {
   // tags
   const { createPage } = actions;
@@ -127,10 +188,10 @@ exports.createPages = async ({ graphql, actions }) => {
   `);
   tags.data.tagsGroup.group.forEach((tag) => {
     if (process.env.DEBUG === "true") {
-      console.log(`Creating tag page: ${tag.fieldValue}`);
+      console.log(`Creating tag page: ${tag.fieldValue} `);
     }
     createPage({
-      path: `/argomenti/${_.kebabCase(tag.fieldValue)}/`,
+      path: `/ argomenti / ${_.kebabCase(tag.fieldValue)} /`,
       component: tagTemplate,
       context: {
         tag: tag.fieldValue,

src/components/highlighted-cards/highlighted-cards.js

@@ -0,0 +1,46 @@
+import React from "react";
+
+import Card from "../card/card";
+
+function HighlightedCards({ data }) {
+  const cardStyles = "col-12 col-md-6 mb-3 mb-md-4 col-lg-4";
+
+  return (
+    <section
+      className="section-editorial"
+      aria-describedby="sandbox-list-title"
+    >
+      <div className="container-xxl">
+        <div className="row">
+          <div className="col-12 g-0">
+            <div className="px-3 px-lg-0 px-lg-5">
+              <h2
+                className="border-bottom pb-4 mb-4 mb-md-5"
+                id="sandbox-list-title"
+              >
+                Sandbox page query
+              </h2>
+              <div className="row pb-4">
+                {data.edges.map(({ node }) => (
+                  <div key={node.seo.title} className={cardStyles}>
+                    <Card
+                      img={node.components.imageIcons.image}
+                      title={node.components.hero.title}
+                      url={node.seo.pathname}
+                      description={node.seo.description}
+                      fullHeight
+                      // tag={node.components.hero.tag}
+                      tags={node.components.hero.kangaroo.tags}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default HighlightedCards;

src/data/editorial-board/highlighted-cards.yaml

@@ -0,0 +1,45 @@
+# (SANDBOX) 
+# Dashboard file to check all the highlighted editorial cards on the various pages
+# Maybe "title"s are not the best way to... 
+
+highlightedCards: 
+  - page: "index"
+    sections: 
+    - section: "community" 
+      cards:
+        - title: "Il 2023 di Designers Italia"
+        - title: "Per una progettazione a misura di territorio"
+        - title: "Cantiere Designers Italia"
+
+  - page: "design-system" 
+    sections: 
+    - section: "community" 
+      cards: 
+      - title: "Il 2023 di Designers Italia"
+      - title: "Per una progettazione a misura di territorio"
+      - title: "Democratising co-production of sustainable public services"
+
+  - page: "community" 
+    sections: 
+    - section: "notizie" 
+      cards: 
+        - title: "Il 2023 di Designers Italia"
+        - title: "Per una progettazione a misura di territorio"
+        - title: "Cantiere Designers Italia"
+    - section: "eventi" 
+      cards:  
+      - title: "L’architettura informativa del modello Comuni. Organizzare i contenuti per realizzare un sito facile da consultare"
+      - title: "Niente su di Noi, senza di Noi"
+      - title: "Forum PA 2023 - Servizi e piattaforme per la cittadinanza digitale"
+      - title: "Democratising co-production of sustainable public services"
+    - section: "media" 
+      cards: 
+      - title: "Il design system del Paese per realizzare siti e servizi dei Comuni"
+      - title: "Niente su di Noi, senza di Noi - La sfida accolta da Designers Italia, AGID e Accessibility Days"
+      - title: "ll design system del Paese e la responsabilità di progettare interfacce pubbliche"
+      - title: "Servizi inclusivi e usabili per tutti"
+    # - section: "Approfondimenti" 
+    #   cards: 
+    #   - url: "#" # XXX medium (futurability)
+    #   - url: "#" # XXX medium (futurability)
+    #   - url: "#" # XXX medium (futurability)

src/pages/{content.relativePath}.js

@@ -37,7 +37,7 @@ const TEMPLATES = {
   "design-system-component": TemplateDSComponent,
 };
 
-function Page({ pageContext, location, data: { content } }) {
+function Page({ pageContext, location, data: { content, highlightedCards } }) {
   const Template = content.metadata.template
     ? TEMPLATES[content.metadata.template.name]
     : TemplateBase;
@@ -47,6 +47,7 @@ function Page({ pageContext, location, data: { content } }) {
   return (
     <Template
       Pagedata={content}
+      highlightedCards={highlightedCards}
       pageContext={pageContext}
       location={location}
       lastModified={lastModified}
@@ -57,7 +58,38 @@ function Page({ pageContext, location, data: { content } }) {
 }
 
 export const query = graphql`
-  query ($id: String!) {
+  query ($id: String!, $highlighted: [String!]!) {
+    highlightedCards: allContent(
+      filter: { components: { hero: { title: { in: $highlighted } } } }
+      sort: { seo: { pathname: DESC } }
+    ) {
+      totalCount
+      edges {
+        node {
+          seo {
+            description
+            pathname
+            image
+          }
+          components {
+            hero {
+              title
+              tag {
+                label
+                addonClasses
+              }
+              kangaroo {
+                tags
+              }
+            }
+            imageIcons {
+              image
+              alt
+            }
+          }
+        }
+      }
+    }
     content(id: { eq: $id }) {
       id
       parent {
@@ -67,7 +99,6 @@ export const query = graphql`
           }
         }
       }
-
       metadata {
         template {
           name

src/templates/home.js

@@ -29,7 +29,15 @@ import BannerTextCta from "../components/banner-text-cta/banner-text-cta";
 import Numbers from "../components/numbers/numbers";
 import ImageIcons from "../components/image-icons/image-icons";
 
-function Template({ Pagedata, pageContext, location, lastModified }) {
+import HighlightedCards from "../components/highlighted-cards/highlighted-cards";
+
+function Template({
+  Pagedata,
+  highlightedCards,
+  pageContext,
+  location,
+  lastModified,
+}) {
   return (
     <div id="app">
       <HeaderPre data={HeaderData.headerPre} location={location} />
@@ -43,6 +51,7 @@ function Template({ Pagedata, pageContext, location, lastModified }) {
       </Header>
       <HeaderPost data={HeaderData.headerPost} />
       <main id="main">
+        <HighlightedCards data={highlightedCards} />
         <Highlight {...Pagedata.components.hero}>
           {Pagedata.components.hero.moreText && (
             <ContentCollapse