feat(blog): add blog section with Nuxt Content and Valibot schemas

app/assets/css/main.css

@@ -1,5 +1,7 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
+
+@source "../../../content/**/*";
 @import "tw-animate-css";
 @import "./keyframes.css";
 @import "./utilities.css";

app/components/SocialLinks.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="flex items-center">
+		<UButton
+			icon="i-simple-icons-discord"
+			to="https://join.wolfstar.rocks"
+			,
+			target="_blank"
+			variant="ghost"
+			color="neutral"
+			size="xs"
+		>
+			<span class="sr-only">Nuxt on Discord</span>
+		</UButton>
+		<UButton
+			icon="i-simple-icons-github"
+			to="https://github.com/wolfstar-project"
+			,
+			target="_blank"
+			variant="ghost"
+			color="neutral"
+			size="xs"
+		>
+			<span class="sr-only">Nuxt on GitHub</span>
+		</UButton>
+	</div>
+</template>

app/composables/useBlog.ts

@@ -0,0 +1,30 @@
+import type { BlogArticle } from "~/types";
+
+export const useBlog = () => {
+	const { data: articles, refresh } = useAsyncData<BlogArticle[]>(
+		"blog",
+		async () => {
+			return (
+				queryCollection("blog")
+					.where("extension", "=", "md")
+					/* .select('title', 'date', 'image', 'description', 'path', 'authors', 'category') */
+					.order("date", "DESC")
+					.all()
+					.then((res) => res.filter((article) => article.path !== "/blog"))
+			);
+		},
+		{ default: () => [] },
+	);
+
+	async function fetchList() {
+		if (!articles.value?.length) {
+			return refresh();
+		}
+	}
+
+	return {
+		articles,
+		// featuredArticle,
+		fetchList,
+	};
+};

app/composables/useClipboard.ts

@@ -0,0 +1,34 @@
+import { useClipboard as _useClipboard } from "@vueuse/core";
+
+type toastOptions = {
+	title?: string;
+	description?: string;
+	icon?: string;
+	color?:
+		| "primary"
+		| "secondary"
+		| "info"
+		| "success"
+		| "warning"
+		| "error"
+		| "important"
+		| "neutral";
+};
+
+export const useClipboard = () => {
+	const { copy: _copy, copied } = _useClipboard();
+
+	const toast = useToast();
+
+	const copy = (source: string, optionsOptions?: toastOptions) => {
+		_copy(source);
+		if (optionsOptions) {
+			toast.add(optionsOptions);
+		}
+	};
+
+	return {
+		copy,
+		copied,
+	};
+};

app/composables/useFooter.ts

@@ -22,7 +22,7 @@ export const useFooter = () => {
 					class: "link-hover",
 					icon: "ph:newspaper-clipping-duotone",
 					label: "Blog",
-					to: "https://blog.wolfstar.rocks",
+					to: "/blog",
 					ui: { linkLeadingIcon: "bg-primary" },
 				},
 			],

app/composables/useHeader.ts

@@ -55,6 +55,10 @@ export function useHeader() {
 			label: "Commands",
 			to: "/commands",
 		},
