cinqcinqdev-seo 0.1.5 → 0.1.7

package/dist/runtime/composables/useAdminSections.js

@@ -0,0 +1,332 @@
+const tagOptions = [
+  { value: "h1", label: "H1" },
+  { value: "h2", label: "H2" },
+  { value: "h3", label: "H3" },
+  { value: "h4", label: "H4" },
+  { value: "div", label: "DIV" }
+];
+const layoutOptions = [
+  { value: "centered", label: "Centered", icon: "\u25C9" },
+  { value: "split", label: "Split", icon: "\u25E7" },
+  { value: "bento", label: "Bento", icon: "\u229E" },
+  { value: "fullscreen", label: "Fullscreen", icon: "\u25A3" },
+  { value: "minimal", label: "Minimal", icon: "\u2014" },
+  { value: "editorial", label: "Editorial", icon: "\u{1D5E1}" }
+];
+const animationOptions = [
+  { value: "none", label: "None", icon: "\u2715" },
+  { value: "fadeUp", label: "Fade Up", icon: "\u2191" },
+  { value: "blur", label: "Blur", icon: "\u25CE" },
+  { value: "reveal", label: "Reveal", icon: "\u25B6" },
+  { value: "slideLeft", label: "Slide", icon: "\u2190" },
+  { value: "typewriter", label: "Typewriter", icon: "\u258C" },
+  { value: "float", label: "Float", icon: "\u301C" }
+];
+const i18n0 = (fr = "") => ({ fr, ar: "", en: "" });
+export const DEFAULT_SECTIONS = {
+  HeroSection: {
+    label: "Hero",
+    icon: "\u26A1",
+    defaultProps: {
+      layout: "centered",
+      animation: "fadeUp",
+      titleSize: "md",
+      title: i18n0("Impactful Title"),
+      titleTag: "h1",
+      subtitle: i18n0(),
+      badge: i18n0(),
+      image: "",
+      imageStyle: "cover",
+      imagePosition: "center",
+      bgColor: "#3d35ff",
+      textColor: "#ffffff",
+      ctaText: i18n0("Get Started"),
+      ctaLink: "/"
+    },
+    groups: [
+      { key: "design", label: "Design" },
+      { key: "animation", label: "Animation" }
+    ],
+    fields: {
+      layout: { type: "cards", label: "Layout", group: "design", options: layoutOptions },
+      titleSize: { type: "cards", label: "Title Size", group: "design", options: [
+        { value: "sm", label: "Small", icon: "S" },
+        { value: "md", label: "Medium", icon: "M" },
+        { value: "lg", label: "Large", icon: "L" }
+      ] },
+      titleTag: { type: "select", label: "SEO Tag", group: "design", options: tagOptions },
+      badge: { type: "text", label: "Badge", group: "design", i18n: true },
+      title: { type: "text", label: "Title", group: "design", i18n: true },
+      subtitle: { type: "textarea", label: "Subtitle", group: "design", i18n: true },
+      image: { type: "image", label: "Image", group: "design" },
+      imageStyle: { type: "cards", label: "Image Style", group: "design", options: [
+        { value: "cover", label: "Cover", icon: "\u25A3" },
+        { value: "contain", label: "Contain", icon: "\u25FB" },
+        { value: "portrait", label: "Portrait", icon: "\u25AF" },
+        { value: "square", label: "Square", icon: "\u25A1" },
+        { value: "circle", label: "Circle", icon: "\u25EF" }
+      ] },
+      ctaText: { type: "text", label: "Button Text", group: "design", i18n: true },
+      ctaLink: { type: "text", label: "Button URL", group: "design" },
+      bgColor: { type: "color", label: "Background", group: "design" },
+      textColor: { type: "color", label: "Text Color", group: "design" },
+      animation: { type: "cards", label: "Animation", group: "animation", options: animationOptions }
+    }
+  },
+  TextVisual: {
+    label: "Text & Image",
+    icon: "\u{1F5BC}\uFE0F",
+    defaultProps: {
+      layout: "split",
+      title: i18n0("Our Vision"),
+      titleTag: "h2",
+      badge: i18n0(),
+      content: i18n0(),
+      image: "",
+      imageAlt: i18n0(),
+      imageStyle: "rounded",
+      imageFit: "cover",
+      imageShadow: false,
+      reverse: false,
+      bgColor: "#ffffff",
+      textColor: "#000000",
+      ctas: []
+    },
+    fields: {
+      layout: { type: "cards", label: "Layout", options: [
+        { value: "split", label: "Split", icon: "\u25E7" },
+        { value: "stacked", label: "Stacked", icon: "\u25A4" },
+        { value: "wide", label: "Wide", icon: "\u25AC" }
+      ] },
+      imageStyle: { type: "cards", label: "Image Style", options: [
+        { value: "rounded", label: "Rounded", icon: "\u25A2" },
+        { value: "square", label: "Square", icon: "\u25A1" },
+        { value: "circle", label: "Circle", icon: "\u25EF" },
+        { value: "portrait", label: "Portrait", icon: "\u25AF" }
+      ] },
+      imageFit: { type: "cards", label: "Image Fit", options: [
+        { value: "cover", label: "Cover", icon: "\u25A3" },
+        { value: "contain", label: "Contain", icon: "\u25FB" }
+      ] },
+      reverse: { type: "select", label: "Direction", options: [{ value: false, label: "Image right" }, { value: true, label: "Image left" }] },
+      titleTag: { type: "select", label: "SEO Tag", options: tagOptions },
+      badge: { type: "text", label: "Badge", i18n: true },
+      title: { type: "text", label: "Title", i18n: true },
+      content: { type: "textarea", label: "Text", i18n: true },
+      image: { type: "image", label: "Image" },
+      imageAlt: { type: "text", label: "Alt text (SEO)", i18n: true },
+      ctas: { type: "list", label: "CTA Buttons", itemFields: {
+        text: { type: "text", label: "Text", i18n: true },
+        link: { type: "text", label: "URL" }
+      } },
+      bgColor: { type: "color", label: "Background" },
+      textColor: { type: "color", label: "Text Color" }
+    }
+  },
+  ServiceGrid: {
+    label: "Services",
+    icon: "\u{1F6E0}\uFE0F",
+    defaultProps: {
+      layout: "grid",
+      title: i18n0("Our Services"),
+      titleTag: "h2",
+      badge: i18n0(),
+      description: i18n0(),
+      headerAlign: "left",
+      ctas: [],
+      itemTag: "h3",
+      items: [],
+      bgColor: "#ffffff",
+      textColor: "#000000"
+    },
+    fields: {
+      layout: { type: "cards", label: "Layout", options: [
+        { value: "grid", label: "Grid", icon: "\u229E" },
+        { value: "list", label: "List", icon: "\u2261" },
+        { value: "cards", label: "Cards", icon: "\u25A4" },
+        { value: "minimal", label: "Minimal", icon: "\u2014" }
+      ] },
+      titleTag: { type: "select", label: "Section SEO Tag", options: tagOptions },
+      itemTag: { type: "select", label: "Item SEO Tag", options: tagOptions },
+      badge: { type: "text", label: "Badge", i18n: true },
+      title: { type: "text", label: "Title", i18n: true },
+      description: { type: "textarea", label: "Description", i18n: true },
+      items: { type: "list", label: "Services", itemFields: {
+        title: { type: "text", label: "Name", i18n: true },
+        description: { type: "textarea", label: "Description", i18n: true },
+        price: { type: "text", label: "Price" },
+        ctaText: { type: "text", label: "Button text", i18n: true },
+        link: { type: "text", label: "URL" },
+        image: { type: "image", label: "Icon/Image" }
+      } },
+      bgColor: { type: "color", label: "Background" },
+      textColor: { type: "color", label: "Text Color" }
+    }
+  },
+  Features: {
+    label: "Features",
+    icon: "\u{1F48E}",
+    defaultProps: {
+      title: i18n0("Why choose us?"),
+      items: [],
+      bgColor: "#ffffff",
+      textColor: "#000000"
+    },
+    fields: {
+      title: { type: "text", label: "Section Title", i18n: true },
+      items: { type: "list", label: "Features", itemFields: {
+        title: { type: "text", label: "Title", i18n: true },
+        description: { type: "textarea", label: "Description", i18n: true }
+      } },
+      bgColor: { type: "color", label: "Background" },
+      textColor: { type: "color", label: "Text Color" }
+    }
+  },
+  FAQ: {
+    label: "FAQ",
+    icon: "\u2753",
+    defaultProps: {
+      title: i18n0("FAQ"),
+      items: [],
+      bgColor: "#F9F9FB",
+      textColor: "#000000"
+    },
+    fields: {
+      title: { type: "text", label: "Title", i18n: true },
+      items: { type: "list", label: "Questions", itemFields: {
+        question: { type: "text", label: "Question", i18n: true },
+        answer: { type: "textarea", label: "Answer", i18n: true }
+      } }
+    }
+  },
+  Process: {
+    label: "Process",
+    icon: "\u{1F504}",
+    defaultProps: {
+      layout: "steps",
+      title: i18n0("How it works"),
+      titleTag: "h2",
+      badge: i18n0(),
+      description: i18n0(),
+      items: [],
+      bgColor: "#ffffff",
+      textColor: "#000000"
+    },
+    fields: {
+      layout: { type: "cards", label: "Layout", options: [
+        { value: "steps", label: "Steps", icon: "\u2193" },
+        { value: "horizontal", label: "Horizontal", icon: "\u2192" },
+        { value: "cards", label: "Cards", icon: "\u229E" },
+        { value: "timeline", label: "Timeline", icon: "\u25CE" },
+        { value: "minimal", label: "Minimal", icon: "\u2014" }
+      ] },
+      titleTag: { type: "select", label: "SEO Tag", options: tagOptions },
+      badge: { type: "text", label: "Badge", i18n: true },
+      title: { type: "text", label: "Title", i18n: true },
+      description: { type: "textarea", label: "Description", i18n: true },
+      items: { type: "list", label: "Steps", itemFields: {
+        icon: { type: "text", label: "Icon/Emoji" },
+        title: { type: "text", label: "Step Title", i18n: true },
+        description: { type: "textarea", label: "Description", i18n: true }
+      } },
+      bgColor: { type: "color", label: "Background" },
+      textColor: { type: "color", label: "Text Color" }
+    }
+  },
+  Testimonials: {
+    label: "Testimonials",
+    icon: "\u{1F4AC}",
+    defaultProps: {
+      layout: "grid",
+      title: i18n0("What our clients say"),
+      titleTag: "h2",
+      badge: i18n0(),
+      description: i18n0(),
+      items: [],
+      bgColor: "#ffffff",
+      textColor: "#000000"
+    },
+    fields: {
+      layout: { type: "cards", label: "Layout", options: [
+        { value: "grid", label: "Grid", icon: "\u229E" },
+        { value: "featured", label: "Featured", icon: "\u25E7" },
+        { value: "wall", label: "Wall", icon: "\u25A6" },
+        { value: "minimal", label: "Minimal", icon: "\u2014" }
+      ] },
+      titleTag: { type: "select", label: "SEO Tag", options: tagOptions },
+      badge: { type: "text", label: "Badge", i18n: true },
+      title: { type: "text", label: "Title", i18n: true },
+      description: { type: "textarea", label: "Description", i18n: true },
+      items: { type: "list", label: "Testimonials", itemFields: {
+        name: { type: "text", label: "Name" },
+        role: { type: "text", label: "Role" },
+        company: { type: "text", label: "Company" },
+        rating: { type: "text", label: "Rating (1-5)" },
+        quote: { type: "textarea", label: "Quote", i18n: true },
+        avatar: { type: "image", label: "Photo" }
+      } },
+      bgColor: { type: "color", label: "Background" },
+      textColor: { type: "color", label: "Text Color" }
+    }
+  },
+  Pricing: {
+    label: "Pricing",
+    icon: "\u{1F4B0}",
+    defaultProps: {
+      layout: "cards",
+      title: i18n0("Our Pricing"),
+      titleTag: "h2",
+      badge: i18n0(),
+      description: i18n0(),
+      items: [],
+      bgColor: "#ffffff",
+      textColor: "#000000"
+    },
+    fields: {
+      layout: { type: "cards", label: "Layout", options: [
+        { value: "cards", label: "Cards", icon: "\u25A4" },
+        { value: "minimal", label: "Minimal", icon: "\u2014" },
+        { value: "table", label: "Table", icon: "\u229E" }
+      ] },
+      titleTag: { type: "select", label: "SEO Tag", options: tagOptions },
+      badge: { type: "text", label: "Badge", i18n: true },
+      title: { type: "text", label: "Title", i18n: true },
+      description: { type: "textarea", label: "Description", i18n: true },
+      items: { type: "list", label: "Plans", itemFields: {
+        name: { type: "text", label: "Plan name", i18n: true },
+        price: { type: "text", label: "Price" },
+        period: { type: "text", label: "Period (e.g. /month)" },
+        description: { type: "textarea", label: "Description", i18n: true },
+        ctaText: { type: "text", label: "Button text", i18n: true },
+        ctaLink: { type: "text", label: "URL" },
+        highlighted: { type: "select", label: "Highlight", options: [{ value: false, label: "No" }, { value: true, label: "Yes" }] }
+      } },
+      bgColor: { type: "color", label: "Background" },
+      textColor: { type: "color", label: "Text Color" }
+    }
+  },
+  ContactForm: {
+    label: "Contact Form",
+    icon: "\u{1F4E9}",
+    defaultProps: {
+      title: i18n0("Let's talk"),
+      subtitle: i18n0("Describe your project and we'll get back to you within 24h."),
+      badge: i18n0(),
+      button_text: i18n0("Send"),
+      bgColor: "#ffffff",
+      textColor: "#000000"
+    },
+    fields: {
+      badge: { type: "text", label: "Badge", i18n: true },
+      title: { type: "text", label: "Title", i18n: true },
+      subtitle: { type: "text", label: "Subtitle", i18n: true },
+      button_text: { type: "text", label: "Button", i18n: true },
+      bgColor: { type: "color", label: "Background" },
+      textColor: { type: "color", label: "Text Color" }
+    }
+  }
+};
+export const useAdminSections = () => {
+  const config = useRuntimeConfig().public.adminCms;
+  return { ...DEFAULT_SECTIONS, ...config?.extraSections || {} };
+};

