@openstack_dev/gatsby-theme-marketing-oif-core 1.0.3 → 1.0.5

package/gatsby-config.js

@@ -1,217 +1,228 @@
 const path = require("path");
 
 require("dotenv").config({
-    path: `.env.${process.env.NODE_ENV}`
+  path: `.env.${process.env.NODE_ENV}`,
 });
 
 const {
-    STATIC_CONTENT_DIR_PATH,
-    SITE_SETTINGS_FILE_PATH,
-    SITE_SETTINGS_DIR_PATH,
+  STATIC_CONTENT_DIR_PATH,
+  SITE_SETTINGS_FILE_PATH,
+  SITE_SETTINGS_DIR_PATH,
 } = require("./src/utils/filePath");
 
 let siteSettings = require(`./${SITE_SETTINGS_FILE_PATH}`);
 try {
-    siteSettings = require(path.resolve(SITE_SETTINGS_FILE_PATH));
-}
-catch (e) {
-    console.log("Falling back to default site settings.")
+  siteSettings = require(path.resolve(SITE_SETTINGS_FILE_PATH));
+} catch (e) {
+  console.log("Falling back to default site settings.");
 }
 
-const title = siteSettings?.siteMetadata?.title || process.env.GATSBY_METADATA_TITLE || "Event Site";
-const description = siteSettings?.siteMetadata?.description || process.env.GATSBY_METADATA_DESCRIPTION || "Event Site";
+console.log("loaded siteSettings on gatsby config ...", siteSettings);
+
+const title = siteSettings?.siteMetadata?.title || process.env.GATSBY_METADATA_TITLE;
+const description = siteSettings?.siteMetadata?.description
+  || process.env.GATSBY_METADATA_DESCRIPTION;
 const faviconAsset = siteSettings?.favicon?.asset;
 
