src/content/blog/i-updated-my-guestbook.md

@@ -1,20 +0,0 @@
----
-title: "i updated my guestbook!"
-pubDate: 'May 25 2025'
-description: ""
-draft: false
----
-
-hello! 
-
-just wanted to say i updated my [/guestbook](/guestbook) today! 
-
-replaced my old one where people sent in pizza drawings with an easier one made by [Meadow](https://meadow.cafe/).
-
-currently it's an iframe, but i know i can use javascript to insert it as well. might change it in the future, we'll see.
-
-feel free to sign it or not :)
-
----
-
-> PS: maybe i should create an `/status`-page instead of my current [/twtxt.txt](/twtxt.txt) for these kinda updates?

src/data/bookshelf.json

@@ -747,10 +747,6 @@
       "name": "Want to read",
       "url": "https://kjelsrud.dev/logs/bookshelf/",
       "books": [
-        {
-          "title": "Fanget av geografien - verden forklart med 12 enkle kart",
-          "author": "Tim Marshall, Grace Easton, Jessica Smith"
-        },
         {
           "title": "Fraudcoin - 1000 år med inflasjon som politikk",
           "author": "Rune Østgård"

src/data/watchlist.json

@@ -2088,9 +2088,6 @@
             "name": "Watchlist",
             "url": "https://kjelsrud.dev/logs/watchlist/",
             "tv": [
-                {
-                    "title": "The Two Popes"
-                },
                 {
                     "title": "The Little Prince (2015)"
                 },

src/pages/guestbook.astro

@@ -5,7 +5,29 @@ const visitors = guestbook["visitors"];
 ---
 
 <SectionContainer>
-  <main class="flex flex-col flex-1">
-    <iframe src="https://guestbooks.meadow.cafe/guestbook/593" width="100%" height="1500" frameborder="0"></iframe>
+  <main class="flex flex-col flex-1 gap-4 mt-4">
+    <h1 class="text-3xl font-extrabold">[ Guestbook ]</h1>
+    <blockquote><p><em>Last update: {guestbook.meta.lastModified}</em></p></blockquote>
+    <div class="flex flex-col gap-2">
+      <p class="blog">Welcome to the <i>digital pizzeria</i>! Leave your mark by doodling a pizza slice, snapping a pic, and sharing it with me at <code>pizza [at] kjelsrud [dot] dev</code> with your name & social media / website. And remember, creativity knows no bounds! Just like in my sketch, where I went with a Bitcoin pizza slice!🪙</p>
+      <p class="blog italic text-xs"><strong>PS:</strong> This page was inspired by <a href="https://azlen.me/doorstep">azlen.me</a>!</p>
+   </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      {visitors.map((visitor) => (
+        <div class="flex flex-col items-center">
+          <figure class="relative">
+            <img src={visitor.image} class="object-cover h-full md:h-[300px] w-full rounded-sm"/>
+            <figcaption class="absolute bottom-2 left-2 bg-black text-white px-2 py-1 rounded-xl text-xs">
+              <div class="guestbook">
+                {visitor.name} ✿ 
+                <a href={visitor.sociallink} target="_blank" class="px-2 bg-gray-500 rounded-lg italic">
+                 {visitor.social}~
+                </a>
+              </div>
+            </figcaption>
+          </figure>
+        </div>
+      ))}
+    </div>
 	</main>
 </SectionContainer>

src/styles/global.css

@@ -44,12 +44,6 @@ hr {
 	padding: 10px 0 0 0;
 }
 
-iframe {
-  display: block;
-  margin: 1.05rem 0;
-  max-width: 100%;
-  border-radius: 1.05rem;
-}
 .index a { color: var(--dark-link);}
 
 .index a:hover { text-decoration: underline 2px;}