feature: add starting point for blog template

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+# Local Netlify folder
+.netlify

README.md

@@ -0,0 +1,42 @@
+# Nuxt Content v2 Blog with Bulma
+
+Look at the [Content documentation](https://content-v2.nuxtjs.org/) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install --shamefully-hoist
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment) for more information.

app.vue

@@ -0,0 +1,103 @@
+<script setup>
+useHead({
+  title: 'Nuxt 3 Bulma Blog Template',
+  link: [
+    {
+      rel: 'stylesheet',
+      href: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'
+    },
+    {
+      rel: 'stylesheet',
+      href: 'https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.9.1/css/OverlayScrollbars.min.css'
+    },
+    {
+      rel: 'stylesheet',
+      href: 'https://fonts.googleapis.com/css?family=Open+Sans'
+    },
+    {
+      rel: 'stylesheet',
+      href: 'https://unpkg.com/bulma@0.9.3/css/bulma.min.css'
+    }
+  ]
+})
+</script>
+
+<template>
+  <TheNavbar />
+  <div>
+    <NuxtPage />
+  </div>
+</template>
+
+<style>
+html,
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  font-size: 14px;
+  background: #f0f2f4;
+}
+
+a {
+  color: #3e8ed0;
+  transition: color 0.3s ease;
+}
+
+a:hover {
+  color: #2d628f;
+}
+
+.navbar.is-white {
+  background: #f0f2f4;
+}
+.navbar-brand .brand-text {
+  font-size: 1.11rem;
+  font-weight: bold;
+}
+.articles {
+  margin: 5rem 0;
+  margin-top: -200px;
+}
+.articles .content p {
+  line-height: 1.9;
+  margin: 15px 0;
+}
+.author-image {
+  position: absolute;
+  top: -30px;
+  left: 50%;
+  width: 60px;
+  height: 60px;
+  margin-left: -30px;
+  border: 3px solid #ccc;
+  border-radius: 50%;
+}
+.media-center {
+  display: block;
+  margin-bottom: 1rem;
+}
+.article,
+.promo-block {
+  margin-top: 6rem;
+}
+div.column.is-8:first-child {
+  padding-top: 0;
+  margin-top: 0;
+}
+.article-title {
+  font-size: 2rem;
+  font-weight: lighter;
+  line-height: 2;
+}
+.article-subtitle {
+  color: #909aa0;
+  margin-bottom: 3rem;
+}
+.article-body {
+  line-height: 1.4;
+  margin: 0 6rem;
+}
+.promo-block .container {
+  margin: 1rem 5rem;
+}
+</style>

components/BlogPostList.vue

@@ -0,0 +1,63 @@
+<script setup></script>
+
+<template>
+  <div class="container">
+    <section class="articles">
+      <div class="column is-8 is-offset-2">
+        <div 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
+                  </h3>
+                  <BlogPostMeta author="@bruno" date="2022-06-01" />
+                </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.
+                </div>
+              </div>
+            </section>
+          </NuxtLink>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style>
+.blog-post-card {
+  padding-top: 2.5rem;
+  padding-bottom: 3rem;
+}
+
+.blog-post-card .card-content {
+  padding: 1rem;
+}
+
+.blog-post-card .title {
+  margin-bottom: 1rem;
+}
+</style>

components/BlogPostMeta.vue

@@ -0,0 +1,29 @@
+<script setup>
+const props = defineProps({
+  author: {
+    type: String,
+    required: true
+  },
+  date: {
+    type: String,
+    required: true
+  },
+  color: {
+    type: String,
+    default: 'info'
+  }
+})
+
+const formattedDate = computed(() => {
+  return new Date(props.date).toDateString()
+})
+</script>
+
+<template>
+  <div class="tags has-addons level-item are-medium">
+    <span class="tag is-rounded" :class="`is-${color}`">{{ author }}</span>
+    <span class="tag is-rounded">{{ formattedDate }}</span>
+  </div>
+</template>
+
+<style></style>

components/TheHero.vue

@@ -0,0 +1,23 @@
+<script setup></script>
+
+<template>
+  <section class="hero is-info is-medium is-bold">
+    <div class="hero-body">
+      <div class="container has-text-centered">
+        <h1 class="title is-size-1">
+          <slot />
+        </h1>
+        <slot name="subtitle" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style>
+.hero-body {
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 400px;
+}
+</style>

components/TheNavbar.vue

@@ -0,0 +1,17 @@
+<script setup>
+const isMobileNavOpen = ref(false)
+</script>
+
+<template>
+  <nav class="navbar">
+    <div class="container">
+      <div class="navbar-brand">
+        <nuxt-link to="/" class="navbar-item has-text-weight-bold is-size-5">
+          My Nuxt 3 Blog
+        </nuxt-link>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<style></style>

nuxt.config.ts

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