@chigisoft-web/cms-sdk 1.0.3 → 1.0.4

package/dist/cli.js

@@ -80,6 +80,163 @@ function ensureDir(dirPath) {
     import_fs.default.mkdirSync(absolutePath, { recursive: true });
   }
 }
+function configureNextImages() {
+  const files = ["next.config.ts", "next.config.js", "next.config.mjs"];
+  let foundFile = "";
+  let content = "";
+  for (const f of files) {
+    const p = import_path.default.join(process.cwd(), f);
+    if (import_fs.default.existsSync(p)) {
+      foundFile = p;
+      content = import_fs.default.readFileSync(p, "utf8");
+      break;
+    }
+  }
+  const spacesPatternStr = `{
+        protocol: 'https',
+        hostname: '*.ams3.digitaloceanspaces.com',
+      }`;
+  if (foundFile) {
+    if (content.includes("ams3.digitaloceanspaces.com")) {
+      console.log(`\u2139\uFE0F DigitalOcean Spaces is already configured in ${import_path.default.basename(foundFile)}.`);
+      return;
+    }
+    if (content.includes("remotePatterns: [")) {
+      content = content.replace(
+        "remotePatterns: [",
+        `remotePatterns: [
+      ${spacesPatternStr},`
+      );
+      import_fs.default.writeFileSync(foundFile, content, "utf8");
+      console.log(`\u2705 Configured DigitalOcean Spaces under remotePatterns in ${import_path.default.basename(foundFile)}.`);
+    } else if (content.includes("images: {")) {
+      content = content.replace(
+        "images: {",
+        `images: {
+    remotePatterns: [
+      ${spacesPatternStr},
+    ],`
+      );
+      import_fs.default.writeFileSync(foundFile, content, "utf8");
+      console.log(`\u2705 Configured DigitalOcean Spaces under images in ${import_path.default.basename(foundFile)}.`);
+    } else {
+      if (content.includes("const nextConfig: NextConfig = {")) {
+        content = content.replace(
+          "const nextConfig: NextConfig = {",
+          `const nextConfig: NextConfig = {
+  images: {
+    remotePatterns: [
+      ${spacesPatternStr},
+    ],
+  },`
+        );
+        import_fs.default.writeFileSync(foundFile, content, "utf8");
+        console.log(`\u2705 Configured DigitalOcean Spaces in ${import_path.default.basename(foundFile)}.`);
+      } else if (content.includes("const nextConfig = {")) {
+        content = content.replace(
+          "const nextConfig = {",
+          `const nextConfig = {
+  images: {
+    remotePatterns: [
+      ${spacesPatternStr},
+    ],
+  },`
+        );
+        import_fs.default.writeFileSync(foundFile, content, "utf8");
+        console.log(`\u2705 Configured DigitalOcean Spaces in ${import_path.default.basename(foundFile)}.`);
+      } else if (content.includes("export default {")) {
+        content = content.replace(
+          "export default {",
+          `export default {
+  images: {
+    remotePatterns: [
+      ${spacesPatternStr},
+    ],
+  },`
+        );
+        import_fs.default.writeFileSync(foundFile, content, "utf8");
+        console.log(`\u2705 Configured DigitalOcean Spaces in ${import_path.default.basename(foundFile)}.`);
+      } else if (content.includes("module.exports = {")) {
+        content = content.replace(
+          "module.exports = {",
+          `module.exports = {
+  images: {
+    remotePatterns: [
+      ${spacesPatternStr},
+    ],
+  },`
+        );
+        import_fs.default.writeFileSync(foundFile, content, "utf8");
+        console.log(`\u2705 Configured DigitalOcean Spaces in ${import_path.default.basename(foundFile)}.`);
+      } else {
+        console.log(`\u26A0\uFE0F Could not automatically inject images config in ${import_path.default.basename(foundFile)}.`);
+        console.log(`Please add the following to your images config:`);
+        console.log(`images: { remotePatterns: [ { protocol: 'https', hostname: '*.ams3.digitaloceanspaces.com' } ] }`);
+      }
+    }
+  } else {
+    const nextConfigContent = `import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "*.ams3.digitaloceanspaces.com",
+      },
+    ],
+  },
+};
+
+export default nextConfig;
+`;
+    import_fs.default.writeFileSync(import_path.default.join(process.cwd(), "next.config.ts"), nextConfigContent, "utf8");
+    console.log(`\u2705 Created next.config.ts configured with DigitalOcean Spaces.`);
+  }
+}
+function configureNuxtImages() {
+  const p = import_path.default.join(process.cwd(), "nuxt.config.ts");
+  if (import_fs.default.existsSync(p)) {
+    let content = import_fs.default.readFileSync(p, "utf8");
+    if (content.includes("ams3.digitaloceanspaces.com")) {
+      console.log("\u2139\uFE0F DigitalOcean Spaces is already configured in nuxt.config.ts.");
+      return;
+    }
+    if (content.includes("image: {")) {
+      if (content.includes("domains: [")) {
+        content = content.replace("domains: [", "domains: ['ams3.digitaloceanspaces.com', ");
+      } else {
+        content = content.replace("image: {", "image: {\n    domains: ['ams3.digitaloceanspaces.com'],");
+      }
+      import_fs.default.writeFileSync(p, content, "utf8");
+      console.log("\u2705 Configured DigitalOcean Spaces in nuxt.config.ts image block.");
+    } else if (content.includes("defineNuxtConfig({")) {
+      content = content.replace(
+        "defineNuxtConfig({",
+        `defineNuxtConfig({
+  image: {
+    domains: ['ams3.digitaloceanspaces.com'],
+  },`
+      );
+      import_fs.default.writeFileSync(p, content, "utf8");
+      console.log("\u2705 Injected image configuration into nuxt.config.ts.");
+    } else {
+      console.log("\u26A0\uFE0F Could not automatically inject images config in nuxt.config.ts.");
+      console.log("Please add image config domains: ['ams3.digitaloceanspaces.com'] to your nuxt.config.ts.");
+    }
+  } else {
+    const nuxtConfigContent = `// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: ['@nuxt/image'],
+  image: {
+    domains: ['ams3.digitaloceanspaces.com'],
+  },
+});
+`;
+    import_fs.default.writeFileSync(p, nuxtConfigContent, "utf8");
+    console.log("\u2705 Created nuxt.config.ts configured with DigitalOcean Spaces.");
+  }
+}
 async function main() {
   console.log("\n===========================================");
   console.log("      chigisoft-cms SDK Setup Wizard \u{1F680}    ");
@@ -109,6 +266,7 @@ async function main() {
   if (frameworkChoice === "1") {
     console.log("\n\u{1F527} Setting up Next.js integration...");
     writeEnv(".env.local", projectId, token);
+    configureNextImages();
     ensureDir("lib");
     const clientFileContent = `import { createClient } from '@chigisoft-web/cms-sdk';
 
@@ -194,13 +352,221 @@ CHIGISOFT_STUDIO_URL="https://cms.staging.chigisoft.co" (optional)\`}
 `;
     import_fs.default.writeFileSync(import_path.default.join(process.cwd(), "app/studio/page.tsx"), studioPageContent, "utf8");
     console.log("\u2705 Created studio page router at app/studio/page.tsx");
+    ensureDir("components");
+    const blockRendererContent = `import React from 'react';
+import Image from 'next/image';
+import type { CMSBlock } from '@chigisoft-web/cms-sdk';
+
+interface CMSBlocksProps {
+  blocks: CMSBlock[];
+}
+
+export default function CMSBlocks({ blocks }: CMSBlocksProps) {
+  if (!blocks || !Array.isArray(blocks)) return null;
+
+  return (
+    <div className="cms-blocks space-y-12 my-8">
+      {blocks.map((block) => {
+        const { id, type, data, content } = block;
+        const blockData = data || content || {};
+
+        switch (type) {
+          case 'heading': {
+            const level = blockData.level || 2;
+            const Tag = \`h\${level}\` as keyof JSX.IntrinsicElements;
+            const alignClass = blockData.align === 'center' ? 'text-center' : blockData.align === 'right' ? 'text-right' : 'text-left';
+            const sizeClass = level === 1 ? 'text-4xl font-extrabold' : level === 3 ? 'text-2xl font-bold' : 'text-3xl font-bold';
+            return (
+              <Tag key={id} className={\`tracking-tight text-gray-900 \${alignClass} \${sizeClass}\`}>
+                {blockData.text}
+              </Tag>
+            );
+          }
+
+          case 'richText':
+          case 'rich-text':
+            return (
+              <div
+                key={id}
+                className="prose max-w-none text-gray-700 leading-relaxed"
+                dangerouslySetInnerHTML={{ __html: blockData.content || blockData.html || '' }}
+              />
+            );
+
+          case 'image':
+            return (
+              <figure key={id} className="my-6">
+                {blockData.mediaUrl && (
+                  <div className="relative w-full h-[400px]">
+                    <Image
+                      src={blockData.mediaUrl}
+                      alt={blockData.alt || ''}
+                      fill
+                      sizes="(max-width: 768px) 100vw, 800px"
+                      className="object-cover rounded-xl shadow-md"
+                    />
+                  </div>
+                )}
+                {blockData.caption && (
+                  <figcaption className="text-center text-sm text-gray-500 mt-2">
+                    {blockData.caption}
+                  </figcaption>
+                )}
+              </figure>
+            );
+
+          case 'quote':
+          case 'testimonial':
+            return (
+              <blockquote key={id} className="border-l-4 border-violet-500 pl-4 py-2 my-6 italic text-gray-700 bg-gray-50 rounded-r-lg">
+                <p className="text-lg">{blockData.text || blockData.quote}</p>
+                {(blockData.attribution || blockData.author) && (
+                  <cite className="block mt-2 text-sm not-italic font-semibold text-gray-500">
+                    \u2014 {blockData.attribution || blockData.author} {blockData.role ? \`(\${blockData.role})\` : ''}
+                  </cite>
+                )}
+              </blockquote>
+            );
+
+          case 'video':
+          case 'embed':
+            return (
+              <div key={id} className="my-6 aspect-video rounded-xl overflow-hidden shadow-lg">
+                <iframe
+                  src={blockData.url}
+                  className="w-full h-full"
+                  allowFullScreen
+                  title={blockData.caption || 'Video block'}
+                />
+              </div>
+            );
+
+          case 'ctaStrip':
+          case 'cta':
+            return (
+              <div key={id} className="p-8 my-8 bg-violet-50 border border-violet-100 rounded-2xl flex flex-col md:flex-row items-center justify-between gap-6">
+                <div>
+                  <h3 className="text-xl font-bold text-gray-900">{blockData.heading}</h3>
+                  <p className="text-gray-600 mt-1">{blockData.body}</p>
+                </div>
+                {(blockData.primaryUrl || blockData.buttonUrl) && (
+                  <a
+                    href={blockData.primaryUrl || blockData.buttonUrl}
+                    className="px-6 py-3 bg-violet-600 hover:bg-violet-700 text-white font-semibold rounded-xl transition-colors shrink-0"
+                  >
+                    {blockData.primaryLabel || blockData.buttonLabel || 'Learn More'}
+                  </a>
+                )}
+              </div>
+            );
+
+          default:
+            return (
+              <div key={id} className="p-4 bg-gray-100 rounded-lg text-xs text-gray-400 font-mono">
+                Unknown block type: {type}
+              </div>
+            );
+        }
+      })}
+    </div>
+  );
+}
+`;
+    import_fs.default.writeFileSync(import_path.default.join(process.cwd(), "components/CMSBlocks.tsx"), blockRendererContent, "utf8");
+    console.log("\u2705 Created block renderer component at components/CMSBlocks.tsx");
+    ensureDir("app/[slug]");
+    const catchAllPageContent = `import { notFound } from "next/navigation";
+import { chigisoft } from "@/lib/chigisoft";
+import CMSBlocks from "@/components/CMSBlocks";
+
+interface PageProps {
+  params: {
+    slug: string;
+  };
+}
+
+export default async function CatchAllCMSPage({ params }: PageProps) {
+  const { slug } = params;
+  const page = await chigisoft.getPageBySlug(slug, {
+    next: { revalidate: 60 },
+  });
+
+  if (!page) {
+    notFound();
+  }
+
+  return (
+    <article className="max-w-4xl mx-auto py-16 px-6">
+      <header className="mb-10 text-center">
+        <h1 className="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
+          {page.title}
+        </h1>
+        {page.description && (
+          <p className="mt-4 text-xl text-gray-500">
+            {page.description}
+          </p>
+        )}
+      </header>
+
+      <CMSBlocks blocks={page.blocks} />
+    </article>
+  );
+}
+`;
+    import_fs.default.writeFileSync(import_path.default.join(process.cwd(), "app/[slug]/page.tsx"), catchAllPageContent, "utf8");
+    console.log("\u2705 Created catch-all CMS page router at app/[slug]/page.tsx");
+    ensureDir("app/blog/[slug]");
+    const blogPageContent = `import { notFound } from "next/navigation";
+import { chigisoft } from "@/lib/chigisoft";
+import CMSBlocks from "@/components/CMSBlocks";
+
+interface PageProps {
+  params: {
+    slug: string;
+  };
+}
+
+export default async function BlogPostPage({ params }: PageProps) {
+  const { slug } = params;
+  const blog = await chigisoft.getBlogBySlug(slug, {
+    next: { revalidate: 60 },
+  });
+
+  if (!blog) {
+    notFound();
+  }
+
+  return (
+    <article className="max-w-3xl mx-auto py-16 px-6">
+      <header className="mb-10">
+        <h1 className="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl mb-4">
+          {blog.title}
+        </h1>
+        <div className="flex items-center gap-4 text-sm text-gray-500">
+          <time dateTime={blog.createdAt}>
+            {new Date(blog.createdAt).toLocaleDateString(undefined, {
+              dateStyle: "long",
+            })}
+          </time>
+        </div>
+      </header>
+
+      <CMSBlocks blocks={blog.blocks} />
+    </article>
+  );
+}
+`;
+    import_fs.default.writeFileSync(import_path.default.join(process.cwd(), "app/blog/[slug]/page.tsx"), blogPageContent, "utf8");
+    console.log("\u2705 Created blog CMS page router at app/blog/[slug]/page.tsx");
     console.log("\n\u{1F389} Next.js Setup Complete!");
     console.log("You can now:");
     console.log('1. Import the client helper in components: `import { chigisoft } from "@/lib/chigisoft";`');
     console.log("2. Access the CMS login/dashboard from the `/studio` route of your site.");
+    console.log("3. Render dynamic pages and blogs via catch-all routes and `<CMSBlocks />`!");
   } else if (frameworkChoice === "2") {
     console.log("\n\u{1F527} Setting up Nuxt.js integration...");
     writeEnv(".env", projectId, token);
+    configureNuxtImages();
     ensureDir("plugins");
     const pluginContent = `import { createClient } from '@chigisoft-web/cms-sdk';
 
@@ -219,7 +585,9 @@ export default defineNuxtPlugin(() => {
     console.log("\u2705 Created Nuxt client plugin at plugins/chigisoft.ts");
     const isNuxt4 = import_fs.default.existsSync(import_path.default.join(process.cwd(), "app"));
     const pagesDir = isNuxt4 ? "app/pages" : "pages";
+    const compDir = isNuxt4 ? "app/components" : "components";
     ensureDir(pagesDir);
+    ensureDir(compDir);
     const nuxtStudioPageContent = `<script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { createClient } from '@chigisoft-web/cms-sdk';
@@ -252,10 +620,186 @@ onMounted(() => {
 `;
     import_fs.default.writeFileSync(import_path.default.join(process.cwd(), pagesDir, "studio.vue"), nuxtStudioPageContent, "utf8");
     console.log(`\u2705 Created studio page at ${pagesDir}/studio.vue`);
+    const blockRendererVueContent = `<script setup lang="ts">
+import type { CMSBlock } from '@chigisoft-web/cms-sdk';
+
+defineProps<{
+  blocks: CMSBlock[];
+}>();
+</script>
+
+<template>
+  <div v-if="blocks && Array.isArray(blocks)" class="cms-blocks space-y-12 my-8">
+    <div v-for="block in blocks" :key="block.id">
+      <!-- Heading Block -->
+      <template v-if="block.type === 'heading'">
+        <component
+          :is="\`h\${block.data?.level || 2}\`"
+          :class="[
+            'font-bold tracking-tight text-gray-900',
+            block.data?.align === 'center' ? 'text-center' : block.data?.align === 'right' ? 'text-right' : 'text-left',
+            block.data?.level === 1 ? 'text-4xl font-extrabold' : block.data?.level === 3 ? 'text-2xl font-bold' : 'text-3xl font-bold'
+          ]"
+        >
+          {{ block.data?.text || block.content?.text }}
+        </component>
+      </template>
+
+      <!-- Rich Text Block -->
+      <template v-else-if="block.type === 'richText' || block.type === 'rich-text'">
+        <div
+          class="prose max-w-none text-gray-700 leading-relaxed"
+          v-html="block.data?.content || block.content?.html || block.content?.text || ''"
+        ></div>
+      </template>
+
+      <!-- Image Block -->
+      <template v-else-if="block.type === 'image'">
+        <figure class="my-6">
+          <img
+            v-if="block.data?.mediaUrl || block.content?.mediaUrl"
+            :src="block.data?.mediaUrl || block.content?.mediaUrl"
+            :alt="block.data?.alt || block.content?.alt || ''"
+            class="w-full h-auto max-h-[500px] object-cover rounded-xl shadow-md"
+          />
+          <figcaption
+            v-if="block.data?.caption || block.content?.caption"
+            class="text-center text-sm text-gray-500 mt-2"
+          >
+            {{ block.data?.caption || block.content?.caption }}
+          </figcaption>
+        </figure>
+      </template>
+
+      <!-- Quote Block -->
+      <template v-else-if="block.type === 'quote' || block.type === 'testimonial'">
+        <blockquote class="border-l-4 border-violet-500 pl-4 py-2 my-6 italic text-gray-700 bg-gray-50 rounded-r-lg">
+          <p class="text-lg">{{ block.data?.text || block.data?.quote || block.content?.text }}</p>
+          <cite
+            v-if="block.data?.attribution || block.data?.author || block.content?.attribution"
+            class="block mt-2 text-sm not-italic font-semibold text-gray-500"
+          >
+            \u2014 {{ block.data?.attribution || block.data?.author || block.content?.attribution }}
+            <span v-if="block.data?.role">({{ block.data?.role }})</span>
+          </cite>
+        </blockquote>
+      </template>
+
+      <!-- Video Block -->
+      <template v-else-if="block.type === 'video' || block.type === 'embed'">
+        <div class="my-6 aspect-video rounded-xl overflow-hidden shadow-lg">
+          <iframe
+            :src="block.data?.url || block.content?.url"
+            class="w-full h-full"
+            allowfullscreen
+            :title="block.data?.caption || block.content?.caption || 'Video Block'"
+          ></iframe>
+        </div>
+      </template>
+
+      <!-- CTA Strip Block -->
+      <template v-else-if="block.type === 'ctaStrip' || block.type === 'cta'">
+        <div class="p-8 my-8 bg-violet-50 border border-violet-100 rounded-2xl flex flex-col md:flex-row items-center justify-between gap-6">
+          <div>
+            <h3 class="text-xl font-bold text-gray-900">{{ block.data?.heading || block.content?.heading }}</h3>
+            <p class="text-gray-600 mt-1">{{ block.data?.body || block.content?.body }}</p>
+          </div>
+          <a
+            v-if="block.data?.primaryUrl || block.data?.buttonUrl || block.content?.primaryUrl"
+            :href="block.data?.primaryUrl || block.data?.buttonUrl || block.content?.primaryUrl"
+            class="px-6 py-3 bg-violet-600 hover:bg-violet-700 text-white font-semibold rounded-xl transition-colors shrink-0"
+          >
+            {{ block.data?.primaryLabel || block.data?.buttonLabel || block.content?.primaryLabel || 'Learn More' }}
+          </a>
+        </div>
+      </template>
+
+      <!-- Unsupported Block -->
+      <template v-else>
+        <div class="p-4 bg-gray-100 rounded-lg text-xs text-gray-400 font-mono">
+          Unknown block type: {{ block.type }}
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+`;
+    import_fs.default.writeFileSync(import_path.default.join(process.cwd(), compDir, "CMSBlocks.vue"), blockRendererVueContent, "utf8");
+    console.log(`\u2705 Created block renderer component at ${compDir}/CMSBlocks.vue`);
+    const nuxtCatchAllContent = `<script setup lang="ts">
+const route = useRoute();
+const { $chigisoft } = useNuxtApp();
+
+const slug = computed(() => route.params.slug as string);
+
+const { data: page, error } = await useAsyncData(\`page-\${slug.value}\`, () =>
+  $chigisoft.getPageBySlug(slug.value)
+);
+
+if (error.value || !page.value) {
+  throw createError({ statusCode: 404, message: 'Page not found', fatal: true });
+}
+</script>
+
+<template>
+  <article v-if="page" class="max-w-4xl mx-auto py-16 px-6">
+    <header class="mb-10 text-center">
+      <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
+        {{ page.title }}
+      </h1>
+      <p v-if="page.description" class="mt-4 text-xl text-gray-500">
+        {{ page.description }}
+      </p>
+    </header>
+
+    <CMSBlocks :blocks="page.blocks" />
+  </article>
+</template>
+`;
+    import_fs.default.writeFileSync(import_path.default.join(process.cwd(), pagesDir, "[slug].vue"), nuxtCatchAllContent, "utf8");
+    console.log(`\u2705 Created catch-all CMS page router at ${pagesDir}/[slug].vue`);
+    ensureDir(import_path.default.join(pagesDir, "blog"));
+    const nuxtBlogPageContent = `<script setup lang="ts">
+const route = useRoute();
+const { $chigisoft } = useNuxtApp();
+
+const slug = computed(() => route.params.slug as string);
+
+const { data: blog, error } = await useAsyncData(\`blog-\${slug.value}\`, () =>
+  $chigisoft.getBlogBySlug(slug.value)
+);
+
+if (error.value || !blog.value) {
+  throw createError({ statusCode: 404, message: 'Blog post not found', fatal: true });
+}
+
+const formatDate = (dateStr: string) => {
+  return new Date(dateStr).toLocaleDateString(undefined, { dateStyle: 'long' });
+};
+</script>
+
+<template>
+  <article v-if="blog" class="max-w-3xl mx-auto py-16 px-6">
+    <header class="mb-10">
+      <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl mb-4">
+        {{ blog.title }}
+      </h1>
+      <div class="flex items-center gap-4 text-sm text-gray-500">
+        <time :datetime="blog.createdAt">{{ formatDate(blog.createdAt) }}</time>
+      </div>
+    </header>
+
+    <CMSBlocks :blocks="blog.blocks" />
+  </article>
+</template>
+`;
+    import_fs.default.writeFileSync(import_path.default.join(process.cwd(), pagesDir, "blog/[slug].vue"), nuxtBlogPageContent, "utf8");
+    console.log(`\u2705 Created blog CMS page router at ${pagesDir}/blog/[slug].vue`);
     console.log("\n\u{1F389} Nuxt.js Setup Complete!");
     console.log("You can now:");
     console.log("1. Access the client from Nuxt context: `const { $chigisoft } = useNuxtApp();`");
     console.log("2. Access the CMS login/dashboard from the `/studio` route of your site.");
+    console.log("3. Render dynamic pages and blogs via catch-all routes and `<CMSBlocks />`!");
   } else if (frameworkChoice === "3") {
     console.log("\n\u{1F527} Setting up Vanilla HTML/JS demo...");
     const demoHtmlContent = `<!DOCTYPE html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chigisoft-web/cms-sdk",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "SDK client for ChigiSoft CMS",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",