Updated site preview to handle theme settings

refs https://github.com/TryGhost/Team/issues/3354 - wires theme settings to site preview frame, dynamically updating the preview when theme settings change
TryGhost · Jun 9, 2023 · eaf5aaa · eaf5aaa
1 parent f7e2f82
commit eaf5aaa
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/ghost/admin-x-settings/src/components/settings/site/DesignModal.tsx b/ghost/admin-x-settings/src/components/settings/site/DesignModal.tsx
@@ -115,7 +115,8 @@ const DesignModal: React.FC = () => {
                     accentColor,
                     icon,
                     logo,
-                    coverImage
+                    coverImage,
+                    themeSettings
                 }}
             />
         }

diff --git a/ghost/admin-x-settings/src/components/settings/site/designAndBranding/ThemePreivew.tsx b/ghost/admin-x-settings/src/components/settings/site/designAndBranding/ThemePreivew.tsx
@@ -1,12 +1,14 @@
 import React, {useEffect, useRef} from 'react';
 import useSettingGroup from '../../../../hooks/useSettingGroup';
+import {CustomThemeSetting} from '../../../../types/api';
 
 type BrandSettings = {
-    description: string,
-    accentColor: string,
-    icon: string,
-    logo: string,
-    coverImage: string
+    description: string;
+    accentColor: string;
+    icon: string;
+    logo: string;
+    coverImage: string;
+    themeSettings: Array<CustomThemeSetting & { dirty?: boolean }>;
 }
 
 interface ThemePreviewProps {
@@ -29,14 +31,29 @@ function getPreviewData({
     accentColor,
     icon,
     logo,
-    coverImage
-}: BrandSettings): string {
+    coverImage,
+    themeSettings
+}: {
+    description: string;
+    accentColor: string;
+    icon: string;
+    logo: string;
+    coverImage: string;
+    themeSettings: Array<CustomThemeSetting & { dirty?: boolean }>,
+}): string {
     const params = new URLSearchParams();
     params.append('c', accentColor);
     params.append('d', description);
     params.append('icon', icon);
     params.append('logo', logo);
     params.append('cover', coverImage);
+    const themeSettingsObj: {
+        [key: string]: string;
+    } = {};
+    themeSettings.forEach((setting) => {
+        themeSettingsObj[setting.key] = setting.value as string;
+    });
+    params.append('custom', JSON.stringify(themeSettingsObj));
 
     return params.toString();
 }