autoblog/Seo
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:43 +00:00
parent 65a76278b1
commit 92c87909d9
4 changed files with 120 additions and 36 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() { export function ThemeListener() {
useEffect(() => { const [init, setInit] = useState(false);
const handleMessage = (event: any) => {
if (event.data?.type === 'UPDATE_APPEARANCE') {
const settings = event.data.settings;
if (!settings) return;
useEffect(() => {
const applySettings = (settings: any) => {
if (!settings) return;
let css = ''; let css = '';
if (settings.primaryColor) { if (settings.primaryColor) {
@ -49,7 +48,7 @@ export function ThemeListener() {
"--font-serif: \"" + settings.fontFamily + "\", serif !important; " + "--font-serif: \"" + settings.fontFamily + "\", serif !important; " +
"--font-mono: \"" + settings.fontFamily + "\", monospace !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; " + "font-family: \"" + settings.fontFamily + "\", sans-serif !important; " +
"}"; "}";
} }
@ -61,12 +60,34 @@ export function ThemeListener() {
document.head.appendChild(styleNode); document.head.appendChild(styleNode);
} }
styleNode.innerHTML = css; styleNode.innerHTML = css;
};
const handleMessage = (event: any) => {
if (event.data?.type === 'UPDATE_APPEARANCE') {
applySettings(event.data.settings);
} }
}; };
window.addEventListener('message', handleMessage); 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); return () => window.removeEventListener('message', handleMessage);
}, []); }, [init]);
return null; 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() { export function ThemeListener() {
useEffect(() => { const [init, setInit] = useState(false);
const handleMessage = (event: any) => {
if (event.data?.type === 'UPDATE_APPEARANCE') {
const settings = event.data.settings;
if (!settings) return;
useEffect(() => {
const applySettings = (settings: any) => {
if (!settings) return;
let css = ''; let css = '';
if (settings.primaryColor) { if (settings.primaryColor) {
@ -49,7 +48,7 @@ export function ThemeListener() {
"--font-serif: \"" + settings.fontFamily + "\", serif !important; " + "--font-serif: \"" + settings.fontFamily + "\", serif !important; " +
"--font-mono: \"" + settings.fontFamily + "\", monospace !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; " + "font-family: \"" + settings.fontFamily + "\", sans-serif !important; " +
"}"; "}";
} }
@ -61,12 +60,34 @@ export function ThemeListener() {
document.head.appendChild(styleNode); document.head.appendChild(styleNode);
} }
styleNode.innerHTML = css; styleNode.innerHTML = css;
};
const handleMessage = (event: any) => {
if (event.data?.type === 'UPDATE_APPEARANCE') {
applySettings(event.data.settings);
} }
}; };
window.addEventListener('message', handleMessage); 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); return () => window.removeEventListener('message', handleMessage);
}, []); }, [init]);
return null; return null;
} }

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

@ -1,12 +1,11 @@
import { useEffect } from 'react'; import { useEffect, useState } from 'react';
export function ThemeListener() { export function ThemeListener() {
useEffect(() => { const [init, setInit] = useState(false);
const handleMessage = (event: any) => {
if (event.data?.type === 'UPDATE_APPEARANCE') {
const settings = event.data.settings;
if (!settings) return;
useEffect(() => {
const applySettings = (settings: any) => {
if (!settings) return;
let css = ''; let css = '';
if (settings.primaryColor) { if (settings.primaryColor) {
@ -49,7 +48,7 @@ export function ThemeListener() {
"--font-serif: \"" + settings.fontFamily + "\", serif !important; " + "--font-serif: \"" + settings.fontFamily + "\", serif !important; " +
"--font-mono: \"" + settings.fontFamily + "\", monospace !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; " + "font-family: \"" + settings.fontFamily + "\", sans-serif !important; " +
"}"; "}";
} }
@ -61,12 +60,34 @@ export function ThemeListener() {
document.head.appendChild(styleNode); document.head.appendChild(styleNode);
} }
styleNode.innerHTML = css; styleNode.innerHTML = css;
};
const handleMessage = (event: any) => {
if (event.data?.type === 'UPDATE_APPEARANCE') {
applySettings(event.data.settings);
} }
}; };
window.addEventListener('message', handleMessage); 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); return () => window.removeEventListener('message', handleMessage);
}, []); }, [init]);
return null; return null;
} }

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

@ -1,12 +1,11 @@
import { useEffect } from 'react'; import { useEffect, useState } from 'react';
export function ThemeListener() { export function ThemeListener() {
useEffect(() => { const [init, setInit] = useState(false);
const handleMessage = (event: any) => {
if (event.data?.type === 'UPDATE_APPEARANCE') {
const settings = event.data.settings;
if (!settings) return;
useEffect(() => {
const applySettings = (settings: any) => {
if (!settings) return;
let css = ''; let css = '';
if (settings.primaryColor) { if (settings.primaryColor) {
@ -49,7 +48,7 @@ export function ThemeListener() {
"--font-serif: \"" + settings.fontFamily + "\", serif !important; " + "--font-serif: \"" + settings.fontFamily + "\", serif !important; " +
"--font-mono: \"" + settings.fontFamily + "\", monospace !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; " + "font-family: \"" + settings.fontFamily + "\", sans-serif !important; " +
"}"; "}";
} }
@ -61,12 +60,34 @@ export function ThemeListener() {
document.head.appendChild(styleNode); document.head.appendChild(styleNode);
} }
styleNode.innerHTML = css; styleNode.innerHTML = css;
};
const handleMessage = (event: any) => {
if (event.data?.type === 'UPDATE_APPEARANCE') {
applySettings(event.data.settings);
} }
}; };
window.addEventListener('message', handleMessage); 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); return () => window.removeEventListener('message', handleMessage);
}, []); }, [init]);
return null; return null;
} }