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

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

@@ -0,0 +1,117 @@
+import {
+  stringField,
+  textField,
+  imageField,
+  selectField,
+  selectOption,
+  objectField,
+  fileField
+} from "../../../fields";
+
+import {
+  SITE_SETTINGS_FILE_PATH,
+  CMS_FONT_FILE_PATH
+} from "@utils/filePath";
+
+const FONT_FORMATS = {
+  truetype: "ttf",
+  opentype: "otf",
+  woff: "woff",
+  woff2: "woff2",
+  eot: "eot"
+};
+
+const getFontFormatOptions = () =>
+  Object.entries(FONT_FORMATS).map(([key, value]) => selectOption({ label: value, value: value }));
+
+const siteSettings = {
+  label: "Site Settings",
+  name: "site-settings",
+  file: SITE_SETTINGS_FILE_PATH,
+  fields: [
+    objectField({
+      label: "Site Metadata",
+      name: "siteMetadata",
+      fields: [
+        stringField({
+          label: "Title",
+          name: "title",
+          required: false
+        }),
+        textField({
+          label: "Description",
+          name: "description",
+          required: false
+        }),
+        imageField({
+          label: "Image",
+          name: "image",
+          required: false
+        })
+      ]
+    }),
+    objectField({
+      label: "Favicon",
+      name: "favicon",
+      fields: [
+        imageField({
+          label: "Image for favicon generation (squared, at least 512x512)",
+          name: "asset",
+          required: false
+        })
+      ]
+    }),
+    objectField({
+      label: "Site Font",
+      name: "siteFont",
+      fields: [
+        textField({
+          label: "Font Name",
+          name: "fontFamily",
+          required: false,
+          default: "Nunito Sans"
+        }),
+        objectField({
+          label: "Regular Font",
+          name: "regularFont",
+          fields: [
+            fileField({
+              label: "Font File",
+              name: "fontFile",
+              required: false,
+              media_folder: CMS_FONT_FILE_PATH,
+            }),
+            selectField({
+              label: "Font Format",
+              name: "fontFormat",
+              multiple: false,
+              required: false,
+              options: getFontFormatOptions()
+            })
+          ],
+        }),
+        objectField({
+          label: "Bold Font",
+          name: "boldFont",
+          fields: [
+            fileField({
+              label: "Font File",
+              name: "fontFile",
+              media_folder: CMS_FONT_FILE_PATH,
+              required: false,
+            }),
+            selectField({
+              label: "Font Format",
+              name: "fontFormat",
+              multiple: false,
+              required: false,
+              options: getFontFormatOptions()
+            })
+          ],
+        }),
+      ]
+    }),
+  ]
+};
+
+export default siteSettings;

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

@@ -0,0 +1,15 @@
+
+module.exports = `
+  type SiteMetadata {
+    title: String
+    description: String
+    image: File @fileByRelativePath
+  }
+  type Favicon {
+    asset: File @fileByRelativePath
+  }
+  type SiteSettingsJson implements Node {
+    siteMetadata: SiteMetadata
+    favicon: Favicon
+  }
+`;

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

@@ -0,0 +1,9 @@
+const siteSettingsTypeDefs = require("./siteSettings/typeDefs");
+const footerTypeDefs = require("./footer/typeDefs");
+const announcementBannerTypeDefs = require("./announcementBanner/typeDefs");
+
+module.exports = [
+  siteSettingsTypeDefs,
+  footerTypeDefs,
+  announcementBannerTypeDefs
+].join("");

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

@@ -0,0 +1,5 @@
+const configurationsCollectionTypeDefs = require("./configurationsCollection/typeDefs");
+
+module.exports = [
+  configurationsCollectionTypeDefs,
+].join("");

package/src/cms/config/fields.js

