https://github.com/plsr/next-14-contentlayer-blog-starter
Next.js 14 Blog starter with contentlayer
https://github.com/plsr/next-14-contentlayer-blog-starter
blog contentlayer nextjs starter tailwindcss
Last synced: about 1 month ago
JSON representation
Next.js 14 Blog starter with contentlayer
- Host: GitHub
- URL: https://github.com/plsr/next-14-contentlayer-blog-starter
- Owner: Plsr
- Created: 2024-03-23T09:11:14.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-31T22:20:13.000Z (about 2 years ago)
- Last Synced: 2025-04-23T04:14:39.231Z (about 1 year ago)
- Topics: blog, contentlayer, nextjs, starter, tailwindcss
- Language: TypeScript
- Homepage: https://next-14-contentlayer-blog-starter.vercel.app
- Size: 820 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js 14 & Contentlayer Blog starter
> [!WARNING]
> This is still work in progress and not ready to be used
A simple starter for a blog using Next.js 14 and Contentlayer. This starter aims to be used in one of two ways:
1. A quick starter to enable writing with minimal configuration
2. A base-layer for people wanting to build their own blog with more features
## Features
### Markdown files managed with Contentlayer
This starter uses [Contentlayer](https://contentlayer.dev) to manage markdown files. This makes it easy to add metadata to the existing resources or add completely new types of content. All content lives in the `content` folder, starting with `posts` and `pages`.
### Tailwind CSS
Styling via Tailwind CSS. I know it's not for everyone, so this propbably also makes this starter not for everyone.
### Dark mode
Dark mode is supported out of the box. The starter uses the system preference by default but allows manual overrides.
### Pagination
This starter offers a high-perfomant, server-side pagination.
## Configuration
If you want to quickly start writing, this starter makes it easy to configure some base settings and visuals.
### Base Settings
The sites base settings can be adapted at `site.config.js`. The config object offers the following options:
|name|type|description|
|-----|----|------------|
|title|string|Name of the page, used e.g. in `` and other metadata.|
|url|string|Production URL of the page|
|postsPerPage|number|The number of posts per page to display|
### Visual
You have some control over the visuals of the page by adapting the `tailwind.config.ts` file. We export to custom colors, `base` and `accent`, which you can map to any basic tailwind color:
```ts
const config: Config = {
//...
theme: {
colors: {
...colors,
accent: colors.emerald,
base: colors.slate,
},
},
// ...
};
export default config;
```
## Todo
### Now
- [x] Post styling
- [x] code blocks
- [x] Post page
- [x] Metadata for posts
- [x] including OG
- [x] Pages
- [x] Metadata
- [x] RSS feed
- [x] Mobile
- [x] Pagination
- [x] Footer
### Later
- [ ] Header
- [x] Header needs to follow new styling conventions
- [x] Better styling for buttons
- [ ] Link active state
- [ ] Default OG Image for non-post pages
- [ ] Home page
- [ ] make configurable wether to display full posts or list of posts on home page