feat(waas-engine): add dynamic site config schema and slotId placement types
This commit is contained in:
Daniel S
199
src/utils/configLoader.ts
Normal file
199
src/utils/configLoader.ts
Normal file
@@ -0,0 +1,199 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
export interface UIComponent {
|
||||
id: string; // Eindeutige ID (z.B. uuid / timestamp)
|
||||
slotId: string; // Platz-ID (z.B. 'hero-badge-slot', 'hero-actions-slot', 'bento-slot-1')
|
||||
orderIndex?: number; // Position / Reihenfolge auf dem Platz
|
||||
type: 'button' | 'badge' | 'text' | 'card' | 'accordion' | 'stat-box' | 'testimonial' | 'cta-box';
|
||||
content: string;
|
||||
link?: string;
|
||||
animation0?: string; // e.g. 'spring-fade', 'hover-bounce', 'pulse-glow'
|
||||
style?: 'primary' | 'secondary' | 'outline' | 'glass';
|
||||
}
|
||||
|
||||
export interface SectionConfig {
|
||||
id: string;
|
||||
type: 'hero' | 'bento' | 'contact' | 'custom';
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
badge?: string;
|
||||
elements?: UIComponent[];
|
||||
}
|
||||
|
||||
export interface SiteConfig {
|
||||
siteName: string;
|
||||
metaDescription: string;
|
||||
hero: {
|
||||
badge: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
ctaPrimaryText: string;
|
||||
ctaPrimaryLink: string;
|
||||
ctaSecondaryText: string;
|
||||
ctaSecondaryLink: string;
|
||||
elements?: UIComponent[];
|
||||
};
|
||||
bento: {
|
||||
sectionTitle: string;
|
||||
sectionSubtitle: string;
|
||||
cards: Array<{
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
colSpan?: number;
|
||||
badge?: string;
|
||||
icon?: string;
|
||||
}>;
|
||||
};
|
||||
contact: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
recipientEmail: string;
|
||||
phone?: string;
|
||||
address?: string;
|
||||
};
|
||||
sectionsOrder: string[];
|
||||
sectionsDetails?: SectionConfig[];
|
||||
}
|
||||
|
||||
export interface ThemeConfig {
|
||||
activePreset: string;
|
||||
customColors?: {
|
||||
bg?: string;
|
||||
accent?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface SmtpConfig {
|
||||
host: string;
|
||||
port: number;
|
||||
secure: boolean;
|
||||
user: string;
|
||||
pass: string;
|
||||
fromName: string;
|
||||
fromEmail: string;
|
||||
isConfigured: boolean;
|
||||
}
|
||||
|
||||
export const FALLBACK_SITE_CONFIG: SiteConfig = {
|
||||
siteName: 'N&D IT Solutions',
|
||||
metaDescription: 'High-Performance Webdesign & Digital Solutions - 100% DSGVO-konform.',
|
||||
hero: {
|
||||
badge: ' Waas Enterprise Baukastensystem',
|
||||
title: 'Maßgeschneiderte Webseiten. Digital im Griff.',
|
||||
subtitle: 'Wir entwickeln blitzschnelle, DSGVO-konforme High-End Webseiten für Ihr Unternehmen zum monatlichen Festpreis – inklusive Wartung & Hosting.',
|
||||
ctaPrimaryText: 'Projekt anfragen',
|
||||
ctaPrimaryLink: '#contact',
|
||||
ctaSecondaryText: 'Mehr erfahren',
|
||||
ctaSecondaryLink: '#services',
|
||||
elements: [
|
||||
{ id: 'el-1', type: 'badge', content: ' WaaS Engine' },
|
||||
{ id: 'el-2', type: 'button', content: 'Neuer Button', link: '#contact', animation0: 'spring-fade', style: 'primary' }
|
||||
]
|
||||
},
|
||||
bento: {
|
||||
sectionTitle: 'High-End Features & Leistung',
|
||||
sectionSubtitle: 'Modernste Technologie & Höchster Datenschutz vereint.',
|
||||
cards: [
|
||||
{
|
||||
id: 'card-1',
|
||||
title: 'Ultra Fast SSR',
|
||||
description: 'Sub-100ms Ladezeiten dank Astro Hybrid SSR Architecture. Google Core Web Vitals > 95%.',
|
||||
colSpan: 2,
|
||||
badge: 'Performance',
|
||||
icon: 'zap'
|
||||
},
|
||||
{
|
||||
id: 'card-2',
|
||||
title: '100% DSGVO-Sicher',
|
||||
description: 'Keine Cookies, keine Tracking-Skripte, Zero Third-Party Requests.',
|
||||
colSpan: 1,
|
||||
badge: 'Datenschutz',
|
||||
icon: 'shield'
|
||||
},
|
||||
{
|
||||
id: 'card-3',
|
||||
title: 'Liquid Glass UI',
|
||||
description: 'Moderne <20> sthetik mit matte Boxen, Aurora Glows und physikalischen Kanten-Effekten.',
|
||||
colSpan: 1,
|
||||
badge: 'Design',
|
||||
icon: 'layers'
|
||||
},
|
||||
{
|
||||
id: 'card-4',
|
||||
title: 'Sorgenfrei-Paket',
|
||||
description: 'Hosting, SSL, Wartung und regelmäßige Inhalts-Updates komplett inklusive.',
|
||||
colSpan: 2,
|
||||
badge: 'Full-Service',
|
||||
icon: 'check'
|
||||
}
|
||||
]
|
||||
},
|
||||
contact: {
|
||||
title: 'Bereit für Ihr Projekt?',
|
||||
subtitle: 'Schreiben Sie uns direkt. Wir antworten innerhalb von 24 Stunden persúnlich.',
|
||||
recipientEmail: 'kontakt@ndsolutions.de',
|
||||
phone: '+49 (0) 123 456789',
|
||||
address: 'Deutschland'
|
||||
},
|
||||
sectionsOrder: ['hero', 'bento', 'contact'],
|
||||
sectionsDetails: [
|
||||
{ id: 'hero', type: 'hero', title: 'Hero Sektion', elements: [ {id: 'el-1', type: 'badge', content: ' WaaS Engine' } ] },
|
||||
{ id: 'bento', type: 'bento', title: 'Bento Grid', elements: [] },
|
||||
{ id: 'contact', type: 'contact', title: 'Contact Section', elements: [] }
|
||||
]
|
||||
};
|
||||
|
||||
export const FALLBACK_THEME_CONFIG: ThemeConfig = {
|
||||
activePreset: 'corporateDark'
|
||||
};
|
||||
|
||||
export const FALLBACK_SMTP_CONFIG: SmtpConfig = {
|
||||
host: 'smtp.placeholder.local',
|
||||
port: 587,
|
||||
secure: false,
|
||||
user: 'placeholder@domain.de',
|
||||
pass: '****',
|
||||
fromName: 'N&D IT Solutions System',
|
||||
fromEmail: 'noreply@ndsolutions.de',
|
||||
isConfigured: false
|
||||
};
|
||||
|
||||
function readJsonFile<T>(filePath: string, fallback: T): T {
|
||||
try {
|
||||
if (!fs.existsSync(filePath)) {
|
||||
return fallback;
|
||||
}
|
||||
const content = fs.readFileSync(filePath, 'utf-8');
|
||||
if (!content.trim()) {
|
||||
return fallback;
|
||||
}
|
||||
const parsed = JSON.parse(content);
|
||||
return { ...fallback, ...parsed };
|
||||
} catch (error) {
|
||||
console.warn(`[WaaS ConfigLoader] Warning loading ${filePath}, using fallback defaults.`, error);
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
export function loadWaasConfigs() {
|
||||
const dataDir = process.env.DATA_DIR || path.join(process.cwd(), 'app', 'data');
|
||||
const sitePath = path.join(dataDir, 'site.config.json');
|
||||
const themePath = path.join(dataDir, 'theme.config.json');
|
||||
const smtpPath = path.join(dataDir, 'smtp.config.json');
|
||||
|
||||
const rawSite = readJsonFile<Partial<SiteConfig>>(sitePath, FALLBACK_SITE_CONFIG);
|
||||
const siteConfig: SiteConfig = {
|
||||
...FALLBACK_SITE_CONFIG,
|
||||
...rawSite,
|
||||
hero: { ...FALLBACK_SITE_CONFIG.hero, ...(rawSite.hero || {}) },
|
||||
bento: { ...FALLBACK_SITE_CONFIG.bento, ...(rawSite.bento || {}) },
|
||||
contact: { ...FALLBACK_SITE_CONFIG.contact, ...(rawSite.contact || {}) }
|
||||
};
|
||||
|
||||
const themeConfig = readJsonFile<ThemeConfig>(themePath, FALLBACK_THEME_CONFIG);
|
||||
const smtpConfig = readJsonFile<SmtpConfig>(smtpPath, FALLBACK_SMTP_CONFIG);
|
||||
|
||||
return { siteConfig, themeConfig, smtpConfig };
|
||||
}
|
||||
124
src/utils/themePresets.ts
Normal file
124
src/utils/themePresets.ts
Normal file
@@ -0,0 +1,124 @@
|
||||
export interface ThemePreset {
|
||||
id: string;
|
||||
name: string;
|
||||
colors: {
|
||||
bg: string;
|
||||
cardBg: string;
|
||||
text: string;
|
||||
accent: string;
|
||||
border: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const THEME_PRESETS: Record<string, ThemePreset> = {
|
||||
corporateDark: {
|
||||
id: 'corporateDark',
|
||||
name: 'Corporate Dark Mode',
|
||||
colors: {
|
||||
bg: '#0B0F19',
|
||||
cardBg: 'rgba(15, 23, 42, 0.4)',
|
||||
text: '#F8FAFC',
|
||||
accent: '#38BDF8',
|
||||
border: 'rgba(255, 255, 255, 0.1)'
|
||||
}
|
||||
},
|
||||
cyberNeon: {
|
||||
id: 'cyberNeon',
|
||||
name: 'Cyber Neon',
|
||||
colors: {
|
||||
bg: '#05050A',
|
||||
cardBg: 'rgba(10, 10, 25, 0.5)',
|
||||
text: '#FFFFFF',
|
||||
accent: '#F43F5E',
|
||||
border: 'rgba(244, 63, 94, 0.2)'
|
||||
}
|
||||
},
|
||||
emeraldCraft: {
|
||||
id: 'emeraldCraft',
|
||||
name: 'Emerald Craft',
|
||||
colors: {
|
||||
bg: '#022C22',
|
||||
cardBg: 'rgba(6, 78, 59, 0.4)',
|
||||
text: '#ECFDF5',
|
||||
accent: '#34D399',
|
||||
border: 'rgba(52, 211, 153, 0.2)'
|
||||
}
|
||||
},
|
||||
royalViolet: {
|
||||
id: 'royalViolet',
|
||||
name: 'Royal Violet',
|
||||
colors: {
|
||||
bg: '#0F0728',
|
||||
cardBg: 'rgba(30, 15, 65, 0.4)',
|
||||
text: '#FAF5FF',
|
||||
accent: '#A855F7',
|
||||
border: 'rgba(168, 85, 247, 0.2)'
|
||||
}
|
||||
},
|
||||
midnightBlue: {
|
||||
id: 'midnightBlue',
|
||||
name: 'Midnight Blue',
|
||||
colors: {
|
||||
bg: '#030712',
|
||||
cardBg: 'rgba(17, 24, 39, 0.5)',
|
||||
text: '#F9FAFB',
|
||||
accent: '#60A5FA',
|
||||
border: 'rgba(96, 165, 250, 0.2)'
|
||||
}
|
||||
},
|
||||
amberGlow: {
|
||||
id: 'amberGlow',
|
||||
name: 'Amber Glow',
|
||||
colors: {
|
||||
bg: '#180E02',
|
||||
cardBg: 'rgba(45, 26, 8, 0.5)',
|
||||
text: '#FFFBEB',
|
||||
accent: '#F59E0B',
|
||||
border: 'rgba(245, 158, 11, 0.2)'
|
||||
}
|
||||
},
|
||||
monochromeMinimal: {
|
||||
id: 'monochromeMinimal',
|
||||
name: 'Monochrome Minimal',
|
||||
colors: {
|
||||
bg: '#121212',
|
||||
cardBg: 'rgba(255, 255, 255, 0.05)',
|
||||
text: '#E0E0E0',
|
||||
accent: '#FFFFFF',
|
||||
border: 'rgba(255, 255, 255, 0.15)'
|
||||
}
|
||||
},
|
||||
arcticFrost: {
|
||||
id: 'arcticFrost',
|
||||
name: 'Arctic Frost',
|
||||
colors: {
|
||||
bg: '#0B132B',
|
||||
cardBg: 'rgba(28, 37, 65, 0.4)',
|
||||
text: '#E0FBFC',
|
||||
accent: '#70E000',
|
||||
border: 'rgba(112, 224, 0, 0.2)'
|
||||
}
|
||||
},
|
||||
sunsetCoral: {
|
||||
id: 'sunsetCoral',
|
||||
name: 'Sunset Coral',
|
||||
colors: {
|
||||
bg: '#1C0A10',
|
||||
cardBg: 'rgba(50, 15, 28, 0.4)',
|
||||
text: '#FFF1F2',
|
||||
accent: '#FB7185',
|
||||
border: 'rgba(251, 113, 133, 0.2)'
|
||||
}
|
||||
},
|
||||
titaniumSteel: {
|
||||
id: 'titaniumSteel',
|
||||
name: 'Titanium Steel',
|
||||
colors: {
|
||||
bg: '#18181B',
|
||||
cardBg: 'rgba(39, 39, 42, 0.5)',
|
||||
text: '#F4F4F5',
|
||||
accent: '#A1A1AA',
|
||||
border: 'rgba(161, 161, 170, 0.2)'
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user