create-nextblock 0.13.1 → 0.13.3

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

@@ -3,13 +3,13 @@ import React from "react";
 import { Separator } from "@nextblock-cms/ui";
 import { createClient } from "@nextblock-cms/db/server";
 import PostForm from "../../components/PostForm";
-import { updatePost } from "../../actions";
+import { updatePost, publishPost } from "../../actions";
 import type { Database } from "@nextblock-cms/db";
 import { notFound, redirect } from "next/navigation";
 import BlockEditorArea from "../../../blocks/components/BlockEditorArea";
 import Link from "next/link";
-import { Button } from "@nextblock-cms/ui";
-import { ArrowLeft, Eye, FilePenLine } from "lucide-react";
+import { Button, ViewLiveButton } from "@nextblock-cms/ui";
+import { ArrowLeft, FilePenLine } from "lucide-react";
 import ContentLanguageSwitcher from "../../../components/ContentLanguageSwitcher";
 import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server";
 import { normalizeContentDraftRow } from "../../../../../lib/visual-editing/draft-content";
@@ -30,7 +30,7 @@ interface PostWithBlocks extends PostType {
   translation_group_id: string;
 }
 
-async function getPostDataWithBlocks(id: number): Promise<{ post: PostWithBlocks; hasDraft: boolean } | null> {
+async function getPostDataWithBlocks(id: number): Promise<{ post: PostWithBlocks; hasDraft: boolean; liveStatus: string; liveSlug: string } | null> {
   const supabase = createClient();
   const { data: postData, error: postError } = await supabase
     .from("posts")
@@ -86,7 +86,14 @@ async function getPostDataWithBlocks(id: number): Promise<{ post: PostWithBlocks
     };
   }
 
-  return { post: postWithBlocks, hasDraft };
+  return {
+    post: postWithBlocks,
+    hasDraft,
+    // The LIVE row's status/slug (before the draft overlay above) — the "View
+    // Live" button must reflect what is actually published, not the draft.
+    liveStatus: postData.status as string,
+    liveSlug: postData.slug as string,
+  };
 }
 
 export default async function EditPostPage(props: { params: Promise<{ id: string }> }) {
@@ -113,7 +120,7 @@ export default async function EditPostPage(props: { params: Promise<{ id: string
     return notFound();
   }
 
-  const { post: postWithBlocks, hasDraft } = postDataResult;
+  const { post: postWithBlocks, hasDraft, liveStatus, liveSlug } = postDataResult;
 
   let initialFeatureImageUrl: string | null = null;
   let initialFeatureImageIdProp: string | null = null;
@@ -138,6 +145,8 @@ export default async function EditPostPage(props: { params: Promise<{ id: string
   const updatePostWithId = updatePost.bind(null, postId);
   const publicPostUrl = `/article/${postWithBlocks.slug}`;
   const draftModeUrl = `/api/draft/start?path=${encodeURIComponent(publicPostUrl)}`;
+  const isLive = liveStatus === "published";
+  const liveViewUrl = `/article/${liveSlug}`;
   
   return (
     <UploadFolderProvider defaultFolder={`posts/${postWithBlocks.slug}/`}>
@@ -181,11 +190,12 @@ export default async function EditPostPage(props: { params: Promise<{ id: string
                   allSiteLanguages={allSiteLanguages}
                 />
               )}
-              <Button variant="outline" asChild>
-                <Link href={publicPostUrl} target="_blank" rel="noopener noreferrer">
-                  <Eye className="mr-2 h-4 w-4" /> View Live Post
-                </Link>
-              </Button>
+              <ViewLiveButton
+                href={liveViewUrl}
+                isLive={isLive}
+                label="post"
+                publishAction={publishPost.bind(null, postId)}
+              />
               <Button variant="secondary" asChild>
                 <a href={draftModeUrl} target="_blank" rel="noopener noreferrer">
                   <FilePenLine className="mr-2 h-4 w-4" />

package/templates/nextblock-template/app/cms/posts/actions.ts

@@ -12,6 +12,51 @@ type PageStatus = Database['public']['Enums']['page_status'];
 import { encodedRedirect } from "@nextblock-cms/utils/server"; // Ensure this is correctly imported
 // --- createPost and updatePost functions to be updated similarly for error returns ---
 
+/**
+ * Publish a post directly (status -> "published") so it becomes visible on the
+ * live site. Used by the draft-aware "View Live" button when an admin chooses to
+ * publish a still-draft post.
+ */
+export async function publishPost(postId: number): Promise<{ error?: string } | void> {
+  const supabase = createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) return { error: "User not authenticated." };
+
+  const nowIso = new Date().toISOString();
+  const { data: existing } = await supabase
+    .from("posts")
+    .select("published_at")
+    .eq("id", postId)
+    .maybeSingle();
+
+  // Publishing "now": if the post has no publish date or a future-scheduled one,
+  // set it to now so it isn't withheld by the public "published_at <= now" filter.
+  const currentPublishedAt = existing?.published_at;
+  const setPublishedNow =
+    !currentPublishedAt || new Date(currentPublishedAt).getTime() > Date.now();
+
+  const { data: post, error } = await supabase
+    .from("posts")
+    .update({
+      status: "published",
+      updated_at: nowIso,
+      ...(setPublishedNow ? { published_at: nowIso } : {}),
+    })
+    .eq("id", postId)
+    .select("slug")
+    .single();
+
+  if (error || !post) {
+    return { error: error?.message || "Could not publish the post." };
+  }
+
+  revalidatePath("/cms/posts");
+  revalidatePath(`/cms/posts/${postId}/edit`);
+  revalidatePath(`/article/${post.slug}`);
+  revalidatePath("/articles");
+  return {};
+}
+
 export async function createPost(formData: FormData) {
   const supabase = createClient();
   const { data: { user } } = await supabase.auth.getUser();

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

@@ -1,7 +1,7 @@
 import { verifyPackageOnline, getActiveLanguagesServerSide } from '@nextblock-cms/db/server';
 import { redirect, notFound } from 'next/navigation';
 import Link from 'next/link';
-import { ArrowLeft, ChevronDown, ExternalLink } from 'lucide-react';
+import { ArrowLeft, ChevronDown } from 'lucide-react';
 import {
   Badge,
   Button,
@@ -11,6 +11,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  ViewLiveButton,
 } from '@nextblock-cms/ui';
 import ProductFormClientShell from '../../ProductFormClientShell';
 import {
@@ -21,6 +22,7 @@ import {
   getStoreConfigStatus,
   normalizeCurrencyRecord,
   updateProductAction,
+  publishProductAction,
   getCategoriesWithCount,
   getProductCategories,
 } from '@nextblock-cms/ecommerce/server';
@@ -265,14 +267,14 @@ export default async function EditProductPage({
             </DropdownMenu>
           ) : null}
 
-          {product.slug && product.status === 'active' && (
-            <Button variant="outline" asChild>
-              <Link href={`/product/${product.slug}`} target="_blank">
-                <ExternalLink className="w-4 h-4 mr-2" />
-                View
-              </Link>
-            </Button>
-          )}
+          {product.slug ? (
+            <ViewLiveButton
+              href={`/product/${product.slug}`}
+              isLive={product.status === 'active'}
+              label="product"
+              publishAction={publishProductAction.bind(null, product.id)}
+            />
+          ) : null}
         </div>
       </div>