+		{
+			label: "Blog",
+			to: "/blog",
+		},
 	]);
 
 	const mobileLinks = computed(() => [
@@ -88,6 +92,10 @@ export function useHeader() {
 			label: "Commands",
 			to: "/commands",
 		},
+		{
+			label: "Blog",
+			to: "/blog",
+		},
 		...(currentApp.value.invite !== "#"
 			? [
 					{

app/pages/blog/[slug].vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { isNullOrUndefined } from "@sapphire/utilities/isNullOrUndefined";
+import { kebabCase } from "scule";
+
+const route = useRoute();
+const { copy } = useClipboard();
+
+const [{ data: article }, { data: surround }] = await Promise.all([
+	useAsyncData(kebabCase(route.path), () => queryCollection("blog").path(route.path).first()),
+	useAsyncData(`${kebabCase(route.path)}-surround`, () => {
+		return queryCollectionItemSurroundings("blog", route.path, {
+			fields: ["description"],
+		}).order("date", "DESC");
+	}),
+]);
+
+if (isNullOrUndefined(article.value)) {
+	throw createError({ statusCode: 404, statusMessage: "Article not found", fatal: true });
+}
+
+const title = article.value.seo?.title || article.value.title;
+const description = article.value.seo?.description || article.value.description;
+
+useSeoMeta({
+	titleTemplate: "%s · Wolfstar Blog",
+	title,
+	description,
+	ogDescription: description,
+	ogTitle: `${title} · Wolfstar Blog`,
+});
+
+if (article.value.image) {
+	defineOgImage({ url: article.value.image });
+} else {
+	defineOgImageComponent("Docs", {
+		headline: "Blog",
+		title,
+		description,
+	});
+}
+
+function formatSocialIntentQueryText(handle: string | undefined): string {
+	const credit = handle ? ` by @${handle}` : "";
+	const body = article.value!.title + credit;
+	const link = `${getOrigin()}${article.value!.path}`;
+	return encodeURIComponent(`${body}\n\n${link}`);
+}
+
+const authorHandles: { twitter?: string; bluesky?: string } = {
+	twitter: article.value.authors?.[0]?.twitter,
+	bluesky: article.value.authors?.[0]?.bluesky,
+};
+
+const socialLinks = computed(() =>
+	!article.value
+		? []
+		: [
+				{
+					label: "Bluesky",
+					icon: "i-simple-icons-bluesky",
+					to: `https://bsky.app/intent/compose?text=${formatSocialIntentQueryText(authorHandles.bluesky)}`,
+				},
+				{
+					label: "X",
+					icon: "i-simple-icons-x",
+					to: `https://x.com/intent/tweet?text=${formatSocialIntentQueryText(authorHandles.twitter)}`,
+				},
+			],
+);
+
+function copyLink() {
+	copy(`${getOrigin()}${article.value?.path || "/"}`, {
+		title: "Link copied to clipboard",
+		icon: "i-lucide-copy-check",
+	});
+}
+
+const links = [
+	{
+		icon: "i-lucide-pen",
+		label: "Edit this article",
+		to: `https://github.com/wolfstar-project/wolfstar.rocks/edit/main/content/${article.value.stem}.md`,
+		target: "_blank",
+	},
+	{
+		icon: "i-lucide-star",
+		label: "Star on GitHub",
+		to: "https://github.com/wolfstar-project/wolfstar.rocks",
+		target: "_blank",
+	},
+];
+</script>
+
+<template>
+	<UContainer>
+		<UPage v-if="article">
+			<UPageHeader
+				:title="article.title"
+				:description="article.description"
+				:ui="{ headline: 'flex flex-col gap-y-8 items-start' }"
+			>
+				<template #headline>
+					<UBreadcrumb
+						:items="[
+							{ label: 'Blog', icon: 'i-lucide-newspaper', to: '/blog' },
+							{ label: article.title },
+						]"
+						class="max-w-full"
+					/>
+					<div class="flex items-center space-x-2">
+						<span>
+							{{ article.category }}
+						</span>
+						<span class="text-muted"
+							>&middot;&nbsp;&nbsp;<time>{{
+								new Date(article.date).toLocaleDateString("en", {
+									year: "numeric",
+									month: "short",
+									day: "numeric",
+								})
+							}}</time></span
+						>
+					</div>
+				</template>
+
+				<div class="mt-4 flex flex-wrap items-center gap-6">
+					<UUser
+						v-for="(author, index) in article.authors"
+						:key="index"
+						v-bind="author"
+						:description="author.to ? `@${author.to.split('/').pop()}` : undefined"
+					/>
+				</div>
+			</UPageHeader>
+
+			<UPage class="lg:gap-24">
+				<UPageBody>
+					<ContentRenderer v-if="article.body" :value="article" />
+
+					<div class="not-prose mt-12 flex items-center justify-between">
+						<ULink to="/blog" class="text-primary"> ← Back to blog </ULink>
+						<div class="flex items-center justify-end gap-1.5">
+							<UButton
+								icon="i-lucide-link"
+								variant="ghost"
+								color="neutral"
+								@click="copyLink"
+							>
+								<span class="sr-only">Copy URL</span>
+								Copy URL
+							</UButton>
+							<UButton
+								v-for="(link, index) in socialLinks"
+								:key="index"
+								v-bind="link"
+								variant="ghost"
+								color="neutral"
+								target="_blank"
+							>
+								<span class="sr-only">Wolfstar on {{ link.label }}</span>
+							</UButton>
+						</div>
+					</div>
+
+					<USeparator v-if="surround?.length" />
+
+					<UContentSurround :surround="surround" />
+				</UPageBody>
+
+				<template #right>
+					<UContentToc
+						v-if="article.body && article.body.toc"
+						:links="article.body.toc.links"
+						title="Table of Contents"
+						highlight
+					>
+						<template #bottom>
+							<div class="hidden space-y-6 lg:block">
+								<UPageLinks title="Links" :links="links" />
+								<USeparator type="dashed" />
+								<SocialLinks />
+							</div>
+						</template>
+					</UContentToc>
+				</template>
+			</UPage>
+		</UPage>
+	</UContainer>
+</template>

app/pages/blog/index.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+const { data: page } = await useAsyncData("blog-landing", () => queryCollection("blog").first());
+if (!page.value) {
+	throw createError({ statusCode: 404, statusMessage: "Page not found", fatal: true });
+}
+
+const { articles, fetchList } = useBlog();
+
+useSeoMeta({
+	titleTemplate: "%s",
+	title: page.value.title,
+	description: page.value.description,
+	ogDescription: page.value.description,
+	ogTitle: page.value.title,
+});
+</script>
+
+<template>
+	<UContainer v-if="page">
+		<UPageHero :title="page.title" :description="page.description" orientation="horizontal">
+		</UPageHero>
+
+		<UPageBody>
+			<UContainer>
+				<UBlogPosts class="mb-12 md:grid-cols-2 lg:grid-cols-3">
+					<h2 class="sr-only">Post</h2>
+					<UBlogPost
+						v-for="(article, index) in articles"
+						:key="article.path"
+						:to="article.path"
+						:title="article.title"
+						:description="article.description"
+						:image="{
+							src: article.image,
+							width: index === 0 ? 672 : 437,
+							height: index === 0 ? 378 : 246,
+							alt: `${article.title} image`,
+						}"
+						:date="
+							new Date(article.date).toLocaleDateString('en', {
+								year: 'numeric',
+								month: 'short',
+								day: 'numeric',
+							})
+						"
+						:authors="
+							article.authors.map((author) => ({
+								...author,
+								avatar: {
+									...author.avatar,
+									loading: 'lazy',
+									alt: `${author.name} avatar`,
+								},
+							}))
+						"
+						:badge="{ label: article.category, color: 'primary', variant: 'subtle' }"
+						:variant="index === 0 ? 'outline' : 'subtle'"
+						:orientation="index === 0 ? 'horizontal' : 'vertical'"
+						:class="[index === 0 && 'col-span-full']"
+					/>
+				</UBlogPosts>
+			</UContainer>
+		</UPageBody>
+	</UContainer>
+</template>

app/types/blog.ts

@@ -0,0 +1,3 @@
+import type { BlogCollectionItem } from "@nuxt/content";
+
+export type BlogArticle = BlogCollectionItem;