@xosen/site-sdk 0.0.1

package/src/composables/useSkin.ts

@@ -0,0 +1,61 @@
+import { onMounted } from 'vue';
+
+import type { Skin } from '../types/skin.js';
+import type { SiteData } from '../types/config.js';
+
+/**
+ * Apply skin CSS custom properties to :root.
+ * Reads skin from __SITE_DATA__.skin or accepts explicit skin object.
+ */
+export function useSkin(skinOverride?: Skin) {
+  function applySkin(skin: Skin) {
+    const root = document.documentElement;
+
+    // Colors
+    if (skin.colors) {
+      for (const [key, value] of Object.entries(skin.colors)) {
+        if (value) root.style.setProperty(`--x-color-${camelToKebab(key)}`, value);
+      }
+    }
+
+    // Typography
+    if (skin.typography?.fontFamily) {
+      root.style.setProperty('--x-font-family', skin.typography.fontFamily);
+    }
+    if (skin.typography?.headingFont) {
+      root.style.setProperty('--x-font-heading', skin.typography.headingFont);
+    }
+    if (skin.typography?.baseFontSize) {
+      root.style.setProperty('--x-font-size', skin.typography.baseFontSize);
+    }
+
+    // Shape
+    if (skin.shape?.borderRadius) {
+      root.style.setProperty('--x-border-radius', skin.shape.borderRadius);
+    }
+    if (skin.shape?.maxWidth) {
+      root.style.setProperty('--x-max-width', skin.shape.maxWidth);
+    }
+  }
+
+  onMounted(() => {
+    if (skinOverride) {
+      applySkin(skinOverride);
+      return;
+    }
+
+    const siteData = (window as any).__SITE_DATA__ as SiteData | undefined;
+    const skin = siteData?.skin as Partial<Skin> | undefined;
+    if (skin && (skin.colors || skin.typography || skin.shape)) {
+      applySkin({
+        colors: skin.colors || {},
+        typography: skin.typography || {},
+        shape: skin.shape || {},
+      } as Skin);
+    }
+  });
+}
+
+function camelToKebab(str: string): string {
+  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}

package/src/index.ts

@@ -0,0 +1,42 @@
+// Layout
+export { default as XSiteLayout } from './components/layout/XSiteLayout.vue';
+export { default as XSiteNav } from './components/layout/XSiteNav.vue';
+export { default as XSiteFooter } from './components/layout/XSiteFooter.vue';
+
+// Blocks
+export { default as XBlockRenderer } from './components/blocks/XBlockRenderer.vue';
+export { default as XHeroBlock } from './components/blocks/XHeroBlock.vue';
+export { default as XHtmlBlock } from './components/blocks/XHtmlBlock.vue';
+export { default as XCardsBlock } from './components/blocks/XCardsBlock.vue';
+export { default as XImageTextBlock } from './components/blocks/XImageTextBlock.vue';
+export { default as XPricingBlock } from './components/blocks/XPricingBlock.vue';
+export { default as XContactsBlock } from './components/blocks/XContactsBlock.vue';
+
+// Common
+export { default as XLocaleSwitcher } from './components/common/XLocaleSwitcher.vue';
+
+// Composables
+export { useSiteData } from './composables/useSiteData.js';
+export { useSiteConfig } from './composables/useSiteConfig.js';
+export { useSkin } from './composables/useSkin.js';
+export { useSiteApi } from './composables/useSiteApi.js';
+
+// Worker
+export { createSiteWorker } from './worker/index.js';
+export type { WorkerEnv, WorkerConfig, PageData } from './worker/index.js';
+
+// Types
+export type {
+  Block,
+  BlockSettings,
+  HeroBlockData,
+  HtmlBlockData,
+  CardsBlockData,
+  ImageTextBlockData,
+  PricingBlockData,
+  ContactsBlockData,
+  GalleryBlockData,
+  MapBlockData,
+} from './types/blocks.js';
+export type { SiteConfig, NavItem, PageConfig, SiteData } from './types/config.js';
+export type { Skin } from './types/skin.js';

package/src/types/blocks.ts

