@navneet_25/tempjs 2.0.0 → 3.0.0

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

@@ -0,0 +1,102 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
+import { ArrowLeft, Calendar } from "lucide-react";
+import { SITE } from "@/constants";
+
+interface BlogListItem {
+  id: string;
+  slug: string;
+  title: string;
+  excerpt?: string | null;
+  coverImage?: string | null;
+  publishedAt?: string | null;
+  createdAt: string;
+}
+
+const withSidebar = SITE.features.blogSidebar;
+
+export default function BlogIndexPage() {
+  const [posts, setPosts] = useState<BlogListItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res = await fetch("/api/blog-posts");
+        const json = await res.json();
+        if (json.success && Array.isArray(json.data)) {
+          setPosts(json.data);
+        }
+      } catch (err) {
+        console.warn("Blog index: failed to load", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+
+  const listContent = (
+    <>
+      <p className="text-text-muted text-sm mb-10">{SITE.blog.pageSubtitle}</p>
+      {loading ? (
+        <p className="text-text-muted text-center py-16">Loading articles…</p>
+      ) : posts.length === 0 ? (
+        <p className="text-center text-text-muted py-20">{SITE.blog.emptyMessage}</p>
+      ) : (
+        <ul className="space-y-8">
+          {posts.map((post) => (
+            <li key={post.id}>
+              <Link
+                href={`/blog/${post.slug}`}
+                className="block group rounded-2xl border border-primary/10 bg-bg-card p-6 hover:border-primary/25 hover:shadow-md transition-all"
+              >
+                <h2 className="text-xl font-bold text-primary group-hover:text-primary-hover font-serif">
+                  {post.title}
+                </h2>
+                {post.excerpt && (
+                  <p className="mt-2 text-sm text-text-muted line-clamp-2">{post.excerpt}</p>
+                )}
+                <p className="mt-3 flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-text-muted">
+                  <Calendar className="w-3 h-3" />
+                  {post.publishedAt
+                    ? new Date(post.publishedAt).toLocaleDateString()
+                    : new Date(post.createdAt).toLocaleDateString()}
+                </p>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </>
+  );
+
+  if (withSidebar) {
+    return (
+      <div>
+        <h1 className="text-2xl font-bold font-serif text-primary mb-2">{SITE.blog.pageTitle}</h1>
+        {listContent}
+      </div>
+    );
+  }
+
+  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-4xl mx-auto px-6 py-4 flex items-center justify-between">
+          <Link
+            href="/"
+            className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-primary-hover"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            {SITE.navigation.backToHome}
+          </Link>
+          <h1 className="text-lg font-bold font-serif text-primary">{SITE.blog.pageTitle}</h1>
+        </div>
+      </header>
+      <main className="max-w-4xl mx-auto px-6 py-12">{listContent}</main>
+    </div>
+  );
+}

package/packages/core/modules/blog-compose/app/components/BlogSection.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
+import { SITE } from "@/constants";
+
+interface BlogCard {
+  id: string;
+  slug: string;
+  title: string;
+  excerpt?: string | null;
+}
+
+export default function BlogSection() {
+  const [posts, setPosts] = useState<BlogCard[]>([]);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res = await fetch("/api/blog-posts");
+        const json = await res.json();
+        if (json.success && Array.isArray(json.data)) {
+          setPosts(json.data.slice(0, SITE.blog.homepageLimit));
+        }
+      } catch (err) {
+        console.warn("BlogSection: failed to load", err);
+      }
+    }
+    load();
+  }, []);
+
+  if (posts.length === 0) return null;
+
+  return (
+    <section className="py-16 px-6 md:px-12 bg-bg-light border-t border-primary/10">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-10">
+          <div>
+            <span className="text-[10px] font-bold uppercase tracking-widest text-accent-gold-dark">
+              {SITE.blog.sectionEyebrow}
+            </span>
+            <h2 className="text-2xl md:text-3xl font-bold font-serif text-primary mt-1">
+              {SITE.blog.sectionTitle}
+            </h2>
+            {SITE.blog.sectionSubtitle && (
+              <p className="text-sm text-text-muted mt-2 max-w-xl">{SITE.blog.sectionSubtitle}</p>
+            )}
+          </div>
+          <Link
+            href="/blog"
+            className="text-xs font-bold uppercase tracking-widest text-primary hover:text-primary-hover"
+          >
+            {SITE.blog.viewAllLabel}
+          </Link>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-6">
+          {posts.map((post) => (
+            <Link
+              key={post.id}
+              href={`/blog/${post.slug}`}
+              className="block rounded-2xl border border-primary/10 bg-bg-card p-5 hover:border-primary/25 hover:shadow-md transition-all"
+            >
+              <h3 className="font-bold text-primary font-serif line-clamp-2">{post.title}</h3>
+              {post.excerpt && (
+                <p className="mt-2 text-sm text-text-muted line-clamp-3">{post.excerpt}</p>
+              )}
+            </Link>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/packages/core/modules/blog-compose/app/components/BlogShell.tsx

@@ -0,0 +1,36 @@
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+import { SITE } from "@/constants";
+import BlogSidebar, { type BlogSidebarPost } from "./BlogSidebar";
+
+export default function BlogShell({
+  posts,
+  children,
+}: {
+  posts: BlogSidebarPost[];
+  children: React.ReactNode;
+}) {
+  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-6xl mx-auto px-6 py-4 flex items-center justify-between gap-4">
+          <Link
+            href="/"
+            className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-primary-hover"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            {SITE.navigation.backToHome}
+          </Link>
+          <span className="text-xs font-bold uppercase tracking-widest text-text-muted truncate">
+            {SITE.blog.pageTitle}
+          </span>
+        </div>
+      </header>
+
+      <div className="max-w-6xl mx-auto px-6 py-8 flex gap-10">
+        <BlogSidebar posts={posts} />
+        <main className="flex-1 min-w-0 max-w-3xl">{children}</main>
+      </div>
+    </div>
+  );
+}

package/packages/core/modules/blog-compose/app/components/BlogSidebar.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+import { SITE } from "@/constants";
+
+export interface BlogSidebarPost {
+  slug: string;
+  title: string;
+}
+
+export default function BlogSidebar({ posts }: { posts: BlogSidebarPost[] }) {
+  const pathname = usePathname();
+  const [activeHash, setActiveHash] = useState("");
+  const [tocItems, setTocItems] = useState<{ id: string; text: string }[]>([]);
+
+  useEffect(() => {
+    const headings = Array.from(document.querySelectorAll(".compose-blog h2[id]"));
+    setTocItems(
+      headings.map((el) => ({ id: el.id, text: el.textContent?.trim() || el.id }))
+    );
+
+    const handleScroll = () => {
+      if (headings.length === 0) return;
+      let current = "";
+      for (const el of headings) {
+        const rect = el.getBoundingClientRect();
+        if (rect.top <= 120) {
+          current = `#${el.id}`;
+        }
+      }
+      setActiveHash(current || `#${headings[0].id}`);
+    };
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [pathname]);
+
+  const showToc =
+    pathname.startsWith("/blog/") &&
+    pathname !== "/blog/playground" &&
+    tocItems.length > 0;
+
+  return (
+    <nav className="w-56 shrink-0 sticky top-8 h-fit max-h-[calc(100vh-8rem)] overflow-y-auto pr-2">
+      <p className="text-[10px] font-bold uppercase tracking-widest text-text-muted mb-3">
+        {SITE.blog.sidebarTitle}
+      </p>
+      <ul className="space-y-1">
+        {posts.map((post) => {
+          const href = `/blog/${post.slug}`;
+          const isActive = pathname === href;
+          return (
+            <li key={post.slug}>
+              <Link
+                href={href}
+                className={`block rounded-lg px-3 py-2 text-sm transition-colors ${
+                  isActive
+                    ? "bg-primary/10 text-primary font-bold"
+                    : "text-text-muted hover:bg-bg-light hover:text-primary"
+                }`}
+              >
+                {post.title}
+              </Link>
+            </li>
+          );
+        })}
+        <li>
+          <Link
+            href="/blog"
+            className={`block rounded-lg px-3 py-2 text-sm transition-colors ${
+              pathname === "/blog"
+                ? "bg-primary/10 text-primary font-bold"
+                : "text-text-muted hover:bg-bg-light hover:text-primary"
+            }`}
+          >
+            {SITE.blog.viewAllLabel}
+          </Link>
+        </li>
+      </ul>
+
+      {showToc && (
+        <div className="mt-6 border-t border-primary/10 pt-4">
+          <p className="text-[10px] font-bold uppercase tracking-widest text-text-muted mb-2">
+            On this page
+          </p>
+          <ul className="ml-2 pl-3 border-l border-primary/15 space-y-1">
+            {tocItems.map((item) => {
+              const isSubActive = activeHash === `#${item.id}`;
+              return (
+                <li key={item.id}>
+                  <a
+                    href={`#${item.id}`}
+                    className={`block py-1 text-xs transition-colors ${
+                      isSubActive
+                        ? "text-primary font-bold"
+                        : "text-text-muted hover:text-primary"
+                    }`}
+                  >
+                    {item.text}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
+    </nav>
+  );
+}

package/packages/core/modules/blog-compose/lib/blog/compose/annotate-text.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+
+export interface TextAnnotation {
+  highlight?: string[];
+  underline?: string[];
+}
+
+interface Segment {
+  text: string;
+  highlight?: boolean;
+  underline?: boolean;
+}
+
+/**
+ * Split plain text into segments with highlight/underline flags.
+ * Matches are case-sensitive; longer phrases are preferred first to reduce overlap issues.
+ */
+function buildSegments(text: string, annotations: TextAnnotation): Segment[] {
+  const phrases: { phrase: string; highlight?: boolean; underline?: boolean }[] = [];
+  for (const p of annotations.highlight ?? []) {
+    if (p.trim()) phrases.push({ phrase: p, highlight: true });
+  }
+  for (const p of annotations.underline ?? []) {
+    if (p.trim()) phrases.push({ phrase: p, underline: true });
+  }
+  if (phrases.length === 0) return [{ text }];
+
+  phrases.sort((a, b) => b.phrase.length - a.phrase.length);
+
+  type Match = { start: number; end: number; highlight?: boolean; underline?: boolean };
+  const matches: Match[] = [];
+
+  for (const { phrase, highlight, underline } of phrases) {
+    let from = 0;
+    while (from < text.length) {
+      const idx = text.indexOf(phrase, from);
+      if (idx === -1) break;
+      matches.push({ start: idx, end: idx + phrase.length, highlight, underline });
+      from = idx + phrase.length;
+    }
+  }
+
+  if (matches.length === 0) return [{ text }];
+
+  matches.sort((a, b) => a.start - b.start);
+
+  const segments: Segment[] = [];
+  let cursor = 0;
+
+  for (const m of matches) {
+    if (m.start < cursor) continue;
+    if (m.start > cursor) {
+      segments.push({ text: text.slice(cursor, m.start) });
+    }
+    segments.push({
+      text: text.slice(m.start, m.end),
+      highlight: m.highlight,
+      underline: m.underline,
+    });
+    cursor = m.end;
+  }
+
+  if (cursor < text.length) {
+    segments.push({ text: text.slice(cursor) });
+  }
+
+  return segments.length > 0 ? segments : [{ text }];
+}
+
+export function AnnotatedText({
+  text,
+  highlight,
+  underline,
+  className,
+}: {
+  text: string;
+  highlight?: string[];
+  underline?: string[];
+  className?: string;
+}) {
+  const segments = buildSegments(text, { highlight, underline });
+
+  return (
+    <span className={className}>
+      {segments.map((seg, i) => {
+        if (!seg.highlight && !seg.underline) {
+          return <span key={i}>{seg.text}</span>;
+        }
+        return (
+          <span
+            key={i}
+            className={[
+              seg.highlight ? "bg-accent-gold-light/80 text-text-main px-0.5 rounded" : "",
+              seg.underline ? "underline decoration-accent-gold decoration-2 underline-offset-2" : "",
+            ].join(" ")}
+          >
+            {seg.text}
+          </span>
+        );
+      })}
+    </span>
+  );
+}

package/packages/core/modules/blog-compose/lib/blog/compose/blocks/media-blocks.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useState } from "react";
+import type { ComposeCodeBlock, ComposeCommandBlock, ComposeCalloutBlock, ComposeImageBlock } from "../types";
+
+export function ComposeCode({ block }: { block: ComposeCodeBlock }) {
+  return (
+    <div className="my-6 rounded-xl border border-primary/10 bg-bg-light overflow-hidden">
+      {block.language && block.language !== "text" && (
+        <div className="px-4 py-2 border-b border-primary/10 text-[10px] font-bold uppercase tracking-widest text-text-muted">
+          {block.language}
+        </div>
+      )}
+      <pre
+        className={[
+          "px-4 py-3 text-sm overflow-x-auto font-mono text-text-main leading-relaxed",
+          block.showLineNumbers ? "pl-8" : "",
+        ].join(" ")}
+      >
+        <code>{block.code}</code>
+      </pre>
+    </div>
+  );
+}
+
+export function ComposeCommand({ block }: { block: ComposeCommandBlock }) {
+  const [copied, setCopied] = useState(false);
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(block.command);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      /* ignore */
+    }
+  }
+
+  return (
+    <div className="my-6 rounded-xl border border-primary/10 bg-bg-card shadow-sm overflow-hidden">
+      <div className="flex items-center justify-between gap-2 border-b border-primary/10 px-4 py-2 bg-bg-light">
+        <span className="text-xs font-semibold uppercase tracking-wide text-text-muted">
+          {block.title || "Command"}
+        </span>
+        <button
+          type="button"
+          onClick={copy}
+          className="rounded-md px-3 py-1 text-xs font-bold bg-primary text-white hover:opacity-90 cursor-pointer"
+        >
+          {copied ? "Copied!" : "Copy"}
+        </button>
+      </div>
+      {block.description && (
+        <p className="px-4 py-2 text-sm text-text-muted border-b border-primary/5">
+          {block.description}
+        </p>
+      )}
+      <pre className="px-4 py-3 text-sm font-mono text-text-main overflow-x-auto whitespace-pre-wrap">
+        <code>{block.command}</code>
+      </pre>
+    </div>
+  );
+}
+
+export function ComposeCallout({ block }: { block: ComposeCalloutBlock }) {
+  const styles = {
+    info: "bg-primary/5 border-primary/20 text-text-main",
+    tip: "bg-emerald-50 border-emerald-200 text-emerald-900",
+    warning: "bg-amber-50 border-amber-200 text-amber-900",
+  }[block.variant];
+
+  return (
+    <div className={`my-6 rounded-xl border p-4 ${styles}`}>
+      {block.title && <p className="font-bold text-sm mb-1">{block.title}</p>}
+      <p className="text-sm leading-relaxed">{block.text}</p>
+    </div>
+  );
+}
+
+export function ComposeDivider() {
+  return <hr className="my-10 border-t border-primary/10" />;
+}
+
+export function ComposeImage({ block }: { block: ComposeImageBlock }) {
+  return (
+    <figure className="my-8">
+      <img
+        src={block.src}
+        alt={block.alt}
+        className="w-full rounded-xl border border-primary/10 shadow-sm"
+      />
+      {block.caption && (
+        <figcaption className="mt-2 text-center text-sm text-text-muted">{block.caption}</figcaption>
+      )}
+    </figure>
+  );
+}

package/packages/core/modules/blog-compose/lib/blog/compose/blocks/text-blocks.tsx

@@ -0,0 +1,115 @@
+import type { ComposeHeadingBlock } from "../types";
+import { AnnotatedText } from "../annotate-text";
+import type { ComposeListBlock, ComposeQuoteBlock } from "../types";
+import { slugify } from "@/lib/utils/slugify";
+
+export function ComposeHeading({ block }: { block: ComposeHeadingBlock }) {
+  const base = "text-text-main tracking-tight";
+
+  if (block.level === "title") {
+    return (
+      <h1
+        className={[
+          base,
+          "text-3xl md:text-4xl font-bold font-serif mb-6",
+          block.variant === "accent" ? "text-primary" : "",
+          block.variant === "underline-bar"
+            ? "border-b-4 border-accent-gold pb-3"
+            : "",
+        ].join(" ")}
+      >
+        {block.text}
+      </h1>
+    );
+  }
+
+  if (block.level === "h3") {
+    return (
+      <h3
+        className={[
+          base,
+          "text-lg font-semibold mt-8 mb-3",
+          block.variant === "serif" ? "font-serif" : "",
+          block.variant === "accent" ? "text-primary" : "",
+        ].join(" ")}
+      >
+        {block.text}
+      </h3>
+    );
+  }
+
+  return (
+    <h2
+      id={slugify(block.text)}
+      className={[
+        base,
+        "text-2xl font-bold mt-10 mb-4",
+        block.variant === "serif" ? "font-serif" : "",
+        block.variant === "accent" ? "text-primary" : "",
+        block.variant === "underline-bar"
+          ? "border-b border-primary/20 pb-2"
+          : "",
+      ].join(" ")}
+    >
+      {block.text}
+    </h2>
+  );
+}
+
+export function ComposeExplain({
+  block,
+}: {
+  block: import("../types").ComposeExplainBlock;
+}) {
+  const variantClass =
+    block.variant === "lead"
+      ? "text-lg leading-relaxed text-text-main"
+      : block.variant === "muted"
+        ? "text-sm text-text-muted"
+        : "text-base leading-relaxed text-text-muted";
+
+  return (
+    <p className={`my-4 ${variantClass}`}>
+      <AnnotatedText
+        text={block.text}
+        highlight={block.highlight}
+        underline={block.underline}
+      />
+    </p>
+  );
+}
+
+export function ComposeParagraph({
+  block,
+}: {
+  block: import("../types").ComposeParagraphBlock;
+}) {
+  return <p className="my-4 text-text-muted leading-relaxed">{block.text}</p>;
+}
+
+export function ComposeList({ block }: { block: ComposeListBlock }) {
+  const Tag = block.style === "number" ? "ol" : "ul";
+  const listClass =
+    block.style === "number"
+      ? "my-4 list-decimal pl-6 space-y-2 text-text-muted"
+      : "my-4 list-disc pl-6 space-y-2 text-text-muted";
+
+  return (
+    <Tag className={listClass}>
+      {block.items.map((item, i) => (
+        <li key={i} className="leading-relaxed">{item}</li>
+      ))}
+    </Tag>
+  );
+}
+
+export function ComposeQuote({ block }: { block: ComposeQuoteBlock }) {
+  return (
+    <blockquote className="my-6 border-l-4 border-accent-gold pl-4 py-1">
+      <p className="text-lg font-serif text-text-main leading-relaxed italic">{block.text}</p>
+      {block.attribution && (
+        <footer className="mt-2 text-sm text-text-muted not-italic">— {block.attribution}</footer>
+      )}
+    </blockquote>
+  );
+}

package/packages/core/modules/blog-compose/lib/blog/compose/index.ts

@@ -0,0 +1,21 @@
+export {
+  COMPOSE_ENGINE_ID,
+  createEmptyComposeDocument,
+  isComposeDocument,
+  type ComposeBlock,
+  type ComposeBlockType,
+  type ComposeDocument,
+  type BlogPostMeta,
+  type BlogPostWithContent,
+} from "./types";
+
+export {
+  COMPOSE_BLOCK_REGISTRY,
+  COMPOSE_BLOCK_TYPES,
+  getComposeBlockDefinition,
+  type ComposeBlockDefinition,
+  type ComposeFieldDef,
+} from "./registry";
+
+export { AnnotatedText } from "./annotate-text";
+export { ComposeBlogRenderer, ComposeBlockView } from "./interpreter";