create-nextblock 0.2.31 → 0.2.34

package/templates/nextblock-template/app/providers.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from "next-themes";
 import { AuthProvider } from "@/context/AuthContext";
 import { LanguageProvider } from "@/context/LanguageContext";
 import { CurrentContentProvider } from "@/context/CurrentContentContext";
-import { TranslationsProvider } from '@nextblock-cms/utils';
+import { TranslationsProvider } from '@nextblock-cms/utils';
 
 export function Providers({ children, ...props }: { children: React.ReactNode;[key: string]: any; }) {
   const {
@@ -40,4 +40,4 @@ export function Providers({ children, ...props }: { children: React.ReactNode;[k
       </LanguageProvider>
     </AuthProvider>
   );
-}
+}

package/templates/nextblock-template/components/BlockRenderer.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import dynamic from "next/dynamic";
 import type { Database } from "@nextblock-cms/db";
-import { getBlockDefinition, type SectionBlockContent, type BlockType } from "../lib/blocks/blockRegistry";
+import { getBlockDefinition, type SectionBlockContent, type BlockType } from "../lib/blocks/blockRegistry";
 
 type Block = Database['public']['Tables']['blocks']['Row'];
 import HeroBlockRenderer from "./blocks/renderers/HeroBlockRenderer"; // Static import for LCP
@@ -50,14 +50,14 @@ const DynamicBlockRenderer: React.FC<DynamicBlockRendererProps> = ({
   const RendererComponent = dynamic(
     () => import(`./blocks/renderers/${blockDefinition.rendererComponentFilename}`),
     {
-      loading: () => (
-        <div className="my-4 p-4 border rounded-lg">
-          <div className="h-8 w-1/2 mb-4 bg-muted/40 animate-pulse rounded" />
-          <div className="h-4 w-full mb-2 bg-muted/40 animate-pulse rounded" />
-          <div className="h-4 w-full mb-2 bg-muted/40 animate-pulse rounded" />
-          <div className="h-4 w-3/4 bg-muted/40 animate-pulse rounded" />
-        </div>
-      ),
+      loading: () => (
+        <div className="my-4 p-4 border rounded-lg">
+          <div className="h-8 w-1/2 mb-4 bg-muted/40 animate-pulse rounded" />
+          <div className="h-4 w-full mb-2 bg-muted/40 animate-pulse rounded" />
+          <div className="h-4 w-full mb-2 bg-muted/40 animate-pulse rounded" />
+          <div className="h-4 w-3/4 bg-muted/40 animate-pulse rounded" />
+        </div>
+      ),
       ssr: true,
     }
   ) as React.ComponentType<any>;

package/templates/nextblock-template/components/ResponsiveNav.tsx

@@ -10,8 +10,8 @@ type Logo = Database['public']['Tables']['logos']['Row'] & { media: (Database['p
 type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
 import Image from 'next/image'
 
-const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || '';
-const FALLBACK_LOGO_PATH = '/images/nextblock-logo-small.webp';
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || '';
+const FALLBACK_LOGO_PATH = '/images/nextblock-logo-small.webp';
 
 // Define a type for hierarchical navigation items
 interface HierarchicalNavigationItem extends NavigationItem {
@@ -259,25 +259,25 @@ export default function ResponsiveNav({
             href={homeLinkHref}
             className="flex items-center space-x-2 rtl:space-x-reverse"
           >
-            {logo && logo.media ? (
-              <Image
-                src={`${R2_BASE_URL}/${logo.media.object_key}`}
-                alt={logo.media.alt_text || siteTitle || 'Nextblock'}
-                width={logo.media.width || 100}
-                height={logo.media.height || 32}
-                className="h-14 w-auto object-contain"
-                priority
-              />
-            ) : (
-              <Image
-                src={FALLBACK_LOGO_PATH}
-                alt={siteTitle || 'Nextblock'}
-                width={120}
-                height={40}
-                className="h-14 w-auto object-contain"
-                priority
-              />
-            )}
+            {logo && logo.media ? (
+              <Image
+                src={`${R2_BASE_URL}/${logo.media.object_key}`}
+                alt={logo.media.alt_text || siteTitle || 'Nextblock'}
+                width={logo.media.width || 100}
+                height={logo.media.height || 32}
+                className="h-14 w-auto object-contain"
+                priority
+              />
+            ) : (
+              <Image
+                src={FALLBACK_LOGO_PATH}
+                alt={siteTitle || 'Nextblock'}
+                width={120}
+                height={40}
+                className="h-14 w-auto object-contain"
+                priority
+              />
+            )}
           </Link>
           {/* Desktop: Additional Nav items */}
           <div className="hidden md:flex items-baseline font-semibold ml-6 space-x-1"> {/* Adjusted space-x for items with internal padding */}
@@ -375,4 +375,4 @@ export default function ResponsiveNav({
       </div>
     </>
   );
-}
+}

package/templates/nextblock-template/components/blocks/PostsGridBlock.tsx

@@ -24,7 +24,7 @@ const PostsGridBlock: React.FC<PostsGridBlockProps> = async ({ block, languageId
 
   const supabase = createClient();
 
-  const { data: postsData, error: queryError, count } = await supabase
+  const { data: postsData, error: queryError, count } = await supabase
     .from('posts')
     .select('id, title, slug, excerpt, published_at, language_id, status, created_at, updated_at, translation_group_id, feature_image_id, feature_media_object:media!feature_image_id(object_key, width, height)', { count: 'exact' })
     .eq('status', 'published')
@@ -40,18 +40,18 @@ const PostsGridBlock: React.FC<PostsGridBlockProps> = async ({ block, languageId
     console.error("Error fetching initial posts directly in PostsGridBlock:", queryError);
     postsError = queryError.message;
   } else {
-    const buildMediaUrl = (objectKey?: string | null) => {
-      if (!objectKey) return null;
-      if (objectKey.startsWith('/')) return objectKey;
-      const base = process.env.NEXT_PUBLIC_R2_BASE_URL || '';
-      return base ? `${base}/${objectKey}` : objectKey;
-    };
-
-    initialPosts = (postsData as any)?.map((p: any) => {
+    const buildMediaUrl = (objectKey?: string | null) => {
+      if (!objectKey) return null;
+      if (objectKey.startsWith('/')) return objectKey;
+      const base = process.env.NEXT_PUBLIC_R2_BASE_URL || '';
+      return base ? `${base}/${objectKey}` : objectKey;
+    };
+
+    initialPosts = (postsData as any)?.map((p: any) => {
       // feature_media_object is an object here, not an array, due to the query structure media!feature_image_id(object_key, width, height)
       // Cast to 'unknown' then to the expected single object type to satisfy TypeScript, reflecting runtime reality.
-      const mediaObject = p.feature_media_object as unknown as { object_key: string; width?: number | null; height?: number | null; blur_data_url?: string | null } | null;
-      const imageUrl = buildMediaUrl(mediaObject?.object_key);
+      const mediaObject = p.feature_media_object as unknown as { object_key: string; width?: number | null; height?: number | null; blur_data_url?: string | null } | null;
+      const imageUrl = buildMediaUrl(mediaObject?.object_key);
       return {
         ...p,
         // Convert feature_media_object to array format to match the type
@@ -95,4 +95,4 @@ const PostsGridBlock: React.FC<PostsGridBlockProps> = async ({ block, languageId
   );
 };
 
-export default PostsGridBlock;
+export default PostsGridBlock;

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

@@ -1,24 +1,24 @@
-"use client";
-
-import React from "react";
-import parse, { HTMLReactParserOptions, Element } from 'html-react-parser';
-import AlertWidgetRenderer from "./inline/AlertWidgetRenderer";
-import CtaWidgetRenderer from "./inline/CtaWidgetRenderer";
-import type { TextBlockContent } from "./TextBlockRenderer";
+"use client";
+
+import React from "react";
+import parse, { HTMLReactParserOptions, Element } from 'html-react-parser';
+import AlertWidgetRenderer from "./inline/AlertWidgetRenderer";
+import CtaWidgetRenderer from "./inline/CtaWidgetRenderer";
+import type { TextBlockContent } from "./TextBlockRenderer";
 
 interface ClientTextBlockRendererProps {
   content: TextBlockContent;
   languageId: number;
 }
 
-const ClientTextBlockRenderer: React.FC<ClientTextBlockRendererProps> = ({ content, languageId }) => {
-  void languageId;
-  const options: HTMLReactParserOptions = {
-    replace: (domNode) => {
-      if (domNode instanceof Element && domNode.attribs) {
-        if (domNode.attribs['data-alert-widget'] !== undefined) {
-          const {
-            'data-type': type,
+const ClientTextBlockRenderer: React.FC<ClientTextBlockRendererProps> = ({ content, languageId }) => {
+  void languageId;
+  const options: HTMLReactParserOptions = {
+    replace: (domNode) => {
+      if (domNode instanceof Element && domNode.attribs) {
+        if (domNode.attribs['data-alert-widget'] !== undefined) {
+          const {
+            'data-type': type,
             'data-title': title,
             'data-message': message,
             'data-align': align,
@@ -55,15 +55,15 @@ const ClientTextBlockRenderer: React.FC<ClientTextBlockRendererProps> = ({ conte
             />
           );
         }
-      }
-    },
-  };
-
-  return (
-    <div className="my-4 prose dark:prose-invert container mx-auto">
-      {parse(content.html_content || "", options)}
-    </div>
-  );
-};
+      }
+    },
+  };
+
+  return (
+    <div className="my-4 prose dark:prose-invert container mx-auto">
+      {parse(content.html_content || "", options)}
+    </div>
+  );
+};
 
-export default ClientTextBlockRenderer;
+export default ClientTextBlockRenderer;

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

@@ -1,32 +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 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;
-}
+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;
@@ -192,14 +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 heroImageQuality = resolveImageQuality(backgroundImage?.quality, HERO_BACKGROUND_DEFAULT_QUALITY);
+  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;
@@ -229,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={heroImageQuality}
-          {...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"
@@ -261,4 +261,4 @@ const HeroBlockRenderer: React.FC<SectionBlockRendererProps> = ({
   );
 };
 
-export default HeroBlockRenderer;
+export default HeroBlockRenderer;

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

@@ -19,12 +19,12 @@ interface ImageBlockRendererProps {
   priority?: boolean;
 }
 
-const ImageBlockRenderer: React.FC<ImageBlockRendererProps> = ({
-  content,
-  languageId,
-  priority = false,
-}) => {
-  void languageId;
+const ImageBlockRenderer: React.FC<ImageBlockRendererProps> = ({
+  content,
+  languageId,
+  priority = false,
+}) => {
+  void languageId;
   if (!content.media_id || !content.object_key) {
     return (
       <div className="my-4 p-4 border rounded text-center text-muted-foreground italic">
@@ -76,4 +76,4 @@ const ImageBlockRenderer: React.FC<ImageBlockRendererProps> = ({
   );
 };
 
-export default ImageBlockRenderer;
+export default ImageBlockRenderer;

package/templates/nextblock-template/components/theme-switcher.tsx

@@ -1,78 +1,78 @@
-"use client";
-
-import { Button } from "@nextblock-cms/ui";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "@nextblock-cms/ui";
-import { Laptop, Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
-
-const ThemeSwitcher = () => {
-  const [mounted, setMounted] = useState(false);
-  const { theme, setTheme } = useTheme();
-
-  // useEffect only runs on the client, so now we can safely show the UI
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return null;
-  }
-
-  const ICON_SIZE = 16;
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size={"sm"} aria-label="Theme Switcher">
-          {theme === "light" ? (
-            <Sun
-              key="light"
-              size={ICON_SIZE}
-              className={"text-muted-foreground"}
-            />
-          ) : theme === "dark" ? (
-            <Moon
-              key="dark"
-              size={ICON_SIZE}
-              className={"text-muted-foreground"}
-            />
-          ) : (
-            <Laptop
-              key="system"
-              size={ICON_SIZE}
-              className={"text-muted-foreground"}
-            />
-          )}
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-content" align="start">
-        <DropdownMenuRadioGroup
-          value={theme}
-          onValueChange={(e) => setTheme(e)}
-        >
-          <DropdownMenuRadioItem className="flex gap-2" value="light">
-            <Sun size={ICON_SIZE} className="text-muted-foreground" />{" "}
-            <span>Light</span>
-          </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem className="flex gap-2" value="dark">
-            <Moon size={ICON_SIZE} className="text-muted-foreground" />{" "}
-            <span>Dark</span>
-          </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem className="flex gap-2" value="system">
-            <Laptop size={ICON_SIZE} className="text-muted-foreground" />{" "}
-            <span>System</span>
-          </DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
-
-export { ThemeSwitcher };
+"use client";
+
+import { Button } from "@nextblock-cms/ui";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@nextblock-cms/ui";
+import { Laptop, Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+const ThemeSwitcher = () => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  const ICON_SIZE = 16;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size={"sm"} aria-label="Theme Switcher">
+          {theme === "light" ? (
+            <Sun
+              key="light"
+              size={ICON_SIZE}
+              className={"text-muted-foreground"}
+            />
+          ) : theme === "dark" ? (
+            <Moon
+              key="dark"
+              size={ICON_SIZE}
+              className={"text-muted-foreground"}
+            />
+          ) : (
+            <Laptop
+              key="system"
+              size={ICON_SIZE}
+              className={"text-muted-foreground"}
+            />
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-content" align="start">
+        <DropdownMenuRadioGroup
+          value={theme}
+          onValueChange={(e) => setTheme(e)}
+        >
+          <DropdownMenuRadioItem className="flex gap-2" value="light">
+            <Sun size={ICON_SIZE} className="text-muted-foreground" />{" "}
+            <span>Light</span>
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem className="flex gap-2" value="dark">
+            <Moon size={ICON_SIZE} className="text-muted-foreground" />{" "}
+            <span>Dark</span>
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem className="flex gap-2" value="system">
+            <Laptop size={ICON_SIZE} className="text-muted-foreground" />{" "}
+            <span>System</span>
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export { ThemeSwitcher };

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

@@ -1,37 +1,35 @@
-import nextPlugin from '@next/eslint-plugin-next';
-import tseslint from 'typescript-eslint';
-
-const config = [
-  {
-    ignores: ['.next/**/*', '**/next-env.d.ts', 'next-env.d.ts'],
-  },
-  ...tseslint.configs.recommended,
-  {
-    files: [
-      '**/*.ts',
-      '**/*.tsx',
-      '**/*.js',
-      '**/*.jsx',
-      '**/*.mjs',
-      '**/*.cjs',
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: true,
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
-    plugins: {
-      '@next/next': nextPlugin,
-    },
-    rules: {
-      ...nextPlugin.configs.recommended.rules,
-      ...nextPlugin.configs['core-web-vitals'].rules,
-      '@next/next/no-html-link-for-pages': 'off',
-      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
-      '@typescript-eslint/no-explicit-any': 'warn',
-    },
-  },
-];
-
-export default config;
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+import nextPlugin from '@next/eslint-plugin-next';
+
+const nextRules = {
+  ...nextPlugin.configs.recommended.rules,
+  ...nextPlugin.configs['core-web-vitals'].rules,
+};
+
+const config = [
+  ...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'],
+    },
+  },
+];
+
+export default config;

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

@@ -117,21 +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';
-      quality?: number | null;
-      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: {
@@ -972,9 +972,9 @@ export function getRequiredProperties(blockType: BlockType): string[] {
   const schema = getContentSchema(blockType);
   if (!schema) return [];
   
-  return Object.entries(schema)
-    .filter(([, def]) => def.required)
-    .map(([name]) => name);
+  return Object.entries(schema)
+    .filter(([, def]) => def.required)
+    .map(([name]) => name);
 }
 
 /**
@@ -999,4 +999,4 @@ export function generateDefaultContent(blockType: BlockType): Record<string, any
   }
 
   return defaultContent;
-}
+}

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

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