Use tags instead of subdescription, display date on articles

src/pages/articles/[slug].vue

@@ -4,6 +4,7 @@
 			<ArticlesTableOfContents v-if="article.navigation" :toc="article.body.toc" />
 
 			<h1>{{ article.title }}</h1>
+			<p><i><small>{{ prettyDate(article.date) }}</small></i></p>
 			<ContentRenderer :value="article" />
 		</template>
 		<template v-else>

src/pages/articles/index.vue

@@ -10,10 +10,13 @@
 			</div>
 			<div class="col-7 col-lg-8 col-xl-9">
 				<NuxtLink v-if="article.img" :to="article.path">
-					<h4><strong>{{ article.title }}</strong></h4>
+					<h4 class="mb-0"><strong>{{ article.title }}</strong></h4>
 				</NuxtLink>
-				{{ article.description }}<br>
-				<i><small>{{ article.sub }}</small></i>
+				<p><i><small>{{ prettyDate(article.date) }}</small></i></p>
+				<p>{{ article.description }}</p>
+				<template v-if="article.tags">
+					<p>Tags: <code>{{ article.tags.join(", ") }}</code></p>
+				</template>
 			</div>
 		</div>
 
@@ -38,6 +41,10 @@ a h4 {
 a h4:hover {
 	color: var(--bs-link-hover-color);
 }
+
+ code {
+	 color: var(--bs-link-color);
+ }
 </style>
 
 <script setup lang="ts">

src/utils/index.ts

@@ -1,8 +1,14 @@
 import { withTrailingSlash, withLeadingSlash, joinURL } from "ufo"
 import { useRuntimeConfig } from "#imports"
 
+/**
+ * Returns if environment is in development mode
+ */
 export const isDev = process.env.NODE_ENV === "development";
 
+/**
+ * Gets URL path, taking into acount the baseURL
+ */
 export const getPublicPath = function (path: string): string {
 	if (path?.startsWith("/") && !path.startsWith("//")) {
 		const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL));
@@ -10,7 +16,23 @@ export const getPublicPath = function (path: string): string {
 			return joinURL(_base, path);
 		}
 	}
+
 	return path;
 }
 
-// datetime format
+/**
+ * Return date string in format "Feb 10, 2025"
+ */
+export const prettyDate = function (date: string | Date): string {
+	if (typeof date === "string") {
+		date = new Date(date);
+	}
+
+	const formatted = new Intl.DateTimeFormat("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	}).format(date);
+
+	return formatted;
+}