178 lines
9.9 KiB
Plaintext
178 lines
9.9 KiB
Plaintext
- context.content_for(:title, "#{post.display_title} | ")
|
|
- context.content_for(:url, post.permalink)
|
|
- context.content_for(:image, post.key_image)
|
|
- context.content_for(:linked_data, linked_data)
|
|
|
|
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 text-center w-full"
|
|
img loading="lazy" class="rounded object-contain h-1/2-screen shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4 mx-auto" :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
|
|
- if post.in_reply_to
|
|
div class=""
|
|
em = "In reply to: "
|
|
- if reply_in_context
|
|
a class="u-in-reply-to no-underline bg-pink-50 hover:bg-pink-100 dark:bg-pink-600 hover:dark:bg-pink-900 p-1 rounded" href=post.in_reply_to #{reply_in_context.display_title}
|
|
- else
|
|
a class="u-in-reply-to no-underline bg-pink-50 hover:bg-pink-100 dark:bg-pink-600 hover:dark:bg-pink-900 p-1 rounded" href=post.in_reply_to #{post.in_reply_to}
|
|
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
|
|
- if post.post_type == "code"
|
|
pre
|
|
code
|
|
== post.content
|
|
- else
|
|
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 loading="lazy" 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"]
|
|
|
|
|
|
- if post.location
|
|
img loading="lazy" 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"
|
|
= render "shared/reactions", post: post, replies: replies, likes: likes
|
|
- if replies && replies.count > 0
|
|
div class="mt-12"
|
|
h3
|
|
= "#{replies.count} Comment#{replies.count != 1 ? "s" : ""}"
|
|
- if post.commentable
|
|
== " · "
|
|
a href="mailto:blog@dnitza.com?subject=About that post of yours&body=%0A%0A---%0A(In reply to #{post.permalink})" reply
|
|
- replies.each do |mention|
|
|
- if mention.source_url.match Hanami.app.settings.micropub_site_url
|
|
div class="prose-p:m-1 mb-6 p-2 bg-orange-100 dark:bg-indigo-900 rounded"
|
|
= "Mentioned in "
|
|
a href=mention.source_url #{mention.source_url}
|
|
- else
|
|
div class="prose-p:m-1 mb-6 p-8 bg-orange-100 dark:bg-indigo-900 squircle"
|
|
div class="flex h-8"
|
|
- if mention.author_photo != ""
|
|
img loading="lazy" class="w-8 rounded-full m-0 mr-2" src=mention.author_photo
|
|
- if mention.author_url == ""
|
|
= "From #{mention.author_name.gsub(/.{0,6}@/,'***@')}"
|
|
- else
|
|
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"
|
|
- if mention.source_url != "email"
|
|
a class="no-underline hover:underline text-orange-900 dark:text-violet-400" href=mention.source_url
|
|
= mention.published_at.strftime("%e %B, %Y")
|
|
- else
|
|
= 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 loading="lazy" class="rounded hover:opacity-80" src=movie.poster
|
|
/ figcaption= movie.title
|
|
hr
|
|
- if bookmarks_this_week.count > 0
|
|
div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 mb-8"
|
|
h3 class="text-xl mb-4" Bookmarked this week
|
|
ul
|
|
- bookmarks_this_week.each do |bookmark|
|
|
li
|
|
a class="block bg-emerald-100 dark:bg-emerald-600 hover:dark:bg-emerald-900 hover:bg-emerald-200 dark:text-white rounded mb-2 p-2" href=bookmark.url
|
|
span class="grow-0 inline-block" = bookmark.name
|
|
- 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="max-w-prose mx-auto text-gray-600 dark:text-gray-200 mb-4"
|
|
div class="block grow bg-blue-100 dark:bg-blue-600 rounded mb-12"
|
|
ul class="mt-0"
|
|
- text_posts.each do |past_post|
|
|
li class=""
|
|
a class="block content-justify hover:bg-blue-200 hover:dark:bg-blue-800 decoration-wavy rounded py-1.5 px-2" href=past_post.permalink
|
|
div class="flex justify-between"
|
|
span class="grow-0 inline-block pr-2" = past_post.display_title
|
|
span class="border-b border-blue-400 dark:border-blue-900 -top-3 relative border-dashed grow inline-block"
|
|
span class="grow-0 inline-block pl-2" = 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"
|