Fix: Nuxt example slug

examples/nuxt-tailwind/buildMarkdown.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const path = require('path');
-const { processMarkdown } = require('epic-remark');
+const { processMarkdown } = require('epic-remark/dist/index');
 
 const postsDirectory = path.join(__dirname, 'posts');
 const outputDirectory = path.join(__dirname, 'static');
@@ -10,6 +10,7 @@ const processPosts = async () => {
   const posts = [];
 
   for (const fileName of fileNames) {
+    const id = fileName.replace(/\.md$/, ''); // Remove the file extension to get the ID
     const filePath = path.join(postsDirectory, fileName);
     const fileContents = fs.readFileSync(filePath, 'utf8');
     const options = {
@@ -23,7 +24,10 @@ const processPosts = async () => {
       renderEmbeds: true,
     }
     const processedContent = await processMarkdown(fileContents, options);
-    posts.push(processedContent);
+    posts.push({
+      id, // Include the ID in the post object
+      ...processedContent
+    });
   }
 
   if (!fs.existsSync(outputDirectory)){

examples/nuxt-tailwind/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "core-js": "^3.25.3",
-    "epic-remark": "^0.1.7",
+    "epic-remark": "^0.1.11",
     "nuxt": "^2.15.8",
     "vue": "^2.7.10",
     "vue-server-renderer": "^2.7.10",

examples/nuxt-tailwind/pages/blog/_slug.vue

@@ -0,0 +1,18 @@
+<template>
+  <article class="max-w-3xl mx-auto px-6 py-12">
+    <h1 class="text-5xl font-semibold">{{ postData?.frontMatter.title }}</h1>
+    <p class="my-2">Reading time: {{ postData?.readingTime }} min</p>
+    <div v-html="postData?.toc" />
+    <div v-html="postData?.contentHtml" />
+  </article>
+</template>
+
+<script>
+import 'epic-remark/dist/index.esm.light.css';
+export default {
+  async asyncData({ params, app }) {
+    const postData = await app.$posts.find(post => post.id === params.slug);
+    return { postData };
+  }
+};
+</script>

examples/nuxt-tailwind/pages/index.vue

@@ -1,14 +1,14 @@
 <template>
   <article class="max-w-3xl mx-auto px-6 py-12">
-    <h1 class="text-5xl font-semibold">{{ postData.frontMatter.title }}</h1>
-    <p class="my-2">Reading time: {{ postData.readingTime }} min</p>
-    <div v-html="postData.toc" />
-    <div v-html="postData.contentHtml" />
+    <h1 class="text-5xl font-semibold">{{ postData?.frontMatter.title }}</h1>
+    <p class="my-2">Reading time: {{ postData?.readingTime }} min</p>
+    <div v-html="postData?.toc" />
+    <div v-html="postData?.contentHtml" />
   </article>
 </template>
 
 <script>
-import 'epic-remark/dist/index.css';
+import 'epic-remark/dist/index.esm.light.css';
 export default {
   async asyncData({ params, app }) {
     const postData = app.$posts.find(post => post.id === params.slug);

examples/nuxt-tailwind/static/posts.json

@@ -1 +1 @@
-[{"frontMatter":{"title":"Welcome to the Example Post","date":"2023-12-15","author":"Your Name","summary":"Explore the rich capabilities of Markdown through this illustrative guide.","tags":["Markdown","Formatting","Tutorial"]},"contentHtml":"<div class=\"markdown\"><h1 id=\"welcome-to-the-marvels-of-markdown\">Welcome to the Marvels of Markdown!</h1>\n<p>Hello there! I'm excited to take you on a journey through the wonderful world of Markdown. This versatile language allows you to create richly formatted documents with ease. Whether you're a writer, developer, or just someone who loves streamlined content creation, Markdown has something for everyone!</p>\n<h2 id=\"the-art-of-styling-text\">The Art of Styling Text</h2>\n<p>Let's start with the basics - styling text. Markdown provides simple yet powerful tools to bring your words to life:</p>\n<ul>\n<li><strong>Bold</strong>: To emphasize a point, wrap your text in <code>**</code> or <code>__</code>. For example, <strong>bold text</strong> makes your words stand out.</li>\n<li><em>Italic</em>: Want a subtle emphasis? Italicize your text with <code>*</code> or <code>_</code>. It's perfect for <em>italic text</em>.</li>\n<li><code>Monospace</code>: When you need to highlight code or technical terms, use backticks for <code>monospace formatting</code>.</li>\n</ul>\n<h2 id=\"organizing-ideas-with-lists\">Organizing Ideas with Lists</h2>\n<p>Lists are a great way to organize information. Markdown supports both unordered (bullet points) and ordered (numbered) lists.</p>\n<h3 id=\"unordered-list\">Unordered List</h3>\n<ul>\n<li>First Point: Great for summarizing ideas.</li>\n<li>Second Point:\n<ul>\n<li>Detail A: Even supports nested points.</li>\n<li>Detail B: For more complex structures.</li>\n</ul>\n</li>\n</ul>\n<h3 id=\"ordered-list\">Ordered List</h3>\n<ol>\n<li>Step One: Clearly mark the sequence of tasks.</li>\n<li>Step Two:</li>\n<li>Subtask One: Break down into smaller steps.</li>\n<li>Subtask Two: Ensures clarity and precision.</li>\n</ol>\n<h2 id=\"connecting-through-links-and-images\">Connecting Through Links and Images</h2>\n<p>Markdown also simplifies linking to other resources and embedding images:</p>\n<ul>\n<li>Raw Link: Visit <a href=\"https://example.com\">https://example.com</a> directly.</li>\n<li><a href=\"https://example.com\">Formatted Link</a>: Embed links within text for a cleaner look.</li>\n<li><div class=\"epic-remark-image\"><img src=\"./example.png\" alt=\"Sample Image\"></div></li>\n<li>Insert images easily to make your post visually appealing.</li>\n</ul>\n<h2 id=\"structuring-data-with-tables\">Structuring Data with Tables</h2>\n<p>Presenting data? Use tables for clarity:</p>\n<div class=\"epic-remark-table\">\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th>Feature</th><th>Supported</th></tr></thead><tbody><tr><td>Headings</td><td>Yes</td></tr><tr><td>Lists</td><td>Yes</td></tr><tr><td>Images</td><td>Yes</td></tr><tr><td>Tables</td><td>Yes</td></tr></tbody></table></div>\n<h2 id=\"rich-embedded-content\">Rich Embedded Content</h2>\n<p>Markdown supports embedding content like GitHub gists and YouTube videos directly in your post:</p>\n<h3 id=\"embed-a-github-gist\">Embed a GitHub Gist</h3>\n<div class=\"epic-remark-gist\"><iframe src=\"https://gist.github.com/sandypockets/f37072055678da1eab8643567600717b.pibb\" style=\"width:100%; border:none;\"></iframe></div>\n<h3 id=\"embed-a-youtube-video\">Embed a YouTube Video</h3>\n<iframe class=\"epic-remark-youtube\" src=\"https://www.youtube.com/embed/zRpsRKuyi3Y\" width=\"100%\" title=\"YouTube video player\" frameborder=\"0\" allowfullscreen></iframe>\n<hr>\n<p>Markdown is an incredibly flexible and user-friendly language, perfect for creating content that's both beautiful and functional. I hope this guide has inspired you to explore the full range of possibilities with Markdown. Happy writing!</p></div>","toc":"<ul class=\"toc markdown\"><li><a href=\"#welcome-to-the-marvels-of-markdown\">Welcome to the Marvels of Markdown!</a></li><li><a href=\"#the-art-of-styling-text\">The Art of Styling Text</a></li><li><a href=\"#organizing-ideas-with-lists\">Organizing Ideas with Lists</a></li><li><a href=\"#unordered-list\">Unordered List</a></li><li><a href=\"#ordered-list\">Ordered List</a></li><li><a href=\"#connecting-through-links-and-images\">Connecting Through Links and Images</a></li><li><a href=\"#structuring-data-with-tables\">Structuring Data with Tables</a></li><li><a href=\"#rich-embedded-content\">Rich Embedded Content</a></li><li><a href=\"#embed-a-github-gist\">Embed a GitHub Gist</a></li><li><a href=\"#embed-a-youtube-video\">Embed a YouTube Video</a></li></ul>","readingTime":2}]
+[{"id":"example","frontMatter":{"title":"Welcome to the Example Post","date":"2023-12-15","author":"Your Name","summary":"Explore the rich capabilities of Markdown through this illustrative guide.","tags":["Markdown","Formatting","Tutorial"]},"contentHtml":"<div class=\"markdown\"><h1 id=\"welcome-to-the-marvels-of-markdown\">Welcome to the Marvels of Markdown!</h1>\n<p>Hello there! I'm excited to take you on a journey through the wonderful world of Markdown. This versatile language allows you to create richly formatted documents with ease. Whether you're a writer, developer, or just someone who loves streamlined content creation, Markdown has something for everyone!</p>\n<h2 id=\"the-art-of-styling-text\">The Art of Styling Text</h2>\n<p>Let's start with the basics - styling text. Markdown provides simple yet powerful tools to bring your words to life:</p>\n<ul>\n<li><strong>Bold</strong>: To emphasize a point, wrap your text in <code>**</code> or <code>__</code>. For example, <strong>bold text</strong> makes your words stand out.</li>\n<li><em>Italic</em>: Want a subtle emphasis? Italicize your text with <code>*</code> or <code>_</code>. It's perfect for <em>italic text</em>.</li>\n<li><code>Monospace</code>: When you need to highlight code or technical terms, use backticks for <code>monospace formatting</code>.</li>\n</ul>\n<h2 id=\"organizing-ideas-with-lists\">Organizing Ideas with Lists</h2>\n<p>Lists are a great way to organize information. Markdown supports both unordered (bullet points) and ordered (numbered) lists.</p>\n<h3 id=\"unordered-list\">Unordered List</h3>\n<ul>\n<li>First Point: Great for summarizing ideas.</li>\n<li>Second Point:\n<ul>\n<li>Detail A: Even supports nested points.</li>\n<li>Detail B: For more complex structures.</li>\n</ul>\n</li>\n</ul>\n<h3 id=\"ordered-list\">Ordered List</h3>\n<ol>\n<li>Step One: Clearly mark the sequence of tasks.</li>\n<li>Step Two:</li>\n<li>Subtask One: Break down into smaller steps.</li>\n<li>Subtask Two: Ensures clarity and precision.</li>\n</ol>\n<h2 id=\"connecting-through-links-and-images\">Connecting Through Links and Images</h2>\n<p>Markdown also simplifies linking to other resources and embedding images:</p>\n<ul>\n<li>Raw Link: Visit <a href=\"https://example.com\">https://example.com</a> directly.</li>\n<li><a href=\"https://example.com\">Formatted Link</a>: Embed links within text for a cleaner look.</li>\n<li><div class=\"epic-remark-image\"><img src=\"./example.png\" alt=\"Sample Image\"></div></li>\n<li>Insert images easily to make your post visually appealing.</li>\n</ul>\n<h2 id=\"structuring-data-with-tables\">Structuring Data with Tables</h2>\n<p>Presenting data? Use tables for clarity:</p>\n<div class=\"epic-remark-table\">\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th>Feature</th><th>Supported</th></tr></thead><tbody><tr><td>Headings</td><td>Yes</td></tr><tr><td>Lists</td><td>Yes</td></tr><tr><td>Images</td><td>Yes</td></tr><tr><td>Tables</td><td>Yes</td></tr></tbody></table></div>\n<h2 id=\"rich-embedded-content\">Rich Embedded Content</h2>\n<p>Markdown supports embedding content like GitHub gists and YouTube videos directly in your post:</p>\n<h3 id=\"embed-a-github-gist\">Embed a GitHub Gist</h3>\n<div class=\"epic-remark-gist\"><iframe src=\"https://gist.github.com/sandypockets/f37072055678da1eab8643567600717b.pibb\" style=\"width:100%; border:none;\"></iframe></div>\n<h3 id=\"embed-a-youtube-video\">Embed a YouTube Video</h3>\n<iframe class=\"epic-remark-youtube\" src=\"https://www.youtube.com/embed/zRpsRKuyi3Y\" width=\"100%\" title=\"YouTube video player\" frameborder=\"0\" allowfullscreen></iframe>\n<hr>\n<p>Markdown is an incredibly flexible and user-friendly language, perfect for creating content that's both beautiful and functional. I hope this guide has inspired you to explore the full range of possibilities with Markdown. Happy writing!</p></div>","toc":"<ul class=\"toc markdown\"><li><a href=\"#welcome-to-the-marvels-of-markdown\">Welcome to the Marvels of Markdown!</a></li><li><a href=\"#the-art-of-styling-text\">The Art of Styling Text</a></li><li><a href=\"#organizing-ideas-with-lists\">Organizing Ideas with Lists</a></li><li><a href=\"#unordered-list\">Unordered List</a></li><li><a href=\"#ordered-list\">Ordered List</a></li><li><a href=\"#connecting-through-links-and-images\">Connecting Through Links and Images</a></li><li><a href=\"#structuring-data-with-tables\">Structuring Data with Tables</a></li><li><a href=\"#rich-embedded-content\">Rich Embedded Content</a></li><li><a href=\"#embed-a-github-gist\">Embed a GitHub Gist</a></li><li><a href=\"#embed-a-youtube-video\">Embed a YouTube Video</a></li></ul>","readingTime":2}]