@navneet_25/tempjs 2.0.0 → 3.0.0

package/packages/core/modules/blog-compose/app/admin/components/blog-compose-form.ts

@@ -0,0 +1,44 @@
+import type { ComposeBlock } from "@/lib/blog/compose";
+import { getComposeBlockDefinition } from "@/lib/blog/compose";
+
+export function blockToFormValues(block: ComposeBlock): Record<string, string> {
+  const def = getComposeBlockDefinition(block.type);
+  const values: Record<string, string> = {};
+  const raw = block as Record<string, unknown>;
+
+  for (const field of def.fields) {
+    const v = raw[field.key];
+    if (field.input === "tags") {
+      values[field.key] = Array.isArray(v) ? (v as string[]).join(", ") : "";
+    } else if (field.input === "toggle") {
+      values[field.key] = v === true ? "true" : "false";
+    } else {
+      values[field.key] = typeof v === "string" ? v : String(v ?? "");
+    }
+  }
+  return values;
+}
+
+export function formValuesToBlock(
+  type: ComposeBlock["type"],
+  values: Record<string, string>
+): ComposeBlock {
+  const def = getComposeBlockDefinition(type);
+  const block = def.createDefault() as Record<string, unknown>;
+
+  for (const field of def.fields) {
+    const raw = values[field.key] ?? "";
+    if (field.input === "tags") {
+      block[field.key] = raw
+        .split(",")
+        .map((s) => s.trim())
+        .filter(Boolean);
+    } else if (field.input === "toggle") {
+      block[field.key] = raw === "true";
+    } else {
+      block[field.key] = raw;
+    }
+  }
+
+  return block as ComposeBlock;
+}

package/packages/core/modules/blog-compose/app/admin/hooks/useBlogPosts.ts

