aranroig.com/frontend/app/pages/blog/index.vue

<script setup lang="ts">
import TableHeader from '~/components/parts/TableHeader.vue';
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 () => 
await queryCollection(`blog`).where('path', 'LIKE', `/blog/${locale.value}/%`).order('date', 'DESC').all()
, {watch: [locale, () => useRoute().path]});

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>
    <div class="no-sprite">
      <TableHeader></TableHeader>
    </div>
    <FixedLayout>
      <Container>
        <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>
.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;
  }
}

.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>

<style lang="scss">
.no-sprite .undertable-wrapper {
  display: none;
}
</style>