1

components/Best.vue

@@ -0,0 +1,122 @@
+<template>
+  <section class="">
+    <div class="container px-4 py-24 mx-auto sm:px-16 text-cPrimary">
+      <div
+        class="flex flex-col flex-wrap items-center w-full mb-20 text-center"
+      >
+        <h1 class="mb-2 text-3xl font-medium sm:text-4xl text-cGelap">
+          Best Coffee from Indonesia
+        </h1>
+        <p class="w-full leading-relaxed lg:w-1/2">
+          The following data is taken from several reliable sources, and here
+          are the 5 best coffees
+        </p>
+      </div>
+      <div class="flex flex-wrap items-start justify-center -m-4">
+        <div class="p-4 xl:w-1/3 md:w-1/2">
+          <div
+            class="p-6 relative duration-[150ms] ease-in-out border rounded-lg hover:shadow-md bg-cMuda hover:-translate-y-1 sm:h-64"
+          >
+            <div
+              class="absolute -top-4 right-2 "
+            >
+              <div>
+                <h1 class="flex items-center justify-center w-10 h-10 mb-4 text-lg rounded-full text-cWhite bg-cUngu">1</h1>
+              </div>
+            </div>
+            <h2 class="mb-2 text-lg font-medium text-gray-900 title-font">
+              Gayo Coffee – Aceh
+            </h2>
+            <p class="text-base leading-relaxed">
+              One of the best types of Aceh coffee is Gayo arabica coffee from
+              Sumatra province. This Aceh gayo coffee has a watery texture, not
+              too concentrated, and the acidity level is balanced.
+            </p>
+          </div>
+        </div>
+        <div class="p-4 xl:w-1/3 md:w-1/2">
+          <div
+            class="p-6 relative duration-[150ms] ease-in-out border rounded-lg hover:shadow-md bg-cMuda hover:-translate-y-1 sm:h-64"
+          >
+            <div
+              class="absolute -top-4 right-2 "
+            >
+              <div>
+                <h1 class="flex items-center justify-center w-10 h-10 mb-4 text-lg rounded-full text-cWhite bg-cUngu">2</h1>
+              </div>
+            </div>
+            <h2 class="mb-2 text-lg font-medium text-gray-900 title-font">
+              Kintamani Coffee – Bali
+            </h2>
+            <p class="text-base leading-relaxed">
+              Kintamani coffee is one type of coffee that is popular in Japan,
+              Europe, and Arabia. A distinctive feature of kintamani coffee is
+              that it tastes a bit bitter and has an orange flavor.
+            </p>
+          </div>
+        </div>
+        <div class="p-4 xl:w-1/3 md:w-1/2">
+          <div
+            class="p-6 relative duration-[150ms] ease-in-out border rounded-lg hover:shadow-md bg-cMuda hover:-translate-y-1 sm:h-64"
+          >
+            <div
+              class="absolute -top-4 right-2 "
+            >
+              <div>
+                <h1 class="flex items-center justify-center w-10 h-10 mb-4 text-lg rounded-full text-cWhite bg-cUngu">3</h1>
+              </div>
+            </div>
+            <h2 class="mb-2 text-lg font-medium text-gray-900 title-font">
+              Toraja Coffee
+            </h2>
+            <p class="text-base leading-relaxed">
+              Toraja coffee has a cinnamon or cardamom flavor. Even Key Coffe, a
+              Japanese company has patented toraja coffee as a premium drink.
+            </p>
+          </div>
+        </div>
+        <div class="p-4 xl:w-1/3 md:w-1/2">
+          <div
+            class="p-6 relative duration-[150ms] ease-in-out border rounded-lg hover:shadow-md bg-cMuda hover:-translate-y-1 sm:h-64"
+          >
+            <div
+              class="absolute -top-4 right-2 "
+            >
+              <div>
+                <h1 class="flex items-center justify-center w-10 h-10 mb-4 text-lg rounded-full text-cWhite bg-cUngu">4</h1>
+              </div>
+            </div>
+            <h2 class="mb-2 text-lg font-medium text-gray-900 title-font">
+              Flores Bajawa Coffee
+            </h2>
+            <p class="text-base leading-relaxed">
+              A distinctive feature of the taste of flores coffee is its nutty
+              taste or nuts and caramel. The texture is also thick with a
+              slightly sour sensation.
+            </p>
+          </div>
+        </div>
+        <div class="p-4 xl:w-1/3 md:w-1/2">
+          <div
+            class="p-6 relative duration-[150ms] ease-in-out border rounded-lg hover:shadow-md bg-cMuda hover:-translate-y-1 sm:h-64"
+          >
+            <div
+              class="absolute -top-4 right-2 "
+            >
+              <div>
+                <h1 class="flex items-center justify-center w-10 h-10 mb-4 text-lg rounded-full text-cWhite bg-cUngu">5</h1>
+              </div>
+            </div>
+            <h2 class="mb-2 text-lg font-medium text-gray-900 title-font">
+              Luwak Coffee
+            </h2>
+            <p class="text-base leading-relaxed">
+              The characteristics of civet coffee are that it smells like
+              pandanus. The fragrance can be smelled up to meters
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

