Basis of blog done
This commit is contained in:
Bjorn Beishline
parent
af008c1f6f
commit
ab06eb5902
@ -1,4 +1,6 @@
|
||||
<template>
|
||||
<NuxtRouteAnnouncer />
|
||||
<NuxtPage />
|
||||
</template>
|
||||
<NuxtRouteAnnouncer />
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
34
app/assets/css/main.css
Normal file
34
app/assets/css/main.css
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
39
app/components/BlogList.vue
Normal file
39
app/components/BlogList.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
87
app/components/Nav.vue
Normal file
87
app/components/Nav.vue
Normal file
@ -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>
|
||||
6
app/layouts/default.vue
Normal file
6
app/layouts/default.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<Nav />
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@ -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>
|
||||
32
app/pages/blog/[...slug].vue
Normal file
32
app/pages/blog/[...slug].vue
Normal file
@ -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>
|
||||
@ -1,10 +1,17 @@
|
||||
import { defineContentConfig, defineCollection } from '@nuxt/content'
|
||||
import { defineContentConfig, defineCollection } from "@nuxt/content";
|
||||
import { z } from "zod";
|
||||
|
||||
export default defineContentConfig({
|
||||
collections: {
|
||||
content: defineCollection({
|
||||
type: 'page',
|
||||
source: '**',
|
||||
}),
|
||||
},
|
||||
})
|
||||
collections: {
|
||||
blog: defineCollection({
|
||||
type: "page",
|
||||
source: "blog/*.md",
|
||||
// Define custom schema for docs collection
|
||||
schema: z.object({
|
||||
tags: z.array(z.string()),
|
||||
date: z.date(),
|
||||
author: z.string(),
|
||||
}),
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
# About Content Version 3
|
||||
|
||||
[Back home](/)
|
||||
11
content/blog/2026-02-06.md
Normal file
11
content/blog/2026-02-06.md
Normal file
@ -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](/)
|
||||
11
content/blog/2026-02-07.md
Normal file
11
content/blog/2026-02-07.md
Normal file
@ -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](/)
|
||||
4
content/blog/index.md
Normal file
4
content/blog/index.md
Normal file
@ -0,0 +1,4 @@
|
||||
# Blog
|
||||
|
||||
::BlogList
|
||||
::
|
||||
@ -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.
|
||||
@ -1,11 +1,12 @@
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'@nuxt/content',
|
||||
'@nuxt/fonts',
|
||||
'@nuxt/image',
|
||||
'@nuxt/icon',
|
||||
],
|
||||
devtools: { enabled: true },
|
||||
compatibilityDate: '2024-04-03',
|
||||
})
|
||||
modules: ["@nuxt/content", "@nuxt/fonts", "@nuxt/image", "@nuxt/icon"],
|
||||
devtools: { enabled: true },
|
||||
compatibilityDate: "2024-04-03",
|
||||
css: ["./assets/css/main.css"],
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
},
|
||||
});
|
||||
|
||||
30426
package-lock.json
generated
30426
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
3
public/images/icon.svg
Normal file
3
public/images/icon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.1 MiB |
Loading…
Reference in New Issue
Block a user