@zuplo/blog-components

A collection of reusable React components for building beautiful blog interfaces. These components follow a consistent design system with color-coded callouts and modern UI patterns.

Installation

npm install @zuplo/blog-components

Note: Before publishing, make sure to update the repository URL in package.json and verify you have access to publish under the @zuplo scope, or change the package name. See PUBLISHING.md for details.

Usage

Basic Setup

You need to import the CSS styles separately. Import the styles once in your app (typically in your main entry file):

import '@zuplo/blog-components/styles';

Then you can use components anywhere:

import { BlogHeader } from '@zuplo/blog-components';

Note: The CSS includes all Tailwind utilities used by the components, compiled and optimized. Only the classes actually used in the components are included in the final bundle.

Using Components

import { BlogHeader, CalloutDoc, CalloutCode } from '@zuplo/blog-components';

function MyBlogPost() {
  return (
    <div>
      <BlogHeader
        title="Getting Started with API Design"
        author="John Doe"
        date="January 1, 2024"
        readTime="5 min read"
        category="API Design"
      />
      
      <CalloutDoc
        title="API Design Best Practices"
        description="Learn how to design effective APIs"
        href="https://example.com/docs"
        features={["RESTful principles", "Error handling", "Versioning"]}
      />
      
      <CalloutCode
        title="Example API Request"
        language="json"
        code={`{
  "method": "GET",
  "url": "/api/v1/users"
}`}
      />
    </div>
  );
}

Router Integration

If you're using React Router, you can pass a LinkComponent prop to components that need navigation:

import { Link } from 'react-router-dom';
import { RelatedArticles } from '@zuplo/blog-components';

<RelatedArticles
  articles={articles}
  LinkComponent={Link}
/>

Components that support LinkComponent:

• Callout
• CalloutSplit
• RelatedArticles

Components

BlogHeader

Displays blog post metadata including title, author, date, and read time.

BlogNav

Navigation component with topic and post filtering.

Callout Components

• Callout - Generic callout with multiple variants
• CalloutAudience - Audience qualification callout
• CalloutCode - Code snippet display with copy functionality
• CalloutDoc - Documentation link card
• CalloutNextStep - Next step CTA
• CalloutSample - Deployable code sample showcase
• CalloutSplit - Split callout with two actions
• CalloutTip - Tips and warnings
• CalloutVideo - Video embed component

Other Components

• FeatureList - List of features with checkmarks
• RelatedArticles - Grid of related article cards
• TableOfContents - Sticky sidebar navigation
• WhatsIncluded - Features grid display

Styling

This package uses Tailwind CSS. Make sure your project has Tailwind configured and includes the component styles. The package exports CSS variables that you can customize in your Tailwind config.

Development

Playground

The project includes a playground/demo page that showcases all components. To run it locally:

npm run dev

Visit http://localhost:8080 to see the component playground.

Building the Library

To build the library for distribution:

npm run build:lib

Versioning

This package uses Changesets for version management. When you make changes:

1. Create a changeset: npm run changeset
2. Commit the changeset
3. Push to main branch
4. The GitHub Action will automatically create a version PR and publish to npm

License

MIT