content/blog/first-post.md

@@ -1,26 +1,65 @@
-
 ---
-
 title: 'Nuxt Content v2 is awesome!'
 description: 'This is my first article!'
-img: 'img/cover (1).JPG'
-tags: [Nuxt, Content, Learning]
+img: 'img/bijikopi.jpg'
+tags: [Nuxt, Content, Learning, first]
 ---
 
-# My first blog post
+## My first blog post
+
+Welcome to my first blog post using [content v2 module](https://content.nuxtjs.org/)
+
+> Hey there! 👋🏾  This is my first blog post learning nuxt content.
+
+I'm currently building it using the following:
 
-Welcome to my first blog post using content v2 module # My first blog post
-Welcome to my first blog post using \[content v2 module\](https://content.nuxtjs.org/)
-Hey there! 👋🏾
-This is my first blog post learning nuxt content.
-I'm currently building it using the following: - Nuxt.js - Nuxt Content module - TailwindCSS - TailwindCSS typography
+- Nuxt.js
+- Nuxt Content module
+- TailwindCSS
+  - TailwindCSS typography
 
 ## Nuxt.js
 
-\[Nuxt\](https://nuxtjs.org/) is a powerful Vue framework that offers excellent development features such as server-side rendering.
+[Nuxt](https://nuxtjs.org/) is a powerful Vue framework that offers great development features such as server side rendering.
 
 ```bash
 npx nuxi init nuxt-app
 cd nuxt-app
 yarn install
 yarn dev -o
+```
+
+```ts
+// ./nuxt.config.ts
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  // My Nuxt config
+})
+```
+
+::InfoBox{type="error"}
+Here's a handy bit of information for you!
+
+#details
+This will be rendered inside the `description` slot. _It's important_ to see how this **works**.
+[More information can be found here](#)
+::
+
+## Nuxt content module
+
+Empower your NuxtJS application with [@nuxt/content module](https://content.nuxtjs.org/): write in a content/ directory and fetch your Markdown, JSON, YAML, XML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.
+
+You can get started with Nuxt Content by installing a fresh project
+
+```bash
+npx nuxi init content-app -t content
+```
+
+## TailwindCSS
+
+Rapidly build modern websites without ever leaving your HTML. [TailwindCSS](https://tailwindcss.com/) is A utility-first CSS framework packed with classes like `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup.
+
+### TailwindCSS Typography
+
+[Typography](https://tailwindcss.com/docs/typography-plugin) is a plugin that provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown, or pulled from a CMS).

pages/about.vue

@@ -1,7 +1,24 @@
 <template>
-  <main>
-    <article class="max-w-3xl p-16 m-auto prose">
-      <ContentDoc />
-    </article>
-  </main>
+  <section class="h-screen py-16">
+    <div
+      class="flex flex-col items-center px-4 py-16 mx-auto text-center md:py-32 md:px-10 lg:px-32 xl:max-w-3xl"
+    >
+      <h1 class="text-4xl font-bold leading-none sm:text-5xl text-cPrimary">
+        We are lovers,
+        <span class="text-cUngu">connoisseurs and coffee activists </span>from
+        Indonesia
+      </h1>
+      <p class="px-8 mt-8 mb-12 text-lg">
+        To know more about us, you can contact us at our social media contacts
+        or email below
+      </p>
+      <div class="flex flex-wrap justify-center">
+        <button
+          class="px-8 py-3 m-2 text-lg font-semibold rounded bg-cUngu text-cWhite"
+        >
+          Hire Us
+        </button>
+      </div>
+    </div>
+  </section>
 </template>

pages/blog/[…slug].vue

@@ -1,7 +1,79 @@
+<script setup>
+const { path } = useRoute();
+const { data } = await useAsyncData(`content-${path}`, async () => {
+  // fetch document where the document path matches with the cuurent route
+  let article = queryContent().where({ _path: path }).findOne();
+  // get the surround information,
+  // which is an array of documeents that come before and after the current document
+  let surround = queryContent()
+    .only(["_path", "title", "description", "img"])
+    .sort({ date: 1 })
+    .findSurround(path);
+
+  return {
+    article: await article,
+    surround: await surround,
+  };
+});
+
+// destrucure `prev` and `next` value from data
+const [prev, next] = data.value.surround;
+console.log({ data, prev, next });
+
+// set the meta
+useHead({
+  title: data.value.article.title,
+  meta: [
+    { name: "description", content: data.value.article.description },
+    {
+      hid: "og:image",
+      property: "og:image",
+      content: `https://site.com/${data.value.article.img}`,
+    },
+  ],
+});
+</script>
+
 <template>
-    <main>
-      <article class="prose p-16 max-w-3xl m-auto">
-        <ContentDoc />
-      </article>
+  <div class="max-w-screen-lg py-20 mx-auto">
+    <main id="main" class="mt-10 article-main">
+      <div v-if="data.article" class="relative w-full mx-auto mb-4 md:mb-0">
+        <div class="px-4 lg:px-0">
+          <h2 class="text-4xl font-semibold leading-snug text-cGelap">
+            {{ data.article.title }}
+          </h2>
+          <p class="supporting">{{ data.article.description }}</p>
+          <ul class="article-tags">
+            <li
+              class="inline-flex items-center justify-center py-2 mb-2 text-green-700 tag"
+              v-for="(tag, n) in data.article.tags"
+              :key="n"
+            >
+              {{ tag }}
+            </li>
+          </ul>
+        </div>
+
+        <NuxtImg
+          :src="`/${data.article.img}`"
+          :alt="data.article.title"
+          class="px-4 mx-auto rounded-2xl"
+        />
+      </div>
+
+      <div class="flex flex-col lg:flex-row">
+        <div class="w-full px-4 mt-12 text-lg leading-relaxed">
+          <article
+            class="mx-auto prose article prose-p:text-cGelap prose-headings:text-cUngu"
+          >
+            <ContentRenderer class="" :value="data.article">
+              <template #empty>
+                <p>No content found.</p>
+              </template>
+            </ContentRenderer>
+          </article>
+        </div>
+      </div>
     </main>
-  </template>
+  </div>
+</template>

pages/blog/index.vue

@@ -13,7 +13,7 @@ useHead({
     <header class="page-heading">
       <div class="wrapper">
         <h1 class="text-5xl font-extrabold">All articles</h1>
-        <p class="font-medium text-lg">
+        <p class="text-lg font-medium">
           Here's a list of all my great articles
         </p>
       </div>
@@ -33,7 +33,7 @@ useHead({
             <li v-for="article in list" :key="article._path" class="article">
               <NuxtLink :to="article._path">
                 <div class="wrapper">
-                  <div class="img-cont w-32">
+                  <div class="w-32 img-cont">
                     <img :src="`/${article.img}`" :alt="article.title"
                     class="rounded-lg max-h-[8rem]" />
                   </div>

pages/index.vue

@@ -2,5 +2,6 @@
 <template>
   <Hero />
   <Feature />
+  <Best />
 </template>
 

tailwind.config.js

@@ -29,6 +29,15 @@ module.exports = {
         cUngu: "#9656a1",
         cPutih: "#f2f2f2",
       },
+      typography: (theme) => ({
+        DEFAULT: {
+          css: {
+            color: theme('colors.cGelap'),
+
+
+          },
+        },
+      }),
     },
   },
   plugins: [require('@tailwindcss/typography'), ],