graph LR
    A[Blog Editor] --> B[TipTap]
    A --> C[AI Assistant]
    A --> D[Image Upload]

    B --> E[Save Post]
    C --> E
    D --> E

    E --> F[Database]
    F --> G[Public Blog]
    F --> H[Admin Dashboard]

// Default toolbar options
[
  "undo",
  "redo",
  "bold",
  "italic",
  "underline",
  "strike",
  "heading",
  "bulletList",
  "orderedList",
  "blockquote",
  "codeBlock",
  "link",
  "image",
  "youtube",
  "textAlign",
  "color",
  "highlight",
];

// Supported languages
const languages = [
  "Spanish",
  "French",
  "German",
  "Italian",
  "Portuguese",
  "Chinese",
  "Japanese",
  "Korean",
  "Arabic",
  "Hindi",
  "Russian",
];

// Translation preserves:
// - HTML formatting
// - Links and images
// - Code blocks
// - Heading structure

// Example categories
{
  name: "Tutorials",
  slug: "tutorials",
  description: "Step-by-step guides"
}

// Example tags
{ name: "Next.js", slug: "nextjs" }
{ name: "TypeScript", slug: "typescript" }
{ name: "Tutorial", slug: "tutorial" }

{
  title: "My Blog Post",  // Post title
  seoTitle: "My Blog Post - Complete Guide",  // Override for <title>
  excerpt: "Short summary...",  // Meta description fallback
  seoDescription: "Detailed SEO description",  // Meta description
  slug: "my-blog-post",  // URL slug
  featuredImage: "/uploads/image.jpg"  // OG image
}

<title>My Blog Post - Complete Guide</title>
<meta name="description" content="Detailed SEO description" />
<meta property="og:title" content="My Blog Post - Complete Guide" />
<meta property="og:description" content="Detailed SEO description" />
<meta property="og:image" content="/uploads/image.jpg" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />

// Features:
- Grid or list view
- Filter by category
- Filter by tag
- Search posts
- Pagination
- Sort by: newest, oldest, most viewed, most liked

// Includes:
- Full content (sanitized HTML)
- Author info with avatar
- Published date
- Categories and tags
- Featured image
- Like button
- View counter
- Related posts
- Social sharing buttons

/blog/getting-started-with-nextjs
/blog/category/tutorials
/blog/tag/typescript
/blog/author/john-doe

// Increments on page view
// Stored in database
// Displayed on post card and page

viewCount: integer (default: 0)

// User clicks like button
// Generate unique fingerprint
// Check if already liked
// Increment like count
// Store fingerprint in blogPostLikes

// Prevents duplicate likes from same user

import { getLikeStatus, toggleLike } from "@/lib/blog-likes";

// Check if user liked post
const liked = await getLikeStatus(postId, fingerprint);

// Toggle like
const result = await toggleLike(postId, fingerprint);
// Returns: { liked: boolean, likeCount: number }

// Server component
import { db } from "@/db";
import { blogPosts } from "@/db/schema";
import { eq, desc } from "drizzle-orm";

export async function getAllPosts() {
  const posts = await db.query.blogPosts.findMany({
    where: eq(blogPosts.published, true),
    orderBy: [desc(blogPosts.publishedAt)],
    with: {
      author: {
        columns: {
          id: true,
          name: true,
          image: true,
        },
      },
      postCategories: {
        with: {
          category: true,
        },
      },
      postTags: {
        with: {
          tag: true,
        },
      },
    },
  });

  return posts;
}

// API route: POST /api/blog
import { db } from "@/db";
import { blogPosts } from "@/db/schema";

export async function POST(request: Request) {
  const session = await auth.api.getSession({
    headers: request.headers,
  });

  if (!session?.user || session.user.role !== "admin") {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const data = await request.json();

  const [post] = await db
    .insert(blogPosts)
    .values({
      title: data.title,
      slug: data.slug,
      content: data.content,
      excerpt: data.excerpt,
      featuredImage: data.featuredImage,
      published: data.published || false,
      authorId: session.user.id,
      publishedAt: data.published ? new Date() : null,
    })
    .returning();

  // Add categories
  if (data.categoryIds?.length) {
    await db.insert(blogPostCategories).values(
      data.categoryIds.map((categoryId: number) => ({
        postId: post.id,
        categoryId,
      }))
    );
  }

  // Add tags
  if (data.tagIds?.length) {
    await db.insert(blogPostTags).values(
      data.tagIds.map((tagId: number) => ({
        postId: post.id,
        tagId,
      }))
    );
  }

  return NextResponse.json(post);
}

// components/blog/blog-card.tsx
"use client";

import Image from "next/image";
import Link from "next/link";
import { formatDate } from "@/lib/utils";

export function BlogCard({ post }) {
  return (
    <article className="blog-card">
      {post.featuredImage && (
        <Link href={`/blog/${post.slug}`}>
          <Image
            src={post.featuredImage}
            alt={post.title}
            width={400}
            height={200}
            className="rounded-lg"
          />
        </Link>
      )}

      <div className="flex gap-2 mt-4">
        {post.postCategories?.map((pc) => (
          <span key={pc.category.id} className="badge">
            {pc.category.name}
          </span>
        ))}
      </div>

      <h2 className="text-2xl font-bold mt-2">
        <Link href={`/blog/${post.slug}`}>{post.title}</Link>
      </h2>

      <p className="text-muted-foreground mt-2">{post.excerpt}</p>

      <div className="flex items-center justify-between mt-4">
        <div className="flex items-center gap-2">
          <Image
            src={post.author.image || "/default-avatar.png"}
            alt={post.author.name}
            width={32}
            height={32}
            className="rounded-full"
          />
          <span>{post.author.name}</span>
        </div>

        <div className="flex gap-4 text-sm text-muted-foreground">
          <span>{post.viewCount} views</span>
          <span>{post.likeCount} likes</span>
          <span>{formatDate(post.publishedAt)}</span>
        </div>
      </div>
    </article>
  );
}

import DOMPurify from "isomorphic-dompurify";

// Sanitize HTML content
const cleanHTML = DOMPurify.sanitize(post.content, {
  ALLOWED_TAGS: [
    "h1",
    "h2",
    "h3",
    "h4",
    "h5",
    "h6",
    "p",
    "br",
    "strong",
    "em",
    "u",
    "s",
    "a",
    "img",
    "ul",
    "ol",
    "li",
    "blockquote",
    "pre",
    "code",
    "table",
    "thead",
    "tbody",
    "tr",
    "th",
    "td",
  ],
  ALLOWED_ATTR: ["href", "src", "alt", "title", "class", "target", "rel"],
});

// app/dashboard/admin/blog/page.tsx
import { requireAuth } from "@/lib/requireAuth";

export default async function BlogManagementPage() {
  await requireAuth("admin");
  // Only admins can access
}

// components/blog/tiptap-editor.tsx
import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Image from "@tiptap/extension-image";
import Link from "@tiptap/extension-link";
import CustomExtension from "./custom-extension";

const editor = useEditor({
  extensions: [
    StarterKit,
    Image,
    Link,
    CustomExtension, // Your custom extension
  ],
  content: initialContent,
});