/bloapi

⚡️🔌 Nextjs blog api starter kit. Don't think about handling data. Just draw it.

Primary LanguageTypeScriptMIT LicenseMIT

Bloapi 🐧

API battery kit for nextjs blog

The Problem

  1. To start nextjs blog, making own cms api is essential. But that's pretty annoying process.
  2. Blog templates can solve this problem, but templates often contain too much unnecessary stuff.

Let's Play Practical

start with just what we need.

Api 🚀 + Essential feature 📦

Perfect Fit for

  • Focus only on making UI
  • Choose tech stack oneself
  • Minimal, Customizable, Solid blog

Kind of meta

🚀 bloapi supports rich post meta option

required

---
title: post title
preview: post preview
author: post author
update: 2022/08/15 # < YYYY/MM/DD >
color: "#A68A68" # < "{ HEX | rgba | rgb }" >
tags: tag1, tag2 # split by comma
---

optional

---
series: javascript-1 # < {seriesTitle}-{order} >
bannerUrl: /category/post # nextjs static image location
reference: ref1, ref2 # split by comma
postpone: true # if true, post will not published
---

Kind of data

Let's look at the data we receive on each page by core api

  1. main: pages/index.tsx

Link to 🔭: https://{deploy-url}/

interface MainPageProps {
    latestPost: MetaType[]
    // ✅ main-page latest post
    // 💡 types/post/meta.ts

    mainCategory: CategoryInfoType[]
    // ✅ main-page displaying category
    // 💡 types/category/index.ts
}
  1. category: pages/category.tsx

Link to 🔭: https://{deploy-url}/category

interface AllCategoryPageProps {
    allCategoryInfo: CategoryInfoType[]
    // ✅ all category of blog
    // 💡 types/category/index.ts
}
  1. profile: pages/profile.tsx

Link to 🔭: https://{deploy-url}/profile

interface ProfilePageProps {
    profileSource: string
    // ✅ extracted source of {blog-dir}/profile/description.mdx
}
  1. {category}: pages/[category].tsx

Link to 🔭: https://{deploy-url}/{category}

interface CategoryPageProps extends CategoryInfoType {
    // ✅ specific category info
    // 💡 types/category/index.ts

    latestPost: MetaType[]
    // ✅ latest-post of specific category
    // 💡 types/post/meta.ts

    latestTag: string[]
    // ✅ latest-post-tag of specific category

    allSeries: SeriesType[]
    // ✅ series of specific category
    // 💡 types/post/series.ts
}
  1. {category}/{page}: pages/[category]/[page]/index.tsx

Link to 🔭: https://{deploy-url}/{category}/{page}/

interface PaginatedCategoryPageProps extends CategoryInfoType {
    allPost: MetaType[]
    // ✅ paginated-post of specific category
    // 💡 types/post/meta.ts

    allTag: string[]
    // ✅ paginated-post-tag of specific category

    page: number
    // ✅ current page number

    isLastPage: boolean
}
  1. {category}/{page}/{postTitle}: pages/[category]/[page]/[postTitle].tsx

Link to 🔭: https://{deploy-url}/{category}/{page}/{postTitle}

interface PostPageProps extends PostWithControllerType {
    // ✅ specific post + controller [prev, next post]
    // 💡 types/post/index.ts

    seriesInfo: SeriesType | null
    // ✅ specific post's seriesInfo. nullable
    // 💡 types/post/series.ts
}

Features

Essential 📦

  1. MDX full support with mdx-bundler
  2. CLI posting support
  3. SEO optimized with next-seo
  4. RSS/SITEMAP generation in scripts

More 🚀

  1. First Load Js ⚡️ 44.5kb ⚡️, preact on production build
  2. Toc object generation on server-side
  3. Image optimized with next/image and support automatic-sizing
  4. Google-analytics full support in party-town-thread
  5. Code highlight with rehype-prism-plus
  6. Math expression optional support with katex
  7. Kind error message
  8. Kind tsdoc. Read doc with cmd+mouse hover shortcut in vscode

Get started

Click 🐧 Use This Template or 🐧 git clone

LICENSE

MIT