Moved to Nuxt

NuxtJS, Vue, real web app

Nuxt content: blog

Better mobile/responsive design and practices

Better practices overall

app/pages/blog/index.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+defineOgImageComponent('Site', {
+  title: 'Blog'
+})
+
+const content = await queryCollection('blog').order('date', 'DESC').all()
+
+function formatDateString(dateString: string) : string {
+    let date = new Date(Date.parse(dateString))
+    return new Intl.DateTimeFormat("en-US", {
+        dateStyle: "long",
+        timeZone: "Europe/Paris",
+    }).format(date)
+}
+</script>
+
+<template>
+  <HeaderCompact title="Blog" previous-link="/" class="mb-20" />
+
+  <div class="m-auto lg:w-[56rem] w-[90%]" v-for="article in content">
+      <h1 class="text-2xl" v-if="article">{{ article.title }}</h1>
+      
+      <h3 class="text-xl" v-if="article">
+        {{ formatDateString(article.date) }}
+      </h3>
+      
+      <div class="flex">
+        <h4 v-for="tag in article.tags" 
+            class="p-1 bg-slate-100 mr-3 hover:cursor-pointer">
+          {{ tag }}
+        </h4>
+      </div>
+      
+      <h4 class="text-xl mt-2" v-if="article">{{ article.description }}</h4>
+      
+      <a :href="article.path">
+        <h2 class="text-xl text-right">[ Read more ]</h2>
+      </a>
+  </div>
+</template>