@xosen/site-sdk 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xosen/site-sdk",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Shared Vue components and composables for Xosen site templates",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/layout/XSiteNav.vue

@@ -9,10 +9,10 @@
       <div class="x-nav__links" :class="{ 'x-nav__links--open': menuOpen }">
         <template v-for="item in navigation" :key="item.url">
           <a v-if="item.external" :href="item.url" class="x-nav__link" target="_blank" @click="menuOpen = false">
-            {{ item.text }}
+            {{ navText(item) }}
           </a>
           <router-link v-else :to="item.url" class="x-nav__link" @click="menuOpen = false">
-            {{ item.text }}
+            {{ navText(item) }}
           </router-link>
         </template>
 
@@ -30,11 +30,19 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 
+import type { NavItem } from '../../types/config.js';
 import { useSiteConfig } from '../../composables/useSiteConfig.js';
 import XLocaleSwitcher from '../common/XLocaleSwitcher.vue';
 
-const { navigation, branding, locales } = useSiteConfig();
+const { locale } = useI18n();
+const { navigation, branding, locales, defaultLocale } = useSiteConfig();
+
+function navText(item: NavItem): string {
+  if (typeof item.text === 'string') return item.text;
+  return item.text[locale.value] || item.text[defaultLocale.value] || Object.values(item.text)[0] || '';
+}
 
 const scrolled = ref(false);
 const menuOpen = ref(false);

package/src/composables/useLivePreview.ts

@@ -1,4 +1,5 @@
 import { ref, onMounted, onUnmounted } from 'vue';
+import type { Router } from 'vue-router';
 
 export interface PreviewMessage {
   type: 'xosen-preview-update';
@@ -11,20 +12,37 @@ export interface PreviewMessage {
   };
 }
 
