sort blog articles by date

Author: Jässin

app/components/PostMeta.vue

@@ -1,7 +1,7 @@
 <template>
 	<Suspense>
 		<template #default>
-			<p class="min-h-4 text-[var(--background-400)]">{{ page?.meta.date }} · {{ wordCount }} words</p>
+			<p class="min-h-4 text-[var(--background-400)]">{{new Date(page?.date as string).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })  }} · {{ wordCount }} words</p>
 		</template>
 		<template #fallback>
 			<div class="animate-pulse">
@@ -14,7 +14,7 @@
 <script setup lang="ts">
 	const route = useRoute();
 
-	const { data: page } = await useAsyncData(route.path + "|meta", () => queryCollection("blog").select("body", "meta").path(route.path).first());
+	const { data: page } = await useAsyncData(route.path + "|meta", () => queryCollection("blog").select("body", "meta", "date").path(route.path).first());
 
 	const wordCount = computed(() => {
 		if (!page.value?.body) return 0;

app/pages/blog/index.vue

@@ -16,7 +16,7 @@
 							{{ post.title }}
 						</h2>
 						<div class="text-sm text-[var(--text-600)]">
-							{{ post.meta.date }}
+							{{ new Date(post.date as string).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })  }}
 						</div>
 						<div v-if="post.description" class="text-[var(--text-700)] mb-4">
 							{{ post.description }}
@@ -44,7 +44,8 @@ const { data: articles } = await useAsyncData("blogposts", () =>
 		.where("id", "NOT LIKE", "%.draft.md")
 		.where("title", "NOT LIKE", "Placeholder")
 		.where("title", "NOT LIKE", "%unlisted%")
-		.select("id", "meta", "path", "title", "description")
+		.select("id", "meta", "date", "path", "title", "description")
+		.order("date", "DESC")
 		.all()
 );
 

content.config.ts

