create-nextblock 0.0.4 → 0.2.0

package/templates/nextblock-template/app/lib/sitemap-utils.ts

@@ -9,60 +9,60 @@ interface SitemapEntry {
  * Fetches all published pages from Supabase and formats them for the sitemap.
  * @returns {Promise<Array<SitemapEntry>>} A promise that resolves to an array of sitemap entries for pages.
  */
-export async function fetchAllPublishedPages(): Promise<SitemapEntry[]> {
-  const supabase = createClient();
-  try {
-    const { data: pages, error } = await supabase
-      .from('pages')
-      .select('slug, updated_at')
-      .eq('status', 'published');
-
-    if (error) {
-      console.error('Error fetching published pages:', error);
-      return [];
-    }
-
-    if (!pages) {
-      return [];
-    }
-
-    return pages.map((page) => ({
-      path: `/${page.slug}`,
-      lastModified: new Date(page.updated_at).toISOString(),
-    }));
-  } catch (err) {
-    console.error('An unexpected error occurred while fetching pages:', err);
-    return [];
-  }
-}
+export async function fetchAllPublishedPages(): Promise<SitemapEntry[]> {
+  const supabase = createClient();
+  try {
+    const { data: pages, error } = await supabase
+      .from('pages')
+      .select('slug, updated_at')
+      .eq('status', 'published');
+
+    if (error) {
+      console.error('Error fetching published pages:', error);
+      return [];
+    }
+
+    if (!pages) {
+      return [];
+    }
+
+    return pages.map((page) => ({
+      path: `/${page.slug}`,
+      lastModified: new Date(page.updated_at).toISOString(),
+    }));
+  } catch (err) {
+    console.error('An unexpected error occurred while fetching pages:', err);
+    return [];
+  }
+}
 
 /**
  * Fetches all published posts from Supabase and formats them for the sitemap.
  * @returns {Promise<Array<SitemapEntry>>} A promise that resolves to an array of sitemap entries for posts.
  */
-export async function fetchAllPublishedPosts(): Promise<SitemapEntry[]> {
-  const supabase = createClient();
-  try {
-    const { data: posts, error } = await supabase
-      .from('posts')
-      .select('slug, updated_at')
-      .eq('status', 'published');
-
-    if (error) {
-      console.error('Error fetching published posts:', error);
-      return [];
-    }
-
-    if (!posts) {
-      return [];
-    }
-
-    return posts.map((post) => ({
-      path: `/blog/${post.slug}`,
-      lastModified: new Date(post.updated_at).toISOString(),
-    }));
-  } catch (err) {
-    console.error('An unexpected error occurred while fetching posts:', err);
-    return [];
-  }
-}
+export async function fetchAllPublishedPosts(): Promise<SitemapEntry[]> {
+  const supabase = createClient();
+  try {
+    const { data: posts, error } = await supabase
+      .from('posts')
+      .select('slug, updated_at')
+      .eq('status', 'published');
+
+    if (error) {
+      console.error('Error fetching published posts:', error);
+      return [];
+    }
+
+    if (!posts) {
+      return [];
+    }
+
+    return posts.map((post) => ({
+      path: `/article/${post.slug}`,
+      lastModified: new Date(post.updated_at).toISOString(),
+    }));
+  } catch (err) {
+    console.error('An unexpected error occurred while fetching posts:', err);
+    return [];
+  }
+}

package/templates/nextblock-template/app/sitemap.xml/route.ts

@@ -31,7 +31,7 @@ export async function GET() {
 
     const staticRoutes: SitemapEntry[] = [
       { path: '/', lastModified: new Date().toISOString() },
-      { path: '/blog', lastModified: new Date().toISOString() },
+      { path: '/articles', lastModified: new Date().toISOString() },
     ];
 
     const allEntries = [...staticRoutes, ...pages, ...posts];
@@ -60,4 +60,4 @@ export async function GET() {
     console.error("Error generating sitemap:", error);
     return new NextResponse('Internal Server Error', { status: 500 });
   }
-}
+}

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