+/** Check if running inside an iframe (preview mode) */
+export function isInPreview(): boolean {
+  try {
+    return window.self !== window.top;
+  } catch {
+    return true;
+  }
+}
+
+/**
+ * Install a router guard that blocks all navigation in preview mode.
+ * Call this once during app setup (e.g. in App.vue or router config).
+ */
+export function setupPreviewRouter(router: Router) {
+  if (!isInPreview()) return;
+
+  router.beforeEach((_to, from) => {
+    // Allow initial navigation, block subsequent ones
+    if (!from.name) return true;
+    return false;
+  });
+}
+
 /**
  * Listen for live preview messages from the admin UI.
  * When the admin sends page data via postMessage, this composable
  * provides reactive access to the preview data.
- *
- * Usage in template ContentPage:
- * ```ts
- * const { previewPage } = useLivePreview();
- * // If previewPage matches current slug+locale, use it instead of KV/API data
- * ```
  */
 export function useLivePreview() {
   const previewPage = ref<PreviewMessage['page'] | null>(null);
-  const isPreviewMode = ref(false);
+  const isPreviewMode = ref(isInPreview());
 
   function handleMessage(event: MessageEvent) {
     const data = event.data;
@@ -36,10 +54,6 @@ export function useLivePreview() {
 
   onMounted(() => {
     window.addEventListener('message', handleMessage);
-    // Notify parent that preview is ready
-    if (window.parent !== window) {
-      window.parent.postMessage({ type: 'xosen-preview-ready' }, '*');
-    }
   });
 
   onUnmounted(() => {

package/src/composables/useSiteConfig.ts

@@ -9,6 +9,7 @@ export function useSiteConfig() {
   const siteData = (window as any).__SITE_DATA__ as SiteData | undefined;
 
   const config = computed<SiteConfig | null>(() => siteData?.config || null);
+  const components = computed<Record<string, any>>(() => (siteData as any)?.components || {});
 
   const navigation = computed(() => config.value?.navigation || []);
   const locales = computed(() => config.value?.locales || []);
@@ -26,6 +27,7 @@ export function useSiteConfig() {
 
   return {
     config,
+    components,
     navigation,
     locales,
     defaultLocale,

package/src/index.ts

@@ -22,7 +22,7 @@ export { useSiteData } from './composables/useSiteData.js';
 export { useSiteConfig } from './composables/useSiteConfig.js';
 export { useSkin } from './composables/useSkin.js';
 export { useSiteApi } from './composables/useSiteApi.js';
-export { useLivePreview } from './composables/useLivePreview.js';
+export { useLivePreview, setupPreviewRouter, isInPreview } from './composables/useLivePreview.js';
 export type { PreviewMessage } from './composables/useLivePreview.js';
 
 // Worker

package/src/types/config.ts

@@ -26,7 +26,7 @@ export interface SiteConfig {
 }
 
 export interface NavItem {
-  text: string;
+  text: string | Record<string, string>;
   url: string;
   external?: boolean;
   children?: NavItem[];

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

@@ -17,7 +17,7 @@ function detectLocale(request: Request, config: WorkerConfig): string {
   return config.defaultLocale;
 }
 
-function handleContentApi(url: URL, env: WorkerEnv): Promise<Response> | null {
+function handleContentApi(url: URL, env: WorkerEnv, defaultLocale: string): Promise<Response> | null {
   if (!url.pathname.startsWith('/api/content/')) return null;
 
   const key = decodeURIComponent(url.pathname.replace('/api/content/', ''));
@@ -26,7 +26,16 @@ function handleContentApi(url: URL, env: WorkerEnv): Promise<Response> | null {
   }
 
   return (async () => {
-    const value = await env.SITE_CONTENT.get(key);
+    let value = await env.SITE_CONTENT.get(key);
+
+    // Fallback to default locale
+    if (!value) {
+      const lastColon = key.lastIndexOf(':');
+      if (lastColon > 0 && key.slice(lastColon + 1) !== defaultLocale) {
+        value = await env.SITE_CONTENT.get(key.slice(0, lastColon + 1) + defaultLocale);
+      }
+    }
+
     if (!value) {
       return Response.json({ error: 'Not found' }, { status: 404 });
     }
@@ -81,7 +90,7 @@ export function createSiteWorker(config: WorkerConfig): {
       const url = new URL(request.url);
 
       // API route: /api/content/:key
-      const apiResponse = handleContentApi(url, env);
+      const apiResponse = handleContentApi(url, env, config.defaultLocale);
       if (apiResponse) return apiResponse;
 
       // Static assets
@@ -95,6 +104,8 @@ export function createSiteWorker(config: WorkerConfig): {
       const assetResponse = await env.ASSETS.fetch(new Request(indexUrl));
       let html = await assetResponse.text();
 
+      const fallbackLocale = config.defaultLocale;
+
       // Read 2 KV keys: config + content for locale
       const [configRaw, contentRaw] = await Promise.all([
         env.SITE_CONTENT.get('config'),
@@ -102,7 +113,13 @@ export function createSiteWorker(config: WorkerConfig): {
       ]);
 
       const siteConfig = configRaw ? JSON.parse(configRaw) : {};
-      const content: Record<string, PageData> = contentRaw ? JSON.parse(contentRaw) : {};
+      let content: Record<string, PageData> = contentRaw ? JSON.parse(contentRaw) : {};
+
+      // Fallback to default locale if no content for requested locale
+      if (!contentRaw && locale !== fallbackLocale) {
+        const fallbackRaw = await env.SITE_CONTENT.get(`content:${fallbackLocale}`);
+        if (fallbackRaw) content = JSON.parse(fallbackRaw);
+      }
 
       const pageMatch = url.pathname.match(/^\/p\/(.+)$/);
 
@@ -110,7 +127,11 @@ export function createSiteWorker(config: WorkerConfig): {
       if (pageMatch) {
         const slug = pageMatch[1];
         if (!content[slug]) {
-          const value = await env.SITE_CONTENT.get(`page:${slug}:${locale}`);
+          let value = await env.SITE_CONTENT.get(`page:${slug}:${locale}`);
+          // Fallback to default locale
+          if (!value && locale !== fallbackLocale) {
+            value = await env.SITE_CONTENT.get(`page:${slug}:${fallbackLocale}`);
+          }
           if (value) content[slug] = JSON.parse(value);
         }
       }