@caleblawson/blog-shell

A reusable blog shell package that provides components and utilities for creating branded blogs. This package is designed for multi-tenant blog generation systems.

Installation

npm install @caleblawson/blog-shell

Usage

Components

import Header from "@caleblawson/blog-shell/Header";
import PostsIndexClient from "@caleblawson/blog-shell/PostsIndexClient";
import PostCard from "@caleblawson/blog-shell/PostCard";

Server Functions

import { loadPosts, loadSite } from "@caleblawson/blog-shell/server";

Utility Functions

import {
  defineBrandConfig,
  createBlogShell,
} from "@caleblawson/blog-shell/utils";
// Note: createBlogShell is also available from the main export for backward compatibility
import { createBlogShell } from "@caleblawson/blog-shell";

Styles

@import "@caleblawson/blog-shell/styles/globals.css";

API

Components

• Header - Navigation header with mobile menu
• PostsIndexClient - Client-side posts listing with search and filtering
• PostCard - Post preview card with multiple variants

Utilities

• loadPosts() - Load posts from database
• loadSite() - Load site configuration
• createBlogShell(config) - Initialize blog shell with branding

Build Process

The package automatically processes CSS during build:

1. CSS Processing: The build script processes src/index.css with Tailwind CLI to generate all necessary utilities
2. Asset Copying: Processed CSS is copied to dist/styles/globals.css with Tailwind directives removed
3. TypeScript: Component types are generated for better development experience

The resulting package exports processed CSS that can be imported directly without requiring consumers to configure Tailwind.

Development

This package is part of the blog-generator monorepo. To build:

npm run build

To publish:

npm run prepublishOnly
npm publish --access public