create-nextblock 0.0.1

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

@@ -0,0 +1,119 @@
+// components/BlockRenderer.tsx
+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";
+
+type Block = Database['public']['Tables']['blocks']['Row'];
+import HeroBlockRenderer from "./blocks/renderers/HeroBlockRenderer"; // Static import for LCP
+import ClientTextBlockRenderer from "./blocks/renderers/ClientTextBlockRenderer"; // Static import for client component
+
+interface BlockRendererProps {
+  blocks: Block[];
+  languageId: number;
+}
+
+interface DynamicBlockRendererProps {
+  block: Block;
+  languageId: number;
+}
+
+// Dynamic renderer component that handles the dynamic import logic for non-LCP blocks
+const DynamicBlockRenderer: React.FC<DynamicBlockRendererProps> = ({
+  block,
+  languageId,
+}) => {
+  const blockDefinition = getBlockDefinition(block.block_type as BlockType);
+  
+  if (!blockDefinition) {
+    return (
+      <div
+        key={block.id}
+        className="my-4 p-4 border rounded bg-destructive/10 text-destructive"
+      >
+        <p>
+          <strong>Unsupported block type:</strong> {block.block_type}
+        </p>
+        <pre className="text-xs whitespace-pre-wrap">
+          {JSON.stringify(block.content, null, 2)}
+        </pre>
+      </div>
+    );
+  }
+
+  // Handle the text block type by rendering the client component wrapper
+  if (block.block_type === 'text') {
+    return <ClientTextBlockRenderer content={block.content as any} languageId={languageId} />;
+  }
+
+  // Create dynamic component with proper SSR handling for other blocks
+  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>
+      ),
+      ssr: true,
+    }
+  ) as React.ComponentType<any>;
+
+  // Handle different prop requirements for different renderers
+  // PostsGridBlockRenderer needs the full block object
+  if (block.block_type === 'posts_grid') {
+    return (
+      <RendererComponent
+        content={block.content}
+        languageId={languageId}
+        block={block}
+      />
+    );
+  }
+
+  return (
+    <RendererComponent
+      content={block.content}
+      languageId={languageId}
+    />
+  );
+};
+
+const BlockRenderer: React.FC<BlockRendererProps> = ({
+  blocks,
+  languageId,
+}) => {
+  if (!blocks || blocks.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {blocks.map((block) => {
+        // Statically render the Hero block for LCP optimization
+        if (block.block_type === 'hero') {
+          return (
+            <HeroBlockRenderer
+              key={block.id}
+              content={block.content as unknown as SectionBlockContent}
+              languageId={languageId}
+            />
+          );
+        }
+        // Dynamically render all other blocks
+        return (
+          <DynamicBlockRenderer
+            key={block.id}
+            block={block}
+            languageId={languageId}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+export default BlockRenderer;

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

@@ -0,0 +1,33 @@
+import Link from 'next/link';
+import type { Database } from '@nextblock-cms/db';
+
+type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
+
+interface FooterNavigationProps {
+  navItems: NavigationItem[];
+}
+
+export default function FooterNavigation({ navItems }: FooterNavigationProps) {
+  if (navItems.length === 0) {
+    return null;
+  }
+
+  const renderNavItems = (items: NavigationItem[]) =>
+    items
+      .filter((item) => !item.parent_id)
+      .map((item) => (
+        <Link
+          key={item.id}
+          href={item.url}
+          className="text-sm text-muted-foreground hover:text-foreground hover:underline px-2 py-1"
+        >
+          {item.label}
+        </Link>
+      ));
+
+  return (
+    <nav className="flex flex-wrap justify-center items-center gap-x-4 gap-y-2" aria-label="Footer navigation">
+      {renderNavItems(navItems)}
+    </nav>
+  );
+}

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

@@ -0,0 +1,42 @@
+// components/Header.tsx
+import type { Database } from '@nextblock-cms/db';
+import HeaderAuth from './header-auth';
+import LanguageSwitcher from './LanguageSwitcher';
+import ResponsiveNav from './ResponsiveNav';
+
+type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
+type Logo =
+  Database['public']['Tables']['logos']['Row'] & {
+    media: (Database['public']['Tables']['media']['Row'] & { alt_text: string | null }) | null;
+  };
+
+interface HeaderProps {
+  navItems: NavigationItem[];
+  canAccessCms: boolean;
+  logo: Logo | null;
+  currentPageData?: { slug: string; translation_group_id: string | null };
+  siteTitle: string;
+}
+
+export default function Header({
+  navItems,
+  canAccessCms,
+  logo,
+  currentPageData,
+  siteTitle,
+}: HeaderProps) {
+  return (
+    <ResponsiveNav
+      homeLinkHref="/"
+      navItems={navItems}
+      canAccessCms={canAccessCms}
+      cmsDashboardLinkHref="/cms/dashboard"
+      headerAuthComponent={<HeaderAuth />}
+      languageSwitcherComponent={
+        <LanguageSwitcher currentPageData={currentPageData} />
+      }
+      logo={logo}
+      siteTitle={siteTitle}
+    />
+  );
+}

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

@@ -0,0 +1,47 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+
+interface HtmlScriptExecutorProps {
+  html: string; // should contain one or more <script> tags
+}
+
+// Executes inline scripts in a string by converting them to blob URLs
+// Requires CSP: script-src includes blob:
+export const HtmlScriptExecutor: React.FC<HtmlScriptExecutorProps> = ({ html }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const root = ref.current;
+    if (!root) return;
+    root.innerHTML = html;
+
+    const created: string[] = [];
+    const scripts = Array.from(root.querySelectorAll("script"));
+
+    scripts.forEach((old) => {
+      const s = document.createElement("script");
+      for (const attr of Array.from(old.attributes)) s.setAttribute(attr.name, attr.value);
+      if (old.src) {
+        s.src = old.src;
+      } else {
+        const blob = new Blob([old.textContent || ""], { type: old.type || "text/javascript" });
+        const url = URL.createObjectURL(blob);
+        s.src = url;
+        s.async = false;
+        created.push(url);
+      }
+      old.parentNode?.insertBefore(s, old);
+      old.remove();
+    });
+
+    return () => {
+      created.forEach((u) => { try { URL.revokeObjectURL(u); } catch (error) { console.error('Failed to revoke blob URL:', error); } });
+    };
+  }, [html]);
+
+  return <div ref={ref} style={{ display: 'none' }} />;
+};
+
+export default HtmlScriptExecutor;
+

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

@@ -0,0 +1,103 @@
+// components/LanguageSwitcher.tsx
+'use client';
+
+import { useLanguage } from '@/context/LanguageContext';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nextblock-cms/ui';
+import { useRouter, usePathname } from 'next/navigation';
+import { getPageTranslations, getPageMetadataBySlugAndLocale } from '@/app/actions/languageActions';
+import type { Language } from '@/app/actions/languageActions';
+
+interface CurrentPageInfo {
+  slug: string;
+  translation_group_id: string | null;
+}
+
+interface LanguageSwitcherProps {
+  currentPageData?: CurrentPageInfo;
+}
+
+export default function LanguageSwitcher({ currentPageData }: LanguageSwitcherProps) {
+  const { currentLocale, setCurrentLocale, availableLanguages, isLoadingLanguages } = useLanguage();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  if (isLoadingLanguages || availableLanguages.length <= 1) {
+    return null;
+  }
+
+  const handleValueChange = async (newLocaleCode: string) => {
+    await setCurrentLocale(newLocaleCode);
+
+    let targetPath = pathname; // Default to current path
+
+    // Determine if it's a homepage (e.g., /en, /fr, or just /)
+    const isHomePage = pathname === '/' || availableLanguages.some(lang => pathname === `/${lang.code}`);
+
+    if (isHomePage) {
+      targetPath = '/'; // For any homepage, new language path is root
+    } else {
+      // Extract slug from pathname (remove leading slash)
+      const currentSlug = pathname.startsWith('/') ? pathname.slice(1) : pathname;
+      
+      let pageMetadata = currentPageData;
+      
+      // If currentPageData is not provided, try to fetch it
+      if (!pageMetadata && currentSlug) {
+        try {
+          const fetchedMetadata = await getPageMetadataBySlugAndLocale(currentSlug, currentLocale);
+          if (fetchedMetadata) {
+            pageMetadata = fetchedMetadata;
+          }
+        } catch (error) {
+          console.error('Error fetching current page metadata:', error);
+        }
+      }
+
+      if (pageMetadata?.translation_group_id) {
+        try {
+          const translations = await getPageTranslations(pageMetadata.translation_group_id);
+          const foundTranslation = translations.find(t => t.language_code === newLocaleCode);
+
+          if (foundTranslation) {
+            targetPath = `/${foundTranslation.slug}`;
+          } else {
+            // Original warning, without the [LanguageSwitcher] prefix
+            console.warn(`No translation found for ${pageMetadata.slug} to ${newLocaleCode}. Falling back to current path.`);
+          }
+        } catch (error) {
+          // Original error, without the [LanguageSwitcher] prefix
+          console.error("Error fetching page translations:", error);
+        }
+      } else {
+        // Original warning, without the [LanguageSwitcher] prefix
+        console.warn(`No translation_group_id for page: ${pageMetadata?.slug || currentSlug}. Current path will be used.`);
+      }
+    }
+
+    setTimeout(() => {
+      if (pathname !== targetPath) {
+        router.push(targetPath);
+      } else {
+        // If path is the same, refresh to ensure content updates for the new locale
+        router.refresh();
+      }
+    }, 50); // Adjust delay as needed
+  };
+
+  return (
+    <div className="flex items-center">
+      <Select value={currentLocale} onValueChange={handleValueChange} aria-label="Language Switcher">
+        <SelectTrigger className="h-9 text-xs sm:text-sm" aria-label="Language Switcher">
+          <SelectValue placeholder="Language" aria-label="Language Switcher"/>
+        </SelectTrigger>
+        <SelectContent>
+          {availableLanguages.map((lang: Language) => (
+            <SelectItem key={lang.code} value={lang.code}>
+              {lang.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}