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

gatsby-node.js

@@ -112,6 +112,29 @@ exports.onCreateNode = async ({
   }
 };
 
+/* eslint-disable consistent-return */ // just setting a context variable
+exports.onCreatePage = ({ 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: [
+        "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;

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

@@ -0,0 +1,51 @@
+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="lead mb-5">
+                Cards loaded from an array of titles stored in gatsbynode and used via a global pageQuery All is a sandbox
+              </div>
+              <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}
+                    />
+                    {/* <h3><Link to={node.seo.pathname}>{node.components.hero.title}</Link></h3> */}
+                    {/* <p>{node.seo.description}</p> */}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default HighlightedCards;

src/data/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: "home"
+    sections: 
+    - section: "community" 
+      cards:
+        - title: "Il 2023 di Designers Italia"
+        - title: "Per una progettazione a misura di territorio"
+        - title: "Cantiere Designers Italia"
+
+  - page: "designsystem" 
+    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: "news" 
+      cards: 
+        - title: "Il 2023 di Designers Italia"
+        - title: "Per una progettazione a misura di territorio"
+        - title: "Cantiere Designers Italia"
+    - section: "events" 
+      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: "articles" 
+    #   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