Basis of blog done

app/app.vue

@@ -1,4 +1,6 @@
 <template>
-  <NuxtRouteAnnouncer />
+    <NuxtRouteAnnouncer />
-  <NuxtPage />
+    <NuxtLayout>
-</template>
+        <NuxtPage />
+    </NuxtLayout>
+</template>

app/assets/css/main.css

@@ -0,0 +1,34 @@
+@import "tailwindcss";
+
+@theme {
+    /* Background colors */
+    --color-background: #0d0d0d;
+    --color-surface: #1a1a1a;
+
+    --color-foreground: #f0f0f0;
+    --color-muted: #999;
+
+    --color-primary: #ff6b2c;
+    --color-blue: #4169e1;
+    --color-green: #00c853;
+    --color-purple: #9b59b6;
+    --color-pink: #ff69b4;
+    --color-yellow: #ffd93d;
+    --color-red: #ff4757;
+
+    --font-display: "Bricolage Grotesque", system-ui, sans-serif;
+
+    --shadow-custom: 4px 4px 0 #ff6b2c;
+    --shadow-custom-lg: 6px 6px 0 #ff6b2c;
+    --shadow-custom-hover: 8px 8px 0 #ff6b2c;
+
+    --border-primary: 3px solid var(--color-primary);
+
+    --radius-none: 0;
+}
+
+@layer base {
+    body {
+        @apply font-display bg-background text-foreground leading-normal overflow-x-hidden;
+    }
+}

app/components/Alert.vue

@@ -1,32 +0,0 @@
-<template>
-  <div class="alert" :style="{ 'border-color': color }">
-    <slot></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-const { color } = defineProps({
-  color: {
-    type: String,
-    default: 'orange'
-  }
-})
-</script>
-
-<style scoped>
-.alert {
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  border: 2px solid;
-  border-radius: 0.5rem;
-  background-color: #fff;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.alert:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
-}
-</style>

app/components/BlogList.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const { data: posts } = await useAsyncData("blog-posts", () => {
+    return queryCollection("blog")
+        .select("id", "title", "description", "date", "path", "author")
+        .order("date", "DESC")
+        .where("path", "NOT LIKE", "/blog")
+        .all();
+});
+</script>
+
+<template>
+    <div>
+        <NuxtLink
+            v-for="post in posts"
+            :to="post.path"
+            :key="post.id"
+            class="no-underline text-inherit block mb-5"
+        >
+            <section class="px-5 pt-5 hover:bg-white/2 bg-inherit rounded-2xl">
+                <h2 class="mt-2">{{ post.title }}</h2>
+                <p>{{ post.description }}</p>
+                <div class="opacity-60 mb-5">
+                    <span>{{ post.author }}</span>
+                    <span class="mx-2">•</span>
+                    <span>{{
+                        new Date(post.date).toLocaleDateString(undefined, {
+                            year: "numeric",
+                            month: "long",
+                            day: "numeric",
+                        })
+                    }}</span>
+                </div>
+                <div class="border-b-2 border-primary"></div>
+            </section>
+        </NuxtLink>
+    </div>
+</template>
+
+<style scoped></style>

app/components/Counter.vue

@@ -1,29 +0,0 @@
-<template>
-  <div>
-    <h3>Counter: {{ count }}</h3>
-    <button @click="increment">
-      Increment
-    </button>
-    <button @click="decrement">
-      Decrement
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-const count = ref(0)
-
-const increment = () => {
-  count.value++
-}
-
-const decrement = () => {
-  count.value--
-}
-</script>
-
-<style scoped>
-button {
-  margin: 5px;
-}
-</style>

