KatebTech Blog

Reusable public blog pages, admin post-management screens, and blog database setup helpers for Kateb Tech projects.

Purpose

@katebtech/blog provides shared blog UI and post-management building blocks for Kateb Tech websites. Consuming apps provide their own routes, environment values, category metadata, session key, content labels, and server actions.

Package Overview

The package includes:

• public blog listing components;
• public category and post-detail components;
• admin dashboard and layout components;
• admin post listing and create/edit form components;
• client-side post constants, helpers, and public types;
• server-side post action and data factories;
• blog database setup helpers.

The package keeps reusable blog behaviour here while leaving website-specific configuration, copy, categories, assets, and route mounting inside the consuming app.

File Structure

src
├── _lib
│   └── database
│       ├── index.ts
│       ├── schema
│       └── setup
├── auth
│   ├── DashboardPage.tsx
│   ├── _ui
│   │   ├── dashboard
│   │   └── layout
│   ├── index.ts
│   └── posts
│       ├── AllPostsPage.tsx
│       ├── _lib
│       │   ├── client
│       │   └── server
│       ├── _ui
│       ├── index.ts
│       └── new-edit
├── docs
└── public
    └── blog
        ├── BlogPage.tsx
        ├── category
        ├── post-details
        ├── types.ts
        └── ui

Import Style

Use public package subpaths instead of importing from src or dist directly.

import { createBlogTables } from "@katebtech/blog/database";
import { DashboardPage } from "@katebtech/blog/auth";
import { AdminLayout } from "@katebtech/blog/auth/layout";
import { AllPostsPage } from "@katebtech/blog/auth/posts";
import {
  PostForm,
  type PostFormProps,
} from "@katebtech/blog/auth/posts/new-edit";
import { BlogPage, type BlogPageProps } from "@katebtech/blog/public/blog";
import { CategoryPosts } from "@katebtech/blog/public/blog/category";
import { PostDetailBody } from "@katebtech/blog/public/blog/post-details";

Main export groups:

Inside this package, prefer relative imports between local modules. In consuming apps, import only the specific public subpath that owns the API you need.

Package Rules

• Keep implementation details inside src folders and expose reusable APIs through package subpaths.
• Do not import from src or dist internals in consuming apps.
• Keep public blog UI under src/public/blog.
• Keep authenticated/admin blog UI under src/auth.
• Keep database setup helpers under src/_lib/database.
• Keep website-specific route files, environment values, copy, category metadata, session keys, and storage behaviour in the consuming app.
• Server-only helpers from @katebtech/blog/auth/posts/_lib/server must be used from server components, server actions, or other server-only modules.
• See the central command and publishing documentation for package installation, validation, and release workflow commands.

Module Documentation

Public Blog

BlogPage renders a reusable public blog page from app-provided category metadata, post query functions, text labels, and display limits.

import { BlogPage, type BlogPageProps } from "@katebtech/blog/public/blog";

Use this module for:

• public blog landing pages;
• featured or all-post category sections;
• reusable post cards and post-list loading UI;
• shared blog page prop types.

BlogPageProps extends the post-list props with blogDescription. The consuming app supplies getCategoryMeta, postQueries, categoryIds, blogTitle, blogDescription, blogContentWords, mode, and limit.

Public Category Pages

CategoryPosts renders posts for one category using the same category metadata and post query shape as BlogPage.

import { CategoryPosts } from "@katebtech/blog/public/blog/category";

Use this component when a website owns category routes but wants shared category post rendering.

Public Post Details

Post-detail exports provide reusable pieces for post pages, including the post body and detail shell.

import {
  PostDetailBody,
  PostDetailShell,
} from "@katebtech/blog/public/blog/post-details";

Use these components from website-owned post detail routes. The consuming app remains responsible for fetching the post, selecting related posts, and deciding whether authenticated management controls should render.

Admin Layout And Dashboard

Admin exports provide shared dashboard and layout components for authenticated blog admin screens.

import { DashboardPage } from "@katebtech/blog/auth";
import { AdminDashboard } from "@katebtech/blog/auth/dashboard";
import { AdminLayout, AdminPageHeader } from "@katebtech/blog/auth/layout";

Use these modules for blog admin index pages, shared admin shells, page headers, and dashboard cards.

Admin Post List

AllPostsPage renders the reusable admin post list with status tabs and post actions.

import { AllPostsPage } from "@katebtech/blog/auth/posts";
import {
  POST_STATUS,
  type AllPostsPageProps,
  type PostActions,
} from "@katebtech/blog/auth/posts/_lib/client";
import {
  createPostActions,
  createPostData,
} from "@katebtech/blog/auth/posts/_lib/server";

The consuming app supplies:

• postActions from createPostActions;
• getPostCounts and getPostsByStatus from createPostData;
• page heading and button text;
• status text;
• blogContentWords;
• Next.js searchParams.

Admin Post Form

PostForm renders the shared create/edit form for blog posts. It expects the consuming app to provide category options, Cloudinary preset, form heading text, success modal text, and a compatible server action.

import {
  PostForm,
  type CategoryOption,
  type PostFormProps,
} from "@katebtech/blog/auth/posts/new-edit";

Use mode="create" for new post pages and mode="edit" with initialData for edit pages.

Post Actions And Data

Server helpers create reusable post actions and database readers around the consuming app's database URL and session key.

import {
  createPostActions,
  createPostData,
} from "@katebtech/blog/auth/posts/_lib/server";

createPostActions creates server actions for creating, editing, publishing, archiving, featuring, and deleting posts. Pass deleteAsset when deleted posts should also remove stored media.

createPostData creates data helpers for inserting, updating, listing, counting, and reading posts for public pages, admin pages, SEO, sitemap, and edit flows.

Database

createBlogTables creates the database tables required by the blog package.

import { createBlogTables } from "@katebtech/blog/database";

Use this from website-owned setup or migration code. Detailed schema notes live in the package database documentation under src/docs/database.md.