autoblog/Marketing_Digital
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: ThemeListener now overrides fonts universally and fetches supabase settings on external load

Browse source
This commit is contained in:
AI Studio 2026-05-19 22:04:33 +00:00
parent 76497b2b59
commit 8b13411ae8
2 changed files with 60 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
Template-01/src/components/layout/ThemeListener.tsx
View file

@ -1,12 +1,11 @@
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
export function ThemeListener() {
useEffect(() => {
const handleMessage = (event: any) => {
if (event.data?.type === 'UPDATE_APPEARANCE') {
const settings = event.data.settings;
if (!settings) return;
const [init, setInit] = useState(false);
useEffect(() => {
const applySettings = (settings: any) => {
if (!settings) return;
let css = '';
if (settings.primaryColor) {
@ -49,7 +48,7 @@ export function ThemeListener() {
"--font-serif: \"" + settings.fontFamily + "\", serif !important; " +
"--font-mono: \"" + settings.fontFamily + "\", monospace !important; " +
"} " +
"body, h1, h2, h3, h4, h5, h6, .font-serif, .font-sans, .font-mono, p, span, a, button { " +
"* { " +
"font-family: \"" + settings.fontFamily + "\", sans-serif !important; " +
"}";
}
@ -61,12 +60,34 @@ export function ThemeListener() {
document.head.appendChild(styleNode);
}
styleNode.innerHTML = css;
};
const handleMessage = (event: any) => {
if (event.data?.type === 'UPDATE_APPEARANCE') {
applySettings(event.data.settings);
}
};
window.addEventListener('message', handleMessage);
if (!init) {
setInit(true);
const host = window.location.hostname;
const SUPABASE_URL = 'https://ccfezpxxmwpngqhlsbxz.supabase.co';
const SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNjZmV6cHh4bXdwbmdxaGxzYnh6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzU2ODk4NTcsImV4cCI6MjA5MTI2NTg1N30.TqXoUsunJoX9xQwOOq3PTugltyrMGn1OrZysO6C9hRM';
fetch(SUPABASE_URL + '/rest/v1/sites?select=settings&custom_domain=ilike.*' + host + '*', {
headers: {
'apikey': SUPABASE_KEY,
'Authorization': 'Bearer ' + SUPABASE_KEY
}
}).then(r => r.json()).then(data => {
if (data && data.length > 0 && data[0].settings) {
applySettings(data[0].settings);
}
}).catch(err => console.error('Theme fetch error:', err));
}
return () => window.removeEventListener('message', handleMessage);
}, []);
}, [init]);
return null;
}

39
Template-02/src/components/layout/ThemeListener.tsx
View file

@ -1,12 +1,11 @@
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
export function ThemeListener() {
useEffect(() => {
const handleMessage = (event: any) => {
if (event.data?.type === 'UPDATE_APPEARANCE') {
const settings = event.data.settings;
if (!settings) return;
const [init, setInit] = useState(false);
useEffect(() => {
const applySettings = (settings: any) => {
if (!settings) return;
let css = '';
if (settings.primaryColor) {
@ -49,7 +48,7 @@ export function ThemeListener() {
"--font-serif: \"" + settings.fontFamily + "\", serif !important; " +
"--font-mono: \"" + settings.fontFamily + "\", monospace !important; " +
"} " +
"body, h1, h2, h3, h4, h5, h6, .font-serif, .font-sans, .font-mono, p, span, a, button { " +
"* { " +
"font-family: \"" + settings.fontFamily + "\", sans-serif !important; " +
"}";
}
@ -61,12 +60,34 @@ export function ThemeListener() {
document.head.appendChild(styleNode);
}
styleNode.innerHTML = css;
};
const handleMessage = (event: any) => {
if (event.data?.type === 'UPDATE_APPEARANCE') {
applySettings(event.data.settings);
}
};
window.addEventListener('message', handleMessage);
if (!init) {
setInit(true);
const host = window.location.hostname;
const SUPABASE_URL = 'https://ccfezpxxmwpngqhlsbxz.supabase.co';
const SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNjZmV6cHh4bXdwbmdxaGxzYnh6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzU2ODk4NTcsImV4cCI6MjA5MTI2NTg1N30.TqXoUsunJoX9xQwOOq3PTugltyrMGn1OrZysO6C9hRM';
fetch(SUPABASE_URL + '/rest/v1/sites?select=settings&custom_domain=ilike.*' + host + '*', {
headers: {
'apikey': SUPABASE_KEY,
'Authorization': 'Bearer ' + SUPABASE_KEY
}
}).then(r => r.json()).then(data => {
if (data && data.length > 0 && data[0].settings) {
applySettings(data[0].settings);
}
}).catch(err => console.error('Theme fetch error:', err));
}
return () => window.removeEventListener('message', handleMessage);
}, []);
}, [init]);
return null;
}