medium zoom on article

app/assets/stylesheets/application.tailwind.css

@@ -6,6 +6,72 @@
 
 @layer components {
 
+  .post-wrapper .aspectRatioPlaceholder {
+    margin: 0px auto;
+    position: relative;
+    width: 100%;
+  }
+
+  .post-wrapper .aspectRatioPlaceholder img {
+    height: 100%;
+    left: 0px;
+    position: absolute;
+    top: 0px;
+    width: 100%;
+  }
+
+  .post-wrapper .imageCaption {
+    text-align: center;
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    letter-spacing: 0px;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 1.4;
+    color: rgb(255, 255, 255);
+    outline: 0px;
+    z-index: 300;
+    margin-top: 40px;
+  }
+
+  .post-wrapper .graf--mixtapeEmbed {
+    border-color: rgb(51, 51, 51);
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 300;
+    letter-spacing: -0.02em;
+    margin-bottom: 40px;
+    margin-top: 40px;
+    max-height: 310px;
+    overflow: hidden;
+    padding: 30px;
+    position: relative;
+  }
+
+  .post-wrapper .graf--mixtapeEmbed .mixtapeImage {
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    float: right;
+    height: 310px;
+    margin: -30px -30px 0px 25px;
+    width: 310px;
+  }
+
+  .post-wrapper .graf--mixtapeEmbed .markup--mixtapeEmbed-strong {
+    display: block;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 300;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+    margin-bottom: 0px;
+  }
+
   .aaa {
     @apply bg-white;
   }

app/javascript/controllers/index.js

@@ -31,6 +31,7 @@ import player_info_controller from './player_info_controller'
 import track_detector_controller from './track_detector_controller'
 import play_button_controller from './play_button_controller'
 import panel from "./panel_controller"
+import MediumZoom from "./medium_controller.js"
 
 //import GeoChart from './geo_chart_controller'
 
@@ -63,4 +64,5 @@ application.register("redirect", redirect_controller)
 application.register("player-info", player_info_controller)
 application.register("track-detector", track_detector_controller)
 application.register("play-button", play_button_controller)
-application.register("panel", panel)
+application.register("panel", panel)
+application.register("medium-zoom", MediumZoom)

app/javascript/controllers/medium_controller.js

@@ -0,0 +1,11 @@
+import mediumZoom from 'medium-zoom'
+
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+
+  connect() {
+    mediumZoom(document.querySelectorAll(".medium-zoom-image"))
+  }
+
+}

app/services/dante/image_block_renderer.rb

@@ -1,8 +1,9 @@
 class Dante::ImageBlockRenderer
-  def initialize(block_key:, data:, domain: nil)
+  def initialize(block_key:, data:, domain: nil, text: nil)
     @block_key = block_key
     @data = data
     @domain = domain
+    @text = (text || []).join(" ")
   end
 
   def render
@@ -24,13 +25,13 @@ def render
 
     figure = <<~HTML
       <figure id="#{@block_key}" class="graf graf--figure #{direction_class}">
-        <div>
-          <div class="aspectRatioPlaceholder is-locked" style="#{default_style}">
-            <div class="aspect-ratio-fill" style="padding-bottom: #{ratio}%;"></div>
-            <img src="#{image_url}" width="#{width}" height="#{height}" class="graf-image medium-zoom-image" alt="#{caption}">
-          </div>
+    
+        <div class="aspectRatioPlaceholder is-locked" style="#{default_style}">
+          <div class="aspect-ratio-fill" style="padding-bottom: #{ratio}%;"></div>
+          <img src="#{image_url}" width="#{width}" height="#{height}" class="graf-image medium-zoom-image" alt="#{caption}">
         </div>
-        #{caption_html(caption)}
+      
+        #{caption_html(@text)}
       </figure>
     HTML
 
@@ -57,7 +58,7 @@ def get_url(url, domain)
   end
 
   def caption_html(caption)
-    return "" unless caption && caption != "type a caption (optional)"
+    # return "" unless caption && caption == "type a caption (optional)"
 
     <<~HTML
       <figcaption class="imageCaption">

app/services/dante/renderer.rb

@@ -35,7 +35,7 @@ def convert_node_to_element(node)
       handle_text_node(node)
 
     when "ImageBlock"
-      renderer = Dante::ImageBlockRenderer.new(block_key: node[:id], data: node[:attrs], domain: domain)
+      renderer = Dante::ImageBlockRenderer.new(text: traverse_nodes(node[:content]), block_key: node[:id], data: node[:attrs], domain: domain)
       renderer.render
 
     when "FileBlock"

app/views/articles/show.html.erb

@@ -107,10 +107,9 @@
     </div>
     <div
       id="article-<%= @post.id %>"
-      class="mt-6 prose dark:prose-invert prose-indigo prose-lg text-gray-500 dark:text-gray-300 mx-auto"
+      class="post-wrapper mt-6 prose dark:prose-invert prose-indigo prose-lg text-gray-500 dark:text-gray-300 mx-auto"
       data-field=""
-      phx-hook="ArticleContent"
-      phx-update="ignore"
+      data-controller="medium-zoom"
     >
       <%= serialized_to_html(@post.body.with_indifferent_access).html_safe %>
 

package.json

@@ -14,6 +14,7 @@
     "chart.js": "^3.8.0",
     "dante3": "^1.2.8",
     "esbuild": "^0.18.16",
+    "medium-zoom": "^1.0.8",
     "postcss": "^8.4.27",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",