cinqcinqdev-seo 0.1.0

package/README.md

@@ -0,0 +1,192 @@
+# nuxt-admin-cms
+
+A reusable Nuxt 3 admin module with a visual 3-panel page editor, powered by Supabase.
+
+Drop it into any Nuxt project to get:
+- `/admin` — Dashboard with page type cards
+- `/admin/pages/:type` — List + create + delete pages by type
+- `/admin/editor/:id` — Full visual editor (structure sidebar / live preview / properties panel)
+- `/admin/account` — User profile + optional plan management
+- Auto auth middleware protecting all `/admin` routes
+
+---
+
+## Prerequisites
+
+Your project must have these modules installed and configured:
+
+```bash
+pnpm add @nuxtjs/supabase @pinia/nuxt
+```
+
+## Installation
+
+```bash
+pnpm add nuxt-admin-cms
+```
+
+In `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: [
+    '@nuxtjs/supabase',
+    '@pinia/nuxt',
+    'nuxt-admin-cms',
+  ],
+
+  adminCms: {
+    branding: {
+      name: 'My App',
+      logoUrl: '/logo.png', // optional
+    },
+    loginRoute: '/login',
+    tables: {
+      pages: 'pages',  // your Supabase table for pages
+      users: 'users',  // your Supabase table for users
+    },
+    storageBucket: 'site', // Supabase storage bucket for image uploads
+    pageTypes: [
+      { id: 'landing_page', label: 'Landing Page', icon: '🚀' },
+      { id: 'service_page', label: 'Service Page', icon: '🛠️' },
+      { id: 'about_page',   label: 'About Page',   icon: '👋' },
+      { id: 'blog_article', label: 'Blog Article', icon: '📝' },
+    ],
+    // Optional: plans for the account page
+    plans: [
+      { value: 'free',  title: 'Free',  price: '$0/mo',   features: ['1 site', '5 pages'] },
+      { value: 'pro',   title: 'Pro',   price: '$19/mo',  features: ['Unlimited sites', 'Priority support'], popular: true },
+    ],
+  },
+})
+```
+
+---
+
+## Supabase Setup
+
+### Required table: `pages`
+
+```sql
+create table pages (
+  id uuid primary key default gen_random_uuid(),
+  title text not null,
+  slug text not null unique,
+  type text not null,
+  status text not null default 'draft',
+  content jsonb not null default '[]',
+  seo_config jsonb default '{}',
+  content_locked boolean default false,
+  label text,
+  prefix text,
+  created_at timestamptz default now(),
+  updated_at timestamptz default now()
+);
+
+-- Auto-update updated_at
+create or replace function update_updated_at()
+returns trigger as $$
+begin
+  new.updated_at = now();
+  return new;
+end;
+$$ language plpgsql;
+
+create trigger pages_updated_at
+  before update on pages
+  for each row execute function update_updated_at();
+```
+
+### Required table: `users`
+
+```sql
+create table users (
+  id uuid primary key references auth.users(id),
+  plan text default 'free',
+  is_subscription_active boolean default false,
+  trial_expires_at timestamptz,
+  created_at timestamptz default now()
+);
+```
+
+### Storage bucket
+
+Create a bucket named `site` (or whatever you set as `storageBucket`) in Supabase Storage with public read access.
+
+---
+
+## Section Components
+
+The editor renders sections by resolving components from your app's `components/sections/` directory.
+
+The default section types are: `HeroSection`, `TextVisual`, `ServiceGrid`, `Features`, `FAQ`, `Process`, `Testimonials`, `Pricing`, `ContactForm`.
+
+Create matching Vue components:
+
+```
+components/
+  sections/
+    HeroSection.vue      ← receives props defined in the editor
+    ServiceGrid.vue
+    FAQ.vue
+    ...
+```
+
+Each section component receives its props directly via `v-bind`. Example:
+
+```vue
+<!-- components/sections/HeroSection.vue -->
+<script setup lang="ts">
+defineProps<{
+  title: string | { fr: string; en: string; ar: string }
+  subtitle?: string | { fr: string; en: string; ar: string }
+  bgColor?: string
+  textColor?: string
+  ctaText?: string | { fr: string; en: string; ar: string }
+  ctaLink?: string
+}>()
+</script>
+```
+
+> **i18n props**: Some fields are stored as `{ fr: '...', en: '...', ar: '...' }` objects. Handle them accordingly in your section components.
+
+### Adding custom sections
+
+Add your own sections via the `extraSections` option:
+
+```ts
+adminCms: {
+  extraSections: {
+    MyCustomSection: {
+      label: 'Custom Block',
+      icon: '✨',
+      defaultProps: { title: 'Hello', bgColor: '#fff' },
+      fields: {
+        title:   { type: 'text',  label: 'Title' },
+        bgColor: { type: 'color', label: 'Background' },
+      },
+    },
+  },
+}
+```
+
+Then create `components/sections/MyCustomSection.vue` in your app.
+
+---
+
+## Auth
+
+The module registers a global middleware that:
+- Redirects unauthenticated users trying to access `/admin/*` to `loginRoute` (`/login` by default)
+- Redirects authenticated users away from `loginRoute` to `/admin`
+
+Your login page + Supabase auth setup is your responsibility (the module only protects routes).
+
+---
+
+## What's NOT included
+
+- Login / Register pages → you provide these
+- Section component UI → you provide the Vue components in `components/sections/`
+- Email notifications, webhooks → out of scope
+- Multi-tenancy / per-user page isolation → implement RLS in Supabase

