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>