@openeventkit/event-site 2.0.115 → 2.0.116

package/gatsby-browser.js

@@ -34,9 +34,9 @@ export const onClientEntry = () => {
     document.documentElement.style.setProperty(`--${key}50`, `${value}50`);
   });
   // set theme
-  const themeSetting = marketingSettings.find(ms => ms.key === 'EVENT_SITE_COLOR_SCHEME');
-  const theme = themeSetting?.value || 'LIGHT';
-  document.documentElement.setAttribute('data-theme', theme);
+  const themeSetting = marketingSettings.find(ms => ms.key === "EVENT_SITE_COLOR_SCHEME");
+  const theme = themeSetting?.value || "LIGHT";
+  document.documentElement.setAttribute("data-theme", theme);
 
   // init sentry
   const GATSBY_SENTRY_DSN = process.env.GATSBY_SENTRY_DSN;

package/gatsby-config.mjs

@@ -26,26 +26,27 @@ const {
 let siteSettings = require(`./${SITE_SETTINGS_FILE_PATH}`);
 try {
   siteSettings = require(path.resolve(SITE_SETTINGS_FILE_PATH));
-}
-catch (e) {
+} 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";
+const packageJson = require(path.resolve(__dirname, "package.json"));
+
+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 ? [
   {
     resolve: "gatsby-plugin-manifest",
     options: {
-      name: title,
-      short_name: title,
-      description: description,
+      name: title ?? packageJson.description,
+      short_name: title ?? packageJson.description,
       start_url: "/",
       display: "minimal-ui",
       icon: path.join(SITE_SETTINGS_DIR_PATH, faviconAsset),
-      include_favicon: true
+      include_favicon: true,
+      ...description && { description }
     }
   }
 ] : [];

package/gatsby-node.js

@@ -1,6 +1,6 @@
 const axios = require("axios");
 const path = require("path");
-const fs = require("fs-extra");
+const fs = require("fs");
 const webpack = require("webpack");
 const {
   createFilePath
@@ -16,6 +16,7 @@ const {
   REQUIRED_DIR_PATHS,
   DEFAULT_COLORS_FILE_PATH,
   COLORS_FILE_PATH,
+  COLORS_SCSS_FILE_PATH,
   SITE_SETTINGS_FILE_PATH,
   SUMMIT_FILE_PATH,
   EVENTS_FILE_PATH,
@@ -29,7 +30,12 @@ const {
   SPONSORS_FILE_PATH,
   FONTS_SCSS_FILE_PATH
 } = require("./src/utils/filePath");
-const { generateFontFile } = require("./src/utils/cssUtils");
+
+const {
+  generateAndWriteScssFile,
+  generateFontScssFile,
+  generateColorsScssFile
+} = require("./src/utils/scssUtils");
 
 const fileBuildTimes = [];
 
@@ -228,8 +234,8 @@ exports.onPreBootstrap = async () => {
   const summitId = process.env.GATSBY_SUMMIT_ID;
   const summitApiBaseUrl = process.env.GATSBY_SUMMIT_API_BASE_URL;
   let   marketingSettings = await SSR_getMarketingSettings(process.env.GATSBY_MARKETING_API_BASE_URL, summitId);
-  const colorSettings = fs.existsSync(COLORS_FILE_PATH) ? JSON.parse(fs.readFileSync(COLORS_FILE_PATH)) : require(`./${DEFAULT_COLORS_FILE_PATH}`);
   const siteSettings = fs.existsSync(SITE_SETTINGS_FILE_PATH) ? JSON.parse(fs.readFileSync(SITE_SETTINGS_FILE_PATH)) : {};
+  const colors = fs.existsSync(COLORS_FILE_PATH) ? JSON.parse(fs.readFileSync(COLORS_FILE_PATH)) : require(`./${DEFAULT_COLORS_FILE_PATH}`);
 
   const config = {
     client: {
@@ -247,12 +253,12 @@ exports.onPreBootstrap = async () => {
 
   const accessToken = await getAccessToken(config, process.env.GATSBY_BUILD_SCOPES).then(({ token }) => token.access_token);
 
-  const FileType = 'FILE';
+  const FileType = "FILE";
   // extract colors from marketing settings
-  marketingSettings = marketingSettings.map( entry => {
-    if (entry.key.startsWith("color_")) colorSettings[entry.key] = entry.value;
-    if(entry.type === FileType) return {...entry, value: entry.file};
-    return {...entry};
+  marketingSettings = marketingSettings.map(entry => {
+    if (entry.key.startsWith("color_")) colors[entry.key] = entry.value;
+    if (entry.type === FileType) return { ...entry, value: entry.file };
+    return { ...entry };
   });
 
   // create required directories
@@ -263,7 +269,17 @@ exports.onPreBootstrap = async () => {
   });
 
   fs.writeFileSync(MARKETING_SETTINGS_FILE_PATH, JSON.stringify(marketingSettings), "utf8");
-  fs.writeFileSync(COLORS_FILE_PATH, JSON.stringify(colorSettings), "utf8");
+
+  // write colors json used to set runtime colors in gatsby-browser
+  fs.writeFileSync(COLORS_FILE_PATH, JSON.stringify(colors), "utf8");
+
+  // generate and write colors SCSS file used by built styles 
+  generateAndWriteScssFile(generateColorsScssFile, colors, COLORS_SCSS_FILE_PATH);
+
+  if (siteSettings.siteFont) {    
+    // generate and write font SCSS file used by built styles 
+    generateAndWriteScssFile(generateFontScssFile, siteSettings.siteFont, FONTS_SCSS_FILE_PATH);
+  }
 
   // summit
   const summit = await SSR_getSummit(summitApiBaseUrl, summitId);
@@ -292,7 +308,6 @@ exports.onPreBootstrap = async () => {
   });
   fs.writeFileSync(EVENTS_IDX_FILE_PATH, JSON.stringify(allEventsIDX), "utf8");
 
-
   // Show Speakers
   const allSpeakers = await SSR_getSpeakers(summitApiBaseUrl, summitId, accessToken);
   console.log(`allSpeakers ${allSpeakers.length}`);
@@ -335,23 +350,6 @@ exports.onPreBootstrap = async () => {
   siteSettings.lastBuild = Date.now();
 
   fs.writeFileSync(SITE_SETTINGS_FILE_PATH, JSON.stringify(siteSettings), "utf8");
-
-  // Read fonts from site settings
-  const siteFonts = siteSettings.siteFont;
-
-  if(siteFonts && Object.keys(siteFonts).length > 0) {
-    // Generate the SCSS file
-    const scssFontsFile = generateFontFile(siteFonts);
-    if (scssFontsFile) {
-      const standalone = __dirname === path.resolve();
-      let fontFilePath = FONTS_SCSS_FILE_PATH;
-      if (!standalone) {
-        fontFilePath = `${__dirname}/${fontFilePath}`;
-      }
-      fs.writeFileSync(fontFilePath, scssFontsFile);
-      console.log(`CUSTOM FONT FILE ${fontFilePath} generated.`);
-    }
-  }
 };
 
 exports.createSchemaCustomization = async ({ actions, reporter, getNodeAndSavePathDependency }) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.115",
+  "version": "2.0.116",
   "author": "Tipit LLC",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -28,7 +28,7 @@
     "@vimeo/player": "^2.16.3",
     "ably": "^1.2.34",
     "assert": "^2.1.0",
-    "attendee-to-attendee-widget": "3.0.6",
+    "attendee-to-attendee-widget": "3.1.0",
     "awesome-bootstrap-checkbox": "^1.0.1",
     "axios": "^0.19.2",
     "babel-preset-gatsby": "^3.13.2",

package/src/cms/config/collections/defaultPagesCollection/invitationsRejectPage/index.js

@@ -20,18 +20,18 @@ const invitationsRejectPage = {
       required: false,
       default: "Invitation not found."
     }),
-    stringField({
-      label: "Rejected text",
-      name: "rejectedText",
-      required: false,
-      default: "Invitation has already been rejected."
-    }),
     stringField({
       label: "Reject text",
       name: "rejectText",
       required: false,
       default: "To reject please click on the button below."
     }),
+    stringField({
+      label: "Reject Confirmation Text",
+      name: "rejectedText",
+      required: false,
+      default: "Invitation has already been rejected."
+    }),
     stringField({
       label: "Reject CTA label",
       name: "rejectCTALabel",

package/src/components/Footer/template.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import FooterMarketing from "../FooterMarketing";
 import Link from "../Link";
 
@@ -29,7 +30,7 @@ const FooterTemplate = ({ data, summit, marketing }) => {
                         {data.social.networks.map((net, index) => (
                           net.display &&
                           <Link to={net.link} key={index}>
-                            <i className={`fa icon is-large ${net.icon}`}></i>
+                            <FontAwesomeIcon icon={`fa-brands ${net.icon}`} size="lg" />
                           </Link>
                         ))}
                       </div>
@@ -81,7 +82,7 @@ const FooterTemplate = ({ data, summit, marketing }) => {
                     {data.social.networks.map((net, index) => (
                       net.display &&
                       <Link to={net.link} className={styles.link} key={index}>
-                        <i className={`fa icon is-large ${net.icon}`} />
+                        <FontAwesomeIcon icon={`fa-brands ${net.icon}`} size="lg" />
                       </Link>
                     ))}
                   </div>

package/src/components/FooterMarketing.js

@@ -1,6 +1,6 @@
 import * as React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Link from "./Link";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import footerContent from "content/footer/index.json";
 

package/src/components/MarketingHero/ImagesColumn.js

@@ -22,7 +22,7 @@ const ImagesColumn = ({ images }) => {
           <img
             key={index}
             src={getSrc(image.src)}
-            alt={image.alt}
+            alt={image.alt ?? ""}
           />
           ))}
         </Slider>
@@ -30,7 +30,7 @@ const ImagesColumn = ({ images }) => {
         <GatsbyImage
           className={styles.singleImage}
           image={getImage(images[0].src)}
-          alt={images[0].alt}
+          alt={images[0].alt ?? ""}
         />
       )}
     </div>

package/src/components/MarketingHero/index.js

@@ -37,7 +37,7 @@ const MarketingHero = ({ location, data }) => {
 };
 
 MarketingHero.propTypes = {
-  location: PropTypes.string.isRequired,
+  location: PropTypes.object.isRequired,
   data: PropTypes.object
 };
 

package/src/components/Seo.js

@@ -2,7 +2,6 @@ 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";
 
@@ -13,7 +12,7 @@ const Seo = ({ title, description, location, children }) => {
   } = useSiteMetadata();
 
   const siteSettings = useSiteSettings();
-  const image = siteSettings?.siteMetadata?.image
+  const image = siteSettings?.siteMetadata?.image;
 
   const siteUrl = getEnvVariable(SITE_URL);
   const siteUrlInfo = siteUrl ? new URL(siteUrl) : null;
@@ -25,8 +24,9 @@ const Seo = ({ title, description, location, children }) => {
     title: title ? `${siteTitle} - ${title}` : siteTitle,
     description: description || defaultDescription,
     url: buildUrl(scheme, host, pathname),
-    image: host && image ? buildUrl(scheme, host, getSrc(image)) : null,
+    image: host && image ? buildUrl(scheme, host, image.publicURL) : null,
   };
+
   return (
     <>
       {seo.title && <title>{seo.title}</title>}

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

@@ -1 +1,50 @@
-{"widgets":{"chat":{"enabled":true,"showQA":false,"showHelp":false,"defaultScope":"page"},"schedule":{"allowClick":true}},"favicon":{"asset":"icon.png"},"idpLogo":{"idpLogoDark":"","idpLogoLight":"","idpLogoAlt":""},"identityProviderButtons":[{"buttonColor":"#082238","providerLabel":"Continue with FNid","providerLogo":"logo_fn.svg","providerLogoSize":27},{"buttonColor":"#0A66C2","providerLabel":"Sign in with LinkedIn","providerParam":"linkedin","providerLogo":"logo_linkedin.svg","providerLogoSize":18},{"buttonColor":"#000000","providerLabel":"Sign in with Apple","providerParam":"apple","providerLogoSize":17,"providerLogo":"logo_apple.svg"},{"buttonColor":"#1877F2","providerLabel":"Login with Facebook","providerParam":"facebook","providerLogo":"logo_facebook.svg","providerLogoSize":20}],"maintenanceMode":{"enabled":false,"title":"Site under maintenance","subtitle":"Please reload page shortly"},"staticJsonFilesBuildTime":[{"file":"src/data/summit.json","build_time":1717432857795},{"file":"src/data/events.json","build_time":1717432863110},{"file":"src/data/events.idx.json","build_time":1717432863115},{"file":"src/data/speakers.json","build_time":1717432864148},{"file":"src/data/speakers.idx.json","build_time":1717432864149},{"file":"src/content/sponsors.json","build_time":1717432868235},{"file":"src/data/voteable-presentations.json","build_time":1717432868631}],"lastBuild":1717432868632}
+{
+  "favicon": {
+    "asset": "icon.png"
+  },
+  "widgets": {
+    "chat": {
+      "enabled": true,
+      "showQA": false,
+      "showHelp": false,
+      "defaultScope": "page"
+    },
+    "schedule": {
+      "allowClick": true
+    }
+  },
+  "identityProviderButtons": [
+    {
+      "buttonColor": "#082238",
+      "providerLabel": "Continue with FNid",
+      "providerLogo": "logo_fn.svg",
+      "providerLogoSize": 27
+    },
+    {
+      "buttonColor": "#0A66C2",
+      "providerLabel": "Sign in with LinkedIn",
+      "providerParam": "linkedin",
+      "providerLogo": "logo_linkedin.svg",
+      "providerLogoSize": 18
+    },
+    {
+      "buttonColor": "#000000",
+      "providerLabel": "Sign in with Apple",
+      "providerParam": "apple",
+      "providerLogoSize": 17,
+      "providerLogo": "logo_apple.svg"
+    },
+    {
+      "buttonColor": "#1877F2",
+      "providerLabel": "Login with Facebook",
+      "providerParam": "facebook",
+      "providerLogo": "logo_facebook.svg",
+      "providerLogoSize": 20
+    }
+  ],
+  "maintenanceMode": {
+    "enabled": false,
+    "title": "Site under maintenance",
+    "subtitle": "Please reload page shortly"
+  }
+}

package/src/defaults/colors.json

@@ -1 +1,33 @@
-{"color_primary":"#6d6e71","color_primary_contrast":"#f1f2f2","color_secondary":"#00CEC4","color_secondary_contrast":"#ff5e32","color_accent":"#ff5e32","color_text_dark":"#333333","color_text_med":"#828282","color_text_light":"#ffffff","color_gray_darker":"#4A4A4A","color_gray_dark":"#999999","color_gray_light":"#DFDFDF","color_gray_lighter":"#F2F2F2","color_text_input_hints":"#c4c4c4"}
+{
+  "color_accent": "#ff5e32",
+  "color_alerts": "#ff0000",
+  "color_background_light": "#ffffff",
+  "color_background_dark": "#000000",
+  "color_button_background_color": "#ffffff",
+  "color_button_color": "#000000",
+  "color_gray_lighter": "#f2f2f2",
+  "color_gray_light": "#dfdfdf",
+  "color_gray_dark": "#999999",
+  "color_gray_darker": "#4a4a4a",
+  "color_horizontal_rule_light": "#e5e5e5",
+  "color_horizontal_rule_dark": "#7b7b7b",
+  "color_icon_light": "#ffffff",
+  "color_input_background_color_light": "#ffffff",
+  "color_input_background_color_dark": "#181a1b",
+  "color_input_border_color_light": "#dbdbdb",
+  "color_input_border_color_dark": "#3a3f41",
+  "color_input_text_color_light": "#363636",
+  "color_input_text_color_dark": "#ffffff",
+  "color_input_text_color_disabled_light": "#ffffff",
+  "color_input_text_color_disabled_dark": "#ffffff",
+  "color_primary": "#6d6e71",
+  "color_primary_contrast": "#f1f2f2",
+  "color_secondary": "#00cec4",
+  "color_secondary_contrast": "#ff5e32",
+  "color_text_light": "#ffffff",
+  "color_text_med": "#828282",
+  "color_text_dark": "#333333",
+  "color_text_input_hints_light": "#7b7b7b",
+  "color_text_input_hints_dark": "#7b7b7b",
+  "color_text_input_hints": "#c4c4c4"
+}

package/src/styles/colors.scss

@@ -1,34 +1,40 @@
-$color_primary : #6d6e71;
-$color_primary_contrast : #f1f2f2;
-$color_secondary : #00CEC4;
-$color_secondary_contrast : #ff5e32;
-$color_accent : #ff5e32;
+/**
+* Warning:
+* Dont edit this file by hand, has been generated by colors scss util
+* Uses default colors as base and then overriden by colors set via marketing
+**/
+
+$color_accent: #ff5e32;
+$color_alerts: #ff0000;
 $color_background_light: #ffffff;
 $color_background_dark: #000000;
-$color_text_dark : #333333;
-$color_text_med : #828282;
-$color_text_light : #ffffff;
-$color_gray_darker : #4A4A4A;
-$color_gray_dark : #999999;
-$color_gray_light : #DFDFDF;
-$color_gray_lighter : #F2F2F2;
-$color_text_input_hints : #c4c4c4;
+$color_button_background_color: #ffffff;
+$color_button_color: #000000;
+$color_gray_lighter: #F2F2F2;
+$color_gray_light: #DFDFDF;
+$color_gray_dark: #999999;
+$color_gray_darker: #4A4A4A;
+$color_horizontal_rule_light: #e5e5e5;
+$color_horizontal_rule_dark: #7b7b7b;
+$color_icon_light: #ffffff;
+$color_input_background_color_light: #ffffff;
+$color_input_background_color_dark: #181a1b;
+$color_input_border_color_light: #dbdbdb;
+$color_input_border_color_dark: #3a3f41;
 $color_input_text_color_light: #363636;
-$color_input_text_color_disabled_light: #FFFFFF;
-$color_icon_light: #FFFFFF;
-$color_input_background_color_light:#fff;
-$color_input_border_color_light:#dbdbdb;
-$color_input_text_color_dark: #FFFFFF;
-$color_input_text_color_disabled_dark: #FFFFFF;
-$color_input_background_color_dark:rgb(24, 26, 27);
-$color_input_border_color_dark:rgb(58, 63, 65);
-$color_horizontal_rule_dark: #7B7B7B;
-$color_horizontal_rule_light: #E5E5E5;
-$color_text_input_hints_light:#7B7B7B;
-$color_text_input_hints_dark:#7B7B7B;
-$color_button_background_color:#ffffff;
-$color_button_color:#000000;
-$color_alerts:#FF0000;
+$color_input_text_color_dark: #ffffff;
+$color_input_text_color_disabled_light: #ffffff;
+$color_input_text_color_disabled_dark: #ffffff;
+$color_primary: #6d6e71;
+$color_primary_contrast: #f1f2f2;
+$color_secondary: #00CEC4;
+$color_secondary_contrast: #ff5e32;
+$color_text_light: #ffffff;
+$color_text_med: #828282;
+$color_text_dark: #333333;
+$color_text_input_hints_light: #7b7b7b;
+$color_text_input_hints_dark: #7b7b7b;
+$color_text_input_hints: #c4c4c4;
 
 :root {
   --color_primary: #{$color_primary};
@@ -45,7 +51,6 @@ $color_alerts:#FF0000;
   --color_gray_light: #{$color_gray_light};
   --color_gray_lighter: #{$color_gray_lighter};
   --color_input_text_color: #{$color_input_text_color_light};
-  --color_input_text_color_disabled:  #{$color_input_text_color_disabled_light};
   --color_input_background_color: #{$color_input_background_color_light};
   --color_input_border_color: #{$color_input_border_color_light};
   --color_text_input_hints: #{$color_text_input_hints_light};
@@ -55,7 +60,6 @@ $color_alerts:#FF0000;
   --color_button_color: #{$color_button_color};
   --color_alerts: #{$color_alerts};
 }
-
 html[data-theme="DARK"] {
   --color_text_dark: #{$color_text_light} !important;
   --color_text_light: #{$color_text_dark} !important;
@@ -66,9 +70,8 @@ html[data-theme="DARK"] {
   --color_gray_light: #{$color_gray_dark} !important;
   --color_gray_lighter: #{$color_gray_darker} !important;
   --color_input_text_color: #{$color_input_text_color_dark} !important;
-  --color_input_text_color_disabled: #{$color_input_text_color_disabled_dark} !important;
   --color_input_background_color: #{$color_input_background_color_dark} !important;
   --color_input_border_color: #{$color_input_border_color_dark} !important;
   --color_text_input_hints: #{$color_text_input_hints_dark} !important;
-  --color_horizontal_rule: #{$color_horizontal_rule_dark};
-}
+  --color_horizontal_rule: #{$color_horizontal_rule_dark} !important;
+}

package/src/styles/fonts.scss

@@ -1,7 +1,7 @@
 /**
 * Warning:
-* Dont edit this file by hand, this file is used as default font implementation for the whole site
-* and it been re generated if font settings are set through CMS on gatsby-node.js line # 346
+* Dont edit this file by hand, has been generated by fonts scss util
+* Generated with font values set via CMS
 **/
 
 $font-family: 'Nunito Sans', sans-serif;

package/src/templates/marketing-page-template/MainColumn.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { navigate } from "gatsby";
 import PropTypes from "prop-types";
 import { GatsbyImage, getImage } from "gatsby-plugin-image";
 import Mdx from "@mdx-js/runtime";
@@ -8,6 +9,8 @@ import DisqusComponent from "../../components/DisqusComponent";
 import ResponsiveImage from "../../components/ResponsiveImage";
 import Link from "../../components/Link";
 
+import { PHASES } from "@utils/phasesUtils";
+
 import styles from "./styles.module.scss";
 
 const shortcodes = {
@@ -15,55 +18,63 @@ const shortcodes = {
   img: ResponsiveImage
 };
 
-const MainColumn = ({ widgets, scheduleProps, lastDataSync, fullWidth, maxHeight }) => (
-  <div
-    className={`column pt-6 pb-5 px-6 ${!fullWidth ? "is-half" : ""} ${styles.mainColumn || ""}`}
-    style={{ maxHeight: !fullWidth && maxHeight ? maxHeight : "none", overflowY: "auto" }}
-  >
-    <Container>
-      {widgets?.content?.display && widgets?.content?.body && (
-      <Mdx components={shortcodes}>
-        {widgets.content.body}
-      </Mdx>
-      )}
-      {widgets?.schedule?.display && (
-      <>
-        <h2><b>{widgets.schedule.title}</b></h2>
-        <LiteScheduleComponent
-          {...scheduleProps}
-          lastDataSync={lastDataSync}
-          id={`marketing_lite_schedule_${lastDataSync}`}
-          page="marketing-site"
-          showAllEvents={true}
-          showSearch={false}
-          showNav={true}
-        />
-      </>
-      )}
-      {widgets?.disqus?.display && (
-      <>
-        <h2><b>{widgets.disqus.title}</b></h2>
-        <DisqusComponent page="marketing-site" />
-      </>
-      )}
-     {widgets?.image?.display && widgets?.image?.image.src && (
-      <>
-        <h2><b>{widgets.image.title}</b></h2>
-        <br />
-        <GatsbyImage image={getImage(widgets.image.image.src)} alt={widgets.image.image.alt ?? ""} />
-      </>
-      )}
-    </Container>
-  </div>
-);
+const onEventClick = (ev) => navigate(`/a/event/${ev.id}`);
+
+const MainColumn = ({ widgets, summitPhase, isLoggedUser, onEventClick, lastDataSync, fullWidth, maxHeight }) => {
+  const { content, schedule, disqus, image } = widgets || {};
+  
+  const scheduleProps = schedule && isLoggedUser && summitPhase !== PHASES.BEFORE ? { onEventClick } : {};
+
+  return (
+    <div
+      className={`column pt-6 pb-5 px-6 ${!fullWidth ? "is-half" : ""} ${styles.mainColumn || ""}`}
+      style={{ maxHeight: !fullWidth && maxHeight ? maxHeight : "none", overflowY: "auto" }}
+    >
+      <Container>
+        {content?.display && content?.body && (
+          <Mdx components={shortcodes}>
+            {content.body}
+          </Mdx>
+        )}
+        {schedule?.display && (
+          <>
+            <h2><b>{schedule.title}</b></h2>
+            <LiteScheduleComponent
+              {...scheduleProps}
+              lastDataSync={lastDataSync}
+              id={`marketing_lite_schedule_${lastDataSync}`}
+              page="marketing-site"
+              showAllEvents={true}
+              showSearch={false}
+              showNav={true}
+            />
+          </>
+        )}
+        {disqus?.display && (
+          <>
+            <h2><b>{disqus.title}</b></h2>
+            <DisqusComponent page="marketing-site" />
+          </>
+        )}
+        {image?.display && image?.image.src && (
+          <>
+            <h2><b>{image.title}</b></h2>
+            <br/>
+            <GatsbyImage image={getImage(image.image.src)} alt={image.image.alt ?? ""} />
+          </>
+        )}
+      </Container>
+    </div>
+  );
+};
 
 MainColumn.propTypes = {
   widgets: PropTypes.object,
-  scheduleProps: PropTypes.object,
+  summitPhase: PropTypes.number,
+  isLoggedUser: PropTypes.bool,
   lastDataSync: PropTypes.number,
   fullWidth: PropTypes.bool,
   maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 
 export default MainColumn;
-

package/src/templates/marketing-page-template/index.js

@@ -1,29 +1,28 @@
-import React, { useRef, useState, useCallback } from "react";
+import React, { useRef, useState } from "react";
 import PropTypes from "prop-types";
-import { navigate } from "gatsby";
+import { NoSsr } from "@mui/base/NoSsr";
 import Layout from "../../components/Layout";
 import AttendanceTrackerComponent from "../../components/AttendanceTrackerComponent";
 import MarketingHero from "../../components/MarketingHero";
 import Countdown from "../../components/Countdown";
-import Link from "../../components/Link";
 import MainColumn from "./MainColumn";
 import Masonry from "./Masonry";
 import { useResize } from "@utils/hooks";
-import { PHASES } from "@utils/phasesUtils";
 
 import styles from "./styles.module.scss";
 
-const onEventClick = (ev) => navigate(`/a/event/${ev.id}`);
-
 const MarketingPageTemplate = ({ data, location, summit, summitPhase, isLoggedUser, lastDataSync }) => {
   const masonryRef = useRef();
   const [rightColumnHeight, setRightColumnHeight] = useState();
+
   const onResize = () => {
     if (masonryRef?.current) {
       setRightColumnHeight(masonryRef.current.firstChild.clientHeight);
     }
   };
+  
   useResize(onResize);
+
   const {
     marketingPageJson: {
       hero,
@@ -32,22 +31,23 @@ const MarketingPageTemplate = ({ data, location, summit, summitPhase, isLoggedUs
       masonry
     } = {}
   } = data || {};
-  const scheduleProps = useCallback(() => {
-    if (widgets?.schedule && isLoggedUser && summitPhase !== PHASES.BEFORE) {
-      return { onEventClick };
-    }
-    return {};
-  }, [widgets, isLoggedUser, summitPhase]);
+
   const shouldRenderMasonry = masonry?.display;
+
   return (
     <Layout marketing={true} location={location}>
       <AttendanceTrackerComponent />
       <MarketingHero location={location} data={hero} />
-      {summit && countdown?.display && <Countdown summit={summit} text={countdown?.text} />}
+      {summit && countdown?.display &&
+      <NoSsr>
+        <Countdown summit={summit} text={countdown?.text} />
+      </NoSsr>
+      }
       <div className="columns is-marginless">
         <MainColumn
           widgets={widgets}
-          scheduleProps={scheduleProps}
+          summitPhase={summitPhase}
+          isLoggedUser={isLoggedUser}
           maxHeight={rightColumnHeight}
           fullWidth={!shouldRenderMasonry}
           lastDataSync={lastDataSync}

package/src/utils/envVariables.js

@@ -1,103 +1,103 @@
-export const SITE_URL = 'SITE_URL';
-export const IDP_BASE_URL = 'IDP_BASE_URL';
-export const SUMMIT_API_BASE_URL = 'SUMMIT_API_BASE_URL';
-export const SUMMIT_ID = 'SUMMIT_ID';
-export const OAUTH2_CODE = 'OAUTH2_CODE';
-export const OAUTH2_CLIENT_ID = 'OAUTH2_CLIENT_ID';
-export const SCOPES = 'SCOPES';
-export const MARKETING_API_BASE_URL = 'MARKETING_API_BASE_URL';
-export const REGISTRATION_BASE_URL = 'REGISTRATION_BASE_URL';
-export const AUTHZ_USER_GROUPS = 'AUTHZ_USER_GROUPS';
-export const AUTHORIZED_DEFAULT_PATH = 'AUTHORIZED_DEFAULT_PATH';
-export const STREAM_IO_API_KEY = 'STREAM_IO_API_KEY';
-export const MUX_ENV_KEY = 'MUX_ENV_KEY';
-export const DISQUS_SHORTNAME = 'DISQUS_SHORTNAME';
-export const SUPABASE_URL = 'SUPABASE_URL';
-export const SUPABASE_KEY = 'SUPABASE_KEY';
-export const CHAT_API_BASE_URL = 'CHAT_API_BASE_URL';
-export const SCHEDULE_EXCLUDING_TAGS = 'SCHEDULE_EXCLUDING_TAGS';
-export const LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS = 'LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS';
-export const OAUTH2_FLOW = 'OAUTH2_FLOW';
-export const API_BASE_URL = 'API_BASE_URL';
+export const SITE_URL = "SITE_URL";
+export const IDP_BASE_URL = "IDP_BASE_URL";
+export const SUMMIT_API_BASE_URL = "SUMMIT_API_BASE_URL";
+export const SUMMIT_ID = "SUMMIT_ID";
+export const OAUTH2_CODE = "OAUTH2_CODE";
+export const OAUTH2_CLIENT_ID = "OAUTH2_CLIENT_ID";
+export const SCOPES = "SCOPES";
+export const MARKETING_API_BASE_URL = "MARKETING_API_BASE_URL";
+export const REGISTRATION_BASE_URL = "REGISTRATION_BASE_URL";
+export const AUTHZ_USER_GROUPS = "AUTHZ_USER_GROUPS";
+export const AUTHORIZED_DEFAULT_PATH = "AUTHORIZED_DEFAULT_PATH";
+export const STREAM_IO_API_KEY = "STREAM_IO_API_KEY";
+export const MUX_ENV_KEY = "MUX_ENV_KEY";
+export const DISQUS_SHORTNAME = "DISQUS_SHORTNAME";
+export const SUPABASE_URL = "SUPABASE_URL";
+export const SUPABASE_KEY = "SUPABASE_KEY";
+export const CHAT_API_BASE_URL = "CHAT_API_BASE_URL";
+export const SCHEDULE_EXCLUDING_TAGS = "SCHEDULE_EXCLUDING_TAGS";
+export const LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS = "LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS";
+export const OAUTH2_FLOW = "OAUTH2_FLOW";
+export const API_BASE_URL = "API_BASE_URL";
 // TODO: SUPPORT_EMAIL needs to be set via marketing api i/o env var
-export const SUPPORT_EMAIL = 'SUPPORT_EMAIL';
-export const WS_PUB_SERVER_URL = 'WS_PUB_SERVER_URL';
-export const REAL_TIME_UPDATES_STRATEGY = 'REAL_TIME_UPDATES_STRATEGY';
-export const TIMEINTERVALSINCE1970_API_URL = 'TIMEINTERVALSINCE1970_API_URL';
-export const ABLY_API_KEY = 'ABLY_API_KEY';
-export const GOOGLE_TAGMANAGER_ID = 'GOOGLE_TAGMANAGER_ID';
+export const SUPPORT_EMAIL = "SUPPORT_EMAIL";
+export const WS_PUB_SERVER_URL = "WS_PUB_SERVER_URL";
+export const REAL_TIME_UPDATES_STRATEGY = "REAL_TIME_UPDATES_STRATEGY";
+export const TIMEINTERVALSINCE1970_API_URL = "TIMEINTERVALSINCE1970_API_URL";
+export const ABLY_API_KEY = "ABLY_API_KEY";
+export const GOOGLE_TAGMANAGER_ID = "GOOGLE_TAGMANAGER_ID";
 
 const processEnv = {
-    /**
-     * Retrieve the site URL from environment variable set by the deploy provider.
-     * See documentation for more details:
-     * - Netlify: {@link https://docs.netlify.com/configure-builds/environment-variables/#deploy-urls-and-metadata}
-     * - Cloudflare Pages: {@link https://developers.cloudflare.com/pages/platform/build-configuration#environment-variables}
-     *
-     * If not available, fallback to user-defined GATSBY_SITE_URL env var.
-     */
-    SITE_URL: process.env.GATSBY_URL || process.env.GATSBY_CF_PAGES_URL || process.env.GATSBY_SITE_URL,
-    IDP_BASE_URL: process.env.GATSBY_IDP_BASE_URL,
-    SUMMIT_API_BASE_URL: process.env.GATSBY_SUMMIT_API_BASE_URL,
-    API_BASE_URL: process.env.GATSBY_SUMMIT_API_BASE_URL,
-    SUMMIT_ID: process.env.GATSBY_SUMMIT_ID,
-    OAUTH2_FLOW: process.env.GATSBY_OAUTH2_FLOW,
-    OAUTH2_CLIENT_ID: process.env.GATSBY_OAUTH2_CLIENT_ID,
-    SCOPES: process.env.GATSBY_SCOPES,
-    MARKETING_API_BASE_URL: process.env.GATSBY_MARKETING_API_BASE_URL,
-    REGISTRATION_BASE_URL: process.env.GATSBY_REGISTRATION_BASE_URL,
-    AUTHZ_USER_GROUPS: process.env.GATSBY_AUTHZ_USER_GROUPS,
-    AUTHORIZED_DEFAULT_PATH: process.env.GATSBY_AUTHORIZED_DEFAULT_PATH,
-    STREAM_IO_API_KEY: process.env.GATSBY_STREAM_IO_API_KEY,
-    MUX_ENV_KEY: process.env.GATSBY_MUX_ENV_KEY,
-    DISQUS_SHORTNAME: process.env.GATSBY_DISQUS_SHORTNAME,
-    SUPABASE_URL: process.env.GATSBY_SUPABASE_URL,
-    SUPABASE_KEY: process.env.GATSBY_SUPABASE_KEY,
-    CHAT_API_BASE_URL: process.env.GATSBY_CHAT_API_BASE_URL,
-    SCHEDULE_EXCLUDING_TAGS: process.env.GATSBY_SCHEDULE_EXCLUDING_TAGS,
-    LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS: process.env.GATSBY_LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS || 60,
-    SUPPORT_EMAIL: process.env.GATSBY_SUPPORT_EMAIL,
-    WS_PUB_SERVER_URL: process.env.GATSBY_WS_PUB_SERVER_URL,
-    // could be SUPA OR WS
-    REAL_TIME_UPDATES_STRATEGY: process.env.GATSBY_REAL_TIME_UPDATES_STRATEGY,
-    TIMEINTERVALSINCE1970_API_URL: process.env.GATSBY_TIMEINTERVALSINCE1970_API_URL,
-    ABLY_API_KEY: process.env.GATSBY_ABLY_API_KEY,
-    GOOGLE_TAGMANAGER_ID: process.env.GATSBY_GOOGLE_TAGMANAGER_ID,
+  /**
+   * Retrieve the site URL from environment variable set by the deploy provider.
+   * See documentation for more details:
+   * - Netlify: {@link https://docs.netlify.com/configure-builds/environment-variables/#deploy-urls-and-metadata}
+   * - Cloudflare Pages: {@link https://developers.cloudflare.com/pages/platform/build-configuration#environment-variables}
+   *
+   * If not available, fallback to user-defined GATSBY_SITE_URL env var.
+   */
+  SITE_URL: process.env.URL || process.env.CF_PAGES_URL || process.env.GATSBY_SITE_URL,
+  IDP_BASE_URL: process.env.GATSBY_IDP_BASE_URL,
+  SUMMIT_API_BASE_URL: process.env.GATSBY_SUMMIT_API_BASE_URL,
+  API_BASE_URL: process.env.GATSBY_SUMMIT_API_BASE_URL,
+  SUMMIT_ID: process.env.GATSBY_SUMMIT_ID,
+  OAUTH2_FLOW: process.env.GATSBY_OAUTH2_FLOW,
+  OAUTH2_CLIENT_ID: process.env.GATSBY_OAUTH2_CLIENT_ID,
+  SCOPES: process.env.GATSBY_SCOPES,
+  MARKETING_API_BASE_URL: process.env.GATSBY_MARKETING_API_BASE_URL,
+  REGISTRATION_BASE_URL: process.env.GATSBY_REGISTRATION_BASE_URL,
+  AUTHZ_USER_GROUPS: process.env.GATSBY_AUTHZ_USER_GROUPS,
+  AUTHORIZED_DEFAULT_PATH: process.env.GATSBY_AUTHORIZED_DEFAULT_PATH,
+  STREAM_IO_API_KEY: process.env.GATSBY_STREAM_IO_API_KEY,
+  MUX_ENV_KEY: process.env.GATSBY_MUX_ENV_KEY,
+  DISQUS_SHORTNAME: process.env.GATSBY_DISQUS_SHORTNAME,
+  SUPABASE_URL: process.env.GATSBY_SUPABASE_URL,
+  SUPABASE_KEY: process.env.GATSBY_SUPABASE_KEY,
+  CHAT_API_BASE_URL: process.env.GATSBY_CHAT_API_BASE_URL,
+  SCHEDULE_EXCLUDING_TAGS: process.env.GATSBY_SCHEDULE_EXCLUDING_TAGS,
+  LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS: process.env.GATSBY_LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS || 60,
+  SUPPORT_EMAIL: process.env.GATSBY_SUPPORT_EMAIL,
+  WS_PUB_SERVER_URL: process.env.GATSBY_WS_PUB_SERVER_URL,
+  // could be SUPA OR WS
+  REAL_TIME_UPDATES_STRATEGY: process.env.GATSBY_REAL_TIME_UPDATES_STRATEGY,
+  TIMEINTERVALSINCE1970_API_URL: process.env.GATSBY_TIMEINTERVALSINCE1970_API_URL,
+  ABLY_API_KEY: process.env.GATSBY_ABLY_API_KEY,
+  GOOGLE_TAGMANAGER_ID: process.env.GATSBY_GOOGLE_TAGMANAGER_ID,
 }
 
 export const getEnvVariable = (name) => {
-    let res = typeof window === 'object' ? window[name] : null;
-    if (!res) {
-        res = processEnv[name];
-    }
-    return res;
+  let res = typeof window === "object" ? window[name] : null;
+  if (!res) {
+    res = processEnv[name];
+  }
+  return res;
 }
 
-if (typeof window === 'object') {
-    window.SITE_URL = processEnv[SITE_URL];
-    window.OAUTH2_FLOW = processEnv[OAUTH2_FLOW];
-    window.OAUTH2_CLIENT_ID = processEnv[OAUTH2_CLIENT_ID];
-    window.SCOPES = processEnv[SCOPES];
-    window.IDP_BASE_URL = processEnv[IDP_BASE_URL];
-    window.SUMMIT_API_BASE_URL = processEnv[SUMMIT_API_BASE_URL];
-    window.API_BASE_URL = processEnv[API_BASE_URL];
-    window.SUMMIT_ID = processEnv[SUMMIT_ID];
-    window.MARKETING_API_BASE_URL = processEnv[MARKETING_API_BASE_URL];
-    window.REGISTRATION_BASE_URL = processEnv[REGISTRATION_BASE_URL];
-    window.AUTHZ_USER_GROUPS = processEnv[AUTHZ_USER_GROUPS];
-    window.AUTHORIZED_DEFAULT_PATH = processEnv[AUTHORIZED_DEFAULT_PATH];
-    window.STREAM_IO_API_KEY = processEnv[STREAM_IO_API_KEY];
-    window.MUX_ENV_KEY = processEnv[MUX_ENV_KEY];
-    window.DISQUS_SHORTNAME = processEnv[DISQUS_SHORTNAME];
-    window.SUPABASE_URL = processEnv[SUPABASE_URL];
-    window.SUPABASE_KEY = processEnv[SUPABASE_KEY];
-    window.CHAT_API_BASE_URL = processEnv[CHAT_API_BASE_URL];
-    window.SCHEDULE_EXCLUDING_TAGS = processEnv[SCHEDULE_EXCLUDING_TAGS];
-    window.LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS = processEnv[LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS];
-    window.SUPPORT_EMAIL = processEnv[SUPPORT_EMAIL];
-    window.WS_PUB_SERVER_URL = processEnv[WS_PUB_SERVER_URL];
-    window.REAL_TIME_UPDATES_STRATEGY = processEnv[REAL_TIME_UPDATES_STRATEGY];
-    window.TIMEINTERVALSINCE1970_API_URL = processEnv[TIMEINTERVALSINCE1970_API_URL];
-    window.ABLY_API_KEY = processEnv[ABLY_API_KEY];
-    window.GOOGLE_TAGMANAGER_ID = processEnv[GOOGLE_TAGMANAGER_ID];
+if (typeof window === "object") {
+  window.SITE_URL = processEnv[SITE_URL];
+  window.OAUTH2_FLOW = processEnv[OAUTH2_FLOW];
+  window.OAUTH2_CLIENT_ID = processEnv[OAUTH2_CLIENT_ID];
+  window.SCOPES = processEnv[SCOPES];
+  window.IDP_BASE_URL = processEnv[IDP_BASE_URL];
+  window.SUMMIT_API_BASE_URL = processEnv[SUMMIT_API_BASE_URL];
+  window.API_BASE_URL = processEnv[API_BASE_URL];
+  window.SUMMIT_ID = processEnv[SUMMIT_ID];
+  window.MARKETING_API_BASE_URL = processEnv[MARKETING_API_BASE_URL];
+  window.REGISTRATION_BASE_URL = processEnv[REGISTRATION_BASE_URL];
+  window.AUTHZ_USER_GROUPS = processEnv[AUTHZ_USER_GROUPS];
+  window.AUTHORIZED_DEFAULT_PATH = processEnv[AUTHORIZED_DEFAULT_PATH];
+  window.STREAM_IO_API_KEY = processEnv[STREAM_IO_API_KEY];
+  window.MUX_ENV_KEY = processEnv[MUX_ENV_KEY];
+  window.DISQUS_SHORTNAME = processEnv[DISQUS_SHORTNAME];
+  window.SUPABASE_URL = processEnv[SUPABASE_URL];
+  window.SUPABASE_KEY = processEnv[SUPABASE_KEY];
+  window.CHAT_API_BASE_URL = processEnv[CHAT_API_BASE_URL];
+  window.SCHEDULE_EXCLUDING_TAGS = processEnv[SCHEDULE_EXCLUDING_TAGS];
+  window.LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS = processEnv[LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS];
+  window.SUPPORT_EMAIL = processEnv[SUPPORT_EMAIL];
+  window.WS_PUB_SERVER_URL = processEnv[WS_PUB_SERVER_URL];
+  window.REAL_TIME_UPDATES_STRATEGY = processEnv[REAL_TIME_UPDATES_STRATEGY];
+  window.TIMEINTERVALSINCE1970_API_URL = processEnv[TIMEINTERVALSINCE1970_API_URL];
+  window.ABLY_API_KEY = processEnv[ABLY_API_KEY];
+  window.GOOGLE_TAGMANAGER_ID = processEnv[GOOGLE_TAGMANAGER_ID];
 }

package/src/utils/filePath.js

@@ -7,7 +7,7 @@ const CONTENT_PAGES_DIR_PATH = `${PAGES_DIR_PATH}/${CONTENT_PAGES_PATH_NAME}`;
 const STYLES_DIR_PATH = "src/styles";
 const DEFAULT_COLORS_FILE_PATH = `${DEFAULTS_DIR_PATH}/colors.json`;
 const COLORS_FILE_PATH = `${DATA_DIR_PATH}/colors.json`;
-const COLORS_SASS_FILE_PATH = `${STYLES_DIR_PATH}/colors.scss`
+const COLORS_SCSS_FILE_PATH = `${STYLES_DIR_PATH}/colors.scss`
 const FONTS_SCSS_FILE_PATH = `${STYLES_DIR_PATH}/fonts.scss`;
 const SITE_SETTINGS_DIR_PATH = `${STATIC_CONTENT_DIR_PATH}/site-settings`;
 const SITE_SETTINGS_FILE_PATH = `${SITE_SETTINGS_DIR_PATH}/index.json`;
@@ -63,7 +63,7 @@ exports.CONTENT_PAGES_PATH_NAME = CONTENT_PAGES_PATH_NAME;
 exports.CONTENT_PAGES_DIR_PATH = CONTENT_PAGES_DIR_PATH;
 exports.DEFAULT_COLORS_FILE_PATH = DEFAULT_COLORS_FILE_PATH;
 exports.COLORS_FILE_PATH = COLORS_FILE_PATH;
-exports.COLORS_SASS_FILE_PATH = COLORS_SASS_FILE_PATH;
+exports.COLORS_SCSS_FILE_PATH = COLORS_SCSS_FILE_PATH;
 exports.FONTS_SCSS_FILE_PATH = FONTS_SCSS_FILE_PATH;
 exports.SITE_SETTINGS_DIR_PATH = SITE_SETTINGS_DIR_PATH;
 exports.SITE_SETTINGS_FILE_PATH = SITE_SETTINGS_FILE_PATH;

package/src/utils/scssUtils.js

@@ -0,0 +1,146 @@
+const path = require("path");
+const fs = require("fs");
+
+const basePackageDir = path.resolve(__dirname, "../..");
+
+const { DEFAULT_COLORS_FILE_PATH } = require("./filePath");
+const DEFAULT_COLORS_DATA = require(path.join(basePackageDir, DEFAULT_COLORS_FILE_PATH));
+
+const generateAndWriteScssFile = (generatorFn, data, outputPath) => {
+  if (!data || Object.keys(data).length === 0) {
+    console.error(`No data provided for SCSS file generation at ${outputPath}.`);
+    return;
+  }
+  const scssFileContent = generatorFn(data);
+  if (!scssFileContent) {
+    console.error(`Failed to generate content for ${outputPath} SCSS file.`);
+    return;
+  }
+  try {
+    // since files are autogenerated, always write them in package scope
+    outputPath = path.join(basePackageDir, outputPath);
+    fs.writeFileSync(outputPath, scssFileContent);
+    console.log(`SCSS file generated successfully at ${outputPath}`);
+  } catch (err) {
+    console.error(`Error writing SCSS file: ${err.message}`);
+  }
+};
+
+const getFontFormat = (format) => {
+  const formatMap = {
+    "ttf": "format(\"truetype\")",
+    "otf": "format(\"opentype\")",
+    "woff": "format(\"woff\")",
+    "woff2": "format(\"woff2\")",
+  };
+  return formatMap[format] || "";
+};
+
+const getFontSrc = (fontPath) => fontPath.replace(/^\/static/, "");
+
+const generateFontFace = (fontFamily, fontData, fontWeight) => {
+  if (!fontFamily || !fontData || !fontData.fontFile || !fontData.fontFormat) return "";
+
+  const { fontFile, fontFormat } = fontData;
+  return `@font-face {
+  font-family: "${fontFamily}";
+  src: url("${getFontSrc(fontFile)}") ${getFontFormat(fontFormat)};
+  font-weight: ${fontWeight};
+}`;
+};
+
+const generateFontScssFile = (fontsData) => {
+  if (!fontsData || !fontsData.fontFamily || !fontsData.regularFont || !fontsData.boldFont) return null;
+
+  const { fontFamily, regularFont, boldFont } = fontsData;
+
+  if (!regularFont.fontFile || !regularFont.fontFormat) return null;
+  if (!boldFont.fontFile || !boldFont.fontFormat) return null;
+
+  const regularFontFace = generateFontFace(fontFamily, regularFont, "normal");
+  const boldFontFace = generateFontFace(fontFamily, boldFont, "bold");
+
+  return `$font-family: "${fontFamily}";
+
+:root {
+  --font_family: "${fontFamily}" !important;
+}
+
+${regularFontFace}
+${boldFontFace}
+  
+%font-regular {
+  font-family: var(--font_family);
+  font-weight: 400;
+}
+
+%font-semi {
+  font-family: var(--font_family);
+  font-weight: 600;
+}
+
+%font-bold {
+  font-family: var(--font_family);
+  font-weight: 700;
+}`;
+};
+
+const generateColorsScssFile = (colorsData) => {
+  const mergedColorsData = { ...DEFAULT_COLORS_DATA, ...colorsData };
+
+  let colorVars = "";
+  for (const [key, value] of Object.entries(mergedColorsData)) {
+    colorVars += `$${key}: ${value};\n`;
+  }
+
+  const rootColors = `
+:root {
+  --color_primary: #{$color_primary};
+  --color_primary_contrast: #{$color_primary_contrast};
+  --color_secondary: #{$color_secondary};
+  --color_secondary_contrast: #{$color_secondary_contrast};
+  --color_text_dark: #{$color_text_dark};
+  --color_text_med: #{$color_text_med};
+  --color_text_light: #{$color_text_light};
+  --color_background_light: #{$color_background_light};
+  --color_background_dark: #{$color_background_dark};
+  --color_gray_darker: #{$color_gray_darker};
+  --color_gray_dark: #{$color_gray_dark};
+  --color_gray_light: #{$color_gray_light};
+  --color_gray_lighter: #{$color_gray_lighter};
+  --color_input_text_color: #{$color_input_text_color_light};
+  --color_input_background_color: #{$color_input_background_color_light};
+  --color_input_border_color: #{$color_input_border_color_light};
+  --color_text_input_hints: #{$color_text_input_hints_light};
+  --color_horizontal_rule: #{$color_horizontal_rule_light};
+  --color_icon_light: #{$color_icon_light};
+  --color_button_background_color: #{$color_button_background_color};
+  --color_button_color: #{$color_button_color};
+  --color_alerts: #{$color_alerts};
+}`;
+
+  const darkThemeColors = `
+html[data-theme="DARK"] {
+  --color_text_dark: #{$color_text_light} !important;
+  --color_text_light: #{$color_text_dark} !important;
+  --color_background_light: #{$color_background_dark} !important;
+  --color_background_dark: #{$color_background_light} !important;
+  --color_gray_darker: #{$color_gray_lighter} !important;
+  --color_gray_dark: #{$color_gray_light} !important;
+  --color_gray_light: #{$color_gray_dark} !important;
+  --color_gray_lighter: #{$color_gray_darker} !important;
+  --color_input_text_color: #{$color_input_text_color_dark} !important;
+  --color_input_background_color: #{$color_input_background_color_dark} !important;
+  --color_input_border_color: #{$color_input_border_color_dark} !important;
+  --color_text_input_hints: #{$color_text_input_hints_dark} !important;
+  --color_horizontal_rule: #{$color_horizontal_rule_dark} !important;
+}`;
+
+  return `${colorVars}${rootColors}${darkThemeColors}`;
+};
+
+module.exports = {
+  generateAndWriteScssFile,
+  generateFontScssFile,
+  generateColorsScssFile
+};

package/src/utils/useSiteSettings.js

@@ -10,11 +10,7 @@ const siteSettingsQuery = graphql`
         title,
         description,
         image {
-          childImageSharp {
-            gatsbyImageData (
-              quality: 100
-            )
-          }
+          publicURL
         }
       }
       widgets {

package/src/utils/cssUtils.js

@@ -1,62 +0,0 @@
-const getFontFormat = (format) => {
-  const formatMap = {
-    "ttf": "format(\"truetype\")",
-    "otf": "format(\"opentype\")",
-    "woff": "format(\"woff\")",
-    "woff2": "format(\"woff2\")",
-  };
-  return formatMap[format] || "";
-};
-
-const getFontSrc = (fontPath) => fontPath.replace(/^\/static/, "");
-
-const generateFontFace = (fontFamily, fontData, fontWeight) => {
-  if (!fontFamily || !fontData || !fontData.fontFile || !fontData.fontFormat) return "";
-
-  const { fontFile, fontFormat } = fontData;
-  return `@font-face {
-  font-family: "${fontFamily}";
-  src: url("${getFontSrc(fontFile)}") ${getFontFormat(fontFormat)};
-  font-weight: ${fontWeight};
-}`;
-};
-
-const generateFontFile = (fontsData) => {
-  if (!fontsData || !fontsData.fontFamily || !fontsData.regularFont || !fontsData.boldFont) return null;
-
-  const { fontFamily, regularFont, boldFont } = fontsData;
-
-  if (!regularFont.fontFile || !regularFont.fontFormat) return null;
-  if (!boldFont.fontFile || !boldFont.fontFormat) return null;
-
-  const regularFontFace = generateFontFace(fontFamily, regularFont, "normal");
-  const boldFontFace = generateFontFace(fontFamily, boldFont, "bold");
-
-  return `$font-family: "${fontFamily}";
-
-:root {
-  --font_family: "${fontFamily}" !important;
-}
-
-${regularFontFace}
-${boldFontFace}
-  
-%font-regular {
-  font-family: var(--font_family);
-  font-weight: 400;
-}
-
-%font-semi {
-  font-family: var(--font_family);
-  font-weight: 600;
-}
-
-%font-bold {
-  font-family: var(--font_family);
-  font-weight: 700;
-}`;
-};
-
-module.exports = {
-  generateFontFile
-};