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

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/announcement-banner/index.json

@@ -1,4 +1,5 @@
 {
+  "display": true,
   "title": "OpenInfra Summit > Asia '24",
   "logo": "OpenInfrastructureFoundation-icon-RGB.svg",
   "text": "Join the OpenStack community in Suwon, South Korea from September 3-4 at the first regional OpenInfra Summit Asia! Hear how OpenStack developers and operators are collaborating to define AI requirements, new OpenStack + Kubernetes production use cases and how organizations continue to scale their OpenStack footprint.",

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>

package/src/content/footer/index.json

@@ -106,28 +106,86 @@
     "display": true,
     "networks": [
       {
-        "link": "https://twitter.com/OpenStack",
         "display": true,
-        "icon": "twitter-square"
+        "title": "X",
+        "clickBehaviour": {
+          "link": "https://twitter.com/OpenStack",
+          "attributes": []
+        },
+        "rendering": {
+          "icon": "",
+          "file": "x-icon.svg"
+        }
       },
       {
-        "icon": "facebook-square",
-        "link": "https://www.facebook.com/openinfradev/",
-        "display": true
+        "display": true,
+        "title": "facebook",
+        "clickBehaviour": {
+          "link": "https://www.facebook.com/openinfradev/",
+          "attributes": []
+        },
+        "rendering": {
+          "icon": "facebook-square"
+        }
+      },
+      {
+        "display": true,
+        "title": "linkedin",
+        "clickBehaviour": {
+          "link": "https://www.linkedin.com/groups/3239106/",
+          "attributes": []
+        },
+        "rendering": {
+          "icon": "linkedin"
+        }
       },
       {
-        "link": "https://www.linkedin.com/groups/3239106/",
         "display": true,
-        "icon": "linkedin"
+        "title": "youtube",
+        "clickBehaviour": {
+          "link": "https://www.youtube.com/user/OpenStackFoundation",
+          "attributes": []
+        },
+        "rendering": {
+          "icon": "youtube-square"
+        }
       },
       {
-        "link": "https://www.youtube.com/user/OpenStackFoundation",
         "display": true,
-        "icon": "youtube-square"
+        "title": "wechat",
+        "clickBehaviour": {
+          "link": "",
+          "attributes": [],
+          "openModal": "qrcode-for-gh-5cc38c749efd-1280.jpg"
+        },
+        "rendering": {
+          "icon": "weixin"
+        }
       },
       {
-        "link": "https://www.openstack.org/",
-        "icon": "weixin",
+        "title": "bsky",
+        "rendering": {
+          "file": "bluesky_logo.svg"
+        },
+        "clickBehaviour": {
+          "link": "https://bsky.app/profile/openstack.org"
+        },
+        "display": true
+      },
+      {
+        "title": "Mastodon",
+        "rendering": {
+          "file": "mastodon.svg"
+        },
+        "clickBehaviour": {
+          "link": "https://social.openinfra.dev/@OpenStack",
+          "attributes": [
+            {
+              "attribute": "rel",
+              "value": "me"
+            }
+          ]
+        },
         "display": true
       }
     ]
@@ -136,4 +194,4 @@
     "content": "The OpenStack project is provided under the Apache 2.0 license. The project is supported by the <a href=\"https://openinfra.dev\">OpenInfra Foundation</a>. openstack.org is powered by <a href=\"https://vexxhost.com\" target=\"_blank\">VEXXHOST</a>.",
     "display": true
   }
-}
+}

