create-nextblock 0.10.9 → 0.11.2

package/templates/nextblock-template/app/article/[slug]/PostClientContent.tsx

@@ -9,6 +9,7 @@ import { useCurrentContent } from '../../../context/CurrentContentContext';
 import Link from 'next/link';
 import { estimateReadTimeMinutesFromBlocks } from '../../../lib/posts/readTime';
 import FeatureImageHero from '../../../components/FeatureImageHero';
+import PostCommentsSection from '../../../components/PostCommentsSection';
 
 type PostType = Database['public']['Tables']['posts']['Row'];
 type BlockType = Database['public']['Tables']['blocks']['Row'];
@@ -430,6 +431,11 @@ export default function PostClientContent({ initialPostData, currentSlug, childr
       <div ref={articleBodyRef} className="post-article__body mx-auto mt-10 w-full px-4 md:mt-14">
         {children}
       </div>
+
+      {/* Post Comments Section */}
+      <div className="mx-auto max-w-4xl px-4 mt-16 border-t pt-10 border-slate-200 dark:border-slate-800">
+        <PostCommentsSection postId={currentPostData.id} />
+      </div>
     </article>
   );
 }

package/templates/nextblock-template/app/cms/CmsClientLayout.tsx

@@ -244,6 +244,7 @@ export default function CmsClientLayout({
 
   else if (pathname.startsWith("/cms/settings/packages")) pageTitle = "Packages";
   else if (pathname.startsWith("/cms/settings")) pageTitle = "Settings";
+  else if (pathname.startsWith("/cms/interactions")) pageTitle = "Interactions";
   else if (pathname.startsWith("/cms/products/inventory")) pageTitle = "Inventory";
   else if (pathname.startsWith("/cms/coupons/") && pathname.endsWith("/edit")) pageTitle = "Edit Coupon";
   else if (pathname.startsWith("/cms/coupons")) pageTitle = "Coupons";
@@ -316,6 +317,9 @@ export default function CmsClientLayout({
               <NavItem href="/cms/custom-blocks" icon={Boxes} isActive={pathname.startsWith("/cms/custom-blocks")} writerOnly isAdmin={isAdmin} isWriter={isWriter} onClick={closeSidebarOnMobile}>
                 Blocks
               </NavItem>
+              <NavItem href="/cms/interactions" icon={MessageSquare} isActive={pathname.startsWith("/cms/interactions")} writerOnly isAdmin={isAdmin} isWriter={isWriter} onClick={closeSidebarOnMobile}>
+                Interactions
+              </NavItem>
               <NavItem href="/cms/navigation" icon={ListTree} isActive={pathname.startsWith("/cms/navigation")} adminOnly isAdmin={isAdmin} onClick={closeSidebarOnMobile}>
                     Navigation
               </NavItem>

package/templates/nextblock-template/app/cms/components/ConnectGitHubButton.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Check, ExternalLink, Github, Loader2 } from 'lucide-react';
+import { Button } from '@nextblock-cms/ui';
+import { startGithubConnect, pollGithubConnect } from './github-connect-actions';
+
+type Phase = 'idle' | 'starting' | 'awaiting' | 'installed' | 'error';
+
+/**
+ * One-click "Connect GitHub" via the OAuth device flow. On authorization, the server
+ * installs the upstream-sync workflow into the repo (the file Vercel's clone strips).
+ * No PAT, no env config — the public client id is baked into the app.
+ */
+export default function ConnectGitHubButton() {
+  const router = useRouter();
+  const [phase, setPhase] = useState<Phase>('idle');
+  const [userCode, setUserCode] = useState('');
+  const [verificationUri, setVerificationUri] = useState('https://github.com/login/device');
+  const [error, setError] = useState('');
+
+  // Cancel any in-flight polling when the component unmounts.
+  const activeRef = useRef(false);
+  useEffect(() => {
+    activeRef.current = true;
+    return () => {
+      activeRef.current = false;
+    };
+  }, []);
+
+  const poll = useCallback(async (intervalMs: number) => {
+    if (!activeRef.current) return;
+    const result = await pollGithubConnect();
+    if (!activeRef.current) return;
+
+    if (result.status === 'installed') {
+      setPhase('installed');
+      // Re-render the dashboard so the onboarding step picks up the now-active workflow
+      // (the step then flips to done and this control is replaced).
+      router.refresh();
+      return;
+    }
+    if (result.status === 'error') {
+      setError(result.error);
+      setPhase('error');
+      return;
+    }
+    // pending — back off a little on slow_down, then poll again.
+    const next = result.slowDown ? intervalMs + 5000 : intervalMs;
+    setTimeout(() => void poll(next), next);
+  }, [router]);
+
+  const connect = useCallback(async () => {
+    setError('');
+    setPhase('starting');
+    const res = await startGithubConnect();
+    if (!activeRef.current) return;
+    if (!res.ok || !res.userCode) {
+      setError(res.error ?? 'Could not start GitHub connect.');
+      setPhase('error');
+      return;
+    }
+    setUserCode(res.userCode);
+    if (res.verificationUri) setVerificationUri(res.verificationUri);
+    setPhase('awaiting');
+    const intervalMs = Math.max((res.interval ?? 5) + 1, 5) * 1000;
+    setTimeout(() => void poll(intervalMs), intervalMs);
+  }, [poll]);
+
+  if (phase === 'installed') {
+    return (
+      <div className="flex items-center gap-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400">
+        <Check className="h-4 w-4" />
+        Connected — workflow installed
+      </div>
+    );
+  }
+
+  if (phase === 'awaiting') {
+    return (
+      <div className="flex flex-col items-end gap-1.5 text-right">
+        <Button asChild size="sm" variant="outline">
+          <a href={verificationUri} target="_blank" rel="noopener noreferrer">
+            Authorize on GitHub
+            <ExternalLink className="ml-1 h-3.5 w-3.5" />
+          </a>
+        </Button>
+        <p className="text-xs text-muted-foreground">
+          Enter code{' '}
+          <span className="font-mono font-semibold tracking-wider text-foreground">{userCode}</span>
+        </p>
+        <p className="flex items-center gap-1 text-xs text-muted-foreground">
+          <Loader2 className="h-3 w-3 animate-spin" />
+          Waiting for authorization…
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-end gap-1">
+      <Button
+        size="sm"
+        variant="outline"
+        onClick={() => void connect()}
+        disabled={phase === 'starting'}
+        className="shrink-0"
+      >
+        {phase === 'starting' ? (
+          <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+        ) : (
+          <Github className="mr-1 h-3.5 w-3.5" />
+        )}
+        {phase === 'starting' ? 'Starting…' : 'Connect GitHub'}
+      </Button>
+      {phase === 'error' && (
+        <p className="max-w-[16rem] text-right text-xs text-red-600 dark:text-red-400">{error}</p>
+      )}
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/components/github-connect-actions.ts

@@ -0,0 +1,102 @@
+'use server';
+
+import { cookies } from 'next/headers';
+import { revalidatePath } from 'next/cache';
+import { createClient } from '@nextblock-cms/db/server';
+import {
+  startDeviceFlow,
+  pollDeviceFlowOnce,
+  installSyncWorkflow,
+} from '../../../lib/updates/github-device';
+import { markSyncWorkflowInstalled } from '../../../lib/updates/check-upstream';
+
+const DEVICE_COOKIE = 'nb_gh_device';
+
+/** ADMIN gate, mirroring the rest of the CMS server entry points. */
+async function isAdmin(): Promise<boolean> {
+  const supabase = createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) return false;
+  const { data: profile, error } = await supabase
+    .from('profiles')
+    .select('role')
+    .eq('id', user.id)
+    .single();
+  return !error && profile?.role === 'ADMIN';
+}
+
+export interface StartConnectResult {
+  ok: boolean;
+  userCode?: string;
+  verificationUri?: string;
+  interval?: number;
+  expiresIn?: number;
+  error?: string;
+}
+
+/** Begin the device flow; stash the device code in an httpOnly cookie for polling. */
+export async function startGithubConnect(): Promise<StartConnectResult> {
+  if (!(await isAdmin())) return { ok: false, error: 'Administrator role required.' };
+
+  try {
+    const flow = await startDeviceFlow();
+    const store = await cookies();
+    store.set(DEVICE_COOKIE, flow.deviceCode, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      path: '/cms',
+      maxAge: flow.expiresIn,
+    });
+    return {
+      ok: true,
+      userCode: flow.userCode,
+      verificationUri: flow.verificationUri,
+      interval: flow.interval,
+      expiresIn: flow.expiresIn,
+    };
+  } catch (caught) {
+    return { ok: false, error: caught instanceof Error ? caught.message : 'Could not start GitHub connect.' };
+  }
+}
+
+export type PollConnectResult =
+  | { status: 'installed'; htmlUrl?: string }
+  | { status: 'pending'; slowDown?: boolean }
+  | { status: 'error'; error: string };
+
+/** Poll once; on authorization, install the workflow and clear the device cookie. */
+export async function pollGithubConnect(): Promise<PollConnectResult> {
+  if (!(await isAdmin())) return { status: 'error', error: 'Administrator role required.' };
+
+  const store = await cookies();
+  const deviceCode = store.get(DEVICE_COOKIE)?.value;
+  if (!deviceCode) {
+    return { status: 'error', error: 'Connect session expired — start again.' };
+  }
+
+  const poll = await pollDeviceFlowOnce(deviceCode);
+
+  if (poll.status === 'pending') return { status: 'pending', slowDown: poll.slowDown };
+
+  if (poll.status === 'authorized') {
+    const install = await installSyncWorkflow(poll.token);
+    store.delete({ name: DEVICE_COOKIE, path: '/cms' });
+    if (install.ok) {
+      // We just installed the workflow — flip the onboarding state now instead of waiting
+      // for the throttled background poll / GitHub's registration lag.
+      await markSyncWorkflowInstalled();
+      revalidatePath('/cms', 'layout');
+      return { status: 'installed', htmlUrl: install.htmlUrl };
+    }
+    return { status: 'error', error: install.error ?? 'Could not install the workflow.' };
+  }
+
+  // expired / denied / error — clear the session.
+  store.delete({ name: DEVICE_COOKIE, path: '/cms' });
+  if (poll.status === 'expired') return { status: 'error', error: 'Authorization timed out — start again.' };
+  if (poll.status === 'denied') return { status: 'error', error: 'Authorization was declined.' };
+  return { status: 'error', error: poll.error };
+}

package/templates/nextblock-template/app/cms/dashboard/components/DashboardOnboarding.tsx

@@ -12,6 +12,7 @@ import {
 } from '@nextblock-cms/ui';
 import { ArrowRight, CheckCircle2, Circle, X } from 'lucide-react';
 import type { OnboardingStatus } from '../../../../lib/onboarding/status';
+import ConnectGitHubButton from '../../components/ConnectGitHubButton';
 
 export default function DashboardOnboarding({
   status,
@@ -102,19 +103,23 @@ export default function DashboardOnboarding({
                 <p className="text-xs text-muted-foreground">{step.description}</p>
               </div>
               {!step.done && step.key !== 'admin' && (
-                <Button asChild variant="outline" size="sm" className="shrink-0">
-                  {step.isExternal ? (
-                    <a href={step.href} target="_blank" rel="noopener noreferrer">
-                      Set up
-                      <ArrowRight className="ml-1 h-3.5 w-3.5" />
-                    </a>
-                  ) : (
-                    <Link href={step.href}>
-                      Set up
-                      <ArrowRight className="ml-1 h-3.5 w-3.5" />
-                    </Link>
-                  )}
-                </Button>
+                step.connectGithub ? (
+                  <ConnectGitHubButton />
+                ) : (
+                  <Button asChild variant="outline" size="sm" className="shrink-0">
+                    {step.isExternal ? (
+                      <a href={step.href} target="_blank" rel="noopener noreferrer">
+                        Set up
+                        <ArrowRight className="ml-1 h-3.5 w-3.5" />
+                      </a>
+                    ) : (
+                      <Link href={step.href}>
+                        Set up
+                        <ArrowRight className="ml-1 h-3.5 w-3.5" />
+                      </Link>
+                    )}
+                  </Button>
+                )
               )}
             </li>
           ))}