N4O Personal Blog

My personal blog where I yap about random stuff I found or did.

This blog has been rewritten too many times that I should actually start writing something:

Jekyll
Hugo
Next.js
Nuxt (You are here)

Why?

Because it would be funny to rewrite this blog again.

Features

🌙 Dark mode
⌨️ Markdown with a ton of plugins (thanks to nuxt/mdc)
- 🎨 Code Highlighter via Shiki
- 🧜 Diagram render support via Mermaid
- 🧑‍💻 Embedded Gist, Github code snippet, and repository card support.
- 💻 Asciinema render
- 😀 Emoji support via Twemoji
🌐 Multilingual or i18n support (Mainly in Indonesian and English)
- A nicer fallback page for when a certain posts not available in another languages
🤖 Monospaced-like font (using Monaspace Xenon for main font and Neon for code)
📏 Use variable font by default for better performance
🚀 Fast (arguably)
📜 SEO friendly (I hope)
📱 Mobile friendly (as friendly as I can make it)
📈 Proper sitemap and RSS feed
💬 Comment feature (via giscus.app)
📝 Draft-like feature so you don't publish your bad writing immediately
🎧 Spotify information
👁️ Plausible/view count

For both Spotify and Plausible, you would need to set BLOG_API_HOST environment variable to your blog API.

You can get blog API from here: https://github.com/noaione/blog-api

Features that is "hardcoded"

📚 Literal.club support
- Although you can change the username or just disable it by commenting the code
- If you do change it, ensure that your profile is public

See nuxt.config.ts for more information.

Development

You need yarn berry, not yarn classic, then install everything with:

yarn

Then run the development server with:

yarn dev

Open http://localhost:4500 with your browser to see the result.

Frontmatter

title (required) [string]
author (required, depends on data/author.json) [string]
date (optional, but recommended) [date-like]
tags (optional, can be empty array) [string[]]
lastmod (optional) [date-like]
draft (optional) [boolean]
description (optional) [string]
image (optional, if none provided fallback to default image) [string]

Here's an example of a post's frontmatter:

---
title: Markdown
description: Halaman ini memiliki judul dan beberapa konten untuk demonstrasi markdown.
image: https://octodex.github.com/images/minion.png
date: 2021-01-01
draft: true
tags:
  - demo
  - testing
author: noaione
---

Credits

Monaspace Xenon and Neon font by GitHub Next and Lettermatic: Repository
Social Card Background by cbnt99: Twitter/X
- Font used is Monaspace Xenon and M PLUS Code 1
Rehype Twemoji is derived from rehype-twemoji by nekochan0122
Other contributors and libraries that I used in this project

License

All the content in this repository is licensed under MIT License with the exception of the content in the content folder which is licensed under Creative Commons Attribution 4.0 International License with modification regarding about AI/ML usages.

Font License

Monaspace Xenon and Neon font is created by GitHub Next and Lettermatic and licensed under SIL Open Font License 1.1.

noaione/blog.n4o.xyz