A lot of AI slop

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

@@ -15,7 +15,7 @@ const { data: post } = await useAsyncData(`blog-${slug}`, () =>
   <PageHeader></PageHeader>
   <FixedLayout>
     <Container>
-      <ContentRenderer :value="post" class="blog" />
+      <ContentRenderer v-if="post" :value="post" class="blog" />
     </Container>
   </FixedLayout>
   <Footer></Footer>

frontend/app/pages/blog/index.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import TableHeader from '~/components/parts/TableHeader.vue';
+import MinimalHeader from '~/components/parts/MinimalHeader.vue';
 import { useAsyncData } from '#app';
 import FixedLayout from '~/components/layouts/FixedLayout.vue';
+import { ref, computed } from 'vue';
 const { locale } = useI18n();
+const { t } = useI18n();
 const localePath = useLocalePath()
 
 const {data: posts, refresh} = useAsyncData('blog-posts', async () => 
@@ -12,31 +14,154 @@ await queryCollection(`blog`).where('path', 'LIKE', `/blog/${locale.value}/%`).o
 onActivated(() => {
   refresh();
 });
+
+const BLOG_LIMIT = 5;
+const showAll = ref(false);
+
+const displayedPosts = computed(() => {
+  const allPosts = posts.value || [];
+  if (showAll.value || allPosts.length <= BLOG_LIMIT) return allPosts;
+  return allPosts.slice(0, BLOG_LIMIT);
+});
 </script>
 
 <template>
-    <TableHeader></TableHeader>
+    <MinimalHeader></MinimalHeader>
     <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>
+        <section class="blog-section">
+          <h2 class="section-title">BLOG ENTRIES</h2>
+          <ul class="tui-list">
+            <li v-for="post in displayedPosts" :key="post.slug" class="blog-entry">
+              <NuxtLink class="entry-link" :to="localePath({ name: 'blog-slug', params: { slug: post.slug } })">
+                <span class="entry-title">{{ post.title }}</span>
+              </NuxtLink>
+              <span class="entry-meta">[{{ post.date }}] {{ post.description }}</span>
+            </li>
+          </ul>
+           <p v-if="posts && posts.length > BLOG_LIMIT" class="show-more-toggle">
+             <button type="button" class="tui-link" @click="showAll = !showAll">{{ showAll ? t('pages.show_less') : t('pages.show_more') }}</button>
+           </p>
+        </section>
       </Container>
     </FixedLayout>
     <Footer></Footer>
 </template>
 
 <style lang="scss" scoped>
-.dash 
-{
-  margin-left: 10px;
-  margin-right: 10px;
+.section-title {
+  font-family: 'Hurmit', monospace;
+  color: var(--color-text);
+  font-size: 1.2rem;
+  letter-spacing: 0.5px;
+  margin: 28px 0 16px 0;
+  padding-left: 12px;
+  line-height: 1.3;
+
+  &::before {
+    content: "├";
+    color: var(--color-link);
+    margin-right: 8px;
+    font-weight: normal;
+  }
+
+  &::after {
+    content: '';
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background-color: var(--color-link);
+    margin-left: 10px;
+    vertical-align: middle;
+    box-shadow: 0 0 4px var(--color-link);
+    animation: blink-cursor 1s steps(1) infinite;
+  }
 }
-</style>
+
+.tui-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.blog-entry {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 16px;
+  border-left: 2px solid var(--color-border-color);
+  margin-bottom: 4px;
+  transition: all 0.1s steps(2, end);
+
+  &:hover {
+    border-left-color: var(--color-link);
+    background-color: var(--color-hover);
+  }
+
+  &::before {
+    display: none;
+  }
+}
+
+.entry-link {
+  text-decoration: none;
+  color: var(--color-text);
+
+  &:hover {
+    color: var(--color-link);
+    text-shadow: 0 0 6px var(--color-link);
+  }
+}
+
+.entry-title {
+  font-family: 'Hurmit', monospace;
+  font-size: 1rem;
+  transition: all 0.1s steps(2, end);
+}
+
+.entry-meta {
+  font-family: 'Hurmit', monospace;
+  color: var(--color-text);
+  font-size: 0.8rem;
+  opacity: 0.6;
+}
+
+.show-more-toggle {
+  margin-top: 12px;
+  padding-left: 14px;
+
+  button {
+    background: none;
+    border: none;
+    color: var(--color-link);
+    font-family: 'Hurmit', monospace;
+    font-size: 0.85rem;
+    cursor: pointer;
+    text-shadow: 0 0 4px var(--color-link);
+    padding: 0;
+
+    &:hover {
+      text-shadow: 0 0 10px var(--color-link), 0 0 3px var(--color-link);
+    }
+  }
+}
+
+@keyframes blink-cursor {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+@media screen and (max-width: 600px) {
+  .section-title {
+    font-size: 1rem;
+  }
+  
+  .blog-entry {
+    padding: 6px 12px;
+  }
+  
+  .entry-title {
+    font-size: 0.9rem;
+  }
+}
+</style>