@@ -1,4 +1,4 @@
-import { defineContentConfig, defineCollection } from "@nuxt/content";
+import { defineContentConfig, defineCollection, z } from "@nuxt/content";
 
 export default defineContentConfig({
 	collections: {
@@ -9,6 +9,13 @@ export default defineContentConfig({
 		blog: defineCollection({
 			type: "page",
 			source: "blog/**/*.md",
+			schema: z.object({
+				date: z.string(),
+        		meta: z.object({
+          			date: z.string(),
+          			image: z.string().optional()
+        		}),
+      		})
 		}),
 	},
 });

content/blog/Hosting my own Mailserver.md

@@ -4,7 +4,7 @@ description: My domain provider for my other domain doesn't offer E-Mail. So I
   was wondering how I can self-host a mailserver on my own. It turned out to be
   a lot more of a pain than expected, but here is my process.
 tags: docker, mail, email, self-host, mailserver
-date: 26.11.2024
+date: "2024-11-26"
 image: /images/blog-thumbnails/docker-mailserver.webp
 ---
 
@@ -36,10 +36,12 @@ Funnily enough, that doesn't change that the IP adress range of mine is **blackl
 Actually running the server is as easy as getting the files, setting up the .env variables and running `docker compose up -d`.
 
 ::code-with-copy-button
+
 ```bash [get-docker-mailserver.sh]
 wget "${DMS_GITHUB_URL}/compose.yaml"
 wget "${DMS_GITHUB_URL}/mailserver.env"
 ```
+
 ::
 
 Now your server should be running! Use `docker exec -ti <CONTAINER NAME> setup` to check out all the commands you'll need for adding users and stuff like that.

content/blog/I finally switched to Linux.md

@@ -2,7 +2,7 @@
 title: I finally switched to Linux!
 description: The enshittification of Windows has gotten to a point where users are actively looking for alternatives now. I was -wanting- to make the switch to Linux for a long time, but just never mustered up the courage to daily drive it for long enough. Until now!
 tags: docker, mail, email, self-host, mailserver
-date: 15.02.2026
+date: "2026-02-15"
 image: /images/blog-thumbnails/linux.webp
 ---
 

content/blog/My Website with Nuxt Content.md

@@ -4,7 +4,7 @@ description: In November 2024 I decided to rewrite my website, since it was
   outdated and I decided that it needed a touch up. Here's the process of how I
   did it, and what decisions I made along the way.
 tags: website, content, vue, nuxt, github, docker, blog
-date: 23.11.2024
+date: "2024-11-23"
 image: /images/blog-thumbnails/probablyjassin.webp
 ---
 
@@ -17,22 +17,24 @@ image: /images/blog-thumbnails/probablyjassin.webp
 What was clear from the start, is that I wanted to use [Nuxt.js](https://nuxt.com/) (based on [Vue](https://vuejs.org)), since that's what I know best and prefer.
 
 ::code-with-copy-button
+
 ```vue [page.vue]
 <script setup>
-    import { ref } from "vue";
-    const count = ref(0);
+import { ref } from "vue";
+const count = ref(0);
 </script>
 
 <template>
-    <button @click="count++">Count is: {{ count }}</button>
+  <button @click="count++">Count is: {{ count }}</button>
 </template>
 
 <style scoped>
-    button {
-        font-weight: bold;
-    }
+button {
+  font-weight: bold;
+}
 </style>
 ```
+
 ::
 
 I find single-file components to be pretty simple and easy to get behind. It's not the most popular framework, but it has a great community with great support for what matters to me:
@@ -60,6 +62,7 @@ The challenge is that Nuxt Content seemingly requires [SSR (Server Side Renderin
 So here is the current pipeline for how my Website is deployed:
 
 ::code-with-copy-button
+
 ```yaml [workflow.yml]
 jobs:
   build-and-push:
@@ -80,11 +83,13 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 ```
+
 ::
 
 We log into the container registry and checkout the codebase to get ready for building
 
 ::code-with-copy-button
+
 ```yaml [workflow.yml]
 - name: Check for existing cache
         id: cache-check
@@ -119,11 +124,13 @@ We log into the container registry and checkout the codebase to get ready for bu
           restore-keys: |
             ${{ runner.os }}-buildx-
 ```
+
 ::
 
 We want to cache the Docker layers to improve the time it takes to run this workflow, but also have to manage deleting this cache if it became invalid. Same goes for old package versions. GitHub keeps these around by default, but for a project like this, I don't want that. So I made the workflow delete them.
 
 ::code-with-copy-button
+
 ```yaml [workflow.yml]
 - name: Build and push Docker image
         uses: docker/build-push-action@v6
@@ -136,6 +143,7 @@ We want to cache the Docker layers to improve the time it takes to run this work
           cache-from: type=local,src=/tmp/.buildx-cache
           cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
 ```
+
 ::
 
 And at last, we build and push the Docker Image, to be pulled down by me and hosted.

content/blog/Self-Hosting projects without exposing the home network.draft.md

@@ -2,7 +2,7 @@
 title: Self Hosting Projects Without Exposing The Home Network
 description: Most of the websites and projects I make are self-hosted. But how
   is this done without exposing my home network?
-date: 23.11.2024
+date: "2024-11-13"
 image: /images/blog-thumbnails/probablyjassin.webp
 ---
 

content/blog/a-small-rant-on-the-horrible-website-my-university-uses.md

@@ -1,7 +1,7 @@
 ---
 title: A small rant on the website my university uses
 description: As with most Schools and Universities (especially in Germany), my Unis website is very old.  These are my biggest problems with their page, and what I alternatives we found
-date: 20.10.2025
+date: "2025-10-20"
 image: /images/blog-thumbnails/sap.webp
 ---
 

content/blog/cs24-stunden.md

@@ -1,6 +1,6 @@
 ---
 title: unlisted
-date: 28.10.2025
+date: 2025-10-28
 thumbnail: /images/blog-images/cs24-stunden/aufmerksamkeit.webp
 description:
   Helluuu, die ominöse Zahl von 70% Anwesenheit lässt sich ja bekanntlich nie