cinqcinqdev-seo 0.1.42 → 0.1.44

package/README.md

@@ -126,6 +126,20 @@ CREATE TABLE IF NOT EXISTS public.brand_settings (
 );
 
 INSERT INTO public.brand_settings (id) VALUES (1) ON CONFLICT (id) DO NOTHING;
+
+-- Page templates (saved from the page list via "Turn into template")
+CREATE TABLE IF NOT EXISTS public.pages_templates (
+  id uuid DEFAULT gen_random_uuid() PRIMARY KEY,
+  created_at timestamptz DEFAULT now(),
+  name text NOT NULL,
+  content jsonb DEFAULT '[]'::jsonb,
+  source_page_id uuid REFERENCES public.pages(id) ON DELETE SET NULL
+);
+
+ALTER TABLE public.pages_templates ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "auth_full_access" ON public.pages_templates
+  FOR ALL TO authenticated USING (true) WITH CHECK (true);
 ```
 
 ### Storage bucket
@@ -551,6 +565,73 @@ Auth state is read from `useSupabaseUser()` provided by `@nuxtjs/supabase`. Your
 
 ---
 
+## Rendering Pages on the Frontend
+
+Pages created in the CMS must be rendered by your Nuxt app.
+
+### Required route file: `pages/[...slug].vue`
+
+Slugs can contain slashes (e.g. `faq/my-question` when a subdirectory is set). A standard `[slug].vue` file **only matches a single path segment** — it will never match `/faq/my-question` and will return 404.
+
+You must use a **catch-all** route:
+
+| File | Matches |
+|---|---|
+| `pages/[...slug].vue` ✅ | `/about`, `/faq/pricing`, `/services/web-design` |
+| `pages/[slug].vue` ❌ | `/about` only — `/faq/pricing` returns 404 |
+
+> **If you already have `pages/[slug].vue`**, rename it to `pages/[...slug].vue` and update the slug reference as shown below. Both flat slugs and subdirectory slugs will continue to work.
+
+### `pages/[...slug].vue`
+
+```vue
+<script setup>
+const route = useRoute()
+const supabase = useSupabaseClient()
+
+// route.params.slug is an array of path segments — join them back into the DB slug
+// e.g. /faq/pricing  →  ['faq', 'pricing']  →  'faq/pricing'
+// e.g. /about        →  ['about']            →  'about'
+const slug = (route.params.slug as string[]).join('/')
+
+const { data: page } = await useAsyncData(`page-${slug}`, async () => {
+  const { data } = await supabase
+    .from('pages')
+    .select('*')
+    .eq('slug', slug)
+    .eq('status', 'published')
+    .single()
+  return data
+})
+
+if (!page.value) throw createError({ statusCode: 404, statusMessage: 'Page not found' })
+
+useSeoMeta({
+  title: page.value.seo_config?.meta_title?.fr || page.value.title,
+  description: page.value.seo_config?.meta_description?.fr || '',
+})
+</script>
+
+<template>
+  <div>
+    <component
+      v-for="section in page.content"
+      :key="section.id"
+      :is="`sections-${section.type}`"
+      v-bind="section.props"
+    />
+  </div>
+</template>
+```
+
+### How subdirectory slugs are stored
+
+When a page is created with subdirectory `faq` and title `What is pricing`, the slug stored in the database is `faq/what-is-pricing`. The frontend URL is `/faq/what-is-pricing`. There is no nested table or parent record — the slash is just part of the slug string.
+
+Pages without a subdirectory (e.g. title `About`, no subdirectory) get a plain slug like `about` and are served at `/about` — exactly as before.
+
+---
+
 ## What's NOT Included
 
 - Login / register pages — you provide these

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.1.42",
+  "version": "0.1.44",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

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

@@ -25,9 +25,17 @@ const showToast = (msg, type = "success") => {
 };
 const isCreating = ref(false);
 const newPageTitle = ref("");
+const newPageSubdir = ref("");
 const createMode = ref("blank");
 const templates = ref([]);
 const selectedTemplateId = ref("");
+const toSlugPart = (val) => val.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+const slugPreview = computed(() => {
+  const subdir = toSlugPart(newPageSubdir.value);
+  const slug = toSlugPart(newPageTitle.value);
+  if (!slug) return subdir ? `/${subdir}/\u2026` : "/\u2026";
+  return subdir ? `/${subdir}/${slug}` : `/${slug}`;
+});
 watch(isCreating, async (val) => {
   if (val) {
     const { data } = await supabase.from("pages_templates").select("id, name").order("created_at", { ascending: false });
@@ -36,11 +44,14 @@ watch(isCreating, async (val) => {
     createMode.value = "blank";
     selectedTemplateId.value = "";
     newPageTitle.value = "";
+    newPageSubdir.value = "";
   }
 });
 const handleCreate = async () => {
   if (!newPageTitle.value) return;
-  const slug = newPageTitle.value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+  const subdir = toSlugPart(newPageSubdir.value);
+  const base = toSlugPart(newPageTitle.value);
+  const slug = subdir ? `${subdir}/${base}` : base;
   let content = [];
   if (createMode.value === "template" && selectedTemplateId.value) {
     const { data: tpl } = await supabase.from("pages_templates").select("content").eq("id", selectedTemplateId.value).single();
@@ -205,6 +216,12 @@ useHead({ title: computed(() => `${typeLabel.value} \u2014 Admin`) });
                 <input v-model="newPageTitle" type="text" placeholder="Ex: Création site web"
                   class="w-full border border-gray-200 p-3 rounded-xl text-sm text-gray-900 focus:ring-2 focus:ring-[#3d35ff] outline-none transition" autofocus />
               </div>
+              <div>
+                <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2 block">Sous-dossier <span class="normal-case font-normal">(optionnel)</span></label>
+                <input v-model="newPageSubdir" type="text" placeholder="Ex: faq"
+                  class="w-full border border-gray-200 p-3 rounded-xl text-sm text-gray-900 focus:ring-2 focus:ring-[#3d35ff] outline-none transition" />
+                <p class="text-[11px] font-mono text-[#3d35ff] mt-1.5 opacity-70">{{ slugPreview }}</p>
+              </div>
               <div>
                 <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2 block">Départ</label>
                 <div class="grid grid-cols-2 gap-2">

package/package.json

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