create-nextblock 0.0.2 → 0.0.4

package/bin/create-nextblock.js

@@ -131,7 +131,7 @@ async function handleCommand(projectDirectory, options) {
     console.log(chalk.green('Global styles configured.'));
 
     await sanitizeTailwindConfig(projectDir);
-    console.log(chalk.green('tailwind.config.ts sanitized.'));
+    console.log(chalk.green('tailwind.config.js sanitized.'));
 
     await normalizeTsconfig(projectDir);
     console.log(chalk.green('tsconfig.json normalized.'));
@@ -598,10 +598,9 @@ async function ensureEditorStyles(projectDir) {
 }
 
 async function sanitizeTailwindConfig(projectDir) {
-  const tailwindConfigPath = resolve(projectDir, 'tailwind.config.ts');
-  const content = `import type { Config } from 'tailwindcss';
-
-const config = {
+  const tailwindConfigPath = resolve(projectDir, 'tailwind.config.js');
+  const content = `/** @type {import('tailwindcss').Config} */
+module.exports = {
   darkMode: ['class'],
   content: [
     './app/**/*.{js,ts,jsx,tsx,mdx}',
@@ -693,9 +692,7 @@ const config = {
     },
   },
   plugins: [require('tailwindcss-animate')],
-} satisfies Config;
-
-export default config;
+};
 `;
 
   await fs.writeFile(tailwindConfigPath, content);
@@ -994,4 +991,3 @@ function buildNextConfigContent(editorUtilNames) {
 
   return lines.join('\n');
 }
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextblock",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "",
   "main": "index.js",
   "bin": {

package/templates/nextblock-template/app/cms/blocks/components/BlockEditorArea.tsx

@@ -129,13 +129,13 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
     debouncedSave(updatedBlock);
   };
 
-  const DynamicTextBlockEditor = dynamic(() => import('../editors/TextBlockEditor.tsx').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
-  const DynamicHeadingBlockEditor = dynamic(() => import('../editors/HeadingBlockEditor.tsx').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
-  const DynamicImageBlockEditor = dynamic(() => import('../editors/ImageBlockEditor.tsx').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
-  const DynamicButtonBlockEditor = dynamic(() => import('../editors/ButtonBlockEditor.tsx').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
-  const DynamicPostsGridBlockEditor = dynamic(() => import('../editors/PostsGridBlockEditor.tsx').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
-  const DynamicVideoEmbedBlockEditor = dynamic(() => import('../editors/VideoEmbedBlockEditor.tsx').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
-  const DynamicSectionBlockEditor = dynamic(() => import('../editors/SectionBlockEditor.tsx').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
+  const DynamicTextBlockEditor = dynamic(() => import('../editors/TextBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
+  const DynamicHeadingBlockEditor = dynamic(() => import('../editors/HeadingBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
+  const DynamicImageBlockEditor = dynamic(() => import('../editors/ImageBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
+  const DynamicButtonBlockEditor = dynamic(() => import('../editors/ButtonBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
+  const DynamicPostsGridBlockEditor = dynamic(() => import('../editors/PostsGridBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
+  const DynamicVideoEmbedBlockEditor = dynamic(() => import('../editors/VideoEmbedBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
+  const DynamicSectionBlockEditor = dynamic(() => import('../editors/SectionBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
 
   useEffect(() => {
     if (editingNestedBlockInfo) {
@@ -444,7 +444,7 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
                   onContentChange={handleContentChange}
                   onDelete={async (blockIdToDelete) => {
                     startTransition(async () => {
-                      const result = await import("../actions.ts").then(({ deleteBlock }) =>
+                      const result = await import("../actions").then(({ deleteBlock }) =>
                         deleteBlock(
                           blockIdToDelete,
                           parentType === "page" ? parentId : null,

package/templates/nextblock-template/app/globals.css

@@ -1,15 +1,14 @@
-/*─────────────────────────────────────────────────────────────────────────────
-  globals.css — complete rewrite
-─────────────────────────────────────────────────────────────────────────────*/
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
+@config "../../../../tailwind.config.js";
+@import "tailwindcss/preflight";
+@import "tailwindcss/theme";
+@import "tailwindcss/utilities";
+/*─────────────────────────────────────────────────────────────────────────────
+  globals.css — complete rewrite
+─────────────────────────────────────────────────────────────────────────────*/
 /*─────────────────────────────────────────────────────────────────────────────
   1. Critical CSS Resets (formerly in <style id="critical-css">)
 ─────────────────────────────────────────────────────────────────────────────*/
-@layer base {
+@layer base {
   *, ::before, ::after {
     box-sizing: border-box;
     border-width: 0;
@@ -194,67 +193,103 @@
   ───────────────────────────────────────────────────────────────────────────*/
   /* Apply your border color everywhere */
   * {
-    @apply border-border;
+    border-color: hsl(var(--border));
   }
 
   /* Body background & text */
   body {
-    @apply bg-background text-foreground;
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
   }
 
   /* Semantic headings */
-  ul, ol {
-    @apply pl-6 mb-4;
+  ul,
+  ol {
+    padding-left: 1.5rem;
+    margin-bottom: 1rem;
   }
   li {
-    @apply mb-1;
+    margin-bottom: 0.25rem;
   }
   blockquote {
-    @apply p-4 italic border-l-4 border-border bg-muted text-muted-foreground mb-4;
+    padding: 1rem;
+    font-style: italic;
+    border-left-width: 4px;
+    border-left-style: solid;
+    border-left-color: hsl(var(--border));
+    background-color: hsl(var(--muted));
+    color: hsl(var(--muted-foreground));
+    margin-bottom: 1rem;
   }
   code {
-    @apply bg-muted text-muted-foreground px-1 py-0.5 rounded-sm font-mono text-sm;
+    background-color: hsl(var(--muted));
+    color: hsl(var(--muted-foreground));
+    padding: 0.25rem 0.25rem;
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+    border-radius: 0.125rem;
+    font-family:
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      'Liberation Mono',
+      'Courier New',
+      monospace;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
   }
   pre {
-    @apply bg-muted p-4 rounded-md overflow-x-auto mb-4;
+    background-color: hsl(var(--muted));
+    padding: 1rem;
+    border-radius: 0.375rem;
+    overflow-x: auto;
+    margin-bottom: 1rem;
   }
 
   table {
-    @apply w-full border-collapse mb-4;
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 1rem;
   }
   thead {
-    @apply bg-muted;
+    background-color: hsl(var(--muted));
   }
-  th, td {
-    @apply border border-border p-2 text-left;
+  th,
+  td {
+    border: 1px solid hsl(var(--border));
+    padding: 0.5rem;
+    text-align: left;
   }
   th {
-    @apply font-semibold;
+    font-weight: 600;
   }
   hr {
-    @apply border-t border-border my-8;
-  }
-}
-
-/* Image alignment preserved from editor output */
-@layer components {
-  img[data-align='left'] {
-    display: block;
-    margin-left: 0;
-    margin-right: auto;
-  }
-  img[data-align='right'] {
-    display: block;
-    margin-left: auto;
-    margin-right: 0;
-  }
-  img[data-align='center'] {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
+    border-top: 1px solid hsl(var(--border));
+    margin: 2rem 0;
+  }
+}
+
+/* Image alignment preserved from editor output */
+@layer components {
+  img[data-align='left'] {
+    display: block;
+    margin-left: 0;
+    margin-right: auto;
+  }
+  img[data-align='right'] {
+    display: block;
+    margin-left: auto;
+    margin-right: 0;
+  }
+  img[data-align='center'] {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
 /*─────────────────────────────────────────────────────────────────────────────
   3. Theme color variables
 ─────────────────────────────────────────────────────────────────────────────*/

package/templates/nextblock-template/components/blocks/renderers/ButtonBlockRenderer.tsx

@@ -1,23 +1,23 @@
-import React from "react";
-import Link from "next/link";
+import React from "react";
+import Link from "next/link";
 export type ButtonBlockContent = {
     text?: string;
     url?: string;
     variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'link';
-    size?: 'default' | 'sm' | 'lg';
-};
-
-interface ButtonBlockRendererProps {
-  content: ButtonBlockContent;
-  languageId: number; // This prop seems unused
-}
-
+    size?: 'default' | 'sm' | 'lg';
+};
+
+interface ButtonBlockRendererProps {
+  content: ButtonBlockContent;
+  languageId: number; // This prop seems unused
+}
+
 const ButtonBlockRenderer: React.FC<ButtonBlockRendererProps> = ({
   content,
   // languageId, // Unused
 }) => {
   const baseClasses =
-    "inline-flex items-center justify-center rounded-md border text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
+    "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
   const variantClasses: Record<string, string> = {
     default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
     outline:
@@ -36,12 +36,12 @@ const ButtonBlockRenderer: React.FC<ButtonBlockRendererProps> = ({
   const isExternal =
     content.url?.startsWith("http") ||
     content.url?.startsWith("mailto:") ||
-    content.url?.startsWith("tel:");
-  const isAnchor = content.url?.startsWith("#");
-
-  const buttonText = content.text || "Button";
-  const buttonVariant = content.variant || "default";
-  const buttonSize = content.size || "default";
+    content.url?.startsWith("tel:");
+  const isAnchor = content.url?.startsWith("#");
+
+  const buttonText = content.text || "Button";
+  const buttonVariant = content.variant || "default";
+  const buttonSize = content.size || "default";
 
   return (
     <div className="my-6 text-center">
@@ -88,5 +88,5 @@ const ButtonBlockRenderer: React.FC<ButtonBlockRendererProps> = ({
     </div>
   );
 };
-
+
 export default ButtonBlockRenderer;

package/templates/nextblock-template/components/blocks/renderers/HeroBlockRenderer.tsx

@@ -1,9 +1,32 @@
 // components/blocks/renderers/HeroBlockRenderer.tsx
-import React from "react";
+import React from "react";
 import type { SectionBlockContent, Gradient } from "../../../lib/blocks/blockRegistry";
 import Image from 'next/image';
 
-const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+const HERO_BACKGROUND_DEFAULT_QUALITY = 60;
+
+function resolveImageQuality(value: unknown, fallback: number): number {
+  if (value === undefined || value === null || value === '') {
+    return fallback;
+  }
+
+  const numeric =
+    typeof value === 'number'
+      ? value
+      : Number.parseInt(String(value), 10);
+
+  if (!Number.isFinite(numeric)) {
+    return fallback;
+  }
+
+  const rounded = Math.round(numeric);
+  if (rounded < 1 || rounded > 100) {
+    return fallback;
+  }
+
+  return rounded;
+}
 
 interface SectionBlockRendererProps {
   content: SectionBlockContent;
@@ -169,13 +192,14 @@ const HeroBlockRenderer: React.FC<SectionBlockRendererProps> = ({
   content,
   languageId,
 }) => {
-  const { styles, className: backgroundClassName } = generateBackgroundStyles(content.background);
-  
-  const backgroundImage = content.background.type === 'image' ? content.background.image : undefined;
-  
-  if (backgroundImage) {
-    delete styles.backgroundImage;
-  }
+  const { styles, className: backgroundClassName } = generateBackgroundStyles(content.background);
+  
+  const backgroundImage = content.background.type === 'image' ? content.background.image : undefined;
+  
+  if (backgroundImage) {
+    delete styles.backgroundImage;
+  }
+  const heroImageQuality = resolveImageQuality(backgroundImage?.quality, HERO_BACKGROUND_DEFAULT_QUALITY);
 
   // Build CSS classes
   const containerClass = containerClasses[content.container_type] || containerClasses.container;
@@ -205,13 +229,13 @@ const HeroBlockRenderer: React.FC<SectionBlockRendererProps> = ({
             objectFit: backgroundImage.size || 'cover',
             objectPosition: backgroundImage.position || 'center'
           }}
-          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 100vw, 100vw"
-          priority={true}
-          fetchPriority="high"
-          quality={35}
-          {...imageProps}
-        />
-      )}
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 100vw, 100vw"
+          priority={true}
+          fetchPriority="high"
+          quality={heroImageQuality}
+          {...imageProps}
+        />
+      )}
       {backgroundImage?.overlay?.gradient && (
         <div
           className="absolute inset-0"
@@ -237,4 +261,4 @@ const HeroBlockRenderer: React.FC<SectionBlockRendererProps> = ({
   );
 };
 
-export default HeroBlockRenderer;
+export default HeroBlockRenderer;

package/templates/nextblock-template/docs/files-structure.md

@@ -253,7 +253,7 @@
     │       └── blocks
     │       │   ├── README.md
     │       │   └── blockRegistry.ts
-    │   ├── middleware.ts
+    │   ├── proxy.ts
     │   ├── next-env.d.ts
     │   ├── next.config.js
     │   ├── postcss.config.js
@@ -264,7 +264,7 @@
     │       ├── backfill-image-meta.ts
     │       ├── backup.js
     │       └── test-bundle-optimization.js
-    │   ├── tailwind.config.ts
+    │   ├── tailwind.config.js
     │   └── tsconfig.json
 ├── components.json
 ├── docs
@@ -273,7 +273,7 @@
     ├── block-editor-analysis.md
     ├── inline-cta-widget-design.md
     ├── inline-widget-design.md
-    └── monorepo-archetecture.md
+    └── monorepo-architecture.md
 ├── eslint.config.mjs
 ├── libs
     ├── db
@@ -285,7 +285,7 @@
     │   │   ├── lib
     │   │   │   └── supabase
     │   │   │   │   ├── client.ts
-    │   │   │   │   ├── middleware.ts
+    │   │   │   │   ├── proxy.ts
     │   │   │   │   ├── server.ts
     │   │   │   │   ├── ssg-client.ts
     │   │   │   │   └── types.ts
@@ -422,5 +422,5 @@
 ├── package-lock.json
 ├── package.json
 ├── project.json
-├── tailwind.config.ts
+├── tailwind.config.js
 └── tsconfig.base.json

package/templates/nextblock-template/eslint.config.mjs

@@ -1,25 +1,32 @@
-import { FlatCompat } from '@eslint/eslintrc';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-import js from '@eslint/js';
-import { fixupConfigRules } from '@eslint/compat';
 import nx from '@nx/eslint-plugin';
 import baseConfig from '../../eslint.config.mjs';
-const compat = new FlatCompat({
-  baseDirectory: dirname(fileURLToPath(import.meta.url)),
-  recommendedConfig: js.configs.recommended,
-});
+import nextPlugin from '@next/eslint-plugin-next';
+
+const nextRules = {
+  ...nextPlugin.configs.recommended.rules,
+  ...nextPlugin.configs['core-web-vitals'].rules,
+};
 
 const config = [
-  ...fixupConfigRules(compat.extends('next')),
-  ...fixupConfigRules(compat.extends('next/core-web-vitals')),
   ...baseConfig,
   ...nx.configs['flat/react-typescript'],
   {
     ignores: ['.next/**/*', '**/next-env.d.ts', 'apps/nextblock/next-env.d.ts'],
   },
   {
+    files: [
+      '**/*.ts',
+      '**/*.tsx',
+      '**/*.js',
+      '**/*.jsx',
+      '**/*.mjs',
+      '**/*.cjs',
+    ],
+    plugins: {
+      '@next/next': nextPlugin,
+    },
     rules: {
+      ...nextRules,
       '@next/next/no-html-link-for-pages': ['error', 'apps/nextblock/app'],
     },
   },

package/templates/nextblock-template/lib/blocks/blockRegistry.ts

@@ -117,20 +117,21 @@ export interface SectionBlockContent {
     solid_color?: string;
     min_height?: string;
     gradient?: Gradient;
-    image?: {
-      media_id: string;
-      object_key: string;
-      alt_text?: string;
-      width?: number;
-      height?: number;
-      blur_data_url?: string;
-      size: 'cover' | 'contain';
-      position: 'center' | 'top' | 'bottom' | 'left' | 'right';
-      overlay?: {
-        type: 'gradient';
-        gradient: Gradient;
-      };
-    };
+    image?: {
+      media_id: string;
+      object_key: string;
+      alt_text?: string;
+      width?: number;
+      height?: number;
+      blur_data_url?: string;
+      size: 'cover' | 'contain';
+      position: 'center' | 'top' | 'bottom' | 'left' | 'right';
+      quality?: number | null;
+      overlay?: {
+        type: 'gradient';
+        gradient: Gradient;
+      };
+    };
   };
   /** Responsive column configuration */
   responsive_columns: {

package/templates/nextblock-template/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./../../dist/apps/nextblock/.next/types/routes.d.ts" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/nextblock-template/next.config.js

@@ -1,99 +1,66 @@
-//@ts-check
-
-const { composePlugins, withNx } = require('@nx/next');
-
-/**
- * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
- **/
-const nextConfig = {
-  // Use this to set Nx-specific options
-  // See: https://nx.dev/recipes/next/next-config-setup
-  nx: {svgr: false},
-  env: {
-    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
-    NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
-  },
-  images: {
-    formats: ['image/avif', 'image/webp'],
-    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384, 512],
-    deviceSizes: [320, 480, 640, 750, 828, 1080, 1200, 1440, 1920, 2048, 2560],
-    minimumCacheTTL: 31536000,
-    dangerouslyAllowSVG: false,
-    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'pub-a31e3f1a87d144898aeb489a8221f92e.r2.dev',
-      },
-      {
-        protocol: 'https',
-        hostname: 'e260676f72b0b18314b868f136ed72ae.r2.cloudflarestorage.com',
-      },
-      // Add other necessary hostnames, for example, from NEXT_PUBLIC_URL if it's different
-      // and used for images. This example assumes NEXT_PUBLIC_R2_BASE_URL's hostname is the one above.
-      // If NEXT_PUBLIC_URL is also an image source and has a different hostname:
-      ...(process.env.NEXT_PUBLIC_URL
-        ? [
-            {
-              protocol: /** @type {'http' | 'https'} */ (new URL(process.env.NEXT_PUBLIC_URL).protocol.slice(0, -1)),
-              hostname: new URL(process.env.NEXT_PUBLIC_URL).hostname,
-            },
-          ]
-        : []),
-    ],
-  },
-experimental: {
-    optimizeCss: true,
-    cssChunking: 'strict',
-  },
-  transpilePackages: ['@nextblock-cms/utils', '@nextblock-cms/ui', '@nextblock-cms/editor'],
-  webpack: (config, { isServer }) => {
-    if (!isServer) {
-      config.module.rules.push({
-      test: /\.svg$/i,
-      issuer: /\.[jt]sx?$/,
-      use: ['@svgr/webpack'],
-    });
-      // Optimize TipTap bundle separation for client-side
-      config.optimization = {
-        ...config.optimization,
-        splitChunks: {
-          ...config.optimization.splitChunks,
-          cacheGroups: {
-            ...config.optimization.splitChunks?.cacheGroups,
-            // Create a separate chunk for TipTap and related dependencies
-            tiptap: {
-              test: /[\\/]node_modules[\\/](@tiptap|prosemirror)[\\/]/,
-              name: 'tiptap',
-              chunks: 'async', // Only include in async chunks (dynamic imports)
-              priority: 30,
-              reuseExistingChunk: true,
-            },
-            // Separate chunk for TipTap extensions and custom components
-            tiptapExtensions: {
-              test: /[\\/](tiptap-extensions|RichTextEditor|MenuBar|MediaLibraryModal)[\\/]/,
-              name: 'tiptap-extensions',
-              chunks: 'async',
-              priority: 25,
-              reuseExistingChunk: true,
-            },
-          },
-        },
-      };
-    }
-    return config;
-  },
-  turbopack: {
-    // Turbopack-specific options can be placed here if needed in the future
-  },
-  compiler: {
-    removeConsole: process.env.NODE_ENV === 'production',
-  }
-};
-
-const plugins = [
-  // Add more Next.js plugins to this list if needed.
-  withNx,
-];
-
-module.exports = composePlugins(...plugins)(nextConfig);
+//@ts-check
+
+/**
+ * @typedef {{ protocol?: 'http' | 'https'; hostname: string; port?: string; pathname?: string }} RemotePattern
+ */
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  env: {
+    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
+    NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+  },
+  images: {
+    formats: ['image/avif', 'image/webp'],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384, 512],
+    deviceSizes: [320, 480, 640, 750, 828, 1080, 1200, 1440, 1920, 2048, 2560],
+    qualities: [60, 75],
+    minimumCacheTTL: 31_536_000,
+    dangerouslyAllowSVG: false,
+    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+    remotePatterns: getRemotePatterns(),
+  },
+  compiler: {
+    removeConsole: process.env.NODE_ENV === 'production',
+  },
+  transpilePackages: [
+    '@nextblock-cms/utils',
+    '@nextblock-cms/ui',
+    '@nextblock-cms/editor',
+  ],
+};
+
+module.exports = nextConfig;
+
+function getRemotePatterns() {
+  /** @type {RemotePattern[]} */
+  const patterns = [
+    {
+      protocol: 'https',
+      hostname: 'pub-a31e3f1a87d144898aeb489a8221f92e.r2.dev',
+      pathname: '/**',
+    },
+    {
+      protocol: 'https',
+      hostname: 'e260676f72b0b18314b868f136ed72ae.r2.cloudflarestorage.com',
+      pathname: '/**',
+    },
+  ];
+
+  if (process.env.NEXT_PUBLIC_URL) {
+    try {
+      const parsed = new URL(process.env.NEXT_PUBLIC_URL);
+      if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
+        patterns.push({
+          protocol: parsed.protocol === 'https:' ? 'https' : 'http',
+          hostname: parsed.hostname,
+          pathname: '/**',
+        });
+      }
+    } catch {
+      // ignore malformed value
+    }
+  }
+
+  return patterns;
+}

package/templates/nextblock-template/postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 };

package/templates/nextblock-template/{middleware.ts → proxy.ts}

@@ -1,206 +1,230 @@
-// middleware.ts
-import { createServerClient, type CookieOptions } from '@supabase/ssr';
-import { NextResponse, type NextRequest } from 'next/server';
-import type { Database } from "@nextblock-cms/db";
-
-type Profile = Database["public"]["Tables"]["profiles"]["Row"];
-type UserRole = Database["public"]["Enums"]["user_role"];
-
-const LANGUAGE_COOKIE_KEY = 'NEXT_USER_LOCALE';
-const DEFAULT_LOCALE = 'en';
-const SUPPORTED_LOCALES = ['en', 'fr']; // Keep this in sync with DB or make dynamic
-
-const cmsRoutePermissions: Record<string, UserRole[]> = {
-  '/cms': ['WRITER', 'ADMIN'],
-  '/cms/admin': ['ADMIN'],
-  '/cms/users': ['ADMIN'],
-  '/cms/settings': ['ADMIN'],
-};
-
-function getRequiredRolesForPath(pathname: string): UserRole[] | null {
-    const sortedPaths = Object.keys(cmsRoutePermissions).sort((a, b) => b.length - a.length);
-    for (const specificPath of sortedPaths) {
-      if (pathname === specificPath || pathname.startsWith(specificPath + (specificPath === '/' ? '' : '/'))) {
-          return cmsRoutePermissions[specificPath];
-      }
-    }
-    return null;
-}
-
-export async function middleware(request: NextRequest) {
-  const requestHeaders = new Headers(request.headers);
-  const nonce = crypto.randomUUID();
-  requestHeaders.set('x-nonce', nonce);
-
-  let response = NextResponse.next({
-    request: {
-      headers: requestHeaders,
-    },
-  });
-
-  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
-  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
-  
-  if (!supabaseUrl || !supabaseAnonKey) {
-    throw new Error('Missing required Supabase environment variables');
-  }
-
-  const supabase = createServerClient(
-    supabaseUrl,
-    supabaseAnonKey,
-    {
-      cookies: {
-        get(name: string) { return request.cookies.get(name)?.value; },
-        set(name: string, value: string, options: CookieOptions) {
-          request.cookies.set({ name, value, ...options });
-          response = NextResponse.next({ request: { headers: requestHeaders } });
-          response.cookies.set({ name, value, ...options });
-        },
-        remove(name: string, options: CookieOptions) {
-          request.cookies.set({ name, value: '', ...options });
-          response = NextResponse.next({ request: { headers: requestHeaders } });
-          response.cookies.set({ name, value: '', ...options });
-        },
-      },
-    }
-  );
-
-  await supabase.auth.getSession();
-
-  const cookieLocale = request.cookies.get(LANGUAGE_COOKIE_KEY)?.value;
-  let currentLocale = cookieLocale;
-
-  if (!currentLocale || !SUPPORTED_LOCALES.includes(currentLocale)) {
-    currentLocale = DEFAULT_LOCALE;
-  }
-
-  requestHeaders.set('X-User-Locale', currentLocale);
-
-  const { data: { user }, error: userError } = await supabase.auth.getUser(); // Use getUser for revalidation
-  const { pathname } = request.nextUrl;
-
-  // CMS route protection
-  if (pathname.startsWith('/cms')) { // Ensure this check is broad enough for all CMS paths
-    if (userError || !user) { // Check for error or no user
-      return NextResponse.redirect(new URL(`/sign-in?redirect=${pathname}`, request.url));
-    }
-
-    const requiredRoles = getRequiredRolesForPath(pathname);
-
-    if (requiredRoles && requiredRoles.length > 0) {
-      const { data: profile, error: profileError } = await supabase
-        .from('profiles')
-        .select('role')
-        .eq('id', user.id)
-        .single<Pick<Profile, 'role'>>();
-
-      if (profileError || !profile) {
-        console.error(`Middleware: Profile error for user ${user.id} accessing ${pathname}. Error: ${profileError?.message}. Redirecting to unauthorized.`);
-        return NextResponse.redirect(new URL('/unauthorized?error=profile_issue', request.url));
-      }
-
-      const userRole = profile.role as UserRole;
-      if (!requiredRoles.includes(userRole)) {
-        console.warn(`Middleware: User ${user.id} (Role: ${userRole}) denied access to ${pathname}. Required: ${requiredRoles.join(' OR ')}. Redirecting to unauthorized.`);
-        return NextResponse.redirect(new URL(`/unauthorized?path=${pathname}&required=${requiredRoles.join(',')}`, request.url));
-      }
-    }
-  }
-
-  if (response.headers.get('location')) {
-      return response;
-  }
-
-  const finalResponse = NextResponse.next({
-    request: {
-      headers: requestHeaders,
-    },
-  });
-
-  response.cookies.getAll().forEach(cookie => {
-    finalResponse.cookies.set(cookie.name, cookie.value, cookie);
-  });
-  
-  if (request.cookies.get(LANGUAGE_COOKIE_KEY)?.value !== currentLocale) {
-      finalResponse.cookies.set(LANGUAGE_COOKIE_KEY, currentLocale, { path: '/', maxAge: 31536000, sameSite: 'lax' });
-  }
-
-  if (pathname === '/sign-in' || pathname === '/sign-up' || pathname === '/forgot-password') {
-    finalResponse.headers.set('X-Page-Type', 'auth');
-    finalResponse.headers.set('X-Prefetch-Priority', 'critical');
-  } else if (pathname === '/') {
-    finalResponse.headers.set('X-Page-Type', 'home');
-    finalResponse.headers.set('X-Prefetch-Priority', 'high');
-  } else if (pathname === '/blog') {
-    finalResponse.headers.set('X-Page-Type', 'blog-index');
-    finalResponse.headers.set('X-Prefetch-Priority', 'high');
-  } else if (pathname.startsWith('/blog/')) {
-    finalResponse.headers.set('X-Page-Type', 'blog-post');
-    finalResponse.headers.set('X-Prefetch-Priority', 'medium');
-  } else {
-    const segments = pathname.split('/').filter(Boolean);
-    if (segments.length === 1 && !pathname.startsWith('/cms')) {
-      finalResponse.headers.set('X-Page-Type', 'dynamic-page');
-      finalResponse.headers.set('X-Prefetch-Priority', 'medium');
-    }
-  }
-
-  const acceptHeader = request.headers.get('accept');
-  if (
-    acceptHeader &&
-    acceptHeader.includes('text/html') &&
-    !pathname.startsWith('/api/')
-  ) {
-    finalResponse.headers.set('Cache-Control', 'public, max-age=0, must-revalidate');
-    finalResponse.headers.set('X-BFCache-Applied', 'true');
-  }
-
-  finalResponse.headers.set('Strict-Transport-Security', 'max-age=63072000; includeSubDomains; preload');
-  finalResponse.headers.set('X-Frame-Options', 'SAMEORIGIN');
-  finalResponse.headers.set('X-Content-Type-Options', 'nosniff');
-  finalResponse.headers.set('Referrer-Policy', 'origin-when-cross-origin');
-  finalResponse.headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');
-  finalResponse.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
-
-  // Only send nonce-based CSP in production. In development, Next.js
-  // Dev Overlay injects inline scripts without a nonce, which would be blocked.
-  if (process.env.NODE_ENV === 'production') {
-    const nonceValue = requestHeaders.get('x-nonce');
-    if (nonceValue) {
-      const csp = [
-        "default-src 'self'",
-        `script-src 'self' blob: data: 'nonce-${nonceValue}'`,
-        "style-src 'self' 'unsafe-inline'",
-        "img-src 'self' data: blob: https://nrh-next-cms.e260676f72b0b18314b868f136ed72ae.r2.cloudflarestorage.com https://pub-a31e3f1a87d144898aeb489a8221f92e.r2.dev",
-        "font-src 'self'",
-        "object-src 'none'",
-        "connect-src 'self' https://ppcppwsfnrptznvbxnsz.supabase.co wss://ppcppwsfnrptznvbxnsz.supabase.co https://nrh-next-cms.e260676f72b0b18314b868f136ed72ae.r2.cloudflarestorage.com https://pub-a31e3f1a87d144898aeb489a8221f92e.r2.dev",
-        "frame-src 'self' blob: data: https://www.youtube.com",
-        "form-action 'self'",
-        "base-uri 'self'",
-      ].join('; ');
-
-      finalResponse.headers.set('Content-Security-Policy', csp);
-    }
-  }
-
-  const responseForLogging = finalResponse.clone();
-  const cacheStatus = responseForLogging.headers.get('x-vercel-cache') || 'none';
-  
-  if (!pathname.startsWith('/api/')) {
-    console.log(JSON.stringify({
-      type: 'cache',
-      status: cacheStatus,
-      path: pathname,
-    }));
-  }
-
-  return finalResponse;
-}
-
-export const config = {
-  matcher: [
-    '/((?!_next/static|_next/image|favicon.ico|auth/.*|sign-in|sign-up|forgot-password|unauthorized|api/auth/.*|api/revalidate|api/revalidate-log).*)',
-    '/cms/:path*',
-  ],
-};
+import { createServerClient, type CookieOptions } from '@supabase/ssr';
+import { NextResponse, type NextRequest } from 'next/server';
+import type { Database } from '@nextblock-cms/db';
+
+type Profile = Database['public']['Tables']['profiles']['Row'];
+type UserRole = Database['public']['Enums']['user_role'];
+
+const LANGUAGE_COOKIE_KEY = 'NEXT_USER_LOCALE';
+const DEFAULT_LOCALE = 'en';
+const SUPPORTED_LOCALES = ['en', 'fr'];
+
+const cmsRoutePermissions: Record<string, UserRole[]> = {
+  '/cms': ['WRITER', 'ADMIN'],
+  '/cms/admin': ['ADMIN'],
+  '/cms/users': ['ADMIN'],
+  '/cms/settings': ['ADMIN'],
+};
+
+function getRequiredRolesForPath(pathname: string): UserRole[] | null {
+  const sortedPaths = Object.keys(cmsRoutePermissions).sort(
+    (a, b) => b.length - a.length,
+  );
+  for (const specificPath of sortedPaths) {
+    if (
+      pathname === specificPath ||
+      pathname.startsWith(specificPath + (specificPath === '/' ? '' : '/'))
+    ) {
+      return cmsRoutePermissions[specificPath];
+    }
+  }
+  return null;
+}
+
+export default async function proxy(request: NextRequest) {
+  const requestHeaders = new Headers(request.headers);
+  const nonce = crypto.randomUUID();
+  requestHeaders.set('x-nonce', nonce);
+
+  let response = NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  });
+
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+  if (!supabaseUrl || !supabaseAnonKey) {
+    throw new Error('Missing required Supabase environment variables');
+  }
+
+  const supabase = createServerClient(supabaseUrl, supabaseAnonKey, {
+    cookies: {
+      get(name: string) {
+        return request.cookies.get(name)?.value;
+      },
+      set(name: string, value: string, options: CookieOptions) {
+        request.cookies.set({ name, value, ...options });
+        response = NextResponse.next({ request: { headers: requestHeaders } });
+        response.cookies.set({ name, value, ...options });
+      },
+      remove(name: string, options: CookieOptions) {
+        request.cookies.set({ name, value: '', ...options });
+        response = NextResponse.next({ request: { headers: requestHeaders } });
+        response.cookies.set({ name, value: '', ...options });
+      },
+    },
+  });
+
+  await supabase.auth.getSession();
+
+  const cookieLocale = request.cookies.get(LANGUAGE_COOKIE_KEY)?.value;
+  let currentLocale = cookieLocale;
+
+  if (!currentLocale || !SUPPORTED_LOCALES.includes(currentLocale)) {
+    currentLocale = DEFAULT_LOCALE;
+  }
+
+  requestHeaders.set('X-User-Locale', currentLocale);
+
+  const {
+    data: { user },
+    error: userError,
+  } = await supabase.auth.getUser();
+  const { pathname } = request.nextUrl;
+
+  if (pathname.startsWith('/cms')) {
+    if (userError || !user) {
+      return NextResponse.redirect(
+        new URL(`/sign-in?redirect=${pathname}`, request.url),
+      );
+    }
+
+    const requiredRoles = getRequiredRolesForPath(pathname);
+
+    if (requiredRoles && requiredRoles.length > 0) {
+      const {
+        data: profile,
+        error: profileError,
+      } = await supabase
+        .from('profiles')
+        .select('role')
+        .eq('id', user.id)
+        .single<Pick<Profile, 'role'>>();
+
+      if (profileError || !profile) {
+        console.error(
+          `Proxy: Profile error for user ${user.id} accessing ${pathname}. Error: ${profileError?.message}. Redirecting to unauthorized.`,
+        );
+        return NextResponse.redirect(
+          new URL('/unauthorized?error=profile_issue', request.url),
+        );
+      }
+
+      const userRole = profile.role as UserRole;
+      if (!requiredRoles.includes(userRole)) {
+        console.warn(
+          `Proxy: User ${user.id} (Role: ${userRole}) denied access to ${pathname}. Required: ${requiredRoles.join(' OR ')}. Redirecting to unauthorized.`,
+        );
+        return NextResponse.redirect(
+          new URL(
+            `/unauthorized?path=${pathname}&required=${requiredRoles.join(',')}`,
+            request.url,
+          ),
+        );
+      }
+    }
+  }
+
+  if (response.headers.get('location')) {
+    return response;
+  }
+
+  const finalResponse = NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  });
+
+  response.cookies.getAll().forEach((cookie) => {
+    finalResponse.cookies.set(cookie.name, cookie.value, cookie);
+  });
+
+  if (request.cookies.get(LANGUAGE_COOKIE_KEY)?.value !== currentLocale) {
+    finalResponse.cookies.set(LANGUAGE_COOKIE_KEY, currentLocale, {
+      path: '/',
+      maxAge: 31_536_000,
+      sameSite: 'lax',
+    });
+  }
+
+  if (
+    pathname === '/sign-in' ||
+    pathname === '/sign-up' ||
+    pathname === '/forgot-password'
+  ) {
+    finalResponse.headers.set('X-Page-Type', 'auth');
+    finalResponse.headers.set('X-Prefetch-Priority', 'critical');
+  } else if (pathname === '/') {
+    finalResponse.headers.set('X-Page-Type', 'home');
+    finalResponse.headers.set('X-Prefetch-Priority', 'high');
+  } else if (pathname === '/blog') {
+    finalResponse.headers.set('X-Page-Type', 'blog-index');
+    finalResponse.headers.set('X-Prefetch-Priority', 'high');
+  } else if (pathname.startsWith('/blog/')) {
+    finalResponse.headers.set('X-Page-Type', 'blog-post');
+    finalResponse.headers.set('X-Prefetch-Priority', 'medium');
+  } else {
+    const segments = pathname.split('/').filter(Boolean);
+    if (segments.length === 1 && !pathname.startsWith('/cms')) {
+      finalResponse.headers.set('X-Page-Type', 'dynamic-page');
+      finalResponse.headers.set('X-Prefetch-Priority', 'medium');
+    }
+  }
+
+  const acceptHeader = request.headers.get('accept');
+  if (acceptHeader && acceptHeader.includes('text/html') && !pathname.startsWith('/api/')) {
+    finalResponse.headers.set('Cache-Control', 'public, max-age=0, must-revalidate');
+    finalResponse.headers.set('X-BFCache-Applied', 'true');
+  }
+
+  finalResponse.headers.set('Strict-Transport-Security', 'max-age=63072000; includeSubDomains; preload');
+  finalResponse.headers.set('X-Frame-Options', 'SAMEORIGIN');
+  finalResponse.headers.set('X-Content-Type-Options', 'nosniff');
+  finalResponse.headers.set('Referrer-Policy', 'origin-when-cross-origin');
+  finalResponse.headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');
+  finalResponse.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
+
+  if (process.env.NODE_ENV === 'production') {
+    const nonceValue = requestHeaders.get('x-nonce');
+    if (nonceValue) {
+      const csp = [
+        "default-src 'self'",
+        `script-src 'self' blob: data: 'nonce-${nonceValue}'`,
+        "style-src 'self' 'unsafe-inline'",
+        "img-src 'self' data: blob: https://nrh-next-cms.e260676f72b0b18314b868f136ed72ae.r2.cloudflarestorage.com https://pub-a31e3f1a87d144898aeb489a8221f92e.r2.dev",
+        "font-src 'self'",
+        "object-src 'none'",
+        "connect-src 'self' https://ppcppwsfnrptznvbxnsz.supabase.co wss://ppcppwsfnrptznvbxnsz.supabase.co https://nrh-next-cms.e260676f72b0b18314b868f136ed72ae.r2.cloudflarestorage.com https://pub-a31e3f1a87d144898aeb489a8221f92e.r2.dev",
+        "frame-src 'self' blob: data: https://www.youtube.com",
+        "form-action 'self'",
+        "base-uri 'self'",
+      ].join('; ');
+
+      finalResponse.headers.set('Content-Security-Policy', csp);
+    }
+  }
+
+  const responseForLogging = finalResponse.clone();
+  const cacheStatus = responseForLogging.headers.get('x-vercel-cache') || 'none';
+
+  if (!pathname.startsWith('/api/')) {
+    console.log(
+      JSON.stringify({
+        type: 'cache',
+        status: cacheStatus,
+        path: pathname,
+      }),
+    );
+  }
+
+  return finalResponse;
+}
+
+export const config = {
+  matcher: [
+    '/((?!_next/static|_next/image|favicon.ico|auth/.*|sign-in|sign-up|forgot-password|unauthorized|api/auth/.*|api/revalidate|api/revalidate-log).*)',
+    '/cms/:path*',
+  ],
+};

package/templates/nextblock-template/tailwind.config.js

@@ -0,0 +1,26 @@
+const { existsSync } = require('fs');
+const { join } = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [require('../../tailwind.config.js')],
+  content: (() => {
+    const projectGlobs = [
+      join(
+        __dirname,
+        '{src,pages,components,app,lib}/**/*!(*.stories|*.spec).{ts,tsx,js,jsx,md,mdx,html}'
+      ),
+    ];
+    const libsDir = join(__dirname, '../../libs');
+    if (existsSync(libsDir)) {
+      projectGlobs.push(
+        join(libsDir, '**/*.{ts,tsx,js,jsx,md,mdx,html}')
+      );
+    }
+    return projectGlobs;
+  })(),
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/templates/nextblock-template/tools/empty-module.js

@@ -0,0 +1 @@
+module.exports = {};

package/templates/nextblock-template/tailwind.config.ts

@@ -1,19 +0,0 @@
-// File: apps/nextblock/tailwind.config.ts
-const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
-const { join } = require('path');
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  presets: [require('../../tailwind.config.ts')],
-  content: [
-    join(
-      __dirname,
-      '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}'
-    ),
-    ...createGlobPatternsForDependencies(__dirname),
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};