Refactor app in to its own slice

slices/main/templates/bookmarks/index.html.slim

@@ -0,0 +1,22 @@
+- context.content_for(:title, "Bookmarks | ")
+
+div class="flex justify-between prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200"
+  div
+    h1 Bookmarks
+
+div class="h-feed mb-12 max-w-prose mx-auto"
+  form action="/bookmarks" method="GET"
+    div class="flex"
+      div class="flex-auto basis-auto mr-4"
+        input id="search" type="text" class="p-1 rounded w-full bg-indigo-50 dark:bg-indigo-400" name="q" value=q
+      div class="mr-4"
+      	input type="submit" class="bg-indigo-300 p-1 rounded text-indigo-900" value="Search"
+      -if q
+        div class=""
+      	  a href="/bookmarks" class="text-gray-400 dark:text-gray-100 pt-1" Clear search
+
+div class="mb-12 max-w-prose mx-auto"
+  - bookmarks.each do |bookmark|
+    == render "shared/bookmark", bookmark: bookmark
+
+div class="max-w-screen-md mx-auto border-t border-solid border-gray-200 dark:border-gray-600"

slices/main/templates/bookmarks/metadata.html.slim

@@ -0,0 +1,7 @@
+- if image
+  div class="col-span-1"
+    img class="rounded h-16" src=image
+
+div class="#{image ? 'col-span-4' : 'col-span-5'}"
+  h6= title
+  small= description

slices/main/templates/bookmarks/show.html.slim

@@ -0,0 +1,45 @@
+- context.content_for(:title, "Bookmark | ")
+
+div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200"
+  h1 = bookmark.name
+
+div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200" x-data="{ open: false }"
+  a class="text-blue-600 dark:text-amber-500 no-underline hover:underline" href=bookmark.url
+    p class="text-xl text-ellipsis overflow-hidden"
+      = bookmark.url
+
+  div class="mb-6"
+    == bookmark.youtube_embed
+
+  == bookmark.content
+
+  - unless bookmark.cached_content.nil?
+    button class="hover:text-gray-400" @click="open = ! open" Toggle cached version
+
+    span x-show="open"
+      div class="mt-4 rounded bg-blue-50 dark:bg-blue-900 px-4 py-2"
+        == bookmark.cached_content
+
+div class="prose max-w-prose mx-auto text-gray-800 dark:text-gray-200 grid grid-cols-5 gap-2" hx-get="/bookmarks/metadata/#{bookmark.id}" hx-trigger="load"
+
+div class="mb-8 max-w-screen-md mx-auto border-t border-solid border-gray-200 dark:border-gray-600"
+
+
+div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 flex"
+  div class=""
+    = "Published "
+    time class="dt-published" datetime=bookmark.machine_published_at
+      = bookmark.display_published_at
+    p
+      span in 
+      a class="hover:underline" href="/bookmarks" bookmarks
+
+  span class="text-right flex-1"
+    == render "shared/tags", tags: bookmark.tags
+
+div class="mb-2 max-w-prose mx-auto text-gray-600 dark:text-gray-200 flex"
+  - if bookmark.syndicated?
+    span Also on:  
+    - bookmark.syndicated_to.each do |loc|
+      a href=loc[:url]
+        == "shared/#{render loc[:location]}"