From 67e6bf99326418f65538f00f3384474f868eb6b6 Mon Sep 17 00:00:00 2001
From: Rokas Muningis <28229273+muningis@users.noreply.github.com>
Date: Thu, 27 Feb 2025 20:45:32 +0200
Subject: [PATCH 1/2] docs: add markdown example

---
 examples/markdown-frontmatter.md | 65 ++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 examples/markdown-frontmatter.md

diff --git a/examples/markdown-frontmatter.md b/examples/markdown-frontmatter.md
new file mode 100644
index 00000000..a67add57
--- /dev/null
+++ b/examples/markdown-frontmatter.md
@@ -0,0 +1,65 @@
+# Markdown + Frontmatter
+
+Markdown is a popular lightweight markup language that is widely used for creating website content and documentation. Its simple and readable syntax makes it an excellent choice for writing web pages, blog posts, and technical documentation.
+
+Here's an example of how to handle Markdown content with Hono:
+
+## 🛠️ Installation
+```sh
+npm install unified remark-parse remark-extract-frontmatter remark-rehype remark-frontmatter rehype-stringify yaml
+```
+
+## 🚀 Setup
+
+```ts
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import { parse as parseYaml } from "yaml";
+
+const parse = (markdownContent: string) => {
+  const { value } = await unified()
+    .use(remarkParse)
+    .use(remarkRehype)
+    .use(rehypeStringify)
+    .process(markdownContent);
+  return { value }; 
+}
+```
+
+## 📝 Frontmatter
+Frontmatter is a section at the beginning of a Markdown file that contains metadata about the content. It's typically written in YAML format and enclosed between triple-dashes (`---`). This metadata can include information like title, date, author, tags, or any other custom fields you want to define.
+
+Here's how you can extract Frontmatter
+
+1. First install additionll dependencies
+```sh
+npm install remark-extract-frontmatter remark-frontmatter
+```
+
+2. Use `remark` plugins:
+```ts
+import remarkParse from "remark-parse";
+import remarkExtractFrontmatter from "remark-extract-frontmatter";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import { parse as parseYaml } from "yaml";
+
+const parse = (markdownContent: string) => {
+  const { data, value } = await unified()
+    .use(remarkParse)
+    .use(remarkExtractFrontmatter, { yaml: parseYaml })
+    .use(remarkFrontmatter)
+    .use(remarkRehype)
+    .use(rehypeStringify)
+    .process(markdownContent);
+  return { data, value }; // { data: {}; value: string }
+}
+```
+
+## 🔗 See Also
+- https://github.com/remarkjs/remark
+- https://github.com/rehypejs/rehype
+- https://github.com/unifiedjs/unified
+- https://jekyllrb.com/docs/front-matter/

From 65950fdfac822f7921c3636ef26a6b7caf1696f7 Mon Sep 17 00:00:00 2001
From: Rokas Muningis <28229273+muningis@users.noreply.github.com>
Date: Thu, 27 Feb 2025 20:49:19 +0200
Subject: [PATCH 2/2] docs: add markdown example usage and output

---
 examples/markdown-frontmatter.md | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/examples/markdown-frontmatter.md b/examples/markdown-frontmatter.md
index a67add57..aad07fe9 100644
--- a/examples/markdown-frontmatter.md
+++ b/examples/markdown-frontmatter.md
@@ -58,6 +58,34 @@ const parse = (markdownContent: string) => {
 }
 ```
 
+## 💡 Example usage
+```tsx
+const markdownContent = `---
+title: Hello World
+description: Hello World example page for hono documentation
+nested:
+  foo: bar
+---
+
+## Section A
+Hello
+`;
+
+const parsedContent = parse(markdownContent);
+
+console.log(parsedContent);
+/* {
+  data: {
+    title: "Hello World",
+    description: "Hello World example page for hono documentation",
+    nested: {
+      foo: "bar",
+    },
+  },
+  value: "<h2>Section A</h2>\n<p>Hello</p>",
+} */
+```
+
 ## 🔗 See Also
 - https://github.com/remarkjs/remark
 - https://github.com/rehypejs/rehype