package/src/content/footer/mastodon.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 621.9 666.7">
+  <!-- Generator: Adobe Illustrator 29.3.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 146)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #eaeaea;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M621.9,218.9c0-144.6-94.8-187-94.8-187C479.3,9.9,397.3.7,312.1,0h-2.1c-85.2.7-167.2,9.9-215,31.9C95,31.9.2,74.3.2,218.9s-.6,72.7.4,114.7c3.4,141.4,25.9,280.8,156.7,315.4,60.3,16,112.1,19.3,153.7,17,75.6-4.2,118-27,118-27l-2.5-54.9s-54,17-114.7,15c-60.1-2.1-123.6-6.5-133.3-80.3-.9-6.9-1.4-13.8-1.3-20.7,0,0,59,14.4,133.8,17.9,45.7,2.1,88.6-2.7,132.2-7.9,83.5-10,156.3-61.4,165.4-108.5,14.5-74.1,13.3-180.8,13.3-180.8h0ZM510.1,405.2h-69.4v-170c0-35.8-15.1-54-45.2-54s-50,21.6-50,64.2v93h-69v-93c0-42.7-16.7-64.2-50.1-64.2s-45.2,18.2-45.2,54v170h-69.4v-175.1c0-35.8,9.1-64.2,27.4-85.3,18.9-21,43.6-31.8,74.3-31.8s62.4,13.6,80.2,40.9l17.3,29,17.3-29c17.8-27.3,44.7-40.9,80.2-40.9s55.4,10.8,74.3,31.8c18.3,21,27.4,49.5,27.4,85.3v175.1Z"/>
+</svg>

package/src/content/footer/x-icon.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 310 310">
+  <!-- Generator: Adobe Illustrator 29.3.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 146)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #eaeaea;
+      }
+    </style>
+  </defs>
+  <polygon class="st0" points="89.1 79.5 203.8 229.6 220.9 229.6 107.1 79.5 89.1 79.5"/>
+  <path class="st0" d="M277.2,0H32.8C14.8,0,0,14.8,0,32.8v244.3c0,18,14.8,32.8,32.8,32.8h244.3c18,0,32.8-14.8,32.8-32.8V32.8c0-18-14.8-32.8-32.8-32.8ZM193.6,248l-48.3-64.9-57.5,64.9h-31.2l72.8-83.9L52.2,62h64.6l44.8,58.8,4.4-3.5,48.3-55.3h31.2l-68.3,78.5,80.6,107.5h-64.1Z"/>
+</svg>

package/src/content/site-settings/index.json

@@ -1 +1 @@
-{ "staticJsonFilesBuildTime": [], "lastBuild": 1716307121878 }
+{ "staticJsonFilesBuildTime": [], "lastBuild": 1740420798753 }

package/src/pages/404.js

