cinqcinqdev-seo 0.1.15 → 0.1.17

package/dist/runtime/pages/admin/editor/[id].vue

@@ -1,6 +1,7 @@
 <script setup>
-import { ref, computed, watch, definePageMeta, useRoute, useRuntimeConfig, useAsyncData, useHead, useSupabaseClient, useNuxtApp } from "#imports";
+import { ref, computed, watch, onMounted, definePageMeta, useRoute, useRuntimeConfig, useAsyncData, useHead, useSupabaseClient, useNuxtApp } from "#imports";
 import { useAdminSections } from "../../../composables/useAdminSections";
+import { useAdminSettings, useAdminBasePath } from "#imports";
 definePageMeta({ layout: false });
 const route = useRoute();
 const supabase = useSupabaseClient();
@@ -10,6 +11,9 @@ const bucket = config?.storageBucket || "site";
 const pageId = route.params.id;
 const CMS_COMPONENTS = useAdminSections();
 const { vueApp } = useNuxtApp();
+const adminSettings = useAdminSettings();
+const basePath = useAdminBasePath();
+onMounted(() => adminSettings.load());
 const resolveSection = (type) => vueApp.component(`Sections${type}`) || vueApp.component(type) || null;
 const { data: page } = await useAsyncData(`admin-edit-${pageId}`, async () => {
   const { data } = await supabase.from(table).select("*").eq("id", pageId).maybeSingle();
@@ -180,7 +184,8 @@ const generateWithAI = async () => {
         fields,
         currentProps,
         prompt: aiPromptText.value,
-        itemFieldsConfig
+        itemFieldsConfig,
+        aiContext: adminSettings.settings.value?.ai_context || ""
       }
     });
     const props = page.value.content[selectedBlockIndex.value].props;