package/dist/runtime/middleware/admin-auth.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/middleware/admin-auth.js

@@ -0,0 +1,11 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const config = useRuntimeConfig().public.adminCms;
+  const user = useSupabaseUser();
+  const loginRoute = config?.loginRoute || "/login";
+  if (to.path.startsWith("/admin") && !user.value) {
+    return navigateTo(loginRoute);
+  }
+  if (to.path === loginRoute && user.value) {
+    return navigateTo("/admin");
+  }
+});

package/dist/runtime/pages/admin/account.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/account.vue

@@ -0,0 +1,154 @@
+<script setup>
+import { useAdminUserStore } from "../../stores/adminUser";
+const user = useSupabaseUser();
+const client = useSupabaseClient();
+const userStore = useAdminUserStore();
+const config = useRuntimeConfig().public.adminCms;
+const plans = config?.plans || [];
+const table = config?.tables?.users || "users";
+const userInitials = computed(() => user.value?.email?.substring(0, 2).toUpperCase() || "?");
+const truncatedId = computed(() => {
+  const id = user.value?.id || "";
+  return id ? `${id.substring(0, 6)}...${id.substring(id.length - 4)}` : "";
+});
+const createdAt = computed(
+  () => user.value?.created_at ? new Date(user.value.created_at).toLocaleDateString(void 0, { dateStyle: "medium" }) : "\u2014"
+);
+const lastSignIn = computed(
+  () => user.value?.last_sign_in_at ? new Date(user.value.last_sign_in_at).toLocaleDateString(void 0, { dateStyle: "medium" }) : "\u2014"
+);
+const currentPlan = ref("");
+const selectedPlan = ref("");
+const isUpdating = ref(false);
+const updateError = ref("");
+const updateSuccess = ref(false);
+const loadUserData = async () => {
+  if (!user.value?.id) return;
+  await userStore.fetchUserData(user.value.id);
+  currentPlan.value = userStore.userData?.plan || user.value.user_metadata?.plan || "";
+  selectedPlan.value = currentPlan.value;
+};
+onMounted(loadUserData);
+watch(user, (u) => {
+  if (u) loadUserData();
+}, { immediate: true });
+const updatePlan = async () => {
+  if (!user.value?.id || !selectedPlan.value || selectedPlan.value === currentPlan.value) return;
+  isUpdating.value = true;
+  updateError.value = "";
+  updateSuccess.value = false;
+  try {
+    const { error } = await client.from(table).update({ plan: selectedPlan.value }).eq("id", user.value.id);
+    if (error) throw error;
+    await client.auth.updateUser({ data: { plan: selectedPlan.value } });
+    currentPlan.value = selectedPlan.value;
+    updateSuccess.value = true;
+    setTimeout(() => {
+      updateSuccess.value = false;
+    }, 3e3);
+  } catch (e) {
+    updateError.value = e.message || "Error updating plan.";
+  } finally {
+    isUpdating.value = false;
+  }
+};
+useHead({ title: "Account \u2014 Admin" });
+</script>
+
+<template>
+  <div data-admin-cms>
+    <AdminNavbar />
+    <div class="max-w-3xl mx-auto p-6 space-y-6">
+
+      <!-- Profile card -->
+      <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+        <div class="bg-black px-6 py-5">
+          <h1 class="text-xl font-bold text-white">Profile</h1>
+        </div>
+        <div class="p-6">
+          <div v-if="!user" class="text-center py-8 text-gray-400">Not logged in.</div>
+          <div v-else class="space-y-6">
+            <div class="flex items-center gap-4 pb-4 border-b border-gray-100">
+              <div class="w-14 h-14 rounded-full bg-black flex items-center justify-center text-white font-bold text-lg">
+                {{ userInitials }}
+              </div>
+              <div>
+                <p class="font-semibold text-gray-800">{{ user.email }}</p>
+                <p class="text-xs text-gray-400">ID: {{ truncatedId }}</p>
+              </div>
+            </div>
+            <div class="grid sm:grid-cols-2 gap-4">
+              <div class="bg-gray-50 p-4 rounded-lg">
+                <p class="text-xs text-gray-500 mb-1">Account created</p>
+                <p class="font-medium text-gray-800">{{ createdAt }}</p>
+              </div>
+              <div class="bg-gray-50 p-4 rounded-lg">
+                <p class="text-xs text-gray-500 mb-1">Last sign in</p>
+                <p class="font-medium text-gray-800">{{ lastSignIn }}</p>
+              </div>
+              <div class="bg-gray-50 p-4 rounded-lg">
+                <p class="text-xs text-gray-500 mb-1">Auth method</p>
+                <p class="font-medium text-gray-800 capitalize">{{ user.app_metadata?.provider || "email" }}</p>
+              </div>
+              <div class="bg-gray-50 p-4 rounded-lg">
+                <p class="text-xs text-gray-500 mb-1">Email verified</p>
+                <p :class="['font-medium', user.email_confirmed_at ? 'text-green-600' : 'text-amber-600']">
+                  {{ user.email_confirmed_at ? "\u2713 Verified" : "\u26A0 Not verified" }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Plan management (only shown if plans are configured) -->
+      <div v-if="user && plans.length" class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+        <div class="bg-gradient-to-r from-blue-600 to-violet-600 px-6 py-5">
+          <h2 class="text-xl font-bold text-white">Plan</h2>
+        </div>
+        <div class="p-6">
+          <!-- Feedback -->
+          <div v-if="updateError" class="mb-4 p-3 bg-red-50 border border-red-100 text-red-700 rounded-lg text-sm">
+            {{ updateError }}
+          </div>
+          <div v-if="updateSuccess" class="mb-4 p-3 bg-green-50 border border-green-100 text-green-700 rounded-lg text-sm">
+            Plan updated successfully.
+          </div>
+
+          <!-- Plan cards -->
+          <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div
+              v-for="plan in plans"
+              :key="plan.value"
+              @click="selectedPlan = plan.value"
+              :class="[
+  'relative border-2 rounded-xl p-5 cursor-pointer transition-all',
+  selectedPlan === plan.value ? 'border-blue-500 bg-blue-50' : currentPlan === plan.value ? 'border-green-500 bg-green-50' : 'border-gray-200 hover:border-blue-300'
+]"
+            >
+              <div v-if="currentPlan === plan.value" class="absolute -top-2 -right-2 bg-green-500 text-white text-[9px] font-black px-2 py-0.5 rounded-full uppercase">Current</div>
+              <div v-else-if="plan.popular" class="absolute -top-2 -right-2 bg-orange-500 text-white text-[9px] font-black px-2 py-0.5 rounded-full uppercase">Popular</div>
+              <h3 class="font-bold text-gray-900 mb-1">{{ plan.title }}</h3>
+              <p v-if="plan.subtitle" class="text-xs text-gray-500 mb-3">{{ plan.subtitle }}</p>
+              <p class="text-xl font-bold text-gray-900 mb-3">{{ plan.price }}</p>
+              <ul class="space-y-1">
+                <li v-for="feature in plan.features" :key="feature" class="text-xs text-gray-600 flex items-start gap-1.5">
+                  <span class="text-green-500 mt-0.5">✓</span> {{ feature }}
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- Update button -->
+          <div v-if="selectedPlan && selectedPlan !== currentPlan" class="mt-6 text-center">
+            <button @click="updatePlan" :disabled="isUpdating"
+              class="bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition disabled:opacity-50">
+              {{ isUpdating ? "Updating..." : `Switch to ${plans.find((p) => p.value === selectedPlan)?.title}` }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>

package/dist/runtime/pages/admin/account.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/editor/[id].d.vue.ts

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