@@ -10,7 +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 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 {
@@ -258,20 +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 || 'Home'}
-                width={logo.media.width || 100}
-                height={logo.media.height || 32}
-                className="h-14 w-auto object-contain"
-                priority
-              />
-            ) : (
-              <span className="text-xl font-semibold text-foreground">
-                {siteTitle}
-              </span>
-            )}
+            {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 */}
@@ -369,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,13 +40,18 @@ const PostsGridBlock: React.FC<PostsGridBlockProps> = async ({ block, languageId
     console.error("Error fetching initial posts directly in PostsGridBlock:", queryError);
     postsError = queryError.message;
   } else {
-    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 = mediaObject?.object_key
-        ? `${process.env.NEXT_PUBLIC_R2_BASE_URL}/${mediaObject.object_key}`
-        : null;
+      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
@@ -90,4 +95,4 @@ const PostsGridBlock: React.FC<PostsGridBlockProps> = async ({ block, languageId
   );
 };
 
-export default PostsGridBlock;
+export default PostsGridBlock;

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

@@ -1,9 +1,9 @@
 // components/blocks/PostsGridClient.tsx
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import type { Database } from '@nextblock-cms/db';
-import Link from 'next/link';
+import React, { useState, useEffect } from 'react';
+import type { Database } from '@nextblock-cms/db';
+import Link from 'next/link';
 
 type PostWithMediaDimensions = Database['public']['Tables']['posts']['Row'] & {
     feature_image_url: string | null;
@@ -26,7 +26,10 @@ interface PostsGridClientProps {
   fetchAction: (languageId: number, page: number, limit: number) => Promise<{ posts: PostWithMediaDimensions[], totalCount: number, error?: string }>;
 }
 
-const PostsGridClient: React.FC<PostsGridClientProps> = ({
+const DEFAULT_FEATURE_IMAGE_WIDTH = 1600;
+const DEFAULT_FEATURE_IMAGE_HEIGHT = 900;
+
+const PostsGridClient: React.FC<PostsGridClientProps> = ({
   initialPosts,
   initialPage,
   postsPerPage,
@@ -115,29 +118,25 @@ const PostsGridClient: React.FC<PostsGridClientProps> = ({
           ))
         ) : posts.length > 0 ? (
           posts.map((post, index) => (
-            <Link href={`/blog/${post.slug}`} key={post.id} className="block group">
+            <Link href={`/article/${post.slug}`} key={post.id} className="block group">
               <div className="border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card text-card-foreground">
                 {/* Basic Post Card Structure - Enhanced with Feature Image */}
-                {post.feature_image_url && typeof post.feature_image_width === 'number' && typeof post.feature_image_height === 'number' && post.feature_image_width > 0 && post.feature_image_height > 0 ? (
-                  <div className="aspect-video overflow-hidden"> {/* Or other aspect ratio as desired, e.g., aspect-[16/9] or aspect-square */}
-                    <Image
-                      src={post.feature_image_url}
-                      alt={`Feature image for ${post.title}`}
-                      width={post.feature_image_width}
-                      height={post.feature_image_height}
-                      sizes={imageSizes}
-                      priority={index === 0}
-                      placeholder={post.blur_data_url ? 'blur' : 'empty'}
-                      blurDataURL={post.blur_data_url ?? undefined}
-                      quality={60}
-                      className="h-full object-cover transition-transform duration-300 group-hover:scale-105"
-                    />
-                  </div>
-                ) : post.feature_image_url ? (
-                  <div className="aspect-video overflow-hidden bg-gray-200 flex items-center justify-center">
-                    <span className="text-gray-500">Image not available</span>
-                  </div>
-                ) : null}
+                {post.feature_image_url ? (
+                  <div className="aspect-video overflow-hidden">
+                    <Image
+                      src={post.feature_image_url}
+                      alt={`Feature image for ${post.title}`}
+                      width={post.feature_image_width && post.feature_image_width > 0 ? post.feature_image_width : DEFAULT_FEATURE_IMAGE_WIDTH}
+                      height={post.feature_image_height && post.feature_image_height > 0 ? post.feature_image_height : DEFAULT_FEATURE_IMAGE_HEIGHT}
+                      sizes={imageSizes}
+                      priority={index === 0}
+                      placeholder={post.blur_data_url ? 'blur' : 'empty'}
+                      blurDataURL={post.blur_data_url ?? undefined}
+                      quality={60}
+                      className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                    />
+                  </div>
+                ) : null}
                 <div className="p-4">
                   <h3 className="text-lg font-semibold mb-2 group-hover:text-primary">{post.title}</h3>
                   {post.excerpt && <p className="text-sm text-muted-foreground mb-3 line-clamp-3">{post.excerpt}</p>}
@@ -177,4 +176,4 @@ const PostsGridClient: React.FC<PostsGridClientProps> = ({
   );
 };
 
-export default PostsGridClient;
+export default PostsGridClient;

package/templates/nextblock-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextblock-cms/template",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

package/templates/nextblock-template/proxy.ts

@@ -159,11 +159,11 @@ export default async function proxy(request: NextRequest) {
   } 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');
+  } else if (pathname === '/articles') {
+    finalResponse.headers.set('X-Page-Type', 'articles-index');
     finalResponse.headers.set('X-Prefetch-Priority', 'high');
-  } else if (pathname.startsWith('/blog/')) {
-    finalResponse.headers.set('X-Page-Type', 'blog-post');
+  } else if (pathname.startsWith('/article/')) {
+    finalResponse.headers.set('X-Page-Type', 'article');
     finalResponse.headers.set('X-Prefetch-Priority', 'medium');
   } else {
     const segments = pathname.split('/').filter(Boolean);

package/templates/nextblock-template/scripts/backup.js

@@ -1,53 +1,148 @@
-const { exec } = require('child_process');
-const { URL } = require('url');
-const fs = require('fs');
-const path = require('path');
-require('dotenv').config({ path: '.env.local' });
+// apps/nextblock/scripts/backup.js
+const fs = require('fs');
+const path = require('path');
+const { spawn } = require('child_process');
+const readline = require('readline');
 
-// Backup directory
-const backupDir = path.join(__dirname, '..', 'backup');
+// Load environment (database connection string should be in .env.local or .env)
+require('dotenv').config({ path: '.env.local' });  // adjust path if needed
 
-// Create backup directory if it doesn't exist
-if (!fs.existsSync(backupDir)) {
-  fs.mkdirSync(backupDir);
+// Get the database URL from env
+const dbUrl = process.env.POSTGRES_URL || process.env.DATABASE_URL;
+if (!dbUrl) {
+  console.error("❌ No database connection URL found in environment.");
+  process.exit(1);
 }
 
-// Backup file name
-const backupFile = path.join(backupDir, `backup_${new Date().toISOString().slice(0, 10)}.sql`);
-
-// Function to perform the backup
-const backupDatabase = () => {
-  const connectionString = process.env.POSTGRES_URL;
-
-  if (!connectionString) {
-    console.error('Error: Missing POSTGRES_URL in .env.local file.');
-    return;
+// Parse the connection URL to extract components
+let connectionUrl;
+try {
+  // Ensure the URL scheme is correct for Node's URL parser
+  connectionUrl = new URL(dbUrl);
+} catch (err) {
+  console.error('Error parsing database URL:', err.message);
+  // In case of a parsing error, try prefixing with 'postgresql://' (if not already)
+  if (!dbUrl.startsWith('postgresql://') && dbUrl.startsWith('postgres://')) {
+    connectionUrl = new URL(dbUrl.replace(/^postgres:\/\//, 'postgresql://'));
+  } else {
+    console.error("❌ Invalid database URL format.");
+    process.exit(1);
   }
+}
 
-  // Parse the URL and remove non-standard parameters for pg_dump
-  const url = new URL(connectionString);
-  url.searchParams.delete('supa'); // Remove supa parameter
-  const finalConnectionString = url.toString();
-
-  const command = `pg_dump "${finalConnectionString}" > "${backupFile}"`;
-
-  console.log('Starting database backup...');
-
-  exec(command, (error, stdout, stderr) => {
-    if (error) {
-      console.error(`Error executing backup: ${error.message}`);
-      if (stderr) {
-        console.error(`pg_dump error: ${stderr}`);
-      }
-      return;
-    }
-    if (stderr && stderr.toLowerCase().includes('error')) {
-      console.error(`Error: ${stderr}`);
-      return;
-    }
-    console.log(`Backup successful! File saved as ${backupFile}`);
-  });
-};
-
-// Run the backup
-backupDatabase();
+const host = connectionUrl.hostname;
+const port = connectionUrl.port || '5432';
+const dbName = connectionUrl.pathname.replace(/^\//, '');  // strip leading '/'
+const user = connectionUrl.username;
+const password = connectionUrl.password;
+const sslMode = connectionUrl.searchParams.get('sslmode') || 'require';  // default to require SSL
+
+// Prepare backup directory with timestamp name
+const timestamp = new Date().toISOString().replace(/[:.]/g, '-');  // replace colon and dot with hyphen for filename safety
+
+function sanitizeName(rawName) {
+  if (!rawName) {
+    return '';
+  }
+  return rawName
+    .trim()
+    .replace(/[^\w.-]+/g, '-')  // keep letters/numbers/_/./-
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+}
+
+function parseNameFromArgs() {
+  const args = process.argv.slice(2);
+  for (let i = 0; i < args.length; i += 1) {
+    const arg = args[i];
+    if (arg === '--name' || arg === '-n') {
+      return args[i + 1] ?? '';
+    }
+    const match = arg.match(/^--name=(.*)$/);
+    if (match) {
+      return match[1];
+    }
+  }
+  if (typeof process.env.BACKUP_NAME === 'string') {
+    return process.env.BACKUP_NAME;
+  }
+  return null;
+}
+
+function promptForName(defaultLabel) {
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout,
+    });
+    rl.question(
+      `Enter a friendly name for this backup (press Enter to use ${defaultLabel}): `,
+      (answer) => {
+        rl.close();
+        resolve(answer);
+      }
+    );
+  });
+}
+
+function buildFolderName(baseName, rawName) {
+  const sanitized = sanitizeName(rawName);
+  if (!sanitized) {
+    return baseName;
+  }
+  return `${baseName}__${sanitized}`;
+}
+
+async function resolveBackupFolderName(baseName) {
+  const providedName = parseNameFromArgs();
+  if (providedName !== null) {
+    return buildFolderName(baseName, providedName);
+  }
+  if (process.stdin.isTTY && process.stdout.isTTY) {
+    const answer = await promptForName(baseName);
+    return buildFolderName(baseName, answer);
+  }
+  return baseName;
+}
+
+(async () => {
+  let backupFolderName;
+  try {
+    backupFolderName = await resolveBackupFolderName(timestamp);
+  } catch (err) {
+    console.error(`❌ Failed to determine backup name: ${err.message}`);
+    process.exit(1);
+  }
+
+  const backupDir = path.join(__dirname, '../backups', backupFolderName);
+  fs.mkdirSync(backupDir, { recursive: true });
+  const dumpFile = path.join(backupDir, 'dump.sql');
+
+  console.log(`🔄 Backing up database to ${dumpFile} ...`);
+
+  // Spawn the pg_dump process
+  const dumpArgs = [
+    '--clean', '--if-exists', '--quote-all-identifiers',  // include DROP statements:contentReference[oaicite:8]{index=8}
+    '-h', host,
+    '-U', user,
+    '-p', port,
+    '-d', dbName,
+    '-f', dumpFile
+  ];
+  const envVars = { ...process.env, PGPASSWORD: password, PGSSLMODE: sslMode };
+  const pgDump = spawn('pg_dump', dumpArgs, { env: envVars });
+
+  // Forward pg_dump errors to console
+  pgDump.stderr.on('data', (data) => {
+    process.stderr.write(data);
+  });
+
+  // Handle process exit
+  pgDump.on('close', (code) => {
+    if (code === 0) {
+      console.log("✅ Backup completed successfully.");
+    } else {
+      console.error(`❌ pg_dump exited with code ${code}. Check error output above for details.`);
+    }
+  });
+})();

package/templates/nextblock-template/scripts/restore-working.js

@@ -0,0 +1,102 @@
+// apps/nextblock/scripts/restore.js
+const fs = require('fs');
+const path = require('path');
+const { spawn } = require('child_process');
+const readline = require('readline');
+
+// Load target database connection from env
+require('dotenv').config({ path: '.env.local' });  // ensure this has the new DB credentials
+
+const dbUrl = process.env.POSTGRES_URL || process.env.DATABASE_URL;
+if (!dbUrl) {
+  console.error("❌ No database connection URL found for restore.");
+  process.exit(1);
+}
+
+// Parse connection URL for target DB (similar to backup.js)
+let connectionUrl;
+try {
+  connectionUrl = new URL(dbUrl);
+} catch (err) {
+  if (!dbUrl.startsWith('postgresql://') && dbUrl.startsWith('postgres://')) {
+    connectionUrl = new URL(dbUrl.replace(/^postgres:\/\//, 'postgresql://'));
+  } else {
+    console.error("❌ Invalid database URL format:", err.message);
+    process.exit(1);
+  }
+}
+const host = connectionUrl.hostname;
+const port = connectionUrl.port || '5432';
+const dbName = connectionUrl.pathname.replace(/^\//, '');
+const user = connectionUrl.username;
+const password = connectionUrl.password;
+const sslMode = connectionUrl.searchParams.get('sslmode') || 'require';
+
+// List available backup folders
+const backupsPath = path.join(__dirname, '../backups');
+if (!fs.existsSync(backupsPath)) {
+  console.error("❌ Backups directory not found.");
+  process.exit(1);
+}
+const backupDirs = fs.readdirSync(backupsPath, { withFileTypes: true })
+  .filter(dirent => dirent.isDirectory())
+  .map(dirent => dirent.name);
+// Sort by name (timestamp in name means lexicographical sort is chronological)
+backupDirs.sort().reverse();  // latest first
+
+if (backupDirs.length === 0) {
+  console.error("❌ No backups found in the backups directory.");
+  process.exit(1);
+}
+
+// Show list of backups
+console.log("Available backups:");
+backupDirs.forEach((dir, index) => {
+  console.log(`${index + 1}. ${dir}`);
+});
+
+// Prompt user to choose a backup
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+rl.question("Enter the number of the backup to restore: ", (answer) => {
+  rl.close();
+  const choice = parseInt(answer.trim(), 10);
+  if (isNaN(choice) || choice < 1 || choice > backupDirs.length) {
+    console.error("❌ Invalid selection. Exiting.");
+    process.exit(1);
+  }
+
+  const selectedDir = backupDirs[choice - 1];
+  const dumpFile = path.join(backupsPath, selectedDir, 'dump.sql');
+  if (!fs.existsSync(dumpFile)) {
+    console.error(`❌ dump.sql not found in backup folder: ${selectedDir}`);
+    process.exit(1);
+  }
+
+  console.log(`🔄 Restoring database from backup "${selectedDir}"...`);
+
+  // Spawn psql to execute the dump file
+  const restoreArgs = [
+    '-h', host,
+    '-U', user,
+    '-p', port,
+    '-d', dbName,
+    '-f', dumpFile
+  ];
+  const envVars = { ...process.env, PGPASSWORD: password, PGSSLMODE: sslMode };
+  const psql = spawn('psql', restoreArgs, { env: envVars });
+
+  // Forward output (especially errors)
+  psql.stdout.on('data', data => process.stdout.write(data));
+  psql.stderr.on('data', data => process.stderr.write(data));
+
+  psql.on('close', code => {
+    if (code === 0) {
+      console.log("✅ Restore completed successfully.");
+    } else {
+      console.error(`❌ psql exited with code ${code}. The restore may have errors.`);
+    }
+  });
+});