@@ -0,0 +1,103 @@
+"use client";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  createEmptyComposeDocument,
+  isComposeDocument,
+  type ComposeDocument,
+} from "@/lib/blog/compose";
+
+export interface BlogPostData {
+  id?: string;
+  title: string;
+  slug?: string;
+  excerpt?: string | null;
+  coverImage?: string | null;
+  published?: boolean;
+  content: ComposeDocument;
+}
+
+interface BlogPostApiRow {
+  id: string;
+  slug: string;
+  title: string;
+  excerpt?: string | null;
+  coverImage?: string | null;
+  published?: boolean;
+  contentJson?: unknown;
+  content?: ComposeDocument;
+}
+
+function mapApiPost(row: BlogPostApiRow): BlogPostData {
+  const content =
+    row.content ??
+    (isComposeDocument(row.contentJson) ? row.contentJson : createEmptyComposeDocument());
+  return {
+    id: row.id,
+    title: row.title,
+    slug: row.slug,
+    excerpt: row.excerpt,
+    coverImage: row.coverImage,
+    published: row.published,
+    content,
+  };
+}
+
+export function useGetBlogPosts() {
+  return useQuery({
+    queryKey: ["blog-posts"],
+    queryFn: async () => {
+      const res = await fetch("/api/blog-posts");
+      const json = await res.json();
+      if (!json.success) throw new Error(json.error || "Failed to load blog posts");
+      return (json.data as BlogPostApiRow[]).map(mapApiPost);
+    },
+  });
+}
+
+export function useCreateBlogPost() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (data: BlogPostData) => {
+      const res = await fetch("/api/blog-posts", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+      const json = await res.json();
+      if (!json.success) throw new Error(json.error || "Failed to create post");
+      return json.data;
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["blog-posts"] }),
+  });
+}
+
+export function useUpdateBlogPost() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ id, data }: { id: string; data: BlogPostData }) => {
+      const res = await fetch(`/api/blog-posts/${id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+      const json = await res.json();
+      if (!json.success) throw new Error(json.error || "Failed to update post");
+      return json.data;
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["blog-posts"] }),
+  });
+}
+
+export function useDeleteBlogPost() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (id: string) => {
+      const res = await fetch(`/api/blog-posts/${id}`, { method: "DELETE" });
+      const json = await res.json();
+      if (!json.success) throw new Error(json.error || "Failed to delete post");
+      return json.data;
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["blog-posts"] }),
+  });
+}

package/packages/core/modules/blog-compose/app/admin/panels/BlogComposePanel.tsx

@@ -0,0 +1,388 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { Loader2, Plus, Trash2, ChevronUp, ChevronDown, Save } from "lucide-react";
+import {
+  COMPOSE_BLOCK_TYPES,
+  ComposeBlogRenderer,
+  createEmptyComposeDocument,
+  getComposeBlockDefinition,
+  isComposeDocument,
+  type ComposeBlock,
+  type ComposeDocument,
+} from "@/lib/blog/compose";
+import {
+  useCreateBlogPost,
+  useDeleteBlogPost,
+  useGetBlogPosts,
+  useUpdateBlogPost,
+  type BlogPostData,
+} from "../hooks/useBlogPosts";
+import { blockToFormValues, formValuesToBlock } from "./blog-compose-form";
+
+function BlockFieldEditor({
+  block,
+  onChange,
+}: {
+  block: ComposeBlock;
+  onChange: (block: ComposeBlock) => void;
+}) {
+  const def = getComposeBlockDefinition(block.type);
+  const values = blockToFormValues(block);
+
+  function update(key: string, value: string) {
+    const nextValues = { ...values, [key]: value };
+    onChange(formValuesToBlock(block.type, nextValues));
+  }
+
+  return (
+    <div className="space-y-4">
+      {def.fields.map((field) => {
+        if (field.input === "toggle") {
+          return (
+            <label key={field.key} className="flex items-center gap-2 text-sm cursor-pointer">
+              <input
+                type="checkbox"
+                checked={values[field.key] === "true"}
+                onChange={(e) => update(field.key, e.target.checked ? "true" : "false")}
+              />
+              <span className="font-medium">{field.label}</span>
+            </label>
+          );
+        }
+        if (field.input === "select") {
+          return (
+            <div key={field.key}>
+              <label className="text-xs font-bold uppercase tracking-wider text-text-muted">
+                {field.label}
+              </label>
+              <select
+                className="mt-1 w-full border border-primary/20 rounded-lg px-3 py-2 text-sm"
+                value={values[field.key]}
+                onChange={(e) => update(field.key, e.target.value)}
+              >
+                {field.options?.map((o) => (
+                  <option key={o.value} value={o.value}>{o.label}</option>
+                ))}
+              </select>
+            </div>
+          );
+        }
+        const isTextarea = field.input === "textarea" || field.input === "tags";
+        return (
+          <div key={field.key}>
+            <label className="text-xs font-bold uppercase tracking-wider text-text-muted">
+              {field.label}
+            </label>
+            {field.description && (
+              <p className="text-[10px] text-text-muted mt-0.5">{field.description}</p>
+            )}
+            {isTextarea ? (
+              <textarea
+                className="mt-1 w-full border border-primary/20 rounded-lg px-3 py-2 text-sm min-h-[80px]"
+                value={values[field.key]}
+                placeholder={field.placeholder}
+                onChange={(e) => update(field.key, e.target.value)}
+              />
+            ) : (
+              <input
+                className="mt-1 w-full border border-primary/20 rounded-lg px-3 py-2 text-sm"
+                value={values[field.key]}
+                placeholder={field.placeholder}
+                onChange={(e) => update(field.key, e.target.value)}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default function BlogComposePanel() {
+  const { data: posts = [], isLoading } = useGetBlogPosts();
+  const createPost = useCreateBlogPost();
+  const updatePost = useUpdateBlogPost();
+  const deletePost = useDeleteBlogPost();
+
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [title, setTitle] = useState("");
+  const [slug, setSlug] = useState("");
+  const [excerpt, setExcerpt] = useState("");
+  const [published, setPublished] = useState(false);
+  const [document, setDocument] = useState<ComposeDocument>(createEmptyComposeDocument());
+  const [selectedBlockIndex, setSelectedBlockIndex] = useState<number | null>(null);
+  const [error, setError] = useState("");
+
+  const previewDoc = useMemo(() => document, [document]);
+
+  function startNew() {
+    setEditingId(null);
+    setEditorOpen(true);
+    setTitle("");
+    setSlug("");
+    setExcerpt("");
+    setPublished(false);
+    setDocument(createEmptyComposeDocument());
+    setSelectedBlockIndex(null);
+    setError("");
+  }
+
+  function startEdit(post: BlogPostData & { id: string }) {
+    setEditingId(post.id);
+    setEditorOpen(true);
+    setTitle(post.title);
+    setSlug(post.slug ?? "");
+    setExcerpt(post.excerpt ?? "");
+    setPublished(post.published ?? false);
+    setDocument(isComposeDocument(post.content) ? post.content : createEmptyComposeDocument());
+    setSelectedBlockIndex(null);
+    setError("");
+  }
+
+  function addBlock(type: ComposeBlock["type"]) {
+    const def = getComposeBlockDefinition(type);
+    const blocks = [...document.blocks, def.createDefault()];
+    setDocument({ ...document, blocks });
+    setSelectedBlockIndex(blocks.length - 1);
+  }
+
+  function moveBlock(index: number, dir: -1 | 1) {
+    const next = index + dir;
+    if (next < 0 || next >= document.blocks.length) return;
+    const blocks = [...document.blocks];
+    const [item] = blocks.splice(index, 1);
+    blocks.splice(next, 0, item);
+    setDocument({ ...document, blocks });
+    setSelectedBlockIndex(next);
+  }
+
+  function removeBlock(index: number) {
+    const blocks = document.blocks.filter((_, i) => i !== index);
+    setDocument({ ...document, blocks });
+    setSelectedBlockIndex(null);
+  }
+
+  function updateBlock(index: number, block: ComposeBlock) {
+    const blocks = [...document.blocks];
+    blocks[index] = block;
+    setDocument({ ...document, blocks });
+  }
+
+  async function handleSave() {
+    setError("");
+    const payload: BlogPostData = {
+      title,
+      slug: slug || undefined,
+      excerpt: excerpt || null,
+      published,
+      content: document,
+    };
+    try {
+      if (editingId) {
+        await updatePost.mutateAsync({ id: editingId, data: payload });
+      } else {
+        await createPost.mutateAsync(payload);
+      }
+      startNew();
+      setEditorOpen(false);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Save failed");
+    }
+  }
+
+  const saving = createPost.isPending || updatePost.isPending;
+  const selectedBlock =
+    selectedBlockIndex != null ? document.blocks[selectedBlockIndex] : null;
+
+  return (
+    <div className="space-y-8 max-w-6xl">
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <h3 className="text-lg font-bold text-primary">Compose Blog Engine</h3>
+          <p className="text-xs text-text-muted mt-1">
+            Build articles from typed blocks — JSON stored in the database, rendered by the compose interpreter.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={startNew}
+          className="flex items-center gap-2 px-4 py-2 bg-primary text-white text-xs font-bold rounded-xl cursor-pointer"
+        >
+          <Plus className="w-4 h-4" />
+          New article
+        </button>
+      </div>
+
+      {isLoading ? (
+        <div className="flex justify-center py-12">
+          <Loader2 className="w-6 h-6 animate-spin text-text-muted" />
+        </div>
+      ) : (
+        <div className="rounded-xl border border-primary/10 overflow-hidden">
+          <table className="w-full text-sm">
+            <thead className="bg-bg-light text-left text-[10px] font-bold uppercase tracking-widest text-text-muted">
+              <tr>
+                <th className="px-4 py-3">Title</th>
+                <th className="px-4 py-3">Slug</th>
+                <th className="px-4 py-3">Status</th>
+                <th className="px-4 py-3 w-24" />
+              </tr>
+            </thead>
+            <tbody>
+              {posts.map((post) => (
+                <tr key={post.id} className="border-t border-primary/5">
+                  <td className="px-4 py-3 font-medium">{post.title}</td>
+                  <td className="px-4 py-3 text-text-muted">{post.slug}</td>
+                  <td className="px-4 py-3">
+                    <span
+                      className={`text-[10px] font-bold uppercase px-2 py-1 rounded-full ${
+                        post.published
+                          ? "bg-emerald-100 text-emerald-800"
+                          : "bg-bg-light text-text-muted"
+                      }`}
+                    >
+                      {post.published ? "Published" : "Draft"}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 flex gap-2">
+                    <button
+                      type="button"
+                      onClick={() => startEdit(post as BlogPostData & { id: string })}
+                      className="text-xs font-bold text-primary cursor-pointer"
+                    >
+                      Edit
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => post.id && deletePost.mutate(post.id)}
+                      className="text-xs font-bold text-red-600 cursor-pointer"
+                    >
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {(editorOpen || editingId !== null) && (
+        <div className="grid lg:grid-cols-2 gap-8 border-t border-primary/10 pt-8">
+          <div className="space-y-6">
+            <h4 className="font-bold text-primary">Article meta</h4>
+            {error && (
+              <div className="text-xs text-red-700 bg-red-50 border border-red-100 rounded-lg px-3 py-2">
+                {error}
+              </div>
+            )}
+            <input
+              className="w-full border border-primary/20 rounded-lg px-3 py-2 text-sm"
+              placeholder="Title*"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+            <input
+              className="w-full border border-primary/20 rounded-lg px-3 py-2 text-sm"
+              placeholder="Slug (optional — auto from title)"
+              value={slug}
+              onChange={(e) => setSlug(e.target.value)}
+            />
+            <textarea
+              className="w-full border border-primary/20 rounded-lg px-3 py-2 text-sm resize-none"
+              placeholder="Excerpt (listing cards)"
+              rows={2}
+              value={excerpt}
+              onChange={(e) => setExcerpt(e.target.value)}
+            />
+            <label className="flex items-center gap-2 text-sm cursor-pointer">
+              <input type="checkbox" checked={published} onChange={(e) => setPublished(e.target.checked)} />
+              Publish on save
+            </label>
+
+            <div className="border-t border-primary/10 pt-6">
+              <div className="flex flex-wrap items-center gap-2 mb-4">
+                <span className="text-xs font-bold uppercase tracking-widest text-text-muted">Add block</span>
+                {COMPOSE_BLOCK_TYPES.map((type) => (
+                  <button
+                    key={type}
+                    type="button"
+                    onClick={() => addBlock(type)}
+                    className="px-3 py-1.5 rounded-lg border border-primary/15 text-[10px] font-bold uppercase tracking-wide hover:bg-bg-light cursor-pointer"
+                  >
+                    {getComposeBlockDefinition(type).label}
+                  </button>
+                ))}
+              </div>
+
+              <ul className="space-y-2">
+                {document.blocks.map((block, index) => (
+                  <li
+                    key={index}
+                    className={`flex items-center gap-2 rounded-lg border px-3 py-2 ${
+                      selectedBlockIndex === index
+                        ? "border-primary bg-primary/5"
+                        : "border-primary/10"
+                    }`}
+                  >
+                    <button
+                      type="button"
+                      className="flex-1 text-left text-xs font-bold cursor-pointer"
+                      onClick={() => setSelectedBlockIndex(index)}
+                    >
+                      {getComposeBlockDefinition(block.type).label}
+                      <span className="text-text-muted font-normal ml-2 truncate">
+                        {(block as { text?: string; command?: string; code?: string }).text?.slice(0, 40) ||
+                          (block as { command?: string }).command?.slice(0, 40) ||
+                          (block as { code?: string }).code?.slice(0, 40) ||
+                          ""}
+                      </span>
+                    </button>
+                    <button type="button" onClick={() => moveBlock(index, -1)} className="p-1 cursor-pointer">
+                      <ChevronUp className="w-4 h-4" />
+                    </button>
+                    <button type="button" onClick={() => moveBlock(index, 1)} className="p-1 cursor-pointer">
+                      <ChevronDown className="w-4 h-4" />
+                    </button>
+                    <button type="button" onClick={() => removeBlock(index)} className="p-1 text-red-600 cursor-pointer">
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </li>
+                ))}
+              </ul>
+
+              {selectedBlock && selectedBlockIndex !== null && (
+                <div className="mt-6 p-4 rounded-xl border border-primary/10 bg-bg-light">
+                  <p className="text-xs font-bold uppercase tracking-widest text-text-muted mb-4">
+                    Edit {getComposeBlockDefinition(selectedBlock.type).label}
+                  </p>
+                  <BlockFieldEditor
+                    block={selectedBlock}
+                    onChange={(b) => updateBlock(selectedBlockIndex, b)}
+                  />
+                </div>
+              )}
+            </div>
+
+            <button
+              type="button"
+              disabled={saving || !title.trim()}
+              onClick={handleSave}
+              className="flex items-center gap-2 px-5 py-2.5 bg-primary text-white text-xs font-bold rounded-xl disabled:opacity-50 cursor-pointer"
+            >
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              Save article
+            </button>
+          </div>
+
+          <div className="rounded-xl border border-primary/10 bg-bg-card p-6">
+            <p className="text-[10px] font-bold uppercase tracking-widest text-text-muted mb-4">Live preview</p>
+            <ComposeBlogRenderer document={previewDoc} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/packages/core/modules/blog-compose/app/api/blog-posts/[id]/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest } from "next/server";
+import { blogComposeController } from "@/lib/controllers/BlogComposeController";
+import { auth } from "@/auth";
+
+export const dynamic = "force-dynamic";
+
+export async function PUT(
+  req: NextRequest,
+  context: { params: Promise<{ id: string }> }
+) {
+  const session = await auth();
+  if (!session) {
+    return Response.json({ success: false, error: "Unauthorized" }, { status: 401 });
+  }
+  const { id } = await context.params;
+  return blogComposeController.update(req, { id });
+}
+
+export async function DELETE(
+  _req: NextRequest,
+  context: { params: Promise<{ id: string }> }
+) {
+  const session = await auth();
+  if (!session) {
+    return Response.json({ success: false, error: "Unauthorized" }, { status: 401 });
+  }
+  const { id } = await context.params;
+  return blogComposeController.delete({ id });
+}

package/packages/core/modules/blog-compose/app/api/blog-posts/route.ts

@@ -0,0 +1,21 @@
+import { NextRequest } from "next/server";
+import { blogComposeController } from "@/lib/controllers/BlogComposeController";
+import { auth } from "@/auth";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(req: NextRequest) {
+  const session = await auth();
+  if (session) {
+    return blogComposeController.listAll();
+  }
+  return blogComposeController.listPublic();
+}
+
+export async function POST(req: NextRequest) {
+  const session = await auth();
+  if (!session) {
+    return Response.json({ success: false, error: "Unauthorized" }, { status: 401 });
+  }
+  return blogComposeController.create(req);
+}

package/packages/core/modules/blog-compose/app/blog/[slug]/page.tsx

@@ -0,0 +1,79 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+import { SITE } from "@/constants";
+import { blogComposeService } from "@/lib/features/blog-compose";
+import { ComposeBlogRenderer } from "@/lib/blog/compose";
+import { buildPageMetadata } from "@/lib/seo/metadata";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const post = await blogComposeService.getPublishedBySlug(slug);
+  if (!post) return {};
+  return buildPageMetadata({
+    title: post.title,
+    description: post.excerpt ?? undefined,
+    path: `/blog/${slug}`,
+  });
+}
+
+export default async function BlogPostPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const post = await blogComposeService.getPublishedBySlug(slug);
+  if (!post) notFound();
+
+  const content = blogComposeService.contentFromPost(post);
+  const withSidebar = SITE.features.blogSidebar;
+
+  const articleBody = (
+    <>
+      <header className="mb-10 border-b border-primary/10 pb-8">
+        <h1 className="text-3xl md:text-4xl font-bold font-serif text-primary">{post.title}</h1>
+        {post.excerpt && (
+          <p className="mt-4 text-lg text-text-muted leading-relaxed">{post.excerpt}</p>
+        )}
+        {post.publishedAt && (
+          <time
+            className="mt-4 block text-[10px] font-bold uppercase tracking-widest text-text-muted"
+            dateTime={post.publishedAt.toISOString()}
+          >
+            {post.publishedAt.toLocaleDateString()}
+          </time>
+        )}
+      </header>
+      <ComposeBlogRenderer document={content} />
+    </>
+  );
+
+  if (withSidebar) {
+    return <article>{articleBody}</article>;
+  }
+
+  return (
+    <div className="min-h-screen bg-bg-main">
+      <header className="border-b border-primary/10 bg-white/80 backdrop-blur-md sticky top-0 z-30">
+        <div className="max-w-3xl mx-auto px-6 py-4 flex items-center justify-between gap-4">
+          <Link
+            href="/blog"
+            className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-primary-hover shrink-0"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            {SITE.blog.backToBlog}
+          </Link>
+          <span className="text-xs font-bold uppercase tracking-widest text-text-muted truncate">
+            {SITE.blog.pageTitle}
+          </span>
+        </div>
+      </header>
+      <main className="max-w-3xl mx-auto px-6 py-12">{articleBody}</main>
+    </div>
+  );
+}

package/packages/core/modules/blog-compose/app/blog/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { SITE } from "@/constants";
+import { blogComposeService } from "@/lib/features/blog-compose";
+import { buildPageMetadata } from "@/lib/seo/metadata";
+import BlogShell from "@/app/components/BlogShell";
+
+export const metadata: Metadata = buildPageMetadata({
+  title: SITE.blog.pageTitle,
+  description: SITE.blog.pageSubtitle,
+  path: "/blog",
+});
+
+export default async function BlogLayout({ children }: { children: React.ReactNode }) {
+  if (!SITE.features.blogSidebar) {
+    return children;
+  }
+
+  const posts = await blogComposeService.listPublic();
+  const sidebarPosts = posts.map((p) => ({ slug: p.slug, title: p.title }));
+
+  return <BlogShell posts={sidebarPosts}>{children}</BlogShell>;
+}