@openstack_dev/gatsby-theme-marketing-oif-core 1.0.27 → 1.0.29

package/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "singleQuote": false,
+  "jsxSingleQuote": false,
+  "semi": true,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "trailingComma": "none"
+}

package/netlify-config.yaml

@@ -73,3 +73,5 @@ redirects:
     to: /marketplaceadmin/
   - from: /api/*
     to: /api/
+  - from: /community
+    to: /community

package/netlify.toml

@@ -256,3 +256,10 @@
       status = 200
       force = true
       headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
+
+    [[redirects]]
+      from = "/community"
+      to = "undefined/community"
+      status = 200
+      force = true
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstack_dev/gatsby-theme-marketing-oif-core",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "description": "Base theme for Marketing Sites",
   "author": "smarcet",
   "keywords": [
@@ -15,7 +15,8 @@
     "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
     "prepare": "husky",
     "lint": "eslint src",
-    "precommit": "npx lint-staged --diff=origin/main --verbose"
+    "precommit": "npx lint-staged --diff=origin/main --verbose",
+    "rewrite_rules": "NODE_ENV=development node redirection-rules.js"
   },
   "lint-staged": {
     "*.{js,jsx}": "eslint --fix",
@@ -153,11 +154,13 @@
   "devDependencies": {
     "eslint": "^7.32.0 || ^8.2.0",
     "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "husky": "^9.0.11",
     "lint-staged": "^15.1.0",
     "prettier": "^2.0.5"

package/redirection-rules.js

@@ -52,13 +52,14 @@ const buildRedirectionRules = () => {
 
   for (let i = 0; i < netlifyConfig.redirects.length; i++) {
     const redirect = netlifyConfig.redirects[i];
-
+    // see https://docs.netlify.com/routing/redirects/redirect-options/#splats
+    const hasSplat = redirect.from.endsWith("*");
     if (formerToml && tomlNodeExists(formerToml, NodeType.Route, redirect.from)) continue;
 
     netlifyToml += `
     [[redirects]]
       from = "${redirect.from}"
-      to = "${redirectionHost}${redirect.to}:splat"
+      to = "${redirectionHost}${redirect.to}${hasSplat ? ":splat" : ""}"
       status = 200
       force = true
       headers = {Authorization = "Basic ${authToken}", X-From = "netlify", X-Forwarded-Host = "${forwardedHost}"}\n`;

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

@@ -3,7 +3,7 @@
   color: #ffffff;
   font-size: 12px;
   font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
-  padding: 30px 40px;
+  padding: 30px;
   max-width: 1500px;
   border-radius: 4px;
   justify-content: space-evenly;
@@ -20,42 +20,46 @@
 
   .header {
     text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 10px;
 
     @media (min-width: 900px) {
       text-align: left;
+      justify-content: flex-start;
     }
 
     .title {
-      font-size: 35px;
-      display: inline-block;
-      bottom: 6px;
-      position: relative;
+      font-size: 18px;
+      line-height: 1.3;
       font-family: "Jura", "Helvetica", sans-serif;
       font-weight: 700;
-      vertical-align: middle;
-      margin-bottom: 10px;
-      margin-top: 20px;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      @media (max-width: 900px) {
+        text-align: left;
+        justify-content: flex-start;
+      }
     }
 
     .logo {
-      position: relative;
       height: 50px;
       width: 50px;
+      margin: 0 20px 0 0;
       display: block;
-      margin: 0 auto 10px;
 
       @media (min-width: 1024px) {
-        top: 20px;
-        margin: 0 20px 0 0;
-        display: inline;
+        top: 0;
       }
     }
   }
 
   .text {
     padding-top: 15px;
-    font-size: 18px;
-    line-height: 25px;
+    font-size: 15px;
+    line-height: normal;
     font-family: "Roboto", "Helvetica", sans-serif;
     font-style: normal;
     font-weight: normal;
@@ -65,29 +69,45 @@
   .ctaTitle {
     font-family: "Roboto", "Helvetica", sans-serif;
     font-style: normal;
-    font-size: 18px;
-    line-height: 25px;
+    font-size: 15px;
+    line-height: normal;
     text-align: center;
-    margin-bottom: 15px;
+    margin-bottom: 5px;
     font-weight: bold;
     margin-top: 10%;
+
+    // if ctaTitle is empty, hide the element completely
+    &:empty {
+      display: none;
+      margin: 0;
+    }
+  }
+
+  :global(.MuiGrid-root) {
+    &:has(.cta) {
+      display: flex;
+      align-items: center;
+      height: 100%;
+    }
   }
 
   .cta {
     background-color: #39ae4a;
-    width: 250px;
-    font-size: 20px;
-    min-width: 155px;
-    padding: 1rem;
+    width: 215px;
+    font-size: 15px;
+    min-width: 150px;
+    padding: 10px;
     border-radius: 50px;
-    margin-left: auto;
-    margin-right: auto;
+    margin: auto;
     text-align: center;
     white-space: nowrap;
     display: block;
     color: white;
     text-decoration: none;
-
+    // when ctaTitle is empty, adjust margin
+    .ctaTitle:empty + & {
+      margin: auto;
+    }
     &:hover {
       background-color: white;
       color: black;
@@ -102,6 +122,9 @@
     .img {
       margin-left: 10px;
     }
+    @media (max-width: 900px) {
+      margin-top: 10px;
+    }
   }
 
   .bottomBar {