Add trips

app/templates/more/index.html.slim

@@ -14,5 +14,6 @@ div class="mb-12 max-w-prose mx-auto text-gray-800 dark:text-gray-200"
     a class="block p-1 border border-lime-200 bg-lime-300 text-lime-900 hover:bg-lime-200 text-center rounded-lg" href="/colophon" 🧱 Colophon
     a class="block p-1 border border-lime-200 bg-lime-300 text-lime-900 hover:bg-lime-200 text-center rounded-lg" href="/hikes" 🥾 Hikes
     a class="block p-1 border border-lime-200 bg-lime-300 text-lime-900 hover:bg-lime-200 text-center rounded-lg" href="/movies" 🍿 Movies
+    a class="block p-1 border border-lime-200 bg-lime-300 text-lime-900 hover:bg-lime-200 text-center rounded-lg" href="/trips" 🛫 Trips
     / a class="block p-1 border border-lime-200 bg-lime-300 text-lime-900 hover:bg-lime-200 text-center rounded-lg" href="/art" 🎨 Art things
 

app/templates/posts/show.html.slim

@@ -29,7 +29,12 @@ article class="h-entry"
 
       - if post.location
         img class="shadow-solid shadow-pink-100 dark:shadow-pink-200 rounded mb-4" src=post.large_map
-
+  div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 flex gap-4"
+    div class="block grow bg-orange-100 dark:bg-orange-600 rounded px-4 py-2 mb-12"
+      a href="/trips/#{trip.id}"
+        = "✈️ Part of the trip: "
+        strong #{trip.name}
+        |  →
   - if post.tags.map(&:label).include? "weekly"
     div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 flex gap-4"
       div class="grow" hx-get="/post/top_tracks/#{post.slug}" hx-trigger="load"

app/templates/shared/_compact_post.html.slim

@@ -0,0 +1,24 @@
+div class="mb-2 h-entry"
+  - if !first
+    div class="rounded-full bg-orange-100 p-2 w-1 h-4 inline-block mb-2 dark:bg-orange-400"
+  - if first
+    div class="w-2 h-2 inline-block mb-6"
+      = "🛬"
+
+  div class="ml-[7] pl-6 border-solid border-l-2 border-orange-100 dark:border-orange-400"
+    h3 class="text-xl font-semibold text-blue-600"
+      a class="border-b-2 border-transparent hover:border-blue-600 hover:border-b-2" href="/post/#{post.slug}"
+        = post.name
+    div class="e-content prose-p:mb-0 prose-img:my-2 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline p-name text-base prose prose-ul:list-none prose-ul:pl-0 prose-li:pl-0 text-gray-800 dark:text-gray-200 prose-a:dark:text-gray-100"
+      == post.excerpt
+      div class="grid gap-4 grid-flow-row grid-cols-4 grid-rows-1"
+        -post.photos.each do |photo|
+          img class="w-44 h-44 object-cover rounded" src=photo["value"]
+
+    p class="text-sm text-blue-400"
+      a class="u-url" href="#{post.permalink}"
+        time class="dt-published" datetime=post.machine_published_at
+          = post.display_published_at
+  - if last
+    div class="w-2 h-2 inline-block mb-6"
+      = "🛫"

app/templates/trips/index.html.slim

@@ -0,0 +1,15 @@
+div class="mb-4 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200"
+  h1 Trips
+
+div class="h-feed mb-12 max-w-prose mx-auto"
+  - trips.each do |trip|
+    div class="mb-8 h-entry"
+      h3 class="text-xl font-semibold text-blue-600 mb-2"
+        a class="border-b-2 border-transparent hover:border-blue-600 hover:border-b-2" href="/trips/#{trip.id}"
+          = trip.name
+      p class="text-sm text-blue-400"
+        a class="u-url" href="/trips/#{trip.id}"
+            = "#{trip.start_date} - #{trip.end_date}"
+
+
+div class="max-w-screen-md mx-auto border-t-4 border-solid border-gray-400 dark:border-gray-600"

app/templates/trips/show.html.slim

@@ -0,0 +1,9 @@
+div class="mb-4 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200"
+  h1 class="mb-0" #{trip.name}
+  p class="mt-2" class="text-gray-600 dark:text-gray-200 text-sm" (#{trip.start_date} - #{trip.end_date})
+
+div class="h-feed mb-12 max-w-prose mx-auto"
+  - posts.each do |post|
+    == render "shared/compact_post", post: post, first: post.id == posts.first.id, last: post.id == posts.last.id
+
+div class="max-w-screen-md mx-auto border-t-4 border-solid border-gray-400 dark:border-gray-600"