SEO

frontend/app/components/content/BlogEntryList.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+interface Post {
+  slug: string;
+  title: string;
+  date: string;
+  description: string;
+}
+
+defineProps<{
+  posts: Post[];
+  linkTo?: (slug: string) => string;
+}>();
+</script>
+
+<template>
+  <section class="blog-section">
+    <ul class="tui-list">
+      <li v-for="post in posts" :key="post.slug" class="blog-entry">
+        <NuxtLink v-if="linkTo" class="entry-link" :to="linkTo(post.slug)">
+          <span class="entry-title">{{ post.title }}</span>
+        </NuxtLink>
+        <NuxtLink v-else class="entry-link" :to="`#${post.slug}`">
+          <span class="entry-title">{{ post.title }}</span>
+        </NuxtLink>
+        <span class="entry-meta">[{{ post.date }}] {{ post.description }}</span>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.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-size: 1rem;
+  transition: all 0.1s steps(2, end);
+}
+
+.entry-meta {
+  color: var(--color-text);
+  font-size: 0.8rem;
+  opacity: 0.6;
+}
+
+@media screen and (max-width: 600px) {
+  .blog-entry {
+    padding: 6px 12px;
+  }
+
+  .entry-title {
+    font-size: 0.9rem;
+  }
+}
+</style>