datahub/site/content/howto/blog.md

How to add a simple blog?

Setup

The following example uses components imported from the @flowershow/core package. If you want to follow along install it too:

npm i @flowershow/core

Create home page for your blogs

Add the following code to the Next.js page that is going to be your blog home page, e.g. to /pages/blog/index.tsx:

import { BlogsList, SimpleLayout } from "@flowershow/core";

// pass a list of blogs, home page title and home page description, e.g. from `getStaticProps`
export default function BlogIndex({ blogs, title, description }) {
    return (
        <SimpleLayout title={title} description={description}>
            <BlogsList blogs={blogs} />
        </SimpleLayout>
    );
}

BlogsList component has the following API:

interface BlogsListProps {
	blogs: Blog;
}

interface Blog {
	title: string;
	date: string;
	urlPath: string;
	description?: string;
	authors?: Array<string>;
	tags?: Array<string>;	
}

Create blog post pages

Add the following code to your blog pages, e.g. to /pages/blog/[...slug].tsx:

import { BlogLayout } from "@flowershow/core";

export default BlogPost({ content, title, date, authors }) {
	return (
		<BlogLayout title={title} date={date} authors={authors}
			{content}
		</BlogLayout>
	)	
}

BlogLayout component has the following API:

interface BlogLayoutProps {
	title?: string;
	date?: string;
	authors?: Array<Author>;
}

interface Author {
	name: string;
	avatar: string; // avatar image path
	urlPath?: string; // author page
}