@@ -0,0 +1,67 @@
+export interface BlockSettings {
+  visible?: boolean;
+  className?: string;
+  spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+export interface Block<T = any> {
+  type: string;
+  data?: T;
+  /** Alias for data — accepted for convenience */
+  props?: T;
+  settings?: BlockSettings & Record<string, any>;
+}
+
+export interface HeroBlockData {
+  title: string;
+  subtitle?: string;
+  image?: string;
+  overlay?: boolean;
+  buttons?: Array<{ text: string; url: string; variant?: 'primary' | 'outline' | 'white' }>;
+  stats?: Array<{ value: string; label: string }>;
+}
+
+export interface HtmlBlockData {
+  content: string;
+}
+
+export interface CardsBlockData {
+  title?: string;
+  subtitle?: string;
+  cards: Array<{
+    title: string;
+    desc: string;
+    icon?: string;
+    image?: string;
+    link?: string;
+  }>;
+}
+
+export interface ImageTextBlockData {
+  title?: string;
+  content?: string;
+  image?: string;
+  items?: Array<{ text: string; icon?: string }>;
+}
+
+export interface PricingBlockData {
+  title?: string;
+  subtitle?: string;
+}
+
+export interface ContactsBlockData {
+  title?: string;
+  showBankDetails?: boolean;
+}
+
+export interface GalleryBlockData {
+  title?: string;
+  images: Array<{ src: string; alt?: string; caption?: string }>;
+}
+
+export interface MapBlockData {
+  title?: string;
+  center: { lat: number; lng: number };
+  zoom?: number;
+  markers?: Array<{ lat: number; lng: number; label?: string }>;
+}

package/src/types/config.ts

@@ -0,0 +1,52 @@
+import type { Block } from './blocks.js';
+
+export interface SiteConfig {
+  template: string;
+  version: string;
+  skin: string;
+  autoUpdate?: boolean;
+
+  /** KV key prefix for tenant data (e.g. 'tenant:swi') */
+  tenantPrefix?: string;
+
+  branding: {
+    logo?: string;
+    favicon?: string;
+    siteName?: string;
+  };
+
+  navigation: NavItem[];
+
+  locales: string[];
+  defaultLocale: string;
+
+  footer?: {
+    copyright?: string;
+    links?: Array<{ text: string; url: string }>;
+  };
+
+  features?: Record<string, boolean | Record<string, any>>;
+}
+
+export interface NavItem {
+  text: string;
+  url: string;
+  external?: boolean;
+  children?: NavItem[];
+}
+
+export interface PageConfig {
+  title: string;
+  blocks: Block[];
+  meta?: {
+    description?: string;
+    ogTitle?: string;
+    ogImage?: string;
+  };
+}
+
+export interface SiteData {
+  config: SiteConfig;
+  locale: string;
+  [key: string]: any;
+}

package/src/types/skin.ts

@@ -0,0 +1,37 @@
+export interface Skin {
+  name: string;
+
+  colors: {
+    primary: string;
+    primaryDark?: string;
+    primaryLight?: string;
+    secondary?: string;
+    accent?: string;
+    background: string;
+    backgroundAlt?: string;
+    surface: string;
+    text: string;
+    textLight?: string;
+    border?: string;
+    success?: string;
+    error?: string;
+  };
+
+  typography: {
+    fontFamily: string;
+    headingFont?: string;
+    baseFontSize?: string;
+  };
+
+  shape: {
+    borderRadius: string;
+    cardElevation?: number;
+    maxWidth?: string;
+  };
+
+  components?: {
+    navbar?: { variant?: 'fixed' | 'static'; transparent?: boolean };
+    footer?: { variant?: 'dark' | 'light' };
+    hero?: { variant?: 'fullscreen' | 'compact'; overlay?: boolean };
+  };
+}

package/src/worker/create-site-worker.ts

@@ -0,0 +1,149 @@
+import type { WorkerEnv, WorkerConfig, PageData } from './types.js';
+
+const STATIC_EXT = /\.(js|css|png|jpg|jpeg|gif|svg|ico|woff2?|ttf|eot|webp|avif|map|json|txt|xml|webmanifest)$/;
+
+function detectLocale(request: Request, config: WorkerConfig): string {
+  const url = new URL(request.url);
+  const lang = url.searchParams.get('lang');
+  if (lang && config.supportedLocales?.includes(lang)) return lang;
+
+  if (config.supportedLocales?.length) {
+    const accept = request.headers.get('Accept-Language') || '';
+    for (const locale of config.supportedLocales) {
+      if (accept.includes(locale)) return locale;
+    }
+  }
+
+  return config.defaultLocale;
+}
+
+function handleContentApi(url: URL, env: WorkerEnv): Promise<Response> | null {
+  if (!url.pathname.startsWith('/api/content/')) return null;
+
+  const key = decodeURIComponent(url.pathname.replace('/api/content/', ''));
+  if (!key) {
+    return Promise.resolve(Response.json({ error: 'Key is required' }, { status: 400 }));
+  }
+
+  return (async () => {
+    const value = await env.SITE_CONTENT.get(key);
+    if (!value) {
+      return Response.json({ error: 'Not found' }, { status: 404 });
+    }
+    return new Response(value, {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'public, max-age=60',
+        'Access-Control-Allow-Origin': '*',
+      },
+    });
+  })();
+}
+
+function injectMetaTags(html: string, pageData: PageData, siteName?: string): string {
+  let result = html;
+
+  if (pageData.title) {
+    const suffix = siteName ? ` — ${siteName}` : '';
+    result = result.replace(/<title>[^<]*<\/title>/, `<title>${pageData.title}${suffix}</title>`);
+  }
+
+  if (pageData.meta?.description) {
+    result = result.replace(/(<meta\s+name="description"\s+content=")[^"]*(")/, `$1${pageData.meta.description}$2`);
+  }
+
+  if (pageData.meta?.ogTitle) {
+    result = result.replace(/(<meta\s+property="og:title"\s+content=")[^"]*(")/, `$1${pageData.meta.ogTitle}$2`);
+  }
+
+  if (pageData.html) {
+    result = result.replace('<div id="app"></div>', `<div id="app">${pageData.html}</div>`);
+  }
+
+  return result;
+}
+
+/**
+ * Create a Cloudflare Worker handler for an Xosen site template.
+ *
+ * The worker:
+ * - Serves static assets from ASSETS binding
+ * - Provides /api/content/:key endpoint for KV reads
+ * - Injects preloaded KV data as window.__SITE_DATA__ into HTML pages
+ * - Detects locale from query param or Accept-Language header
+ * - Preloads page-specific data for /p/:slug routes
+ */
+export function createSiteWorker(config: WorkerConfig): { fetch: (request: Request, env: WorkerEnv) => Promise<Response> } {
+  const { tenantPrefix, globalKeys = [] } = config;
+
+  return {
+    async fetch(request: Request, env: WorkerEnv): Promise<Response> {
+      const url = new URL(request.url);
+
+      // API route: /api/content/:key
+      const apiResponse = handleContentApi(url, env);
+      if (apiResponse) return apiResponse;
+
+      // Static assets
+      if (STATIC_EXT.test(url.pathname)) {
+        return env.ASSETS.fetch(request);
+      }
+
+      // HTML pages — inject KV data
+      const locale = detectLocale(request, config);
+      const indexUrl = new URL('/index.html', request.url);
+      const assetResponse = await env.ASSETS.fetch(new Request(indexUrl));
+      let html = await assetResponse.text();
+
+      // Preload global KV data
+      const kvPromises: Promise<readonly [string, unknown]>[] = globalKeys.map(async (key) => {
+        const value = await env.SITE_CONTENT.get(`${tenantPrefix}:${key}:${locale}`);
+        return [key, value ? JSON.parse(value) : null] as const;
+      });
+
+      // Page-specific data for /p/:slug
+      const pageMatch = url.pathname.match(/^\/p\/(.+)$/);
+      if (pageMatch) {
+        const slug = pageMatch[1];
+        kvPromises.push(
+          (async () => {
+            const value = await env.SITE_CONTENT.get(`${tenantPrefix}:page:${slug}:${locale}`);
+            return [`page:${slug}`, value ? JSON.parse(value) : null] as const;
+          })(),
+        );
+      }
+
+      const entries = await Promise.all(kvPromises);
+
+      const siteData: Record<string, unknown> = {
+        locale,
+        config: { tenantPrefix },
+      };
+      for (const [key, value] of entries) {
+        if (value !== null) {
+          siteData[key] = value;
+        }
+      }
+
+      // Inject meta tags for page routes
+      if (pageMatch) {
+        const slug = pageMatch[1];
+        const pageData = siteData[`page:${slug}`] as PageData | undefined;
+        if (pageData) {
+          html = injectMetaTags(html, pageData, config.siteName);
+        }
+      }
+
+      // Inject __SITE_DATA__ before </head>
+      const injection = `<script>window.__SITE_DATA__ = ${JSON.stringify(siteData)};</script>`;
+      html = html.replace('</head>', `${injection}\n</head>`);
+
+      return new Response(html, {
+        headers: {
+          'Content-Type': 'text/html;charset=utf-8',
+          'Cache-Control': 'public, max-age=60',
+        },
+      });
+    },
+  };
+}

package/src/worker/index.ts

@@ -0,0 +1,2 @@
+export { createSiteWorker } from './create-site-worker.js';
+export type { WorkerEnv, WorkerConfig, PageData } from './types.js';

package/src/worker/types.ts

@@ -0,0 +1,43 @@
+/**
+ * Minimal CF Workers type declarations to avoid requiring @cloudflare/workers-types.
+ * These match the Cloudflare Workers runtime API.
+ */
+export interface CfKVNamespace {
+  get(key: string, options?: any): Promise<string | null>;
+  put(key: string, value: string | ArrayBuffer | ReadableStream, options?: any): Promise<void>;
+  delete(key: string): Promise<void>;
+  list(options?: any): Promise<any>;
+}
+
+export interface CfFetcher {
+  fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
+}
+
+export interface WorkerEnv {
+  SITE_CONTENT: CfKVNamespace;
+  ASSETS: CfFetcher;
+}
+
+export interface WorkerConfig {
+  /** KV key prefix, e.g. 'tenant:swi' */
+  tenantPrefix: string;
+  /** Default locale for the site */
+  defaultLocale: string;
+  /** Supported locales for Accept-Language detection */
+  supportedLocales?: string[];
+  /** Site name for meta title suffix, e.g. 'SWI' */
+  siteName?: string;
+  /** Global KV keys to preload on every page */
+  globalKeys?: string[];
+}
+
+export interface PageData {
+  title?: string;
+  blocks?: unknown[];
+  html?: string;
+  meta?: {
+    description?: string;
+    ogTitle?: string;
+    ogImage?: string;
+  };
+}