package/dist/module.d.cts

@@ -0,0 +1,2 @@
+export * from "/Users/mac/Desktop/nuxt-admin-cms/src/module";
+export { default } from "/Users/mac/Desktop/nuxt-admin-cms/src/module";

package/dist/module.d.mts

@@ -0,0 +1,2 @@
+export * from "/Users/mac/Desktop/nuxt-admin-cms/src/module";
+export { default } from "/Users/mac/Desktop/nuxt-admin-cms/src/module";

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "cinqcinqdev-seo",
+  "configKey": "adminCms",
+  "compatibility": {
+    "nuxt": "^3.0.0"
+  },
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,18 @@
+import { createJiti } from "file:///Users/mac/Desktop/nuxt-admin-cms/node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/lib/jiti.mjs";
+
+const jiti = createJiti(import.meta.url, {
+  "interopDefault": true,
+  "alias": {
+    "cinqcinqdev-seo": "/Users/mac/Desktop/nuxt-admin-cms"
+  },
+  "transformOptions": {
+    "babel": {
+      "plugins": []
+    }
+  }
+})
+
+/** @type {import("/Users/mac/Desktop/nuxt-admin-cms/src/module")} */
+const _module = await jiti.import("/Users/mac/Desktop/nuxt-admin-cms/src/module.ts");
+
+export default _module?.default ?? _module;

package/dist/types.d.mts

@@ -0,0 +1,13 @@
+import type { ModuleHooks, ModuleRuntimeHooks, ModuleRuntimeConfig, ModulePublicRuntimeConfig } from './module.mjs'
+
+declare module '#app' {
+  interface RuntimeNuxtHooks extends ModuleRuntimeHooks {}
+}
+
+declare module '@nuxt/schema' {
+  interface NuxtHooks extends ModuleHooks {}
+  interface RuntimeConfig extends ModuleRuntimeConfig {}
+  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
+}
+
+export * from "./module.mjs"

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "cinqcinqdev-seo",
+  "version": "0.1.0",
+  "description": "A reusable Nuxt 3 admin CMS module with visual page editor powered by Supabase",
+  "license": "MIT",
+  "module": "./dist/module.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/module.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "nuxt-module-build build",
+    "dev": "nuxt-module-build build --stub && nuxt dev playground",
+    "dev:build": "nuxt build playground",
+    "prepare": "nuxt-module-build build --stub",
+    "release": "npm run build && npm publish"
+  },
+  "peerDependencies": {
+    "@nuxtjs/supabase": ">=1.0.0",
+    "@pinia/nuxt": ">=0.5.0",
+    "nuxt": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@nuxt/kit": "^3.13.0",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^3.13.0",
+    "@nuxtjs/supabase": "^1.4.0",
+    "@pinia/nuxt": "^0.9.0",
+    "defu": "^6.1.4",
+    "nuxt": "^3.13.0",
+    "vue-tsc": "^3.3.1"
+  }
+}