@@ -0,0 +1,268 @@
+import {
+  imageWithAltFieldset,
+  linkImageFieldset
+} from "./patterns";
+
+export const hiddenField = ({
+  label = "Hidden",
+  name = "hidden",
+  required = false,
+  ...rest
+} = {}) => ({
+  label,
+  name,
+  required,
+  widget: "hidden",
+  ...rest
+});
+
+
+export const booleanField = ({
+  label = "Boolean",
+  name = "boolean",
+  required = false,
+  ...rest
+} = {}) => ({
+  label,
+  name,
+  required,
+  widget: "boolean",
+  ...rest
+});
+
+export const numberField = ({
+  label = "Number",
+  name = "number",
+  required = false,
+  valueType,
+  ...rest
+} = {}) => ({
+  label,
+  name,
+  required,
+  widget: "number",
+  ...(valueType ? { value_type: valueType } : {}),
+  ...rest
+});
+
+export const stringField = ({
+  label = "String",
+  name = "string",
+  required = false,
+  ...rest
+} = {}) => ({
+  label,
+  name,
+  required,
+  widget: "string",
+  ...rest
+});
+
+export const textField = ({
+  label = "Text",
+  name = "text",
+  required = false,
+  ...rest
+} = {}) => ({
+  label,
+  name,
+  required,
+  widget: "text",
+  ...rest
+});
+
+export const markdownField = ({
+  label = "Markdown",
+  name = "markdown",
+  required = false,
+  ...rest
+} = {}) => ({
+  label,
+  name,
+  required,
+  widget: "markdown",
+  ...rest
+});
+
+export const imageField = ({
+  label = "Image",
+  name = "image",
+  required = false,
+  ...rest
+} = {}) => ({
+  label,
+  name,
+  required,
+  widget: "image",
+  ...rest
+});
+
+export const fileField = ({
+  label = "File",
+  name = "file",
+  required = false,
+  ...rest
+} = {}) => ({
+  label,
+  name,
+  required,
+  widget: "file",
+  ...rest
+});
+
+export const selectField = ({
+  label = "Select",
+  name = "select",
+  options = [],
+  ...rest
+} = {}) => ({
+  label,
+  name,
+  widget: "select",
+  options,
+  ...rest
+});
+
+export const selectOption = ({
+  label = "SelectOption",
+  value,
+  ...rest
+} = {}) => ({
+  label,
+  value,
+  ...rest
+});
+
+/*
+{label: "Button", name: "button", widget: object, required: false, fields: [
+  {label: "Text", name: "text", widget: string, required: false},
+  {label: "Link", name: "link", widget: string, required: false}
+]},
+*/
+
+export const buttonField = ({
+  label = "Button",
+  name = "button",
+  required = false,
+  ...rest
+} = {}) => objectField({
+  label,
+  name,
+  required,
+  summary: "{{fields.text}} link: {{fields.link}}",
+  fields: [
+    stringField({
+      label: "Text",
+      name: "text",
+      required: false
+    }),
+    stringField({
+      label: "Link",
+      name: "link",
+      required: false
+    })
+  ],
+  ...rest
+});
+
+export const objectField = ({
+  label = "Object",
+  name = "object",
+  required = false,
+  fields = [],
+  ...rest
+} = {}) => ({
+  label,
+  name,
+  required,
+  widget: "object",
+  fields,
+  ...rest
+});
+
+export const listField = ({
+  label = "List",
+  name = "list",
+  required = false,
+  fields = [],
+  ...rest
+} = {}) => ({
+  label,
+  name,
+  required,
+  widget: "list",
+  fields,
+  ...rest
+});
+
+export const imageWithAltField = ({
+  label = "Image",
+  name = "image",
+  required = false,
+  imageRequired = false,
+  ...rest
+} = {}) => objectField({
+  label,
+  name,
+  required,
+  fields: [
+    ...imageWithAltFieldset({
+      imageRequired
+    })
+  ],
+  ...rest
+});
+
+export const imagesField = ({
+  label = "Images",
+  name = "images",
+  required = false,
+  imageRequired = false,
+  ...rest
+} = {}) => listField({
+  label,
+  name,
+  required,
+  fields: [
+    ...imageWithAltFieldset({
+      imageRequired
+    })
+  ],
+  ...rest
+});
+
+export const linkImageField = ({
+  label = "Link Image",
+  name = "link-image",
+  required = false,
+  imageRequired = false,
+  ...rest
+} = {}) => objectField({
+  label,
+  name,
+  required,
+  fields: [
+    ...linkImageFieldset({
+      imageRequired
+    })
+  ],
+  ...rest
+});
+
+export const linkImagesField = ({
+  label = "Link Images",
+  name = "link-images",
+  required = false,
+  imageRequired = false,
+  ...rest
+} = {}) => listField({
+  label,
+  name,
+  required,
+  fields: [
+    ...linkImageFieldset({
+      imageRequired
+    })
+  ],
+  ...rest
+});

package/src/cms/config/index.js

@@ -0,0 +1,35 @@
+import configurationsCollection from "./collections/configurationsCollection";
+
+const CMS_BACKEND_REPO = process.env.GATSBY_CMS_BACKEND_REPO;
+const CMS_BACKEND_BRANCH = process.env.GATSBY_CMS_BACKEND_BRANCH ||  "main";
+
+export const collections = [
+  configurationsCollection,
+];
+
+const config = {
+  backend: {
+    name: "github",
+    repo: CMS_BACKEND_REPO,
+    branch: CMS_BACKEND_BRANCH,
+    commit_messages: {
+      create: "Create {{collection}} “{{slug}}”",
+      update: "Update {{collection}} “{{slug}}”",
+      delete: "Delete {{collection}} “{{slug}}”",
+      uploadMedia: "[skip ci] Upload “{{path}}”",
+      deleteMedia: "[skip ci] Delete “{{path}}”",
+    }
+  },
+  // It is not required to set `load_config_file` if the `config.yml` file is
+  // missing, but will improve performance and avoid a load error.
+  load_config_file: false,
+  media_folder: "static/img",
+  public_folder: "/img",
+  collections: collections
+};
+
+if (!CMS_BACKEND_REPO || !CMS_BACKEND_BRANCH) {
+  config.local_backend = true;
+}
+
+export default config;

package/src/cms/config/patterns.js

