Big commit

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

@@ -0,0 +1,42 @@
+<script setup>
+import MinimalHeader from '~/components/parts/MinimalHeader.vue';
+import PageHeader from '~/components/parts/PageHeader.vue';
+
+const slug = useRoute().params.slug;
+const { locale } = useI18n();
+
+const { data: post } = await useAsyncData(`art-${slug}`, () => 
+  queryCollection(`art`).path(`/art/${locale.value}/${slug}`).first()
+, {watch: [locale]})
+</script>
+
+<template>
+  <!-- Render the blog post as Prose & Vue components -->
+  <MinimalHeader></MinimalHeader>
+  <div class="extended-container">
+    <ContentRenderer :value="post" class="art" />
+  </div>
+</template>
+
+<style lang="scss">
+.extended-container {
+    width: 100%;
+    margin: auto;
+}
+
+.art {
+    h2 {
+        a {
+            text-decoration: none;
+            color: var(--color-text);
+        }   
+    }
+
+    img {
+        margin: auto;
+        display: flex;
+        max-height: 77vh;
+        max-width: 100%;
+    }
+}
+</style>

frontend/app/pages/art/index.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { routeLocationKey } from 'vue-router';
+import FixedLayout from '~/components/layouts/FixedLayout.vue';
+import TableHeader from '~/components/parts/TableHeader.vue';
+
+const { locale } = useI18n();
+const localePath = useLocalePath()
+
+const {data: posts} = useAsyncData('art-posts', async () => 
+await queryCollection(`art`).where('path', 'LIKE', `/art/${locale.value}/%`).order('date', 'DESC').all()
+, {watch: [locale, () => useRoute().path]});
+
+</script>
+
+<template>
+    <TableHeader></TableHeader>
+
+    <FixedLayout>
+        <Container>
+            <div class="grid">
+                <NuxtLink v-for="art in posts"
+                :key="art.slug"
+                class="selector"
+                :style="`background-image: url('${art.thumb}');`"
+                :to="localePath(`/art/${art.slug}`)">
+                    <div class="overlay-text">{{ art.title }}</div>
+                </NuxtLink>
+                
+                <!-- 
+                <div class="selector" style="background-image: url('/art/nozt/nozt-full-low.png');">
+                    <div class="overlay-text">Test</div>
+                </div>
+
+                <div class="selector" style="background-image: url('/art/knocking/knocking-low.png');">
+                    <div class="overlay-text">Test</div>
+                </div>
+
+                <div class="selector" style="background-image: url('/art/valentin/valentin.png');">
+                    <div class="overlay-text">Test</div>
+                </div>
+
+                <div class="selector" style="background-image: url('/art/miirym/miirym.png');">
+                    <div class="overlay-text">Test</div>
+                </div>
+
+                <div class="selector" style="background-image: url('/art/silang-3d/silang-3d.png');">
+                    <div class="overlay-text">Test</div>
+                </div>
+
+                <div class="selector" style="background-image: url('/art/yharon/yharon.png'); background-position-y: 0px;">
+                    <div class="overlay-text">Test</div>
+                </div>
+                -->
+            </div>
+        </Container>
+    </FixedLayout>
+    <Footer></Footer>
+</template>
+
+<style lang="scss" scoped>
+.grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(250px, 1fr));
+    gap: 16px;
+    padding: 40px 20px 40px 20px;
+}
+.selector {
+    width: 100%;
+    height: 250px;
+    background-size: cover;
+    background-position: center;
+    border-radius: 12px;
+    overflow: hidden;
+    position: relative;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+.selector:hover {
+    transform: scale(1.03);
+}
+
+.overlay-text {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    color: white;
+    font-size: 18px;
+    font-weight: bold;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
+    pointer-events: none;
+}
+h2 {
+    margin-left: 20px;
+}
+
+p {
+    margin-left: 30px;
+}
+
+.two-columns {
+    display: flex;
+    width: 100%;
+}
+
+@media (max-width: 900px) {
+    .grid {
+        grid-template-columns: repeat(2, minmax(250px, 1fr));
+    }
+}
+
+@media (max-width: 500px) {
+    .grid {
+        grid-template-columns: 1fr;
+    }
+}
+</style>

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

@@ -1,4 +1,5 @@
 <script setup>
+import FixedLayout from '~/components/layouts/FixedLayout.vue';
 import PageHeader from '~/components/parts/PageHeader.vue';
 
 const slug = useRoute().params.slug;
@@ -12,9 +13,11 @@ const { data: post } = await useAsyncData(`blog-${slug}`, () =>
 <template>
   <!-- Render the blog post as Prose & Vue components -->
   <PageHeader></PageHeader>
-  <Container>
-    <ContentRenderer :value="post" class="blog" />
-  </Container>
+  <FixedLayout>
+    <Container>
+      <ContentRenderer :value="post" class="blog" />
+    </Container>
+  </FixedLayout>
   <Footer></Footer>
 </template>
 

frontend/app/pages/blog/index.vue

@@ -1,28 +1,35 @@
 <script setup lang="ts">
 import TableHeader from '~/components/parts/TableHeader.vue';
 import { useAsyncData } from '#app';
+import FixedLayout from '~/components/layouts/FixedLayout.vue';
 const { locale } = useI18n();
 const localePath = useLocalePath()
 
-const {data: posts} = useAsyncData('posts', async () => 
+const {data: posts, refresh} = useAsyncData('blog-posts', async () => 
 await queryCollection(`blog`).where('path', 'LIKE', `/blog/${locale.value}/%`).order('date', 'DESC').all()
-, {watch: [locale]});
+, {watch: [locale, () => useRoute().path]});
+
+onActivated(() => {
+  refresh();
+});
 </script>
 
 <template>
     <TableHeader></TableHeader>
-    <Container>
-    <h2>Blog</h2>
-    <ul>
-      <li v-for="post in posts" :key="post.slug">
-        <NuxtLink :to="localePath({ name: 'blog-slug', params: { slug: post.slug } })">{{ post.title }}</NuxtLink>
-        <span class="dash">-</span>
-        <span>{{ post.date }}</span>
-        <span class="dash">-</span>
-        <span>{{ post.description }}</span>
-      </li>
-    </ul>
-    </Container>
+    <FixedLayout>
+      <Container>
+      <h2>Blog</h2>
+      <ul>
+        <li v-for="post in posts" :key="post.slug">
+          <NuxtLink :to="localePath({ name: 'blog-slug', params: { slug: post.slug } })">{{ post.title }}</NuxtLink>
+          <span class="dash">-</span>
+          <span>{{ post.date }}</span>
+          <span class="dash">-</span>
+          <span>{{ post.description }}</span>
+        </li>
+      </ul>
+      </Container>
+    </FixedLayout>
     <Footer></Footer>
 </template>
 

frontend/app/pages/contact/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import TableHeader from '~/components/parts/TableHeader.vue';
+import FixedLayout from '~/components/layouts/FixedLayout.vue';
 
 const { get, post } = api();
 const { locale } = useI18n();
@@ -14,9 +15,11 @@ const { data: markdown } = await useAsyncData(`fixed`, async () =>
 <template>
     <TableHeader></TableHeader>
 
-    <Container>
-      <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
-    </Container>
+    <FixedLayout>
+        <Container>
+            <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
+        </Container>
+    </FixedLayout>
     <Footer></Footer>
 </template>
 

frontend/app/pages/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import FixedLayout from '~/components/layouts/FixedLayout.vue';
 import TableHeader from '~/components/parts/TableHeader.vue';
 import api from '~/composables/api'
 
@@ -23,8 +24,11 @@ onMounted(async () => {
 
 <template>
   <TableHeader></TableHeader>
-  <Container>
+  
+  <FixedLayout>
+    <Container>
       <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
-  </Container>
+    </Container>    
+  </FixedLayout>
   <Footer></Footer>
 </template>