Blogs

frontend/app/app.vue

@@ -27,7 +27,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .container {
   align-items: stretch;   /* make items grow horizontally to fill container */
-  margin-top: 350px;
   margin-bottom: 30px;
   display: flex;
   flex-direction: column;

frontend/app/components/Sprite.vue

@@ -64,5 +64,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .sprite {
     position: absolute;
+    z-index: 1;
 }
 </style>

frontend/app/components/parts/HeaderLinks.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="menus">
+        <NuxtLink href="/">About</NuxtLink>
+        <NuxtLink href="/blog">Blogs</NuxtLink>
+        <NuxtLink class="disabled" href="/drawings">Drawings</NuxtLink>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.menus {
+    margin-bottom: 10px;
+}
+
+.menus > a {
+    margin-right: 20px;
+}
+
+.disabled {
+    color: #aaaaaa77;
+}
+</style>

frontend/app/components/parts/PageHeader.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import HeaderLinks from './HeaderLinks.vue';
+
+</script>
+
+<template>
+    <div class="header">
+        <Container>
+            <h1>ARANROIG.COM</h1>
+            <HeaderLinks></HeaderLinks>
+        </Container>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.header {
+    position: relative;
+    margin-top: 50px;
+    user-select: none;
+}
+</style>

frontend/app/components/parts/TableHeader.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import HeaderLinks from './HeaderLinks.vue';
+
+</script>
+
+<template>
+    <div class="undertable">
+        <h1>ARANROIG.COM</h1>
+        <HeaderLinks></HeaderLinks>
+        <Sprite path="/sprites/alfadir/" frames="13" fps="6" top="-258px" left="-65px" width="1300"></Sprite> 
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.undertable {
+    position: relative;
+    margin-top: 350px;
+    margin-left: 80px;
+    margin-bottom: 25px;
+    user-select: none;
+}
+</style>

frontend/app/pages/blog/[slug].vue

@@ -0,0 +1,36 @@
+<script setup>
+import PageHeader from '~/components/parts/PageHeader.vue';
+
+const slug = useRoute().params.slug;
+const { locale } = useI18n();
+
+const { data: post } = await useAsyncData(`blog-${slug}`, () => {
+  return queryCollection(`blog_${locale.value}`).path(`/blog/${locale.value}/${slug}`).first()
+})
+</script>
+
+<template>
+  <!-- Render the blog post as Prose & Vue components -->
+  <PageHeader></PageHeader>
+  <Container>
+    <ContentRenderer :value="post" class="blog" />
+  </Container>
+  <Footer></Footer>
+</template>
+
+<style lang="scss">
+.blog {
+    h2 {
+        a {
+            text-decoration: none;
+            color: var(--color-text);
+        }   
+    }
+
+    img {
+        margin: auto;
+        display: flex;
+        max-height: 400px;
+    }
+}
+</style>

frontend/app/pages/blog/index.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import TableHeader from '~/components/parts/TableHeader.vue';
+import { useAsyncData } from '#app';
+const { locale } = useI18n();
+
+const {data: posts} = useAsyncData('posts', async () => 
+await queryCollection(`blog_${locale.value}`).order('date', 'DESC').all()
+);
+
+console.log(await queryCollection(`blog_${locale.value}`).order('date', 'DESC').all());
+
+</script>
+
+<template>
+    <TableHeader></TableHeader>
+    <Container>
+    <h2>Blog</h2>
+    <ul>
+      <li v-for="post in posts" :key="post.slug">
+        <NuxtLink :to="`/blog/${post.slug}`">{{ post.title }}</NuxtLink>
+        <span class="dash">-</span>
+        <span>{{ post.date }}</span>
+        <span class="dash">-</span>
+        <span>{{ post.description }}</span>
+      </li>
+    </ul>
+    </Container>
+    <Footer></Footer>
+</template>
+
+<style lang="scss" scoped>
+.dash 
+{
+  margin-left: 10px;
+  margin-right: 10px;
+}
+</style>

frontend/app/pages/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import TableHeader from '~/components/parts/TableHeader.vue';
 import api from '~/composables/api'
 const { get, post } = api();
 
@@ -14,17 +15,9 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div class="undertable">
-        <h1>ARANROIG.COM</h1>
-        <div class="menus">
-            <a href="/">About</a>
-            <a class="disabled">Blogs</a>
-            <a class="disabled">Drawings</a>
-        </div>
-    </div>
+    <TableHeader></TableHeader>
 
-    <Container style="width: max-width;">
-        <Sprite path="/sprites/alfadir/" frames="13" fps="6" top="-418px" left="-5px" width="1300"></Sprite> 
+    <Container>
     <h2>About</h2>
         <p>
             I'm Aran. Welcome to my website! It will always remain under development.
@@ -86,20 +79,6 @@ onMounted(async () => {
 </template>
 
 <style lang="scss" scoped>
-.undertable {
-    margin-left: 80px;
-    margin-bottom: 25px;
-    user-select: none;
-
-    .menus > a {
-        margin-right: 20px;
-    }
-
-    .disabled {
-        color: #aaaaaa77;
-    }
-}
-
 h2 {
     margin-left: 20px;
 }

frontend/content.config.ts

@@ -0,0 +1,39 @@
+import { defineContentConfig, defineCollection } from '@nuxt/content'
+import { z } from 'zod'
+
+export default defineContentConfig({
+  collections: {
+    blog_en: defineCollection({
+      type: 'page',
+      source: 'blog/en/*.md',
+      schema: z.object({
+        title: z.string(),
+        slug: z.string(),
+        date: z.string(),
+        description: z.string()
+      })
+    }),
+
+    blog_es: defineCollection({
+      type: 'page',
+      source: 'blog/en/*.md',
+      schema: z.object({
+        title: z.string(),
+        slug: z.string(),
+        date: z.string(),
+        description: z.string()
+      })
+    }),
+
+    blog_ca: defineCollection({
+      type: 'page',
+      source: 'blog/en/*.md',
+      schema: z.object({
+        title: z.string(),
+        slug: z.string(),
+        date: z.string(),
+        description: z.string()
+      })
+    })
+  }
+})

frontend/content/blog/en/test.md

@@ -0,0 +1,50 @@
+---
+title: First Post
+description: Testint test testong
+date: 2026-03-18
+slug: test
+---
+
+# Test
+This is the **content** of the first post.
+
+I think it works for now!
+
+## So...
+
+Welcome to aranroig.com! I finally build it, it feels like a very important milestone. At the moment I'm able to write simple markdown documents
+and displaying it as plain html with custom classes and a lot of other things. So, publishing new blog posts will be very easy, its just doing
+a commit and pushing to master, and all the CI/CD pipeline will take about the rest.
+
+The architecture of the website is very simple but also a bit complicated.
+
+First of all, I am tunneling the connexions from a VPS to my homelab, since I am still trapped behind a CG-NAT. All traffic is redirected from
+the VPS to my home using WireGuard. It is really easy to configure, it was just two different config files.
+
+At my homelab I have installed a [Proxmox Virtual Environment](https://www.proxmox.com). Proxmox lets you use a computer as a server, where you can create VMs and also LXC containers, which are separate instances of containers but they all share the same kernel of the host machine. Docker is built above LXC containers. These containers are also very efficient, since they share the same kernel. But if one kernel panics, so does the other ones, since they share the same kernel.
+
+So, the incomming connexions go to a LXC container which has nginx and within a internal network these requests are distributed to different places, such as this website, my personal [gitea server](https://git.aranroig.com), an instance of [Navidrome](https://www.navidrome.org/), and another one of [Immich](https://immich.app/), just to name a few.
+
+I have also another LXC container that has a gitea worker in it. I have configured my repository so that every push in master it builds a docker image of the frontend and the backend of this website and then publishes them inside the gitea server, and another LXC container where everything is hosted pulls back the images and deploys them. This setup could be even get more crazier but for me this is already enough.
+
+I have no idea of what I can place here let me put an image
+
+![Image](/blogs/pukeko.png)
+
+Oh yeah of course it works!
+
+> Identated
+
+- Some
+- List
+- Elements
+
+Checklists are displayed wrong!
+
+- [ ] Checklist!
+- [x] Done
+- [ ] Not done
+
+## Anyways
+
+I should style in the future this a little bit. For now this just works as expected.

frontend/nuxt.config.ts

@@ -1,3 +1,5 @@
+import { defineCollection } from "@nuxt/content";
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
@@ -24,6 +26,5 @@ export default defineNuxtConfig({
     defaultLocale: 'en',
     langDir: 'locales/'
   },
-
-  modules: ['@nuxtjs/i18n']
+  modules: ['@nuxtjs/i18n', '@nuxt/content']
 })

frontend/package.json

@@ -10,7 +10,9 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@nuxt/content": "^3.12.0",
     "@nuxtjs/i18n": "10.2.3",
+    "better-sqlite3": "^12.8.0",
     "nuxt": "^4.3.1",
     "sass": "^1.98.0",
     "vue": "^3.5.30",