@openstack_dev/gatsby-theme-marketing-oif-core 1.0.23 → 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.23",
+  "version": "1.0.25",
   "description": "Base theme for Marketing Sites",
   "author": "smarcet",
   "keywords": [

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

@@ -1,15 +1,13 @@
-import { imageField, stringField } from "../../../fields";
-
-import {
-  ANNOUNCEMENT_BANNER_FILE_PATH
-} from "../../../../../utils/filePath";
+import { booleanField, imageField, stringField } from "../../../fields";
 
+import { ANNOUNCEMENT_BANNER_FILE_PATH } from "../../../../../utils/filePath";
 
 /*
 - file: "src/content/banners/announcement.json"
   label: "Announcement Banner"
   name: "announcement_banner"
   fields:
+    - {label: "Display", name: "display", widget: boolean, required: false},
     - {label: "Title", name: "title", widget: string, required: false}
     - {label: "Logo", name: "logo", widget: image, required: false}
     - {label: "Text", name: "text", widget: string, required: false}
@@ -23,37 +21,42 @@ const announcementBanner = {
   name: "announcement-banner",
   file: ANNOUNCEMENT_BANNER_FILE_PATH,
   fields: [
+    booleanField({
+      label: "Display",
+      name: "display",
+      required: true,
+    }),
     stringField({
       label: "Title",
       name: "title",
-      required: false
+      required: false,
     }),
     imageField({
       label: "Logo",
       name: "logo",
-      required: false
+      required: false,
     }),
     stringField({
       label: "Text",
       name: "text",
-      required: false
+      required: false,
     }),
     stringField({
       label: "CTA Title",
       name: "cta_title",
-      required: false
+      required: false,
     }),
     stringField({
       label: "CTA Label",
       name: "cta_label",
-      required: false
+      required: false,
     }),
     stringField({
       label: "CTA Link",
       name: "cta_link",
-      required: false
+      required: false,
     }),
-  ]
+  ],
 };
 
-export default announcementBanner;
+export default announcementBanner;

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/AnnouncementBanner/index.js

@@ -5,22 +5,23 @@ import Template from "./template";
 const dataQuery = graphql`
   query {
     announcementBannerJson {
-      title,
+      display
+      title
       logo {
         publicURL
-      },
-      text,
-      cta_title,
-      cta_label,
+      }
+      text
+      cta_title
+      cta_label
       cta_link
     }
   }
 `;
 
-const AnnouncementBanner = () => {
-  const {announcementBannerJson} = useStaticQuery(dataQuery);
+function AnnouncementBanner() {
+  const { announcementBannerJson } = useStaticQuery(dataQuery);
 
   return <Template data={announcementBannerJson} />;
-};
+}
 
 export default AnnouncementBanner;

package/src/components/AnnouncementBanner/template.js

@@ -1,11 +1,14 @@
 import React from "react";
-import {  Grid } from "@mui/material";
-import '@fortawesome/fontawesome-free/css/all.css';
-import RightArrow from '../svgs/RightArrow';
+import { Grid } from "@mui/material";
+import "@fortawesome/fontawesome-free/css/all.css";
+import RightArrow from "../svgs/RightArrow";
 import styles from "./index.module.scss";
 
-const Template = ({ data }) => {
-  const {title, logo, text, cta_title, cta_label, cta_link} = data || {};
+function Template({ data }) {
+  const {
+    title, logo, text, cta_title, cta_label, cta_link, display,
+  } = data || {};
+  if (!display) return null;
 
   return (
     <div className={styles.wrapper}>
@@ -13,12 +16,24 @@ const Template = ({ data }) => {
         <Grid item sm={12} md={8}>
           <div className={styles.header}>
             <img className={styles.logo} src={logo?.publicURL} alt="logo" />
-            <h2 className={styles.title}> {title} </h2>
+            <h2 className={styles.title}>
+              {" "}
+              {title}
+              {" "}
+            </h2>
           </div>
-          <p className={styles.text}> {text} </p>
+          <p className={styles.text}>
+            {" "}
+            {text}
+            {" "}
+          </p>
         </Grid>
         <Grid item sm={12} md={4}>
-          <h3 className={styles.ctaTitle}> {cta_title} </h3>
+          <h3 className={styles.ctaTitle}>
+            {" "}
+            {cta_title}
+            {" "}
+          </h3>
           <a className={styles.cta} href={cta_link}>
             {cta_label}
             <span className={styles.img}>
@@ -35,6 +50,6 @@ const Template = ({ data }) => {
       </div>
     </div>
   );
-};
+}
 
 export default Template;

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;
+      }
     }
   }
 }