@openstack_dev/gatsby-theme-marketing-oif-core 1.0.24 → 1.0.25

package/gatsby-node.js

@@ -15,6 +15,7 @@ const {
   MAINTENANCE_FILE_PATH,
   FONTS_SCSS_FILE_PATH,
   SPONSORED_PROJECTS_FILE_PATH,
+  FOOTER_FILE_PATH,
 } = require("./src/utils/filePath");
 const { generateFontFile } = require("./src/utils/cssUtils");
 
@@ -87,6 +88,38 @@ exports.onPreBootstrap = async () => {
   if (sponsoredProjects) {
     writeToJson(SPONSORED_PROJECTS_FILE_PATH, sponsoredProjects);
   }
+
+  // new footer structure migration
+  // read the JSON file
+  const rawData = fs.readFileSync(FOOTER_FILE_PATH, "utf8");
+  let footerJSON;
+  try {
+    footerJSON = JSON.parse(rawData);
+  } catch (error) {
+    console.log("Error parsing JSON from footer file:", error);
+    return;
+  }
+  // return new structure for social networks
+  if (footerJSON.social && Array.isArray(footerJSON.social.networks)) {
+    footerJSON.social.networks = footerJSON.social.networks.map((item) => ({
+      display: item.display,
+      title: item.title || item.icon,
+      clickBehaviour: {
+        link: item.clickBehaviour?.link || item.link,
+        attributes: item.clickBehaviour?.attributes || [],
+      },
+      rendering: {
+        icon: item.rendering?.icon || item.icon,
+      },
+    }));
+  }
+  // save updated file.
+  try {
+    fs.writeFileSync(FOOTER_FILE_PATH, JSON.stringify(footerJSON));
+    console.log(`File successfully updated at ${FOOTER_FILE_PATH}`);
+  } catch (error) {
+    console.log("Error writing updated config file:", error);
+  }
 };
 
 exports.createSchemaCustomization = ({ actions }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstack_dev/gatsby-theme-marketing-oif-core",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "Base theme for Marketing Sites",
   "author": "smarcet",
   "keywords": [

package/src/cms/config/collections/configurationsCollection/footer/index.js

@@ -1,14 +1,13 @@
+import { FOOTER_FILE_PATH } from "@utils/filePath";
+
 import {
   booleanField,
   stringField,
   objectField,
-  listField
+  listField,
+  fileField,
 } from "../../../fields";
 
-import {
-  FOOTER_FILE_PATH
-} from "@utils/filePath";
-
 /*
 - file: "src/content/footer.json"
   label: "Footer"
@@ -19,7 +18,7 @@ import {
         {label: "Display", name: "display", widget: boolean, required: false},
         {label: "Items", name: "items", widget: list, fields: [
           {label: "Title", name: "title", widget: string},
-          {label: "Link", name: "link", widget: string},         
+          {label: "Link", name: "link", widget: string},
         ]}
       ]}
     - {label: "Logo", name: "logo", widget: object, fields: [
@@ -51,12 +50,12 @@ const footer = {
       fields: [
         stringField({
           label: "Title",
-          name: "title"
+          name: "title",
         }),
         booleanField({
           label: "Display",
           name: "display",
-          required: false
+          required: false,
         }),
         listField({
           label: "Items",
@@ -64,15 +63,15 @@ const footer = {
           fields: [
             stringField({
               label: "Title",
-              name: "title"
+              name: "title",
             }),
             stringField({
               label: "Link",
-              name: "link"
-            })
-          ]
-        })
-      ]
+              name: "link",
+            }),
+          ],
+        }),
+      ],
     }),
     objectField({
       label: "Logo",
@@ -81,9 +80,9 @@ const footer = {
         booleanField({
           label: "Display",
           name: "display",
-          required: false
-        })
-      ]
+          required: false,
+        }),
+      ],
     }),
     objectField({
       label: "Social",
@@ -91,33 +90,78 @@ const footer = {
       fields: [
         stringField({
           label: "Title",
-          name: "title"
+          name: "title",
         }),
         booleanField({
           label: "Display",
           name: "display",
-          required: false
+          required: false,
         }),
         listField({
           label: "Networks",
           name: "networks",
           fields: [
             stringField({
-              label: "Icon",
-              name: "icon"
+              label: "Title",
+              name: "title",
             }),
-            stringField({
-              label: "Link",
-              name: "link"
+            objectField({
+              label: "Rendering",
+              name: "rendering",
+              fields: [
+                stringField({
+                  label: "Icon",
+                  name: "icon",
+                  required: false,
+                }),
+                fileField({
+                  label: "file",
+                  name: "file",
+                  required: false,
+                }),
+              ],
+            }),
+            objectField({
+              label: "Click Behaviour",
+              name: "clickBehaviour",
+              fields: [
+                stringField({
+                  label: "Link",
+                  name: "link",
+                  required: false,
+                }),
+                listField({
+                  label: "Custom attributes",
+                  name: "attributes",
+                  required: false,
+                  fields: [
+                    stringField({
+                      label: "Attribute",
+                      name: "attribute",
+                      required: true,
+                    }),
+                    stringField({
+                      label: "Value",
+                      name: "value",
+                      required: true,
+                    }),
+                  ],
+                }),
+                fileField({
+                  label: "Open modal with File",
+                  name: "openModal",
+                  required: false,
+                }),
+              ],
             }),
             booleanField({
               label: "Display",
               name: "display",
-              required: false
-            })
-          ]
-        })
-      ]
+              required: false,
+            }),
+          ],
+        }),
+      ],
     }),
     listField({
       label: "Legal",
@@ -125,13 +169,13 @@ const footer = {
       fields: [
         stringField({
           label: "Title",
-          name: "title"
+          name: "title",
         }),
         stringField({
           label: "Link",
-          name: "link"
-        })
-      ]
+          name: "link",
+        }),
+      ],
     }),
     objectField({
       label: "Credit",
@@ -139,20 +183,20 @@ const footer = {
       fields: [
         stringField({
           label: "Title",
-          name: "title"
+          name: "title",
         }),
         stringField({
           label: "Content",
-          name: "content"
+          name: "content",
         }),
         booleanField({
           label: "Display",
           name: "display",
-          required: false
-        })
-      ]
-    })
-  ]
+          required: false,
+        }),
+      ],
+    }),
+  ],
 };
 
-export default footer;
+export default footer;

package/src/cms/config/collections/configurationsCollection/footer/typeDefs.js

@@ -1,13 +1,21 @@
-
 module.exports = `
+  type ClickBehaviour {
+    link: String
+    attribute: String
+    openModal: File @fileByRelativePath
+  }
+  type Rendering {
+    icon: String    
+    file: File @fileByRelativePath
+  }
   type Link {
     title: String
     link: String
   }
   type Networks {
-    icon: String
-    link: String
     display: Boolean
+    rendering: Rendering
+    clickBehaviour: ClickBehaviour
   }
   type Social {
     title: String
@@ -34,4 +42,4 @@ module.exports = `
     logo: Logo
     columns: [Columns]
   }
-`;
+`;

package/src/components/Footer/index.js

@@ -10,8 +10,23 @@ const footerQuery = graphql`
         title
         networks {
           display
-          icon
-          link
+          title
+          rendering {
+            icon
+            file {
+              publicURL
+            }
+          }
+          clickBehaviour {
+            link
+            attributes {
+              attribute
+              value
+            }
+            openModal {
+              publicURL
+            }
+          }
         }
       }
       credit {
@@ -31,10 +46,10 @@ const footerQuery = graphql`
   }
 `;
 
-const Footer = () => {
+function Footer() {
   const { footerJson: footerContent } = useStaticQuery(footerQuery);
 
   return <FooterTemplate data={footerContent} />;
-};
+}
 
 export default Footer;

package/src/components/Footer/index.module.scss

@@ -15,7 +15,7 @@
     }
 
     .link {
-      color: #AAAAAA;
+      color: #aaaaaa;
       text-decoration: none;
       line-height: 1.5;
 
@@ -45,15 +45,18 @@
           min-width: 48px;
         }
       }
+      .iconImage {
+        height: 36px;
+      }
     }
 
     .credit {
-        margin-top: 20px;
-        line-height: 1.5;
-        color: #AAAAAA;
-        a {
-            color: #AAAAAA;
-        }
+      margin-top: 20px;
+      line-height: 1.5;
+      color: #aaaaaa;
+      a {
+        color: #aaaaaa;
+      }
     }
   }
 }

package/src/components/Footer/template.js

@@ -1,27 +1,51 @@
 import React from "react";
-import { Container, Grid, Icon } from "@mui/material";
+import {
+  Container, Modal, Grid, Icon, Box,
+} from "@mui/material";
 import Link from "../Link";
-import '@fortawesome/fontawesome-free/css/all.css';
+import "@fortawesome/fontawesome-free/css/all.css";
 
 import styles from "./index.module.scss";
 
-const FooterTemplate = ({ data }) => {
-  const columns = data?.columns?.filter(col => col.display);
+function FooterTemplate({ data }) {
+  const TOTAL_COLUMNS = 12;
+  const columns = data?.columns?.filter((col) => col.display);
   const socialColumnSpan = 4;
-  const colsSpan = columns?.length > 0 ? Math.floor((12 - socialColumnSpan) / columns.length) : 0;
+  const colsSpan = columns?.length > 0
+    ? Math.floor((TOTAL_COLUMNS - socialColumnSpan) / columns.length)
+    : 0;
+
+  const [openModalIndex, setOpenModalIndex] = React.useState(null);
+
+  const handleOpenModal = (index) => {
+    setOpenModalIndex(index);
+  };
+
+  const handleCloseModal = () => {
+    setOpenModalIndex(null);
+  };
+
+  const isModalOpen = (index) => openModalIndex === index;
+
+  const parseAttributes = (attributes) => {
+    const extraAttributes = {};
+    attributes.forEach((attr) => {
+      extraAttributes[attr.attribute] = attr.value;
+    });
+    return extraAttributes;
+  };
+
   return (
     <footer className={styles.footer}>
       <Container maxWidth="lg" className={styles.footerColummns}>
         <Grid container>
-          {columns.map((col, index) => (
-            <Grid item xs={12} md={colsSpan} key={index}>
-              <h3>
-                {col?.title}
-              </h3>
+          {columns.map((col) => (
+            <Grid item xs={12} md={colsSpan} key={col?.title}>
+              <h3>{col?.title}</h3>
               <ul>
-                {col.items.map((item, index) => (
-                  <li key={`item-${index}`}>
-                    <Link to={item?.link} className={styles.link} key={index}>
+                {col.items.map((item) => (
+                  <li key={`item-${item.title}`}>
+                    <Link to={item?.link} className={styles.link}>
                       {item?.title}
                     </Link>
                   </li>
@@ -31,25 +55,102 @@ const FooterTemplate = ({ data }) => {
           ))}
           {data.social?.display && (
             <Grid item xs={12} md={socialColumnSpan}>
-              <h3>
-                {data.social?.title}
-              </h3>
+              <h3>{data.social?.title}</h3>
               <div className={styles.socialContainer}>
-                {data.social?.networks.filter(net => net.display).map((net, index) => {
-                  return (
-                    <Link to={net.link} className={styles.link} key={index}>
-                      <Icon className={`fab fa-${net.icon}`} />
-                    </Link>
-                  );
-                })}
+                {data.social?.networks
+                  .filter((net) => net.display)
+                  .map((net, index) => {
+                    const renderedIcon = net.rendering?.file?.publicURL ? (
+                      <Box
+                        component="img"
+                        src={net.rendering.file.publicURL}
+                        alt={net.rendering.icon}
+                        className={styles.iconImage}
+                        sx={{ p: "2px", mr: "10px" }}
+                      />
+                    ) : (
+                      <Icon className={`fab fa-${net.rendering?.icon}`} />
+                    );
+
+                    if (net.clickBehaviour?.openModal) {
+                      return (
+                        <Box key={net.title}>
+                          <Box
+                            component="a"
+                            className={styles.link}
+                            onClick={() => handleOpenModal(index)}
+                            sx={{ cursor: "pointer" }}
+                            title={net.title}
+                          >
+                            {renderedIcon}
+                          </Box>
+                          <Modal
+                            open={isModalOpen(index)}
+                            onClose={handleCloseModal}
+                            aria-labelledby={`modal-${index}-title`}
+                            aria-describedby={`modal-${index}-description`}
+                            sx={{
+                              display: "flex",
+                            }}
+                          >
+                            <Box
+                              component="img"
+                              src={net.clickBehaviour.openModal.publicURL}
+                              alt="Modal Content"
+                              className={styles.modalImage}
+                              sx={{
+                                width: 150,
+                                margin: "auto",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                borderRadius: "6px",
+                              }}
+                            />
+                          </Modal>
+                        </Box>
+                      );
+                    }
+
+                    if (net.clickBehaviour?.link) {
+                      const extraAttributes = net.clickBehaviour.attributes
+                        && net.clickBehaviour.attributes.length > 0
+                        ? parseAttributes(net.clickBehaviour.attributes)
+                        : {};
+                      return (
+                        <Link
+                          to={net.clickBehaviour.link}
+                          className={styles.link}
+                          title={net.title}
+                          key={net.title}
+                          // eslint-disable-next-line react/jsx-props-no-spreading
+                          {...extraAttributes}
+                        >
+                          {renderedIcon}
+                        </Link>
+                      );
+                    }
+
+                    return (
+                      <Box
+                        key={net.title}
+                        className={styles.link}
+                        title={net.title}
+                      >
+                        {renderedIcon}
+                      </Box>
+                    );
+                  })}
               </div>
-              { <div className={styles.credit} dangerouslySetInnerHTML={{ __html: data.credit.content }} /> }
+              <div
+                className={styles.credit}
+                dangerouslySetInnerHTML={{ __html: data.credit.content }}
+              />
             </Grid>
           )}
         </Grid>
       </Container>
     </footer>
   );
-};
+}
 
 export default FooterTemplate;

package/src/components/Link.js

@@ -3,11 +3,13 @@ import { Link as GatsbyLink } from "gatsby";
 // Since DOM elements <a> cannot receive activeClassName
 // and partiallyActive, destructure the prop here and
 // pass it only to GatsbyLink
-const Link = ({ children, to, activeClassName, partiallyActive, ...other }) => {
+function Link({
+  children, to, activeClassName, partiallyActive, ...other
+}) {
   // Tailor the following test to your environment.
   // This example assumes that any internal link (intended for Gatsby)
   // will start with exactly one slash, and that anything else is external.
-  const internal = /^\/(?!\/)/.test(to)
+  const internal = /^\/(?!\/)/.test(to);
   // Use Gatsby Link for internal links, and <a> for others
   const email = /\S+@\S+\.\S+/.test(to);
 
@@ -17,6 +19,7 @@ const Link = ({ children, to, activeClassName, partiallyActive, ...other }) => {
         to={to}
         activeClassName={activeClassName}
         partiallyActive={partiallyActive}
+        // eslint-disable-next-line react/jsx-props-no-spreading
         {...other}
       >
         {children}
@@ -26,16 +29,18 @@ const Link = ({ children, to, activeClassName, partiallyActive, ...other }) => {
   if (email) {
     const href = /^mailto:/.test(to) ? to : `mailto:${to}`;
     return (
+      // eslint-disable-next-line react/jsx-props-no-spreading
       <a href={href} {...other}>
         {children}
       </a>
     );
   }
   return (
-    <a href={to} {...other} target="_blank" rel="noreferrer">
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <a href={to} target="_blank" rel="noreferrer" {...other}>
       {children}
     </a>
   );
-};
+}
 
-export default Link;
+export default Link;

package/src/content/footer/bluesky_logo.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="600" height="530" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z" fill="#eaeaea"/>
+</svg>