@@ -229,7 +234,7 @@ const runSeoAudit = async () => {
   try {
     const result = await $fetch("/api/admin-cms/ai/seo-audit", {
       method: "POST",
-      body: { pageTitle: page.value.title, pageType: page.value.type, content: page.value.content, seoConfig: page.value.seo_config }
+      body: { pageTitle: page.value.title, pageType: page.value.type, content: page.value.content, seoConfig: page.value.seo_config, aiContext: adminSettings.settings.value?.ai_context || "" }
     });
     seoAudit.value = result;
   } catch (err) {
@@ -397,7 +402,7 @@ const savePage = async () => {
     <!-- ── Top Bar ── -->
     <header class="h-12 bg-white/80 backdrop-blur-md border-b px-6 flex items-center justify-between z-[60] shrink-0">
       <div class="flex items-center gap-4">
-        <NuxtLink to="/admin" class="text-gray-400 hover:text-black transition-colors">←</NuxtLink>
+        <NuxtLink :to="basePath" class="text-gray-400 hover:text-black transition-colors">←</NuxtLink>
         <div class="flex gap-1 bg-gray-100 p-1 rounded-md">
           <button @click="isLeftSidebarOpen = !isLeftSidebarOpen" :class="['p-1.5 rounded transition-all', isLeftSidebarOpen ? 'bg-white shadow-sm text-[#3d35ff]' : 'text-gray-400']" title="Structure">
             <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 6h16M4 12h10M4 18h16"/></svg>
@@ -877,7 +882,7 @@ const savePage = async () => {
         <h2 class="text-[12px] font-black uppercase text-center mb-12 tracking-[0.4em] italic text-[#3d35ff]">Nouvelle Section</h2>
         <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
           <button v-for="(conf, type) in CMS_COMPONENTS" :key="type"
-            @click="page.content.push({ type, props: JSON.parse(JSON.stringify(conf.defaultProps)) });
+            @click="page.content.push({ type, props: JSON.parse(JSON.stringify(adminSettings.applyPresets(type, conf.defaultProps))) });
   showAddModal = false;
   selectedBlockIndex = page.content.length - 1"
             class="flex flex-col items-center gap-6 p-8 border-2 border-gray-50 rounded-[40px] hover:border-[#3d35ff] transition-all group active:scale-95">

package/dist/runtime/pages/admin/index.vue

@@ -1,9 +1,11 @@
 <script setup>
-import { computed, useHead, useRuntimeConfig, useSupabaseClient } from "#imports";
+import { computed, useHead, useRuntimeConfig, useSupabaseClient, useAsyncData } from "#imports";
+import { useAdminBasePath } from "#imports";
 useHead({ title: "Tableau de bord \u2014 Admin" });
 const config = useRuntimeConfig().public.adminCms;
 const supabase = useSupabaseClient();
 const tables = computed(() => config?.tables || { pages: "pages" });
+const basePath = useAdminBasePath();
 const pageTypes = computed(() => {
   const types = config?.pageTypes || [];
   return types.map((pt) => ({
@@ -74,7 +76,7 @@ const { data: stats } = await useAsyncData("admin-dashboard-stats", async () =>
         <NuxtLink
           v-for="type in pageTypes"
           :key="type.id"
-          :to="`/admin/pages/${type.id}`"
+          :to="`${basePath}/pages/${type.id}`"
           class="group bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:border-[#3d35ff]/30 hover:shadow-md transition-all"
         >
           <div class="flex items-start justify-between mb-4">

package/dist/runtime/pages/admin/pages/[type].vue

@@ -1,8 +1,10 @@
 <script setup>
 import { ref, computed, watch, useRoute, useRuntimeConfig, useAsyncData, useHead, navigateTo, useSupabaseClient } from "#imports";
+import { useAdminBasePath } from "#imports";
 const route = useRoute();
 const supabase = useSupabaseClient();
 const config = useRuntimeConfig().public.adminCms;
+const basePath = useAdminBasePath();
 const pageType = route.params.type;
 const table = config?.tables?.pages || "pages";
 const typeLabel = computed(
@@ -46,7 +48,7 @@ const handleCreate = async () => {
   }
   const { data, error } = await supabase.from(table).insert([{ title: newPageTitle.value, slug, type: pageType, status: "draft", content }]).select();
   if (!error && data) {
-    navigateTo(`/admin/editor/${data[0].id}`);
+    navigateTo(`${basePath}/editor/${data[0].id}`);
   } else {
     isCreating.value = false;
     showToast("Ce slug est d\xE9j\xE0 utilis\xE9. Changez le titre.", "error");
@@ -106,7 +108,7 @@ useHead({ title: computed(() => `${typeLabel.value} \u2014 Admin`) });
       <div class="mb-8 flex items-center justify-between">
         <div>
           <div class="flex items-center gap-2 text-[11px] text-gray-400 mb-2">
-            <NuxtLink to="/admin" class="hover:text-gray-600 transition-colors">Tableau de bord</NuxtLink>
+            <NuxtLink :to="basePath" class="hover:text-gray-600 transition-colors">Tableau de bord</NuxtLink>
             <span>/</span>
             <span class="text-gray-600 font-medium">{{ typeLabel }}</span>
           </div>
@@ -164,7 +166,7 @@ useHead({ title: computed(() => `${typeLabel.value} \u2014 Admin`) });
               </td>
               <td class="px-6 py-4">
                 <div class="flex items-center justify-end gap-1">
-                  <NuxtLink :to="`/admin/editor/${page.id}`"
+                  <NuxtLink :to="`${basePath}/editor/${page.id}`"
                     class="px-3 py-1.5 rounded-lg text-[11px] font-bold bg-gray-100 text-gray-600 hover:bg-[#3d35ff] hover:text-white transition-all">
                     Éditer
                   </NuxtLink>

package/dist/runtime/pages/admin/personas/[id].vue

@@ -1,8 +1,9 @@
 <script setup>
 import { ref, onMounted, useHead, useRoute, navigateTo } from "#imports";
-import { useAdminPersonas, useAdminContent } from "#imports";
+import { useAdminPersonas, useAdminContent, useAdminBasePath } from "#imports";
 const route = useRoute();
 const id = route.params.id;
+const basePath = useAdminBasePath();
 useHead({ title: "Persona - Admin" });
 const { fetchPersonaById, updatePersona } = useAdminPersonas();
 const { getContentByPersona } = useAdminContent();
@@ -47,7 +48,7 @@ const statusClass = {
 <template>
   <AdminDashboardLayout>
     <div class="max-w-5xl mx-auto px-6 md:px-10 py-10">
-      <button @click="navigateTo('/admin/personas')" class="flex items-center gap-2 text-slate-500 hover:text-blue-600 font-semibold transition-all mb-8 group">
+      <button @click="navigateTo(`${basePath}/personas`)" class="flex items-center gap-2 text-slate-500 hover:text-blue-600 font-semibold transition-all mb-8 group">
         <Icon name="mdi:arrow-left" class="text-xl group-hover:-translate-x-1 transition-transform" />
         Retour aux Personas
       </button>

package/dist/runtime/pages/admin/personas/index.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { ref, computed, onMounted, useHead, navigateTo } from "#imports";
-import { useAdminPersonas } from "#imports";
+import { useAdminPersonas, useAdminBasePath } from "#imports";
 useHead({ title: "Personas - Admin" });
+const basePath = useAdminBasePath();
 const { fetchPersonas, createPersona, updatePersona, deletePersona } = useAdminPersonas();
 const personas = ref([]);
 const loading = ref(true);
@@ -88,7 +89,7 @@ const handleDelete = async (id) => {
     }
   }
 };
-const viewPersona = (persona) => navigateTo(`/admin/personas/${persona.id}`);
+const viewPersona = (persona) => navigateTo(`${basePath}/personas/${persona.id}`);
 </script>
 
 <template>

package/dist/runtime/pages/admin/setup.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: any;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/pages/admin/setup.vue

@@ -0,0 +1,220 @@
+<script setup>
+import { ref, onMounted, computed, useHead } from "#imports";
+import { useAdminSettings } from "#imports";
+import { useAdminSections } from "#imports";
+useHead({ title: "Configuration \u2014 Admin" });
+const { settings, loading, saving, load, save } = useAdminSettings();
+const sections = useAdminSections();
+const aiContext = ref("");
+const presets = ref({});
+const saved = ref(false);
+onMounted(async () => {
+  await load();
+  aiContext.value = settings.value?.ai_context || "";
+  presets.value = JSON.parse(JSON.stringify(settings.value?.section_presets || {}));
+});
+const setPreset = (sectionType, field, value) => {
+  if (!presets.value[sectionType]) presets.value[sectionType] = {};
+  presets.value[sectionType][field] = value;
+};
+const getPreset = (sectionType, field, fallback) => {
+  return presets.value[sectionType]?.[field] ?? fallback ?? "";
+};
+const saveAll = async () => {
+  await save({ ai_context: aiContext.value, section_presets: presets.value });
+  saved.value = true;
+  setTimeout(() => {
+    saved.value = false;
+  }, 2e3);
+};
+const styleFields = ["layout", "spacing", "radius", "animation"];
+const hasStyleOptions = (conf) => styleFields.some((f) => conf.fields?.[f]?.options?.length);
+</script>
+
+<template>
+  <AdminDashboardLayout>
+    <div data-admin-cms class="max-w-3xl mx-auto px-6 py-10">
+
+      <!-- Header -->
+      <div class="flex items-start justify-between mb-10">
+        <div>
+          <h1 class="text-2xl font-bold text-slate-900">Configuration du Projet</h1>
+          <p class="text-sm text-slate-500 mt-1">Contexte IA et préférences des composants</p>
+        </div>
+        <button
+          @click="saveAll"
+          :disabled="saving"
+          class="px-5 py-2.5 bg-slate-900 text-white text-sm font-semibold rounded-xl hover:bg-slate-700 disabled:opacity-50 transition-all flex items-center gap-2"
+        >
+          <svg v-if="!saving && !saved" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+          </svg>
+          <svg v-if="saving" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
+          </svg>
+          {{ saved ? "Enregistr\xE9 \u2713" : saving ? "Enregistrement..." : "Enregistrer" }}
+        </button>
+      </div>
+
+      <div v-if="loading" class="text-center py-20 text-slate-400 text-sm">Chargement...</div>
+
+      <div v-else class="space-y-6">
+
+        <!-- ── AI Context ───────────────────────────────────────────────── -->
+        <div class="bg-white border border-slate-200 rounded-2xl p-8">
+          <div class="flex items-center gap-3 mb-2">
+            <span class="text-xl">✨</span>
+            <h2 class="text-base font-bold text-slate-900">Contexte IA</h2>
+          </div>
+          <p class="text-xs text-slate-500 mb-5 leading-relaxed">
+            Décrivez votre activité, cible et ton. L'IA s'en souviendra pour chaque génération de contenu et audit SEO.
+          </p>
+          <textarea
+            v-model="aiContext"
+            rows="7"
+            placeholder="Ex: Agence web basée à Alger spécialisée dans la création de sites vitrines et e-commerce pour les PME algériennes. Ton professionnel mais accessible, orienté résultats. Nos clients sont des entrepreneurs et dirigeants algériens entre 30 et 50 ans..."
+            class="w-full px-4 py-3 text-sm border border-slate-200 rounded-xl focus:outline-none focus:border-slate-400 resize-none leading-relaxed text-slate-700 placeholder:text-slate-300"
+          />
+          <p class="text-xs text-slate-400 mt-2 text-right">{{ aiContext.length }} caractères</p>
+        </div>
+
+        <!-- ── Component Defaults ──────────────────────────────────────── -->
+        <div class="bg-white border border-slate-200 rounded-2xl p-8">
+          <div class="flex items-center gap-3 mb-2">
+            <span class="text-xl">🎨</span>
+            <h2 class="text-base font-bold text-slate-900">Préférences des Composants</h2>
+          </div>
+          <p class="text-xs text-slate-500 mb-8 leading-relaxed">
+            Définissez le style par défaut de chaque section. Ces préférences s'appliquent automatiquement quand vous ajoutez une section dans l'éditeur.
+          </p>
+
+          <div class="space-y-8">
+            <div
+              v-for="(conf, type) in sections"
+              :key="type"
+              v-show="hasStyleOptions(conf)"
+              class="border border-slate-100 rounded-xl p-5"
+            >
+              <!-- Component label -->
+              <div class="flex items-center gap-2 mb-5">
+                <span class="text-lg leading-none">{{ conf.icon }}</span>
+                <span class="text-sm font-bold text-slate-800">{{ conf.label }}</span>
+              </div>
+
+              <div class="space-y-4">
+
+                <!-- Layout -->
+                <div v-if="conf.fields?.layout?.options">
+                  <p class="text-[10px] font-semibold uppercase tracking-widest text-slate-400 mb-2">Layout</p>
+                  <div class="flex flex-wrap gap-1.5">
+                    <button
+                      v-for="opt in conf.fields.layout.options"
+                      :key="opt.value"
+                      @click="setPreset(String(type), 'layout', opt.value)"
+                      :class="[
+  'px-3 py-1.5 rounded-lg text-xs font-semibold border transition-all',
+  getPreset(String(type), 'layout', conf.defaultProps?.layout) === opt.value ? 'bg-slate-900 text-white border-slate-900' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-400'
+]"
+                    >
+                      <span v-if="opt.icon" class="mr-1">{{ opt.icon }}</span>{{ opt.label }}
+                    </button>
+                  </div>
+                </div>
+
+                <!-- Animation -->
+                <div v-if="conf.fields?.animation?.options">
+                  <p class="text-[10px] font-semibold uppercase tracking-widest text-slate-400 mb-2">Animation</p>
+                  <div class="flex flex-wrap gap-1.5">
+                    <button
+                      v-for="opt in conf.fields.animation.options"
+                      :key="opt.value"
+                      @click="setPreset(String(type), 'animation', opt.value)"
+                      :class="[
+  'px-3 py-1.5 rounded-lg text-xs font-semibold border transition-all',
+  getPreset(String(type), 'animation', conf.defaultProps?.animation) === opt.value ? 'bg-slate-900 text-white border-slate-900' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-400'
+]"
+                    >
+                      <span v-if="opt.icon" class="mr-1">{{ opt.icon }}</span>{{ opt.label }}
+                    </button>
+                  </div>
+                </div>
+
+                <!-- Radius + Spacing inline -->
+                <div class="flex gap-8">
+                  <div v-if="conf.fields?.radius?.options">
+                    <p class="text-[10px] font-semibold uppercase tracking-widest text-slate-400 mb-2">Arrondis</p>
+                    <div class="flex gap-1.5">
+                      <button
+                        v-for="opt in conf.fields.radius.options"
+                        :key="opt.value"
+                        @click="setPreset(String(type), 'radius', opt.value)"
+                        :class="[
+  'px-3 py-1.5 rounded-lg text-xs font-semibold border transition-all',
+  getPreset(String(type), 'radius', conf.defaultProps?.radius) === opt.value ? 'bg-slate-900 text-white border-slate-900' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-400'
+]"
+                      >
+                        <span v-if="opt.icon" class="mr-1">{{ opt.icon }}</span>{{ opt.label }}
+                      </button>
+                    </div>
+                  </div>
+
+                  <div v-if="conf.fields?.spacing?.options">
+                    <p class="text-[10px] font-semibold uppercase tracking-widest text-slate-400 mb-2">Espacement</p>
+                    <div class="flex gap-1.5">
+                      <button
+                        v-for="opt in conf.fields.spacing.options"
+                        :key="opt.value"
+                        @click="setPreset(String(type), 'spacing', opt.value)"
+                        :class="[
+  'px-3 py-1.5 rounded-lg text-xs font-semibold border transition-all',
+  getPreset(String(type), 'spacing', conf.defaultProps?.spacing) === opt.value ? 'bg-slate-900 text-white border-slate-900' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-400'
+]"
+                      >
+                        <span v-if="opt.icon" class="mr-1">{{ opt.icon }}</span>{{ opt.label }}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Colors -->
+                <div v-if="conf.fields?.bgColor || conf.fields?.textColor" class="flex gap-6">
+                  <div v-if="conf.fields?.bgColor">
+                    <p class="text-[10px] font-semibold uppercase tracking-widest text-slate-400 mb-2">Fond</p>
+                    <div class="flex items-center gap-2">
+                      <input
+                        type="color"
+                        :value="getPreset(String(type), 'bgColor', conf.defaultProps?.bgColor || '#ffffff')"
+                        @input="setPreset(String(type), 'bgColor', $event.target.value)"
+                        class="w-8 h-8 rounded-lg border border-slate-200 cursor-pointer p-0.5"
+                      />
+                      <span class="text-xs font-mono text-slate-500">
+                        {{ getPreset(String(type), "bgColor", conf.defaultProps?.bgColor || "#ffffff") }}
+                      </span>
+                    </div>
+                  </div>
+                  <div v-if="conf.fields?.textColor">
+                    <p class="text-[10px] font-semibold uppercase tracking-widest text-slate-400 mb-2">Texte</p>
+                    <div class="flex items-center gap-2">
+                      <input
+                        type="color"
+                        :value="getPreset(String(type), 'textColor', conf.defaultProps?.textColor || '#000000')"
+                        @input="setPreset(String(type), 'textColor', $event.target.value)"
+                        class="w-8 h-8 rounded-lg border border-slate-200 cursor-pointer p-0.5"
+                      />
+                      <span class="text-xs font-mono text-slate-500">
+                        {{ getPreset(String(type), "textColor", conf.defaultProps?.textColor || "#000000") }}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </AdminDashboardLayout>
+</template>

package/dist/runtime/pages/admin/setup.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: any;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/pages/admin/strategies/[id].vue

@@ -1,8 +1,9 @@
 <script setup>
 import { ref, onMounted, useHead, useRoute, navigateTo } from "#imports";
-import { useAdminStrategies, useAdminContent, useAdminPersonas } from "#imports";
+import { useAdminStrategies, useAdminContent, useAdminPersonas, useAdminBasePath } from "#imports";
 const route = useRoute();
 const id = route.params.id;
+const basePath = useAdminBasePath();
 useHead({ title: "Strategie - Admin" });
 const { fetchStrategyById, updateStrategy, fetchStrategyContents, fetchStrategyPersonas } = useAdminStrategies();
 const { fetchContent, createContent } = useAdminContent();
@@ -74,7 +75,7 @@ const contentStatusClass = {
 <template>
   <AdminDashboardLayout>
     <div class="max-w-6xl mx-auto px-6 md:px-10 py-10">
-      <NuxtLink to="/admin/strategies" class="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 mb-8 font-medium">
+      <NuxtLink :to="`${basePath}/strategies`" class="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 mb-8 font-medium">
         <Icon name="mdi:arrow-left" />
         Retour aux strategies
       </NuxtLink>

package/dist/runtime/pages/admin/strategies/index.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { ref, computed, onMounted, useHead, navigateTo } from "#imports";
-import { useAdminStrategies } from "#imports";
+import { useAdminStrategies, useAdminBasePath } from "#imports";
 useHead({ title: "Strategies - Admin" });
+const basePath = useAdminBasePath();
 const { fetchStrategies, createStrategy, updateStrategy, deleteStrategy, fetchStrategyContents, fetchStrategyPersonas } = useAdminStrategies();
 const strategies = ref([]);
 const strategyContents = ref({});
@@ -125,7 +126,7 @@ const handleDelete = async () => {
                 <p class="text-sm text-slate-600">{{ strategy.description }}</p>
               </div>
               <div class="flex gap-2 ml-4">
-                <button @click="navigateTo(`/admin/strategies/${strategy.id}`)" class="px-5 py-2.5 bg-blue-600 text-white rounded-xl text-sm font-semibold hover:bg-blue-700 transition-all">Gerer</button>
+                <button @click="navigateTo(`${basePath}/strategies/${strategy.id}`)" class="px-5 py-2.5 bg-blue-600 text-white rounded-xl text-sm font-semibold hover:bg-blue-700 transition-all">Gerer</button>
                 <button @click="openEdit(strategy)" class="p-2.5 bg-slate-100 text-slate-600 rounded-xl hover:bg-slate-200 transition-all"><Icon name="mdi:pencil" /></button>
               </div>
             </div>

package/dist/runtime/server/api/ai/generate.post.js

@@ -1,9 +1,10 @@
+import { defineEventHandler, readBody, createError } from "h3";
 const isI18nField = (val) => val !== null && typeof val === "object" && !Array.isArray(val) && ("fr" in val || "ar" in val || "en" in val);
 export default defineEventHandler(async (event) => {
   const body = await readBody(event);
-  const { sectionType, sectionLabel, fields, currentProps, prompt, itemFieldsConfig } = body;
-  const config = useRuntimeConfig();
-  if (!config.openrouterApiKey) {
+  const { sectionType, sectionLabel, fields, currentProps, prompt, itemFieldsConfig, aiContext } = body;
+  const openrouterApiKey = process.env.OPENROUTER_API_KEY || "";
+  if (!openrouterApiKey) {
     throw createError({ statusCode: 500, message: "OPENROUTER_API_KEY not configured" });
   }
   const skeleton = {};
@@ -52,8 +53,13 @@ export default defineEventHandler(async (event) => {
       return `items[${i}]: "${typeof val === "object" ? val?.fr : val || ""}"`;
     }) : []
   ].join("\n");
-  const systemPrompt = `You are a professional multilingual copywriter for a web agency CMS.
-Always respond with a valid JSON object only \u2014 no markdown, no code blocks, no explanation.`;
+  const systemPrompt = [
+    "You are a professional multilingual copywriter for a web agency CMS.",
+    aiContext ? `
+Website context (always keep this in mind):
+${aiContext}` : "",
+    "\nAlways respond with a valid JSON object only \u2014 no markdown, no code blocks, no explanation."
+  ].filter(Boolean).join("");
   const userPrompt = `Section: ${sectionLabel} (${sectionType})
 User instruction: ${prompt}
 
@@ -77,7 +83,7 @@ Rules:
   const response = await $fetch("https://openrouter.ai/api/v1/chat/completions", {
     method: "POST",
     headers: {
-      "Authorization": `Bearer ${config.openrouterApiKey}`,
+      "Authorization": `Bearer ${openrouterApiKey}`,
       "Content-Type": "application/json",
       "HTTP-Referer": "https://admin-cms.dev",
       "X-Title": "Admin CMS"

package/dist/runtime/server/api/ai/seo-audit.post.js

@@ -1,8 +1,9 @@
+import { defineEventHandler, readBody, createError } from "h3";
 export default defineEventHandler(async (event) => {
   const body = await readBody(event);
-  const { pageTitle, pageType, content, seoConfig } = body;
-  const config = useRuntimeConfig();
-  if (!config.openrouterApiKey) {
+  const { pageTitle, pageType, content, seoConfig, aiContext } = body;
+  const openrouterApiKey = process.env.OPENROUTER_API_KEY || "";
+  if (!openrouterApiKey) {
     throw createError({ statusCode: 500, message: "OPENROUTER_API_KEY not configured" });
   }
   const contentSummary = content.map((block) => {
@@ -25,8 +26,13 @@ export default defineEventHandler(async (event) => {
     title: typeof seoConfig?.meta_title === "object" ? seoConfig.meta_title?.fr : seoConfig?.meta_title || "",
     description: typeof seoConfig?.meta_description === "object" ? seoConfig.meta_description?.fr : seoConfig?.meta_description || ""
   };
-  const systemPrompt = `You are an expert SEO consultant.
-Respond with a valid JSON object only \u2014 no markdown, no code blocks, no extra text.`;
+  const systemPrompt = [
+    "You are an expert SEO consultant.",
+    aiContext ? `
+Website context:
+${aiContext}` : "",
+    "\nRespond with a valid JSON object only \u2014 no markdown, no code blocks, no extra text."
+  ].filter(Boolean).join("");
   const userPrompt = `Audit this web page for SEO and provide actionable recommendations.
 
 Page title: "${pageTitle}"
@@ -61,7 +67,7 @@ Rules:
   const response = await $fetch("https://openrouter.ai/api/v1/chat/completions", {
     method: "POST",
     headers: {
-      "Authorization": `Bearer ${config.openrouterApiKey}`,
+      "Authorization": `Bearer ${openrouterApiKey}`,
       "Content-Type": "application/json",
       "HTTP-Referer": "https://admin-cms.dev",
       "X-Title": "Admin CMS"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinqcinqdev-seo",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "A reusable Nuxt 3 admin CMS module with visual page editor powered by Supabase",
   "license": "MIT",
   "module": "./dist/module.mjs",
@@ -27,6 +27,9 @@
     "@pinia/nuxt": ">=0.5.0 || >=0.11.0",
     "nuxt": ">=3.0.0"
   },
+  "dependencies": {
+    "h3": ">=1.0.0"
+  },
   "devDependencies": {
     "@nuxt/icon": "^1.15.0",
     "@nuxt/kit": "^3.13.0",