From d191178ecf007c18e47f13c88b825d8a0930c7e5 Mon Sep 17 00:00:00 2001
From: olayway <ola@yway.pl>
Date: Thu, 18 May 2023 14:14:43 +0200
Subject: [PATCH] [site/content][s]: add blog guide

---
 site/content/howto/blog.md | 75 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 site/content/howto/blog.md

diff --git a/site/content/howto/blog.md b/site/content/howto/blog.md
new file mode 100644
index 00000000..8a4f8d98
--- /dev/null
+++ b/site/content/howto/blog.md
@@ -0,0 +1,75 @@
+# How to add a simple blog?
+
+## Setup
+
+The following example uses components imported from the [`@flowershow/core` package](https://github.com/datopian/flowershow). If you want to follow along install it too:
+
+```sh
+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`:
+
+```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:
+
+```ts
+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`:
+
+```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:
+
+```ts
+interface BlogLayoutProps {
+	title?: string;
+	date?: string;
+	authors?: Array<Author>;
+}
+
+interface Author {
+	name: string;
+	avatar: string; // avatar image path
+	urlPath?: string; // author page
+}
+```