@@ -0,0 +1,51 @@
+import {
+  stringField,
+  imageField,
+} from "./fields";
+
+export const collectionDefaults = ({
+  label,
+  name,
+  editor = { preview: false }
+}) => ({
+  label,
+  name,
+  /**
+   * @see https://decapcms.org/docs/beta-features/#folder-collections-media-and-public-folder
+   */
+  media_folder: "",
+  public_folder: "",
+  editor: editor
+});
+
+export const imageWithAltFieldset = ({
+  imageRequired = false
+} = {}) => ([
+  imageField({
+    label: "Src",
+    name: "src",
+    required: imageRequired
+    // removing allowance of empty value
+    // default: ""
+  }),
+  stringField({
+    label: "Alt",
+    name: "alt",
+    required: false
+    // removing allowance of empty value
+    // default: ""
+  })
+]);
+
+export const linkImageFieldset = ({
+  imageRequired = false
+} = {}) => ([
+  ...imageWithAltFieldset({
+    imageRequired
+  }),
+  stringField({
+    label: "Link",
+    name: "link",
+    required: false
+  })
+]);

package/src/components/AnnouncementBanner/index.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { useStaticQuery, graphql } from "gatsby";
+import Template from "./template";
+
+const dataQuery = graphql`
+  query {
+    announcementBannerJson {
+      title,
+      logo {
+        publicURL
+      },
+      text,
+      cta_title,
+      cta_label,
+      cta_link
+    }
+  }
+`;
+
+const AnnouncementBanner = () => {
+  const {announcementBannerJson} = useStaticQuery(dataQuery);
+
+  return <Template data={announcementBannerJson} />;
+};
+
+export default AnnouncementBanner;

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

@@ -0,0 +1,131 @@
+.wrapper {
+  background-color: #000000;
+  color: #ffffff;
+  font-size: 12px;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
+  padding: 30px 40px;
+  max-width: 1500px;
+  border-radius: 4px;
+  justify-content: space-evenly;
+  margin: auto;
+  position: relative;
+
+  @media (min-width: 900px) {
+    width: 85%;
+  }
+
+  .header {
+    text-align: center;
+
+    @media (min-width: 900px) {
+      text-align: left;
+    }
+
+    .title {
+      font-size: 35px;
+      display: inline-block;
+      bottom: 6px;
+      position: relative;
+      font-family: "Jura", "Helvetica", sans-serif;
+      font-weight: 700;
+      vertical-align: middle;
+      margin-bottom: 10px;
+      margin-top: 20px;
+    }
+
+    .logo {
+      position: relative;
+      height: 50px;
+      width: 50px;
+      display: block;
+      margin: 0 auto 10px;
+
+      @media (min-width: 1024px) {
+        top: 20px;
+        margin: 0 20px 0 0;
+        display: inline;
+      }
+    }
+  }
+
+  .text {
+    padding-top: 15px;
+    font-size: 18px;
+    line-height: 25px;
+    font-family: "Roboto", "Helvetica", sans-serif;
+    font-style: normal;
+    font-weight: normal;
+    margin: 0 0 10px;
+  }
+
+  .ctaTitle {
+    font-family: "Roboto", "Helvetica", sans-serif;
+    font-style: normal;
+    font-size: 18px;
+    line-height: 25px;
+    text-align: center;
+    margin-bottom: 15px;
+    font-weight: bold;
+    margin-top: 10%;
+  }
+
+  .cta {
+    background-color: #39ae4a;
+    width: 250px;
+    font-size: 20px;
+    min-width: 155px;
+    padding: 1rem;
+    border-radius: 50px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    white-space: nowrap;
+    display: block;
+    color: white;
+    text-decoration: none;
+
+    &:hover {
+      background-color: white;
+      color: black;
+
+      .img {
+        path {
+          stroke: black;
+        }
+      }
+    }
+
+    .img {
+      margin-left: 10px;
+    }
+  }
+
+  .bottomBar {
+    bottom: 0;
+    left: 0;
+    display: flex;
+    height: 7px;
+    position: absolute;
+    width: 100%;
+
+    div:nth-child(1) {
+      background-color: #e61e24;
+      width: 25%;
+    }
+
+    div:nth-child(2) {
+      background-color: #f4a93a;
+      width: 25%;
+    }
+
+    div:nth-child(3) {
+      background-color: #28a4db;
+      width: 25%;
+    }
+
+    div:nth-child(4) {
+      background-color: #39ae4a;
+      width: 25%;
+    }
+  }
+}

package/src/components/AnnouncementBanner/template.js

@@ -0,0 +1,40 @@
+import React from "react";
+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 || {};
+
+  return (
+    <div className={styles.wrapper}>
+      <Grid container>
+        <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>
+          </div>
+          <p className={styles.text}> {text} </p>
+        </Grid>
+        <Grid item sm={12} md={4}>
+          <h3 className={styles.ctaTitle}> {cta_title} </h3>
+          <a className={styles.cta} href={cta_link}>
+            {cta_label}
+            <span className={styles.img}>
+              <RightArrow />
+            </span>
+          </a>
+        </Grid>
+      </Grid>
+      <div className={styles.bottomBar}>
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+    </div>
+  );
+};
+
+export default Template;