adamantium/app/templates/posts/show.html.slim

- context.content_for(:title, "#{post.display_title} | ")

article class="h-entry"
  template @img-modal.window="imgModal = true; imgModalSrc = $event.detail.imgModalSrc; imgModalDesc = $event.detail.imgModalDesc;" x-if="imgModal"
    div @mousedown.outside="imgModalSrc = ''" class="p-2 fixed w-full h-100 inset-0 z-50 overflow-hidden flex justify-center items-center bg-black bg-opacity-75"
      div @mousedown.outside="imgModal = ''" class="flex flex-col max-w-3xl max-h-full overflow-auto"
        div class="z-50"
          button @click="imgModal = ''" class="float-right pt-2 pr-2 outline-none focus:outline-none"
            svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"
              path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
        div class="p-2"
          img class="rounded object-contain h-1/2-screen shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4" :src="imgModalSrc" :alt="imgModalSrc"
          p x-text="imgModalDesc" class="text-center text-white"
  div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200"
    h1 class="p-name mb-2"
      a class="u-url" href=post.permalink
        = post.display_title
    nav class="space-x-1 text-sm md:text-sm md:block dark:text-gray-600"
      - if post.location || post.photos? || post.videos?
        span See more:
      - if post.location
        a class="dark:text-gray-400" href="/places" places
      - if post.photos? || post.videos?
        a class="dark:text-gray-400" href="/photos" photos
    article class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline prose-img:rounded prose-video:rounded"
      div class="e-content prose-code:bg-pink-100 prose-code:text-pink-900"
        == post.content

      - if post.photos?
        - post.photos.each_with_index do |photo, idx|
          figure id="photo-#{idx}"
            img class="u-photo shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4" src=photo["value"] alt=photo["alt"]
            figcaption
              = photo["alt"]
      - if post.videos?
        - post.videos.each_with_index do |video, index|
          figure id="video-#{index}"
            video loop=false muted=true controls=true
              source type="video/mp4" src="#{video["value"]}"
            figcaption= video["alt"]
            a href="#" data-replay="video-#{index}" Replay


      - if post.location
        img class="shadow-solid shadow-pink-100 dark:shadow-pink-200 rounded mb-4" src=post.large_map
    -if post.webmentions && post.webmentions.count > 0
      div class="mt-12"
        h3 #{post.webmentions.count} Comment#{post.webmentions.count != 1 ? "s" : ""}
        - post.webmentions.each do |mention|
          div class="prose-p:m-1 mb-6 p-8 bg-orange-100 dark:bg-indigo-900 squircle"
            div class="flex h-8"
              img class="w-8 rounded-full m-0 mr-2" src=mention.author_photo
              a class="block text-orange-700 dark:text-violet-300 no-underline hover:underline" href=mention.author_url
                = mention.author_name
            div class="prose dark:prose-invert dark:text-indigo-250 prose-a:text-orange-700 dark:prose-a:text-violet-300 prose-a:no-underline hover:prose-a:underline"
              == mention.content_html
            div class="text-sm"
              a class="no-underline hover:underline text-orange-900 dark:text-violet-400" href=mention.source_url
                = mention.published_at.strftime("%e %B, %Y")
  div class="mb-12"
    - if trip
      div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 flex gap-4"
        a href="/trips/#{trip.id}" class="block grow bg-orange-100 hover:bg-orange-200 dark:bg-orange-600 hover:dark:bg-orange-900 rounded px-4 py-2 mb-2"
          span class="pr-8"✈️
          = "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"

      - if past_movies.count > 0
        div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 mb-4"
          h3 class="text-xl" Movies watched for the first time this week
          div class="flex gap-4 pb-4 mt-4"
            - past_movies.map do |movie|
              a href=movie.url
                figure class="w-24"
                  img class="rounded hover:opacity-80" src=movie.poster
                  / figcaption= movie.title
          hr
      - if text_posts.count > 0 || photo_posts.count > 0
        div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 mb-4"
          h3 class="text-xl mb-0"  This week, years ago
      - if text_posts.count > 0
        div class="block grow bg-blue-100 dark:bg-blue-600 rounded px-4 py-2 mb-12"
          ul class="mt-0"
            - text_posts.each do |past_post|
              li class="m-0"
                a class="hover:underline" href=past_post.permalink
                  = "#{past_post.display_title} (#{past_post.published_at.year})"

      div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 flex"
        div class="grid grid-cols-3 gap-4 mb-4 max-w-prose mx-auto"
          - photo_posts.group_by{ |p| p.published_at.year }.each do |year, posts|
            -posts.each_with_index do |post, index|
              div
                -if index == 0
                  p class="mb-1 px-1" = year
                - else
                  p class="mb-1 px-1"  
                == render "shared/photo_post", post: post, extended: false
    div class="mb-4 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=post.machine_published_at
        = post.display_published_at
      p
        a class="p-author h-card" href=Hanami.app.settings.micropub_site_url
          = "by #{Hanami.app.settings.site_name}"
      p
        span in 
        - if post.posted_in == :posts
          a class="hover:underline text-blue-400 dark:text-indigo-300" href="/posts" posts
        - if post.posted_in == :places
          a class="hover:underline text-blue-400 dark:text-indigo-300" href="/places" places
        - if post.posted_in == :statuses
          a class="hover:underline text-blue-400 dark:text-indigo-300" href="/statuses" statuses
        - if post.posted_in == :bookshelf
          a class="hover:underline text-blue-400 dark:text-indigo-300" href="/bookshelf" bookshelf
    span class="text-right flex-1 leading-6"
      == render "shared/tags", tags: post.tags
  div class="mb-2 max-w-prose mx-auto text-gray-600 dark:text-gray-200 flex"
    - if post.syndicated?
      span Also on: 
      - post.syndicated_to.each do |loc|
        - next if loc[:location] == ""
        a rel="syndication" class="u-syndication" href=loc[:url]
          == render "shared/#{loc[:location]}"

svg width="10" height="10" viewBox="0 0 10 10"
  clipPath id="squircleClip" clipPathUnits="objectBoundingBox"
    path fill="red" stroke="none" d="M 0,0.5 C 0,0 0,0 0.5,0 S 1,0 1,0.5 1,1 0.5,1 0,1 0,0.5"