npm package: @kitmodule/kitfrontmatter
Description: Convert JavaScript objects to YAML front matter and Markdown in vanilla JavaScript lightweight, dependency-free, and easy to use.
Author: Huỳnh Nhân Quốc
Latest version: 1.0.3

# 📝 KitFrontMatter by Kitmodule

**Generate Markdown front matter and convert JavaScript objects to YAML — lightweight, dependency-free, and easy to use.**

[English](#) | [Tiếng Việt](https://github.com/kitmodule/kitfrontmatter-js/blob/master/readme-vi.md)

[![npm version](https://img.shields.io/npm/v/@kitmodule/kitfrontmatter.svg)](https://www.npmjs.com/package/@kitmodule/kitfrontmatter)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/kitmodule/kitfrontmatter-js/blob/master/LICENSE)

---

## ✨ Features

* 🏷️ Convert JavaScript objects to **YAML**, supports nested objects and arrays.
* 📄 Generate full **Markdown front matter** with `---` delimiters.
* 🔀 Switch array style: **inline** or **block**.
* ⚡ Pure **vanilla JavaScript**, zero dependencies.
* 💨 Quick helpers for one-line conversions: `headerToYAML`, `objectToYAML`, `frontMatterMarkdown`.

---

## 🚀 Installation

### Using npm

```bash
npm install @kitmodule/kitfrontmatter
```

### Using CDN (latest version automatically)

```html
<script src="https://unpkg.com/@kitmodule/kitfrontmatter/dist/kitfrontmatter.min.js"></script>
```

or with **jsDelivr**:

```html
<script src="https://cdn.jsdelivr.net/npm/@kitmodule/kitfrontmatter/dist/kitfrontmatter.min.js"></script>
```

> ⚠️ For production stability, you can lock to a specific version:
>
> ```html
> <script src="https://cdn.jsdelivr.net/npm/@kitmodule/kitfrontmatter@1.0.0/dist/kitfrontmatter.min.js"></script>
> ```

---

## 💡 Usage

### Browser (CDN)

```html
<script src="https://unpkg.com/@kitmodule/kitfrontmatter/dist/kitfrontmatter.min.js"></script>
<script>
  const header = { title: "My Post", tags: ["js", "yaml"] };
  const body = "Hello world!";

  const fm = new KitFrontMatter(header, body);
  console.log(fm.toMarkdown());
</script>
```

### Node.js / ES Module

```js
import { KitFrontMatter, headerToYAML, objectToYAML, frontMatterMarkdown } from "@kitmodule/kitfrontmatter";

// Quick YAML conversion
const header = { title: "My Post", tags: ["js", "yaml"] };
console.log(headerToYAML(header, { blockArrays: true }));

// Convert any JS object to YAML
const config = { theme: "dark", plugins: ["seo", "analytics"] };
console.log(objectToYAML(config, { blockArrays: true }));

// Full front matter Markdown
const markdown = frontMatterMarkdown(header, "Hello world!", { blockArrays: true });
console.log(markdown);
```

---

## 🧩 API Reference

### `new KitFrontMatter(header, body)`

Create a front matter instance.

| Param  | Type   | Description                     |
| ------ | ------ | ------------------------------- |
| header | object | Front matter header object      |
| body   | string | Body content (Markdown content) |

### Instance Methods

| Method           | Description                                         |
| ---------------- | --------------------------------------------------- |
| `.toYAML()`      | Convert header object to YAML string                |
| `.toMarkdown()`  | Convert header + body to full Markdown front matter |
| `.isBlock(true)` | Switch arrays to block style                        |

### Quick Helper Functions

| Function                                     | Description                                |
| -------------------------------------------- | ------------------------------------------ |
| `headerToYAML(header, options)`              | Convert front matter header to YAML string |
| `objectToYAML(obj, options)`                 | Convert any JS object to YAML string       |
| `frontMatterMarkdown(header, body, options)` | Generate full Markdown front matter        |

---

## 🧪 Example Output

```js
const header = { title: "My Post", tags: ["js", "yaml"] };
const body = "This is the content.";

console.log(frontMatterMarkdown(header, body, { blockArrays: true }));
```

Output:

```yaml
---
title: "My Post"
tags:
  - "js"
  - "yaml"
---

This is the content.
```

---

## ☕ Support the Author

If you find this library useful, you can support me:

[![Ko-fi](https://img.shields.io/badge/Ko--fi-FF5E5B?style=for-the-badge\&logo=ko-fi\&logoColor=white)](https://ko-fi.com/huynhnhanquoc)
[![Buy Me a Coffee](https://img.shields.io/badge/Buy_Me_a_Coffee-FFDD00?style=for-the-badge\&logo=buy-me-a-coffee\&logoColor=black)](https://buymeacoffee.com/huynhnhanquoc)
[![GitHub Sponsors](https://img.shields.io/badge/GitHub_Sponsors-f7f7f7?style=for-the-badge\&logo=githubsponsors\&logoColor=ff69b4\&color=f7f7f7)](https://github.com/sponsors/huynhnhanquoc)
[![Patreon](https://img.shields.io/badge/Patreon-F96854?style=for-the-badge\&logo=patreon\&logoColor=white)](https://patreon.com/huynhnhanquoc)
[![PayPal](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge\&logo=paypal\&logoColor=white)](https://paypal.me/huynhnhanquoc)

---

## 🧾 License

Released under the [MIT License](https://github.com/kitmodule/kitfrontmatter-js/blob/master/LICENSE)
© 2025 [Huỳnh Nhân Quốc](https://github.com/huynhnhanquoc) · Open Source [@Kit Module](https://github.com/kitmodule)