@@ -0,0 +1,71 @@
+import React from "react";
+import { ThemeProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import { Box, Typography } from "@mui/material";
+import theme404 from "../themes/404theme";
+import Link from "../components/Link";
+
+import styles from "../styles/404.module.scss";
+
+function NotFoundPage() {
+  return (
+    <ThemeProvider theme={theme404}>
+      <CssBaseline />
+      <Box className={styles.background}>
+        <Box className={styles.wrapper}>
+          <Box className={styles.content}>
+            <Typography variant="h6" component="h6">
+              Not this cat, Ocata is fine. YOU are lost.
+            </Typography>
+            <Typography variant="h6" component="h6">
+              You’ve found our 404 page.
+            </Typography>
+            <Typography variant="h6" component="h6">
+              Find another page or just go&nbsp;
+              <Link to="https://www.openstack.org">home</Link>
+              .
+            </Typography>
+          </Box>
+          <ul>
+            <li>
+              <Link to="/software/">Software</Link>
+            </li>
+            <li>
+              <Link to="/user-stories/">Users</Link>
+            </li>
+            <li>
+              <Link to="/community/">Community</Link>
+            </li>
+            <li>
+              <Link to="/marketplace/">Marketplace</Link>
+            </li>
+            <li>
+              <Link to="/community/events/">Events</Link>
+            </li>
+            <li>
+              <Link to="/learn/">Learn</Link>
+            </li>
+            <li>
+              <Link to="https://docs.openstack.org/">Docs</Link>
+            </li>
+            <li>
+              <Link to="https://www.openstack.org">Home</Link>
+            </li>
+            <li>
+              <Link
+                to="https://www.youtube.com/results?search_query=cat+videos"
+                style={{ whiteSpace: "nowrap" }}
+              >
+                Cat
+                <span style={{ marginLeft: "0.5em" }} />
+                videos
+              </Link>
+            </li>
+          </ul>
+        </Box>
+      </Box>
+    </ThemeProvider>
+  );
+}
+
+export default NotFoundPage;

package/src/styles/404.module.scss

@@ -0,0 +1,132 @@
+.background {
+  background: url(../images/404-bg.jpg);
+  background-size: 100%;
+  font-family: "GothamNarrow-Ultra";
+  font-size: 14px;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  overflow-y: scroll;
+  color: #333;
+  letter-spacing: initial;
+  margin: 0;
+  line-height: 20px;
+  .wrapper {
+    background: url(../images/cat.png) no-repeat center;
+    min-height: 90vh;
+    width: 50vh;
+    background-size: 100%;
+    text-align: center;
+    margin: 2em auto;
+    -webkit-font-smoothing: auto;
+    .content {
+      padding-top: 52vh;
+      h6 {
+        font-family: "GothamNarrow-Ultra";
+        font-size: 1.2em;
+        color: #444;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        line-height: 18.48px;
+        font-weight: 400;
+        a {
+          color: #444;
+          font-weight: 400;
+        }
+      }
+    }
+    ul {
+      padding: 10em 0 0;
+      margin-top: 0;
+      li {
+        width: 11.11%;
+        display: inline-block;
+        float: left;
+        transform: rotate(270deg);
+        transform-origin: left top 0;
+        padding-left: 0em;
+        padding-top: 0.55em;
+        font-weight: 400;
+        a {
+          text-decoration: none;
+          color: #444;
+          &:hover {
+            text-decoration: none;
+            color: #000;
+          }
+        }
+      }
+      li:first-child {
+        padding-top: 1em;
+      }
+      li:nth-child(2) {
+        padding-top: 1.1em;
+      }
+      li:nth-child(3) {
+        padding-top: 1.1em;
+      }
+      li:nth-child(4) {
+        padding-top: 0.75em;
+      }
+      li:last-child {
+        padding-top: 0.5em;
+      }
+    }
+    @media only screen and (min-height: 960px) and (max-height: 1280px) {
+      ul {
+        padding-top: 10.5em;
+      }
+    }
+    /* mediaqueries */
+    /*general*/
+  }
+  @media only screen and (min-height: 720px) and (max-height: 960px) {
+    .wrapper ul {
+      padding-top: 8.5em;
+    }
+  }
+
+  @media only screen and (min-height: 0px) and (max-height: 720px) {
+    .wrapper ul {
+      padding-top: 8em;
+    }
+  }
+
+  @media only screen and (min-height: 960px) and (max-height: 1280px) {
+    .wrapper ul {
+      padding-top: 10.5em;
+    }
+  }
+
+  /*IPAD Landscape*/
+  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
+    .wrapper ul {
+      padding-top: 8em;
+    }
+  }
+
+  /*IPAD Portrait*/
+  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
+    .wrapper ul {
+      padding-top: 13em;
+    }
+  }
+
+  /*iphone Portrait*/
+  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {
+    .wrapper ul {
+      padding-top: 6em;
+    }
+  }
+
+  @media only screen and (min-height: 0px) and (max-height: 700px) {
+    .wrapper .content h6 {
+      font-size: 1em;
+      margin: 0.2em 0;
+    }
+    .wrapper ul li a {
+      font-size: 0.8em;
+    }
+  }
+}

package/src/themes/404theme.js

@@ -0,0 +1,26 @@
+import { createTheme } from "@mui/material/styles";
+import baseTheme from "../theme";
+
+const theme404 = createTheme(baseTheme, {
+  typography: {
+    fontFamily: "\"GothamNarrow-Ultra\"",
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: `
+        @font-face {
+          font-family: 'GothamNarrow-Ultra';
+          font-style: normal;
+          font-weight: normal;
+          src: url("/fonts/gothamnarrow-ultra/GothamNarrow-Ultra.eot?#iefix") format("embedded-opentype"),
+               url("/fonts/gothamnarrow-ultra/GothamNarrow-Ultra.otf") format("opentype"),
+               url("/fonts/gothamnarrow-ultra/GothamNarrow-Ultra.woff") format("woff"),
+               url("/fonts/gothamnarrow-ultra/GothamNarrow-Ultra.ttf") format("truetype"),
+               url("/fonts/gothamnarrow-ultra/GothamNarrow-Ultra.svg#GothamNarrow-Ultra") format("svg");
+        }
+      `,
+    },
+  },
+});
+
+export default theme404;