diff --git a/slices/main/decorators/posts/decorator.rb b/slices/main/decorators/posts/decorator.rb index 24e59e2..4384a20 100644 --- a/slices/main/decorators/posts/decorator.rb +++ b/slices/main/decorators/posts/decorator.rb @@ -45,6 +45,10 @@ module Main return photos.first["url"] end + if videos? + return videos.first["value"] + end + inline_images.first[1] if inline_images end diff --git a/slices/main/templates/posts/show.html.slim b/slices/main/templates/posts/show.html.slim index 1af97c4..5dc3487 100644 --- a/slices/main/templates/posts/show.html.slim +++ b/slices/main/templates/posts/show.html.slim @@ -52,7 +52,6 @@ article class="h-entry" 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 @@ -167,4 +166,4 @@ article class="h-entry" 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" + 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" diff --git a/slices/main/templates/shared/_photo_post.html.slim b/slices/main/templates/shared/_photo_post.html.slim index d2837d0..8b80b96 100644 --- a/slices/main/templates/shared/_photo_post.html.slim +++ b/slices/main/templates/shared/_photo_post.html.slim @@ -4,6 +4,12 @@ a href="#{post.permalink}#photo-#{idx}" img loading="lazy" class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{photo["value"]}" alt="#{photo["alt"]}" - else - div class="rounded max-w-xs" - a href="#{post.permalink}" - img loading="lazy" class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{post.photos[0]["value"]}" alt="#{post.photos[0]["alt"]}" \ No newline at end of file + - if post.photos.count > 0 + div class="rounded max-w-xs" + a href="#{post.permalink}" + img loading="lazy" class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{post.photos[0]["value"]}" alt="#{post.photos[0]["alt"]}" + - if post.videos.count > 0 + div class="rounded max-w-xs" + a href="#{post.permalink}" + video class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" loop=false muted=true controls=false + source type="video/mp4" src="#{post.videos[0]["value"]}" diff --git a/slices/main/templates/shared/_status.html.slim b/slices/main/templates/shared/_status.html.slim index 4a46a85..8cf78fa 100644 --- a/slices/main/templates/shared/_status.html.slim +++ b/slices/main/templates/shared/_status.html.slim @@ -1,17 +1,26 @@ div class="mb-8 h-entry border border-gray-200 m-2 p-4 bg-gray-50 hover:bg-gray-100 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-950 hover:dark:border-slate-900 rounded" - a class="border-b-2 border-transparent hover:border-blue-600 hover:border-b-2" href="/post/#{post.slug}" - 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 mb-4 prose-img:rounded" - - if post.photos.count == 0 && post.key_image.nil? + div class="border-b-2 border-transparent" + div + - if !post.photos? && post.key_image.nil? div class="flex" div class="text-8xl px-8" = post.prefix_emoji - div class="" - == post.raw_content + a href="/post/#{post.slug}" + 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 mb-4 prose-img:rounded" + == post.raw_content -else - == " #{post.prefix_emoji} #{post.raw_content}" - div class="grid gap-4 grid-flow-row grid-cols-4 grid-rows-1" - - post.photos.each do |photo| - img loading="lazy" class="w-32 h-32 object-cover rounded" src=photo["value"] + a href="/post/#{post.slug}" + 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 mb-4 prose-img:rounded" + == " #{post.prefix_emoji} #{post.raw_content}" + - if post.photos? + div class="grid gap-4 grid-flow-row grid-cols-#{post.photos.count > 1 ? "4" : "1"} grid-rows-1" + - post.photos.each do |photo| + img loading="lazy" class="w-32 h-32 object-cover rounded" src=photo["value"] + - if post.videos? + div class="grid gap-4 grid-flow-row grid-cols-#{post.videos.count > 1 ? "4" : "1"} grid-rows-1" + - post.videos.each do |video| + video class="rounded w-max" autoplay=false loop=false muted=true controls=true + source type="video/mp4" src="#{video["value"]}" == render "shared/tags", tags: post.tags div class="mb-8" diff --git a/slices/main/views/posts/index.rb b/slices/main/views/posts/index.rb index 531ab13..51f96e6 100644 --- a/slices/main/views/posts/index.rb +++ b/slices/main/views/posts/index.rb @@ -1,3 +1,5 @@ +# memoize: true + module Main module Views module Posts