chore: optimize images

Drop the $uri/ directory step in try_files which triggered the default
403 page on directories without an index, and 302 any 403/404 back to /.

README.md

@@ -18,3 +18,15 @@ pnpm build        # build for production
 pnpm preview      # preview the production build on port 5050
 pnpm typecheck    # run vue-tsc
 ```
+
+## AT Protocol notes (`/pub`)
+
+Pages under `/pub/:rkey/:slug` are generated at build time from records
+published to my AT Protocol repository.
+
+- DID: `did:plc:4m3kouplb7s7xozjd3whinvl`
+- Collection: `site.standard.document`
+- PDS endpoint is resolved via [plc.directory](https://plc.directory),
+  then records are listed with `com.atproto.repo.listRecords`.
+
+See `src/api/fetch-notes.ts` and `src/pages/pub/[rkey]/[slug].vue`.

nginx.conf

@@ -4,7 +4,7 @@ server {
     location / {
         root /usr/share/nginx/html;
         index index.html index.htm;
-        try_files $uri $uri.html $uri/index.html $uri/index.htm $uri/ =404;
+        try_files $uri $uri.html $uri/index.html $uri/index.htm =404;
     }
 
     location /.well-known/ {
@@ -13,11 +13,7 @@ server {
         add_header Access-Control-Allow-Methods "GET, OPTIONS";
     }
 
-    error_page 404 /404.html;
-    location = /404.html {
-        root /usr/share/nginx/html;
-        internal;
-    }
+    error_page 403 404 =302 /;
 
     error_page 500 502 503 504 /50x.html;
     location = /50x.html {

src/api/fetch-notes.ts

@@ -34,5 +34,8 @@ export const fetchNotes = async (): Promise<Note[]> => {
     limit: 50,
   })
 
-  return (records || []).map((record) => record.value)
+  const notes = (records || []).map((record) => record.value as Note)
+  return notes.sort((a, b) =>
+    a.publishedAt < b.publishedAt ? 1 : a.publishedAt > b.publishedAt ? -1 : 0,
+  )
 }

src/components/notes/blog-notes.vue

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

src/pages/pub/index.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { fetchNotes } from "@/api/fetch-notes"
+
+const notes = await fetchNotes()
+
+useHead({
+  title: "Articles",
+})
+</script>
+
+<template>
+  <section class="pub-list">
+    <h1>Articles</h1>
+    <ul>
+      <li v-for="note in notes" :key="note.path">
+        <a :href="note.path">{{ note.title }}</a>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.pub-list {
+  max-width: 800px;
+  margin: auto;
+  padding: 1rem;
+}
+</style>