-const manifestPlugin = faviconAsset ? [
+const manifestPlugin = faviconAsset
+  ? [
     {
-        resolve: "gatsby-plugin-manifest",
-        options: {
-            name: title,
-            short_name: title,
-            description: description,
-            start_url: "/",
-            display: "minimal-ui",
-            icon: path.join(SITE_SETTINGS_DIR_PATH, faviconAsset),
-            include_favicon: true
-        }
-    }
-] : [];
+      resolve: "gatsby-plugin-manifest",
+      options: {
+        name: title,
+        short_name: title,
+        description,
+        start_url: "/",
+        display: "minimal-ui",
+        icon: path.join(SITE_SETTINGS_DIR_PATH, faviconAsset),
+        include_favicon: true,
+      },
+    },
+  ]
+  : [];
 
 const plugins = [
-    ...manifestPlugin,
-    {
-        resolve: "gatsby-alias-imports",
-        options: {
-            aliases: {
-                "@utils": `${__dirname}/src/utils`
-            }
-        }
+  ...manifestPlugin,
+  {
+    resolve: "gatsby-alias-imports",
+    options: {
+      aliases: {
+        "@utils": `${__dirname}/src/utils`,
+        "@cms": `${__dirname}/src/cms`,
+      },
     },
-    {
-        /**
-         * Gatsby v4 uses ES Modules for importing cssModules by default.
-         * Disabling this to avoid needing to update in all files and for compatibility
-         * with other plugins/packages that have not yet been updated.
-         * @see https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules
-         *
-         * Also, since libSass was deprecated in October 2020, the Node Sass package has also been deprecated.
-         * As such, we have migrated from Node Sass to Dart Sass in package.json.
-         * @see https://www.gatsbyjs.com/plugins/gatsby-plugin-sass/#v300
-         * @see https://sass-lang.com/blog/libsass-is-deprecated#how-do-i-migrate
-         */
-        resolve: "gatsby-plugin-sass",
-        options: {
-            cssLoaderOptions: {
-                esModule: false,
-                modules: {
-                    namedExport: false
-                }
-            }
-        }
+  },
+  {
+    /**
+     * Gatsby v4 uses ES Modules for importing cssModules by default.
+     * Disabling this to avoid needing to update in all files and for compatibility
+     * with other plugins/packages that have not yet been updated.
+     * @see
+     * https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules
+     *
+     * Also, since libSass was deprecated in October 2020, the Node Sass package has also been
+     * deprecated.
+     * As such, we have migrated from Node Sass to Dart Sass in package.json.
+     * @see https://www.gatsbyjs.com/plugins/gatsby-plugin-sass/#v300
+     * @see https://sass-lang.com/blog/libsass-is-deprecated#how-do-i-migrate
+     */
+    resolve: "gatsby-plugin-sass",
+    options: {
+      cssLoaderOptions: {
+        esModule: false,
+        modules: {
+          namedExport: false,
+        },
+      },
     },
-    {
-        // Add font assets before markdown or json files
-        resolve: "gatsby-source-filesystem",
-        options: {
-            path: `${__dirname}/static/fonts`,
-            name: "fonts"
-        }
+  },
+  {
+    // Add font assets before markdown or json files
+    resolve: "gatsby-source-filesystem",
+    options: {
+      path: `${__dirname}/static/fonts`,
+      name: "fonts",
     },
-    {
-        resolve: "gatsby-source-filesystem",
-        options: {
-            path: `${__dirname}/src/pages`,
-            name: "pages"
-        }
+  },
+  {
+    resolve: "gatsby-source-filesystem",
+    options: {
+      path: `${__dirname}/src/pages`,
+      name: "pages",
     },
-    {
-        resolve: "gatsby-source-filesystem",
-        options: {
-            path: path.resolve(STATIC_CONTENT_DIR_PATH),
-            name: "content"
-        }
+  },
+  {
+    resolve: "gatsby-source-filesystem",
+    options: {
+      path: path.resolve(STATIC_CONTENT_DIR_PATH),
+      name: "content",
     },
-    {
-        resolve: "gatsby-source-filesystem",
-        options: {
-            path: `${__dirname}/src/data/`,
-            name: "data"
-        }
+  },
+  {
+    resolve: "gatsby-source-filesystem",
+    options: {
+      path: `${__dirname}/src/data/`,
+      name: "data",
     },
-    "gatsby-plugin-image",
-    "gatsby-plugin-sharp",
-    "gatsby-transformer-sharp",
-    "gatsby-transformer-json",
-    {
-        resolve: "gatsby-transformer-remark",
-        options: {
-            plugins: [
-                {
-                    resolve: "gatsby-remark-images",
-                    options: {
-                        // It"s important to specify the maxWidth (in pixels) of
-                        // the content container as this plugin uses this as the
-                        // base for generating different widths of each image.
-                        maxWidth: 2048
-                    }
-                }
-            ]
-        }
+  },
+  "gatsby-plugin-image",
+  "gatsby-plugin-sharp",
+  "gatsby-transformer-sharp",
+  "gatsby-transformer-json",
+  {
+    resolve: "gatsby-transformer-remark",
+    options: {
+      plugins: [
+        {
+          resolve: "gatsby-remark-images",
+          options: {
+            // It"s important to specify the maxWidth (in pixels) of
+            // the content container as this plugin uses this as the
+            // base for generating different widths of each image.
+            maxWidth: 2048,
+          },
+        },
+      ],
     },
-    {
-        resolve: "gatsby-plugin-decap-cms",
-        options: {
-            modulePath: `${__dirname}/src/cms/cms.js`,
-            manualInit: true,
-            enableIdentityWidget: false,
-            customizeWebpackConfig: (config) => {
-                /**
-                 * Fixes Module not found: Error: Can"t resolve "path" bug.
-                 * Webpack 5 doesn"t include browser polyfills for node APIs by default anymore,
-                 * so we need to provide them ourselves.
-                 * @see https://github.com/postcss/postcss/issues/1509#issuecomment-772097567
-                 * @see https://github.com/gatsbyjs/gatsby/issues/31475
-                 * @see https://github.com/gatsbyjs/gatsby/issues/31179#issuecomment-844588682
-                 */
-                config.resolve = {
-                    ...config.resolve,
-                    fallback: {
-                        ...config.resolve.fallback,
-                        path: require.resolve("path-browserify")
-                    }
-                };
-            }
-        }
+  },
+  {
+    resolve: "gatsby-plugin-decap-cms",
+    options: {
+      modulePath: `${__dirname}/src/cms/cms.js`,
+      manualInit: true,
+      enableIdentityWidget: false,
+      customizeWebpackConfig: (config) => {
+        /**
+         * Fixes Module not found: Error: Can"t resolve "path" bug.
+         * Webpack 5 doesn"t include browser polyfills for node APIs by default anymore,
+         * so we need to provide them ourselves.
+         * @see https://github.com/postcss/postcss/issues/1509#issuecomment-772097567
+         * @see https://github.com/gatsbyjs/gatsby/issues/31475
+         * @see https://github.com/gatsbyjs/gatsby/issues/31179#issuecomment-844588682
+         */
+        config.resolve = {
+          ...config.resolve,
+          fallback: {
+            ...config.resolve.fallback,
+            path: require.resolve("path-browserify"),
+          },
+        };
+      },
     },
-    {
-        resolve: "gatsby-plugin-google-tagmanager",
-        options: {
-          id: process.env.GOOGLE_TAGMANAGER_ID,
+  },
+  {
+    resolve: "gatsby-plugin-google-tagmanager",
+    options: {
+      id: process.env.GOOGLE_TAGMANAGER_ID,
 
-          // Include GTM in development.
-          //
-          // Defaults to false meaning GTM will only be loaded in production.
-          includeInDevelopment: false,
+      // Include GTM in development.
+      //
+      // Defaults to false meaning GTM will only be loaded in production.
+      includeInDevelopment: false,
 
-          // datalayer to be set before GTM is loaded
-          // should be an object or a function that is executed in the browser
-          //
-          // Defaults to null
-          defaultDataLayer: { platform: "gatsby" },
-        },
+      // datalayer to be set before GTM is loaded
+      // should be an object or a function that is executed in the browser
+      //
+      // Defaults to null
+      defaultDataLayer: { platform: "gatsby" },
     },
-    {
-        resolve: `gatsby-plugin-twitter-pixel`,
-        options: {
-          pixelId: process.env.TWITTER_PIXEL_ID,
-        },
+  },
+  {
+    resolve: "gatsby-plugin-twitter-pixel",
+    options: {
+      pixelId: process.env.TWITTER_PIXEL_ID,
     },
-    {
-        resolve: `gatsby-plugin-linkedin-insight`,
-        options: {
-          partnerId: process.env.LINKEDIN_INSIGHT_PARTNER_ID,
+  },
+  {
+    resolve: "gatsby-plugin-linkedin-insight",
+    options: {
+      partnerId: process.env.LINKEDIN_INSIGHT_PARTNER_ID,
 
-          // Include LinkedIn Insight in development.
-          // Defaults to false meaning LinkedIn Insight will only be loaded in production.
-          includeInDevelopment: false
-        }
+      // Include LinkedIn Insight in development.
+      // Defaults to false meaning LinkedIn Insight will only be loaded in production.
+      includeInDevelopment: false,
     },
-    {
-        resolve: `gatsby-plugin-quantcast-tag`,
-        options: {
-          acccountId: process.env.QUANTCAST_TAG_ACCOUNT_ID,
+  },
+  {
+    resolve: "gatsby-plugin-quantcast-tag",
+    options: {
+      acccountId: process.env.QUANTCAST_TAG_ACCOUNT_ID,
 
-          // If true, add tracking code to head. Otherwise, tracking code is
-          // added to the bottom of body.
-          head: false,
-        },
+      // If true, add tracking code to head. Otherwise, tracking code is
+      // added to the bottom of body.
+      head: false,
     },
-    {
-        resolve: "gatsby-plugin-cookiebot",
-        options: {
-          cookiebotId: process.env.COOKIEBOT_ID,
+  },
+  {
+    resolve: "gatsby-plugin-cookiebot",
+    options: {
+      cookiebotId: process.env.COOKIEBOT_ID,
+    },
+  },
+  {
+    resolve: "gatsby-plugin-google-fonts-v2",
+    options: {
+      fonts: [
+        {
+          family: "Jura:wght@300;400;500;600;700",
         },
-    }, {
-        resolve: "gatsby-plugin-google-fonts-v2",
-        options: {
-            fonts: [
-                {
-                    family: "Jura:wght@300;400;500;600;700",
-                },
-                {
-                    family: "Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900",
-                }
-            ],
-            display: "swap"
-        }
+        {
+          family:
+            "Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900",
+        },
+      ],
+      display: "swap",
     },
-    "gatsby-plugin-netlify", // make sure to keep it last in the array
+  },
+  "gatsby-plugin-netlify", // make sure to keep it last in the array
 ];
 
+console.log(`title ${title} description ${description}`);
+
 module.exports = {
-    siteMetadata: {
-        title,
-        description
-    },
-    plugins
+  siteMetadata: {
+    title,
+    description,
+  },
+  plugins,
 };

package/gatsby-node.js

@@ -4,6 +4,7 @@ const fs = require("fs");
 const webpack = require("webpack");
 const { createFilePath } = require("gatsby-source-filesystem");
 const typeDefs = require("./src/cms/config/collections/typeDefs");
+
 require("dotenv").config({
   path: `.env.${process.env.NODE_ENV}`,
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstack_dev/gatsby-theme-marketing-oif-core",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Base theme for Marketing Sites",
   "author": "smarcet",
   "keywords": [

package/src/components/Seo.js

@@ -0,0 +1,63 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import useSiteMetadata from "@utils/useSiteMetadata";
+import useSiteSettings from "@utils/useSiteSettings";
+import { getSrc } from "gatsby-plugin-image";
+import { buildUrl } from "@utils/urlFormating";
+import { getEnvVariable, SITE_URL } from "@utils/envVariables";
+
+function Seo({
+  title, description, location, children,
+}) {
+  const { title: siteTitle, description: defaultDescription } = useSiteMetadata();
+
+  const siteSettings = useSiteSettings();
+  const image = siteSettings?.siteMetadata?.image;
+
+  const siteUrl = getEnvVariable(SITE_URL);
+  const siteUrlInfo = siteUrl ? new URL(siteUrl) : null;
+  const scheme = siteUrlInfo ? siteUrlInfo.protocol.replace(":", "") : "https";
+  const host = siteUrlInfo ? siteUrlInfo.host : null;
+  const { pathname } = location;
+
+  const seo = {
+    title: title ? `${siteTitle} - ${title}` : siteTitle,
+    description: description || defaultDescription,
+    url: buildUrl(scheme, host, pathname),
+    image: host && image ? buildUrl(scheme, host, getSrc(image)) : null,
+  };
+  console.log("SEO", seo);
+  return (
+    <>
+      {seo.title && <title>{seo.title}</title>}
+      {seo.description && <meta name="description" content={seo.description} />}
+      {seo.url && <meta property="og:url" content={seo.url} />}
+      <meta property="og:type" content="website" />
+      {seo.title && <meta property="og:title" content={seo.title} />}
+      {seo.description && (
+        <meta property="og:description" content={seo.description} />
+      )}
+      {seo.image && <meta property="og:image" content={seo.image} />}
+      {seo.image && <meta name="twitter:card" content="summary_large_image" />}
+      {host && <meta property="twitter:domain" content={host} />}
+      {seo.url && <meta property="twitter:url" content={seo.url} />}
+      {seo.title && <meta name="twitter:title" content={seo.title} />}
+      {seo.description && (
+        <meta name="twitter:description" content={seo.description} />
+      )}
+      {seo.image && <meta name="twitter:image" content={seo.image} />}
+      {children}
+    </>
+  );
+}
+
+Seo.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  location: PropTypes.shape({
+    pathname: PropTypes.string.isRequired,
+  }).isRequired,
+  children: PropTypes.node,
+};
+
+export default Seo;

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

@@ -1 +1 @@
-{ "staticJsonFilesBuildTime": [], "lastBuild": 1713549320254 }
+{ "staticJsonFilesBuildTime": [], "lastBuild": 1713843468311 }

package/src/pages/index.js

@@ -1,14 +1,23 @@
 import React from "react";
 import Layout from "../components/Layout";
 import CustomGoogleTracker from "../components/Tracking/custom-google-tracker";
+import Seo from "../components/Seo";
 
-const IndexPage = () => <Layout><div style={{height: 300}}>placeholder</div></Layout>;
+function IndexPage() {
+  return (
+    <Layout>
+      <div style={{ height: 300 }}>placeholder</div>
+    </Layout>
+  );
+}
 
 export default IndexPage;
 
-export const Head = () => (
-  <>
-    <title>Home Page</title>
-    <CustomGoogleTracker/>
-  </>
-);
+export function Head({ location }) {
+  return (
+    <>
+      <Seo location={location} />
+      <CustomGoogleTracker />
+    </>
+  );
+}

package/src/state/store.js

@@ -1,6 +1,6 @@
 import { applyMiddleware, compose, createStore } from "redux";
 import { persistCombineReducers, persistStore } from "redux-persist";
-import storage from "./storage";
+import storage from "redux-persist/lib/storage";
 import thunk from "redux-thunk";
 
 import * as reducers from "../reducers";
@@ -9,35 +9,33 @@ import * as reducers from "../reducers";
 const clientId = process.env.GATSBY_OAUTH2_CLIENT_ID;
 
 const config = {
-    key: `root_${clientId}`,
-    storage,
-    blacklist: [
-        // this will be not saved to persistent storage see
-        // https://github.com/rt2zz/redux-persist#blacklist--whitelist
-    ],
+  key: `root_${clientId}`,
+  storage,
+  blacklist: [
+    // this will be not saved to persistent storage see
+    // https://github.com/rt2zz/redux-persist#blacklist--whitelist
+  ],
 };
 
 const states = {
-    loggedUserState: reducers.loggedUserReducer,
+  loggedUserState: reducers.loggedUserReducer,
 };
 
-const appendLoggedUser = ({ getState }) => (next) => (action) => {
-    return next(action);
-};
+const appendLoggedUser = () => (next) => (action) => next(action);
 
 const composeEnhancers = typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-    : compose;
+  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+  : compose;
 
 const enhancer = composeEnhancers(applyMiddleware(appendLoggedUser, thunk));
 
 // Create store with persistor
 export const { store, persistor } = (() => {
-    const persistedReducers = persistCombineReducers(config, states);
+  const persistedReducers = persistCombineReducers(config, states);
 
-    const store = createStore(persistedReducers, enhancer);
-    const onRehydrateComplete = () => {};
-    const persistor = persistStore(store, null, onRehydrateComplete);
+  const store = createStore(persistedReducers, enhancer);
+  const onRehydrateComplete = () => {};
+  const persistor = persistStore(store, null, onRehydrateComplete);
 
-    return { store, persistor };
+  return { store, persistor };
 })();

package/src/utils/urlFormating.js

@@ -0,0 +1,18 @@
+export const buildUrl = (scheme, host, pathname) => {
+  if (!host) return null;
+  const domain = `${scheme}://${host}`;
+  return `${domain}${pathname ?? "/"}`;
+};
+
+export const getSponsorURL = (id, name) => {
+  const formattedName = name.toLowerCase().replace(/\s/g, "-");
+  return `${id}-${formattedName}`;
+};
+
+export const titleFromPathname = (pathname) => {
+  const segments = pathname.split("/");
+  const lastSegment = segments.filter(Boolean).pop();
+  return lastSegment
+    ?.replace("-", " ")
+    .replace(/\b\w/g, (word) => word.toUpperCase());
+};

package/src/utils/useSiteMetadata.js

@@ -0,0 +1,21 @@
+import { graphql, useStaticQuery } from "gatsby";
+
+const siteMetadataQuery = graphql`
+  query {
+    site {
+      siteMetadata {
+        title
+        description
+      }
+    }
+  }
+`;
+
+const useSiteMetadata = () => {
+  const {
+    site: { siteMetadata },
+  } = useStaticQuery(siteMetadataQuery);
+  return siteMetadata;
+};
+
+export default useSiteMetadata;

package/src/utils/useSiteSettings.js

@@ -0,0 +1,24 @@
+import { graphql, useStaticQuery } from "gatsby";
+
+const siteSettingsQuery = graphql`
+  query {
+    siteSettingsJson {
+      siteMetadata {
+        title
+        description
+        image {
+          childImageSharp {
+            gatsbyImageData(quality: 100)
+          }
+        }
+      }
+    }
+  }
+`;
+
+const useSiteSettings = () => {
+  const { siteSettingsJson } = useStaticQuery(siteSettingsQuery);
+  return siteSettingsJson;
+};
+
+export default useSiteSettings;