@openstack_dev/gatsby-theme-marketing-oif-core 1.0.0

package/gatsby-ssr.js

@@ -0,0 +1,50 @@
+import * as ReactDOMServer from "react-dom/server";
+import { JSDOM } from "jsdom";
+import { XMLHttpRequest } from "xmlhttprequest";
+import { ThemeProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import theme from "./src/theme";
+import ReduxWrapper from "./src/state/ReduxWrapper";
+import { HeadComponents } from "./src/components/head-components";
+
+
+export const onRenderBody = ({
+  setHtmlAttributes,
+  setHeadComponents,
+  setPreBodyComponents,
+  setPostBodyComponents,
+}, pluginOptions) => {
+  if (process.env.NODE_ENV === `production`) {
+    setHeadComponents(HeadComponents);
+  }
+};
+
+export const replaceRenderer = ({
+                                  bodyComponent,
+                                  setHeadComponents,
+                                  replaceBodyHTMLString,
+                                }) => {
+
+  const html = ReactDOMServer.renderToString(
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          {bodyComponent}
+        </ThemeProvider>
+  );
+
+  replaceBodyHTMLString(html);
+};
+
+export const wrapRootElement = ReduxWrapper;
+
+// build enabler polyfills
+global.dom = new JSDOM("...");
+global.window = dom.window;
+global.document = dom.window.document;
+global.navigator = global.window.navigator;
+global.window.matchMedia = () => ({
+  matches: false,
+  addListener: () => {},
+  removeListener: () => {}
+});
+global.XMLHttpRequest = XMLHttpRequest;

package/package.json

@@ -0,0 +1,154 @@
+{
+  "name": "@openstack_dev/gatsby-theme-marketing-oif-core",
+  "version": "1.0.0",
+  "description": "Base theme for Marketing Sites",
+  "author": "smarcet",
+  "keywords": [
+    "gatsby"
+  ],
+  "scripts": {
+    "clean": "find . -name \"node_modules\" -type d -prune -exec rm -rf '{}' + && yarn && yarn gatsby-clean",
+    "gatsby-clean": "gatsby clean",
+    "start": "npm run develop",
+    "build": "NODE_ENV=production NODE_OPTIONS=--max-old-space-size=10240 cross-env node --trace-warnings node_modules/.bin/gatsby build --log-pages",
+    "develop": "NODE_OPTIONS=--max-old-space-size=8192 npm run gatsby-clean && node --trace-warnings node_modules/.bin/gatsby develop --S -H 0.0.0.0",
+    "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"
+  },
+  "lint-staged": {
+    "*.{js,jsx}": "eslint --fix",
+    "**/*": "prettier --write --ignore-unknown"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.2",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/material": "^5.15.15",
+    "@ncwidgets/file-relation": "^0.8.0",
+    "@ncwidgets/id": "^0.8.1",
+    "@react-pdf/renderer": "^3.1.12",
+    "@react-spring/web": "^9.4.3",
+    "@sentry/browser": "^7.39.0",
+    "@sentry/cli": "^2.13.0",
+    "@sentry/gatsby": "7.39.0",
+    "@sentry/integrations": "^7.39.0",
+    "@sentry/react": "^7.39.0",
+    "@sentry/webpack-plugin": "^1.20.0",
+    "@types/googlemaps": "^3.39.9",
+    "@types/markerclustererplus": "^2.1.33",
+    "@types/react": "^16.9.42",
+    "axios": "^0.19.2",
+    "babel-preset-gatsby": "^3.9.0",
+    "browser-tabs-lock": "^1.2.15",
+    "buffer": "^6.0.3",
+    "chain-function": "^1.0.1",
+    "classnames": "^2.3.1",
+    "clean-html": "^1.5.0",
+    "codemirror": "^5.55.0",
+    "core-js": "^2.6.11",
+    "cross-env": "^7.0.3",
+    "crypto-js": "^4.1.1",
+    "decap-cms-app": "^3.1.9",
+    "dotenv": "^8.2.0",
+    "dropzone": "^5.7.2",
+    "final-form": "4.20.7",
+    "formik": "^2.2.9",
+    "gatsby": "^5.8.1",
+    "gatsby-alias-imports": "^1.0.6",
+    "gatsby-plugin-cookiebot": "^1.0.3",
+    "gatsby-plugin-decap-cms": "^4.0.4",
+    "gatsby-plugin-google-fonts-v2": "^1.0.1",
+    "gatsby-plugin-google-tagmanager": "^5.13.1",
+    "gatsby-plugin-image": "^3.8.0",
+    "gatsby-plugin-linkedin-insight": "^1.0.1",
+    "gatsby-plugin-manifest": "^5.12.3",
+    "gatsby-plugin-netlify": "^5.1.0",
+    "gatsby-plugin-quantcast-tag": "^0.1.1",
+    "gatsby-plugin-sass": "^6.8.0",
+    "gatsby-plugin-sharp": "^5.12.3",
+    "gatsby-plugin-twitter-pixel": "^2.0.2",
+    "gatsby-remark-images": "^7.8.0",
+    "gatsby-source-filesystem": "^5.8.0",
+    "gatsby-transformer-json": "^5.8.0",
+    "gatsby-transformer-remark": "^6.8.0",
+    "gatsby-transformer-sharp": "^5.12.3",
+    "history": "^4.10.1",
+    "i18n-react": "^0.6.4",
+    "i18next": "^21.8.3",
+    "i18next-browser-languagedetector": "^6.1.4",
+    "i18next-http-backend": "^1.4.0",
+    "idtoken-verifier": "^2.2.2",
+    "image-size": "^1.0.1",
+    "immutability-helper": "2.9.1",
+    "immutable": "^5.0.0-beta.5",
+    "jsdom": "^16.2.2",
+    "lodash": "^4.17.19",
+    "lz-string": "^1.4.4",
+    "markdown-it": "^12.0.0",
+    "markdown-to-jsx": "^7.3.2",
+    "moment": "^2.27.0",
+    "moment-timezone": "^0.5.31",
+    "navigation-widget": "1.0.27",
+    "netlify-cms-lib-widgets": "^1.8.0",
+    "openstack-uicore-foundation": "^4.1.70",
+    "path-browserify": "^1.0.1",
+    "prop-types": "^15.6.0",
+    "react": "^18.2.0",
+    "react-avatar-editor": "11.0.9",
+    "react-block-image": "^1.0.0",
+    "react-bootstrap": "^0.33.1",
+    "react-datetime": "^2.16.3",
+    "react-dnd": "15.1.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^18.2.0",
+    "react-final-form": "6.5.9",
+    "react-helmet": "^6.1.0",
+    "react-i18next": "^11.16.9",
+    "react-iframe-comm": "^1.2.2",
+    "react-immutable-proptypes": "^2.2.0",
+    "react-laag": "^2.0.5",
+    "react-medium-image-zoom": "^4.3.5",
+    "react-redux": "^7.2.6",
+    "react-rte": "^0.16.3",
+    "react-select": "^2.4.4",
+    "react-slick": "^0.27.0",
+    "react-star-ratings": "^2.3.0",
+    "react-stars": "^2.2.5",
+    "react-tabs": "^3.0.0",
+    "react-tooltip": "^3.11.6",
+    "react-transition-group": "^4.4.2",
+    "react-useportal": "^1.0.16",
+    "redux": "^4.1.2",
+    "redux-persist": "^6.0.0",
+    "redux-thunk": "^2.4.1",
+    "sanitize-html": "^2.7.0",
+    "sass": "^1.49.9",
+    "simple-oauth2": "^4.1.0",
+    "slick-carousel": "^1.8.1",
+    "smoothscroll-polyfill": "^0.4.4",
+    "socket.io-client": "^4.5.2",
+    "stream-browserify": "^3.0.0",
+    "superagent": "8.0.9",
+    "sweetalert2": "^9.17.0",
+    "urijs": "^1.19.2",
+    "use-fit-text": "^2.4.0",
+    "uuid": "^7.0.0",
+    "validator": "^9.4.1",
+    "what-input": "^5.2.10",
+    "xmlhttprequest": "^1.8.0",
+    "yup": "^0.32.11"
+  },
+  "devDependencies": {
+    "eslint": "^7.32.0 || ^8.2.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "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",
+    "lint-staged": "^15.1.0",
+    "husky": "^9.0.11",
+    "prettier": "^2.0.5"
+  }
+}

package/src/cms/cms-utils.js

@@ -0,0 +1,8 @@
+if (typeof window !== "undefined") {
+  // add admin.css
+  const link = document.createElement("link");
+  link.type = "text/css";
+  link.rel = "stylesheet";
+  link.href = "/admin/admin.css";
+  document.head.appendChild(link);
+}

package/src/cms/cms.js

@@ -0,0 +1,12 @@
+import CMS from 'decap-cms-app'
+import config from "./config";
+
+import "./cms-utils";
+
+import { Widget as FileRelationWidget } from "@ncwidgets/file-relation";
+import { Widget as IdWidget } from "@ncwidgets/id";
+
+CMS.init({ config });
+
+CMS.registerWidget(IdWidget);
+CMS.registerWidget(FileRelationWidget);

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

@@ -0,0 +1,59 @@
+import { 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: "Title", name: "title", widget: string, required: false}
+    - {label: "Logo", name: "logo", widget: image, required: false}
+    - {label: "Text", name: "text", widget: string, required: false}
+    - {label: "CTA Title", name: "cta_title", widget: String, required: false}
+    - {label: "CTA Label", name: "cta_label", widget: String, required: false}
+    - {label: "CTA Link", name: "cta_link", widget: String, required: false}
+*/
+
+const announcementBanner = {
+  label: "Announcement Banner",
+  name: "announcement-banner",
+  file: ANNOUNCEMENT_BANNER_FILE_PATH,
+  fields: [
+    stringField({
+      label: "Title",
+      name: "title",
+      required: false
+    }),
+    imageField({
+      label: "Logo",
+      name: "logo",
+      required: false
+    }),
+    stringField({
+      label: "Text",
+      name: "text",
+      required: false
+    }),
+    stringField({
+      label: "CTA Title",
+      name: "cta_title",
+      required: false
+    }),
+    stringField({
+      label: "CTA Label",
+      name: "cta_label",
+      required: false
+    }),
+    stringField({
+      label: "CTA Link",
+      name: "cta_link",
+      required: false
+    }),
+  ]
+};
+
+export default announcementBanner;

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

@@ -0,0 +1,11 @@
+
+module.exports = `
+  type AnnouncementBannerJson implements Node {
+    title: String
+    logo: File @fileByRelativePath
+    text: String
+    cta_title: String
+    cta_label: String
+    cta_link: String
+  }
+`;

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

@@ -0,0 +1,158 @@
+import {
+  booleanField,
+  stringField,
+  objectField,
+  listField
+} from "../../../fields";
+
+import {
+  FOOTER_FILE_PATH
+} from "@utils/filePath";
+
+/*
+- file: "src/content/footer.json"
+  label: "Footer"
+  name: "footer"
+  fields:
+    - {label: "Columns", name: "columns", widget: list, fields: [
+        {label: "Title", name: "title", widget: string},
+        {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: "Logo", name: "logo", widget: object, fields: [
+        {label: "Display", name: "display", widget: boolean, required: false},
+      ]}
+    - {label: "Social", name: "social", widget: object, fields: [
+        {label: "Title", name: "title", widget: string},
+        {label: "Display", name: "display", widget: boolean, required: false},
+        {label: "Networks", name: "networks", widget: list, fields: [
+          {label: "Icon", name: "icon", widget: string},
+          {label: "Link", name: "link", widget: string},
+          {label: "Display", name: "display", widget: boolean, required: false},
+        ]}
+      ]}
+    - {label: "Legal", name: "legal", widget: list, fields: [
+        {label: "Title", name: "title", widget: string},
+        {label: "Link", name: "link", widget: string},
+      ]}
+*/
+
+const footer = {
+  label: "Footer",
+  name: "footer",
+  file: FOOTER_FILE_PATH,
+  fields: [
+    listField({
+      label: "Columns",
+      name: "columns",
+      fields: [
+        stringField({
+          label: "Title",
+          name: "title"
+        }),
+        booleanField({
+          label: "Display",
+          name: "display",
+          required: false
+        }),
+        listField({
+          label: "Items",
+          name: "items",
+          fields: [
+            stringField({
+              label: "Title",
+              name: "title"
+            }),
+            stringField({
+              label: "Link",
+              name: "link"
+            })
+          ]
+        })
+      ]
+    }),
+    objectField({
+      label: "Logo",
+      name: "logo",
+      fields: [
+        booleanField({
+          label: "Display",
+          name: "display",
+          required: false
+        })
+      ]
+    }),
+    objectField({
+      label: "Social",
+      name: "social",
+      fields: [
+        stringField({
+          label: "Title",
+          name: "title"
+        }),
+        booleanField({
+          label: "Display",
+          name: "display",
+          required: false
+        }),
+        listField({
+          label: "Networks",
+          name: "networks",
+          fields: [
+            stringField({
+              label: "Icon",
+              name: "icon"
+            }),
+            stringField({
+              label: "Link",
+              name: "link"
+            }),
+            booleanField({
+              label: "Display",
+              name: "display",
+              required: false
+            })
+          ]
+        })
+      ]
+    }),
+    listField({
+      label: "Legal",
+      name: "legal",
+      fields: [
+        stringField({
+          label: "Title",
+          name: "title"
+        }),
+        stringField({
+          label: "Link",
+          name: "link"
+        })
+      ]
+    }),
+    objectField({
+      label: "Credit",
+      name: "credit",
+      fields: [
+        stringField({
+          label: "Title",
+          name: "title"
+        }),
+        stringField({
+          label: "Content",
+          name: "content"
+        }),
+        booleanField({
+          label: "Display",
+          name: "display",
+          required: false
+        })
+      ]
+    })
+  ]
+};
+
+export default footer;

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

@@ -0,0 +1,37 @@
+
+module.exports = `
+  type Link {
+    title: String
+    link: String
+  }
+  type Networks {
+    icon: String
+    link: String
+    display: Boolean
+  }
+  type Social {
+    title: String
+    display: Boolean
+    networks: [Networks]
+  }
+  type Logo {
+    display: Boolean
+  }
+  type Credit {
+    title: String
+    display: Boolean
+    content: String
+  }
+  type Columns {
+    title: String
+    display: Boolean
+    items: [Link]
+  }
+  type FooterJson implements Node {
+    legal: [Link]
+    social: Social
+    credit: Credit
+    logo: Logo
+    columns: [Columns]
+  }
+`;

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

@@ -0,0 +1,16 @@
+import { collectionDefaults } from "../../patterns";
+
+import siteSettings from "./siteSettings";
+import navbar from "./navbar";
+import footer from "./footer";
+import announcementBanner from "./announcementBanner";
+
+const configurationsCollection = {
+  ...collectionDefaults({
+    label: "Configurations",
+    name: "configurations",
+  }),
+  files: [siteSettings, navbar, footer, announcementBanner],
+};
+
+export default configurationsCollection;

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

@@ -0,0 +1,62 @@
+import { NAVBAR_FILE_PATH } from "@utils/filePath";
+import { booleanField, stringField, listField } from "../../../fields";
+
+const navbar = {
+  label: "Navbar",
+  name: "navbar",
+  file: NAVBAR_FILE_PATH,
+  fields: [
+    listField({
+      label: "Navbar",
+      name: "items",
+      fields: [
+        stringField({
+          label: "Title",
+          name: "title",
+        }),
+        stringField({
+          label: "Link",
+          name: "link",
+        }),
+        booleanField({
+          label: "Display?",
+          name: "display",
+          required: false,
+        }),
+        booleanField({
+          label: "Requires Auth?",
+          name: "requiresAuth",
+          required: false,
+          default: false,
+        }),
+        listField({
+          label: "SubItems",
+          name: "items",
+          fields: [
+            stringField({
+              label: "Title",
+              name: "title",
+            }),
+            stringField({
+              label: "Link",
+              name: "link",
+            }),
+            booleanField({
+              label: "Display?",
+              name: "display",
+              required: false,
+            }),
+            booleanField({
+              label: "Requires Auth?",
+              name: "requiresAuth",
+              required: false,
+              default: false,
+            }),
+          ],
+        }),
+      ],
+    }),
+  ],
+};
+
+export default navbar;

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

@@ -0,0 +1,13 @@
+module.exports = `
+  type NavbarItem {
+    title: String
+    link: String
+    display: Boolean
+    requiresAuth: Boolean    
+    items: [NavbarItem]
+  }
+
+  type NavbarJson implements Node {
+    items: [NavbarItem]
+  }
+`;