Quick Start

Let's keep this short and quick no fluff. You can check out the detailed guide to understand implementation based on framework.

Install Package

Install the leafpad package. This is lightwide zero dependency package to keep things light and quick

# Using npm
npm install @leafpad/blogs

# Using pnpm
pnpm add @leafpad/blogs

# Using yarn
yarn add @leafpad/blogs

Add the styles in project

Add bare bones leafpad css. This only adds height and font size to different component. Optional but recommended as quick start place. You can customize and remove it as needed. You can add it at the /blogs route in your project

import '@leafpad/blogs/src/styles/style.css'

Blogs Card Page

You need to add this code at the root /blogs path. This will renders card of new blog posts added.

import { BlogPostFormat, BlogsService } from "@leafpad/blogs";

const blogsApi = new BlogsService('my-awesome-blog')


export default function BlogsPage() {
  
  // fetch blog post
  const {post} = await await blogsApi.fetchPosts({
     includeHtml: true
  });

  <div
     dangerouslySetInnerHTML={{ 
        __html: BlogPostFormat.blogCards({ 
          posts, 
          urlPrefix: '/blogs' 
        }) 
      }} 
    />
}

Individual Blog

This page will be used to render individual blog. For urls like /blogs/<slug>

import { BlogPostFormat, BlogsService } from "@leafpad/blogs";

const blogsApi = new BlogsService('my-awesome-blog')

export default function BlogIndividualPage(){
   // extract slug from url your custom logic
   const post = await blogsApi.fetchBlog(slug, { includeHtml: true });

   if (post) {
    return <div>
      <div dangerouslySetInnerHTML={{ __html: BlogPostFormat.blogPostWithToc({post}) }} />
    </div>;
  }
}