feat: load themes from content on published pages (#83)

yext · Oct 11, 2024 · eb01dbb · eb01dbb
1 parent ac76886
commit eb01dbb
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 13 deletions.
diff --git a/src/utils/applyTheme.test.ts b/src/utils/applyTheme.test.ts
@@ -4,7 +4,19 @@ import { ThemeConfig } from "./themeResolver.ts";
 
 describe("buildCssOverridesStyle", () => {
   it("should generate correct CSS with one override in c_theme", () => {
-    const document: Document = { c_theme: { "--colors-text": "red" } };
+    const document: Document = {
+      siteId: 123,
+      _site: {
+        pagesTheme: [
+          {
+            themeConfiguration: {
+              data: JSON.stringify({ "--colors-text": "red" }),
+              siteId: 123,
+            },
+          },
+        ],
+      },
+    };
     const result = applyTheme(document, themeConfig);
 
     expect(result).toBe(
@@ -20,12 +32,23 @@ describe("buildCssOverridesStyle", () => {
 
   it("should generate correct CSS with multiple overrides in c_theme", () => {
     const document: Document = {
-      c_theme: {
-        "--colors-primary-DEFAULT": "hsl(0 68% 51%)",
-        "--colors-primary-foreground": "hsl(0 0% 100%)",
-        "--borderRadius-lg": "20px",
+      siteId: 123,
+      _site: {
+        pagesTheme: [
+          {
+            themeConfiguration: {
+              data: JSON.stringify({
+                "--colors-primary-DEFAULT": "hsl(0 68% 51%)",
+                "--colors-primary-foreground": "hsl(0 0% 100%)",
+                "--borderRadius-lg": "20px",
+              }),
+              siteId: 123,
+            },
+          },
+        ],
       },
     };
+
     const result = applyTheme(document, themeConfig);
 
     expect(result).toBe(
@@ -61,10 +84,16 @@ describe("buildCssOverridesStyle", () => {
   });
 
   it("should ignore saved values that are no longer in the themeConfig", () => {
-    const result = applyTheme(
-      { c_theme: { "--abddef": "red" } } as Document,
-      themeConfig
-    );
+    const document: Document = {
+      _site: {
+        pagesTheme: [
+          {
+            themeConfiguration: { data: JSON.stringify({ "--absdag": "red" }) },
+          },
+        ],
+      },
+    };
+    const result = applyTheme(document, themeConfig);
 
     expect(result).toBe(
       '<style id="visual-editor-theme" type="text/css">.components{' +

diff --git a/src/utils/applyTheme.ts b/src/utils/applyTheme.ts
@@ -2,7 +2,6 @@ import { internalThemeResolver } from "../internal/utils/internalThemeResolver.t
 import { SavedTheme, ThemeConfig } from "./themeResolver.ts";
 
 export type Document = {
-  c_theme?: SavedTheme;
   [key: string]: any;
 };
 
@@ -13,8 +12,31 @@ export const applyTheme = (
   themeConfig: ThemeConfig,
   base?: string
 ): string => {
-  const overrides = document.c_theme;
-  const themeValues = internalThemeResolver(themeConfig, overrides);
+  const savedThemes: Record<string, any>[] = document?._site?.pagesTheme;
+
+  let savedTheme;
+  if (savedThemes?.length > 0) {
+    savedTheme =
+      document.siteId !== 0
+        ? savedThemes.find(
+            (theme) => theme.themeConfiguration.siteId === document.siteId
+          )
+        : savedThemes[0]; // siteId is not set on local data documents, so default to the first one
+  }
+
+  let overrides;
+  if (savedTheme?.themeConfiguration) {
+    overrides = JSON.parse(savedTheme.themeConfiguration?.data);
+  }
+  return internalApplyTheme(overrides, themeConfig, base);
+};
+
+const internalApplyTheme = (
+  savedThemeValues: Record<string, any>,
+  themeConfig: ThemeConfig,
+  base?: string
+): string => {
+  const themeValues = internalThemeResolver(themeConfig, savedThemeValues);
 
   if (!themeValues || Object.keys(themeValues).length === 0) {
     return base ?? "";
@@ -39,7 +61,7 @@ export const updateThemeInEditor = (
     const styleOverride =
       previewFrame?.contentDocument?.getElementById(THEME_STYLE_TAG_ID);
     if (styleOverride) {
-      styleOverride.outerHTML = applyTheme({ c_theme: newTheme }, themeConfig);
+      styleOverride.outerHTML = internalApplyTheme(newTheme, themeConfig);
     }
   }
 };