create-nextblock 0.2.33 → 0.2.35

package/templates/nextblock-template/app/cms/settings/extra-translations/actions.ts

@@ -59,7 +59,7 @@ export async function getTranslations() {
 
 export async function updateTranslation(prevState: unknown, formData: FormData) {
   const supabase = createClient();
-  const data = Object.fromEntries(formData.entries());
+  const data = Object.fromEntries(formData as any);
   const key = data.key as string;
 
   if (!key) {

package/templates/nextblock-template/app/cms/settings/logos/[id]/edit/page.tsx

@@ -13,7 +13,6 @@ export default async function EditLogoPage(props: { params: Promise<{ id: string
   return (
     <div>
       <h1 className="text-2xl font-semibold mb-6">Edit Logo</h1>
-      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
       <LogoForm logo={logo} action={updateLogo as any} />
     </div>
   )

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;