05 end

components/BlogPostList.vue

@@ -1,42 +1,34 @@
-<script setup></script>
+<script setup>
+const { data: blogPostList } = useAsyncData('blogPostList', () => {
+  return queryContent('/blog').find()
+})
+</script>
 
 <template>
   <div class="container">
     <section class="articles">
       <div class="column is-8 is-offset-2">
-        <div class="card article">
+        <div
+          v-for="blogPost in blogPostList"
+          :key="blogPost._path"
+          class="card article"
+        >
           <NuxtLink to="/blog/my-second-blog-post">
             <section class="blog-post-card card article">
               <div class="media">
                 <div class="media-content has-text-centered">
                   <h3 class="title article-title has-text-weight-bold">
-                    Hard-Coded Blog Post #2
+                    {{ blogPost.title }}
                   </h3>
-                  <BlogPostMeta author="@bruno" date="2022-06-01" />
+                  <BlogPostMeta
+                    :author="blogPost.author"
+                    :date="blogPost.dates.published"
+                  />
                 </div>
               </div>
               <div class="card-content">
                 <div class="content article-body is-size-5">
-                  Here is the hard-coded description for blog #2.
-                </div>
-              </div>
-            </section>
-          </NuxtLink>
-        </div>
-        <div class="card article">
-          <NuxtLink to="/blog/my-first-blog-post">
-            <section class="blog-post-card card article">
-              <div class="media">
-                <div class="media-content has-text-centered">
-                  <h3 class="title article-title has-text-weight-bold">
-                    Hard-Coded Blog Post #1
-                  </h3>
-                  <BlogPostMeta author="@luisa" date="2022-05-01" />
-                </div>
-              </div>
-              <div class="card-content">
-                <div class="content article-body is-size-5">
-                  Here is the hard-coded description for blog #1.
+                  {{ blogPost.description }}
                 </div>
               </div>
             </section>

components/content/Counter.vue

@@ -0,0 +1,37 @@
+<script setup>
+const currentCount = ref(0)
+
+const incrementCount = () => {
+  currentCount.value++
+}
+</script>
+
+<template>
+  <div class="counter">
+    <p class="current-count">
+      Current Count: <strong>{{ currentCount }}</strong>
+    </p>
+    <button @click="incrementCount">Add 1</button>
+  </div>
+</template>
+
+<style>
+.counter {
+  max-width: 500px;
+  padding: 15px;
+  margin: 0 auto;
+  border: 3px solid #ccc;
+  text-align: center;
+}
+
+.counter .current-count {
+  margin-bottom: 10px;
+  text-align: center;
+  font-size: 1.5rem;
+}
+
+.counter button {
+  font-size: 1rem;
+  padding: 5px;
+}
+</style>

content/blog/my-first-blog-post.md

@@ -0,0 +1,36 @@
+---
+title: "My First Blog Post"
+author: "@bruno"
+dates:
+  published: "2022-05-01"
+---
+
+# Sample Markdown
+
+This is some basic, sample markdown.
+
+## Second Heading
+
+- Unordered lists, and:
+  1. One
+  2. Two
+  3. Three
+- And more
+
+> Blockquote
+
+And **bold**, _italics_.
+
+[A link](https://markdowntohtml.com)
+
+And code highlighting:
+
+```js
+var foo = 'bar';
+
+function baz(s) {
+   return foo + ':' + s;
+}
+```
+
+The end ...

content/blog/my-second-blog-post.md

@@ -0,0 +1,13 @@
+---
+title: What is a counter?
+author: "@luisa"
+dates:
+  published: "2022-06-01"
+description: This is a short description about my counter post.
+---
+
+ ## What is a counter?
+
+It allows you to keep track of a number and increment it by clicking on a button.
+
+<Counter></Counter>

nuxt.config.ts

@@ -1,4 +1,4 @@
-import { defineNuxtConfig } from 'nuxt'
-
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
-export default defineNuxtConfig({})
+export default defineNuxtConfig({
+  modules: ['@nuxt/content']
+})