cinqcinqdev-seo 0.1.14 → 0.1.16

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,7 +1,7 @@
 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 { sectionType, sectionLabel, fields, currentProps, prompt, itemFieldsConfig, aiContext } = body;
   const config = useRuntimeConfig();
   if (!config.openrouterApiKey) {
     throw createError({ statusCode: 500, message: "OPENROUTER_API_KEY not configured" });
@@ -52,8 +52,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}
 

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

@@ -1,6 +1,6 @@
 export default defineEventHandler(async (event) => {
   const body = await readBody(event);
-  const { pageTitle, pageType, content, seoConfig } = body;
+  const { pageTitle, pageType, content, seoConfig, aiContext } = body;
   const config = useRuntimeConfig();
   if (!config.openrouterApiKey) {
     throw createError({ statusCode: 500, message: "OPENROUTER_API_KEY not configured" });
@@ -25,8 +25,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}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinqcinqdev-seo",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "A reusable Nuxt 3 admin CMS module with visual page editor powered by Supabase",
   "license": "MIT",
   "module": "./dist/module.mjs",