app/components/Nav.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts"></script>
+<template>
+    <header
+        class="flex items-center justify-between px-8 py-4 bg-surface border-b-primary border-b-[3px] sticky top-0 z-50"
+    >
+        <NuxtLink
+            href="/"
+            class="flex items-center gap-2 no-underline font-extrabold text-2xl"
+            external
+        >
+            <NuxtImg
+                width="40px"
+                height="40px"
+                src="images/icon.svg"
+                alt="Pumpkin"
+            />
+            <span>pumpkin</span>
+        </NuxtLink>
+        <nav class="nav flex gap-2">
+            <NuxtLink to="/" external>Home</NuxtLink>
+            <NuxtLink to="https://docs.pumpkinmc.org/" external>Docs</NuxtLink>
+            <NuxtLink to="/developers/" external>Developers</NuxtLink>
+            <NuxtLink to="/contributors/" external>Contributors</NuxtLink>
+        </nav>
+        <div class="flex items-center gap-2">
+            <a
+                href="https://github.com/Pumpkin-MC/Pumpkin"
+                class="icon-btn"
+                title="GitHub"
+            >
+                <Icon size="100%" name="fa7-brands:github" />
+            </a>
+            <a
+                href="https://discord.com/invite/wT8XjrjKkf"
+                class="icon-btn"
+                title="Discord"
+            >
+                <Icon size="100%" name="fa7-brands:discord" />
+            </a>
+            <a
+                href="https://github.com/sponsors/Snowiiii"
+                class="sponsor-btn"
+                title="Sponsor"
+            >
+                <Icon size="100%" name="fa7-solid:heart" />
+            </a>
+            <a
+                href="/download/"
+                class="flex items-center justify-center h-10.5 px-5 bg-primary text-black font-bold text-[0.95rem] no-underline border-[3px] border-primary shadow-[3px_3px_0_var(--color-primary)] transition-all duration-100 ease-in-out hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[5px_5px_0_var(--color-primary)]"
+                >Download</a
+            >
+        </div>
+    </header>
+</template>
+
+<style scoped>
+@reference "@/assets/css/main.css"
+
+.nav a {
+    @apply px-5 py-2.5 no-underline text-muted font-semibold text-base relative transition-all duration-150 ease-in-out;
+}
+.nav a::after {
+    @apply content-[''] absolute bottom-0 left-1/2 -translate-x-1/2 w-0 h-0.75 bg-primary transition-[width] duration-150 ease-in-out;
+}
+.nav a:hover {
+    @apply text-foreground;
+}
+.nav a:hover::after {
+    @apply w-full;
+}
+
+.icon-btn {
+    @apply flex items-center justify-center w-10.5 h-10.5 bg-background text-foreground text-xl no-underline border-[3px] border-foreground shadow-[3px_3px_0_var(--color-foreground)] transition-all duration-100 ease-in-out;
+}
+
+.icon-btn:hover {
+    @apply -translate-x-0.5 -translate-y-0.5 shadow-[5px_5px_0_var(--color-primary)] border-primary text-primary;
+}
+
+.sponsor-btn {
+    @apply flex items-center justify-center w-10.5 h-10.5 bg-pink text-black text-[1.1rem] no-underline border-[3px] border-pink shadow-[3px_3px_0_var(--color-pink)] transition-all duration-100 ease-in-out;
+}
+
+.sponsor-btn:hover {
+    @apply -translate-x-0.5 -translate-y-0.5 shadow-[5px_5px_0_var(--color-pink)];
+}
+</style>

app/layouts/default.vue

@@ -0,0 +1,6 @@
+<template>
+    <div>
+        <Nav />
+        <slot />
+    </div>
+</template>

app/pages/[...slug].vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-
-const { data: page } = await useAsyncData('page-' + route.path, () => {
-  return queryCollection('content').path(route.path).first()
-})
-
-if (!page.value) {
-  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
-}
-</script>
-
-<template>
-  <ContentRenderer
-    v-if="page"
-    :value="page"
-  />
-</template>

app/pages/blog/[...slug].vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const route = useRoute();
+
+const { data: page } = await useAsyncData("page-" + route.path, () => {
+    return queryCollection("blog").path(route.path).first();
+});
+
+if (!page.value) {
+    throw createError({
+        statusCode: 404,
+        statusMessage: "Page not found",
+        fatal: true,
+    });
+}
+</script>
+
+<template>
+    <article
+        class="prose prose-invert prose-orange m-auto min-h-[70%] max-w-screen-lg px-12 pb-20"
+    >
+        <ContentRenderer v-if="page" :value="page" />
+    </article>
+</template>
+
+<style>
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+h1 {
+    @apply text-5xl font-extrabold pb-8 pt-12;
+}
+</style>

