Introduction

Custom themes on Blogkit allow you to customize your blog using Tailwind CSS and React.js. Each theme contains 7 files:

• styles.css: The global CSS stylesheet for your blog
• MainPage.tsx: This is the main page for your blog: the front-page.
• ArticlePage.tsx: The article page of your page. All your article pages will be rendered using this component.
• Post.tsx: The article preview, which is displayed inside MainPage.tsx.
• Layout.tsx: The layout of the pages inside your blog. This is a wrapper used inside MainPage.tsx and ArticlePage.tsx
• Header.tsx: The Header/Navigation bar of your blog.
• Footer.tsx: The footer of your blog.

You don’t have to use all of the components within each file, but you need to at least have a MainPage.tsx and ArticlePage.tsx populated, since those are the main entry points for your blog.

Component Props

To help you populate your theme with your blog’s information, we pass props to some of the components.

MainPage.tsx

MainPage.tsx takes 3 props: blog, articles, and isLoadingArticles.

The blog prop is a javascript object that contains the name and logo image URL of your blog. The structure of this object can be described with the BlogType interface:

interface BlogType {
	name:string; // blog name
	logo: string; // blog logo url
}

//Example blog object
const blog:BlogType = {name: "Example blog", logo: "<https://example.com/logo.png>"}

The articles prop is an array of objects that contains preview information about the latest articles in your blog. Each article object within the array is described with the ArticlePreviewType interface:

interface ArticlePreviewType {
	id: number; // article's unique id
	title?: string; // article title
	subTitle?:string; // article subtitle
	publishedAt: Date; // article's published date
	peek?: string; // The first 200 characters of your article's content
	tags?:string[]; // the tags associated with the article
	coverImage?: string; // image URL of the article's cover image
}

const articles: ArticlePreviewType[] = [
	{
		id:1, 
		title: "Hello World",  
		subTitle:"hello everyone", 
		publishedAt: new Date(), 
		peek: undefined,
		tags: ["News"]
	}
]