feat: explore atproto notes

src/components/Welcome.vue

@@ -4,6 +4,8 @@
   <section class="welcome">
     <about-me />
 
+    <blog-notes />
+
     <blog-posts />
 
     <my-projects />

src/components/notes/blog-notes.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { fetchNotes } from "@/api/fetch-notes"
+
+const notes = await fetchNotes()
+</script>
+
+<template>
+  <div class="blog-notes">
+    <h2>Last notes</h2>
+    <ul>
+      <li v-for="note in notes" :key="note.href">
+        <a :href="note.path">{{ note.title }}</a>
+      </li>
+    </ul>
+  </div>
+</template>

src/components/pub-layout.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="post">
+    <article id="main-article">
+      <slot />
+    </article>
+  </div>
+</template>
+
+<style lang="scss">
+article#main-article {
+  max-width: 740px;
+  margin: auto;
+  padding: 1rem;
+  text-align: justify;
+
+  li {
+    text-align: left;
+  }
+}
+
+h1 {
+  line-height: 1em;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6,
+h7 {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+img {
+  max-width: 100%;
+  display: flex;
+  margin: auto;
+}
+
+.header-post {
+  float: left;
+}
+
+table {
+  thead,
+  td {
+    text-align: center;
+  }
+}
+</style>