content.config.ts

@@ -1,10 +1,17 @@
-import { defineContentConfig, defineCollection } from '@nuxt/content'
+import { defineContentConfig, defineCollection } from "@nuxt/content";
+import { z } from "zod";
 
 export default defineContentConfig({
-  collections: {
+    collections: {
-    content: defineCollection({
+        blog: defineCollection({
-      type: 'page',
+            type: "page",
-      source: '**',
+            source: "blog/*.md",
-    }),
+            // Define custom schema for docs collection
-  },
+            schema: z.object({
-})
+                tags: z.array(z.string()),
+                date: z.date(),
+                author: z.string(),
+            }),
+        }),
+    },
+});

content/about.md

@@ -1,3 +0,0 @@
-# About Content Version 3
-
-[Back home](/)

content/blog/2026-02-06.md

@@ -0,0 +1,11 @@
+---
+date: 2026-02-06
+author: [BjornTheProgrammer](https://github.com/BjornTheProgrammer)
+---
+
+# Pumpkin Week 1 Updates
+
+Some updates occured this week.
+
+
+[Back home](/)

content/blog/2026-02-07.md

@@ -0,0 +1,11 @@
+---
+date: 2026-02-07
+author: [BjornTheProgrammer](https://github.com/BjornTheProgrammer)
+---
+
+# Pumpkin Week 2 Updates
+
+Some updates occured this week.
+
+
+[Back home](/)

content/blog/index.md

@@ -0,0 +1,4 @@
+# Blog
+
+::BlogList
+::

content/index.md

@@ -1,24 +0,0 @@
-# Welcome to Nuxt Content Starter
-
-This is the main page displaying Markdown located at [content/index.md](https://github.com/nuxt/starter/blob/content/content/index.md).
-
-Move to [about](/about) page.
-
-## Manage your Contents
-
-Create new pages or modify the existing ones in `content/` directory.
-
-## Query & Render Pages
-
-You can find an example of querying contents and rendering them in a [catch-all page](https://github.com/nuxt/starter/blob/content/app/pages/%5B...slug%5D.vue)
-
-## Integrate Vue Component
-
-::alert{color="green"}
-The current [alert](https://github.com/nuxt/starter/blob/content/app/components/Alert.vue) and the [counter](https://github.com/nuxt/starter/blob/content/app/components/Counter.vue) below are `Vue` components integrated into the Markdown.
-::
-
-::counter
-::
-
-Checkout out the [documentation](https://content.nuxt.com/docs/getting-started) to learn more.

nuxt.config.ts

@@ -1,11 +1,12 @@
+import tailwindcss from "@tailwindcss/vite";
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: [
+    modules: ["@nuxt/content", "@nuxt/fonts", "@nuxt/image", "@nuxt/icon"],
-    '@nuxt/content',
+    devtools: { enabled: true },
-    '@nuxt/fonts',
+    compatibilityDate: "2024-04-03",
-    '@nuxt/image',
+    css: ["./assets/css/main.css"],
-    '@nuxt/icon',
+    vite: {
-  ],
+        plugins: [tailwindcss()],
-  devtools: { enabled: true },
+    },
-  compatibilityDate: '2024-04-03',
+});
-})

package.json

@@ -13,7 +13,13 @@
         "@nuxt/fonts": "^0.13.0",
         "@nuxt/icon": "^2.2.1",
         "@nuxt/image": "^2.0.0",
+        "@tailwindcss/vite": "^4.1.18",
         "better-sqlite3": "^12.6.2",
-        "nuxt": "^4.3.0"
+        "nuxt": "^4.3.0",
+        "tailwindcss": "^4.1.18",
+        "zod": "^4.3.6"
+    },
+    "devDependencies": {
+        "@tailwindcss/typography": "^0.5.19"
     }
 }