diff --git a/Gemfile.lock b/Gemfile.lock
index 9ff2d31..c488385 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -164,7 +164,14 @@ GEM
multipart-post (~> 2.0)
faraday-net_http (3.4.0)
net-http (>= 0.5.0)
+ ffi (1.17.1-aarch64-linux-gnu)
+ ffi (1.17.1-aarch64-linux-musl)
+ ffi (1.17.1-arm-linux-gnu)
+ ffi (1.17.1-arm-linux-musl)
ffi (1.17.1-arm64-darwin)
+ ffi (1.17.1-x86_64-darwin)
+ ffi (1.17.1-x86_64-linux-gnu)
+ ffi (1.17.1-x86_64-linux-musl)
formtastic (5.0.0)
actionpack (>= 6.0.0)
formtastic_i18n (0.7.0)
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index 312a4fc..bc471f7 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -1,3 +1,4 @@
+@import "photoswipe/dist/photoswipe.css";
@tailwind base;
@tailwind components;
diff --git a/app/javascript/application.js b/app/javascript/application.js
index 1aad597..63ba9e1 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -1,5 +1,6 @@
// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
+import "@hotwired/stimulus"
import "@fontsource/playfair-display/400.css";
import "@fontsource/playfair-display/700.css";
import "@fontsource/raleway/400.css";
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index d0685d3..40cfc50 100644
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@@ -6,3 +6,9 @@ import { application } from "./application"
import HelloController from "./hello_controller"
application.register("hello", HelloController)
+
+import PhotoSwipeLightBoxController from "./photo_swipe_lightbox_controller"
+
+console.log("ready to register photo-swipe")
+application.register("photo-swipe-lightbox", PhotoSwipeLightBoxController)
+console.log("successful to register photo-swipe")
diff --git a/app/javascript/controllers/photo_swipe_lightbox_controller.js b/app/javascript/controllers/photo_swipe_lightbox_controller.js
new file mode 100644
index 0000000..2dad88c
--- /dev/null
+++ b/app/javascript/controllers/photo_swipe_lightbox_controller.js
@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus"
+import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm'
+import PhotoSwipe from 'photoswipe/dist/photoswipe.esm'
+import 'photoswipe/dist/photoswipe.css'
+
+export default class extends Controller {
+ static targets = ['image', 'gallery']
+
+ connect() {
+ this.initPhotoSwipeLightbox()
+ }
+
+ initPhotoSwipeLightbox() {
+ const lightbox = new PhotoSwipeLightbox({
+ gallery: this.galleryTarget,
+ children: 'a',
+ pswpModule: PhotoSwipe,
+ initialZoomInEndEvent: 'mousedown',
+ dataSource: (items) => {
+ return items.map((item) => ({
+ src: item.dataset.pswpSrc,
+ w: parseInt(item.dataset.pswpWidth, 10),
+ h: parseInt(item.dataset.pswpHeight, 10),
+ title: item.dataset.pswpCaption,
+ }))
+ },
+ padding: { top: 0, bottom: 0, left: 0, right: 0 }, // 自定义图片与页面边界的填充
+ closeOnScroll: false,
+ zoom: true, // 启用缩放功能
+ bgOpacity: 0.9, // 背景透明度
+ pswpUIOptions: {
+ arrowPrev: true,
+ arrowNext: true,
+ zoom: true, // 添加缩放按钮
+ fullscreen: true, // 添加全屏按钮
+ counter: true, // 显示当前图片编号
+ }
+ })
+ lightbox.init()
+ // console.log('PhotoSwipeLightbox instance:', lightbox);
+ }
+}
\ No newline at end of file
diff --git a/app/models/weather_art.rb b/app/models/weather_art.rb
index 078a58e..f764058 100644
--- a/app/models/weather_art.rb
+++ b/app/models/weather_art.rb
@@ -51,4 +51,8 @@ class WeatherArt < ApplicationRecord
Ahoy::Event.where("properties::jsonb->>'event_type' = 'weather_art_view' AND (properties::jsonb->>'weather_art_id')::integer = ?", self.id).count
end
end
+
+ def image_url
+ image.attached? ? image.blob : nil
+ end
end
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index bf4b014..f468d23 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -33,22 +33,22 @@
<%# Includes all stylesheet files in app/assets/stylesheets %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
-
+
-
+
-
- -->
+
+
+
+
- gtag('config', 'G-PX1C92V5L7');
-
+
+
-
+
+
diff --git a/app/views/weather_arts/_weather_stat.html.erb b/app/views/weather_arts/_weather_stat.html.erb
deleted file mode 100644
index 486975f..0000000
--- a/app/views/weather_arts/_weather_stat.html.erb
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
<%= value %>
-
<%= desc %>
-
\ No newline at end of file
diff --git a/app/views/weather_arts/_weather_stats.html.erb b/app/views/weather_arts/_weather_stats.html.erb
new file mode 100644
index 0000000..df082f5
--- /dev/null
+++ b/app/views/weather_arts/_weather_stats.html.erb
@@ -0,0 +1,37 @@
+<%# Partial _weather_stats.html.erb %>
+
+
+
Temperature
+
<%= weather_art.temperature %>°C
+
Feels like <%= weather_art.feeling_temp %>°C
+
+
+
+
Wind
+
<%= weather_art.wind_scale %>
+
<%= weather_art.wind_speed %> km/h
+
+
+
+
Humidity
+
<%= weather_art.humidity %>%
+
Relative humidity
+
+
+
+
Visibility
+
<%= weather_art.visibility %> km
+
Clear view distance
+
+
+
+
Pressure
+
<%= weather_art.pressure %> hPa
+
Atmospheric pressure
+
+
+
+
Cloud Cover
+
<%= weather_art.cloud %>%
+
Sky coverage
+
\ No newline at end of file
diff --git a/app/views/weather_arts/show.html.erb b/app/views/weather_arts/show.html.erb
index 4806f3d..ba9d2b0 100644
--- a/app/views/weather_arts/show.html.erb
+++ b/app/views/weather_arts/show.html.erb
@@ -4,155 +4,88 @@
<% end %>
-
-
- <% if @weather_art.image.attached? %>
-
- <%= image_tag @weather_art.image,
- class: "absolute w-full h-full object-cover scale-110 filter blur-2xl opacity-25" %>
-
-
- <% end %>
+
+
+
-
-
-
-
- <%= link_to city_path(@weather_art.city),
- class: "btn btn-ghost btn-lg gap-2 bg-base-100/50 backdrop-blur-sm hover:bg-base-100/70 transition-all duration-300" do %>
-
-
-
- Back to <%= @weather_art.city.name %>
- <% end %>
-
+
+
+ <%= link_to city_path(@weather_art.city),
+ class: "btn btn-ghost btn-md gap-2 bg-base-200 hover:bg-base-300 transition-all duration-300" do %>
+
+
+
+ Back to <%= @weather_art.city.name %>
+ <% end %>
+
-
-
-
-
-
-
-
-
- <%= @weather_art.city.full_name %>
-
+
+
+
-
-
- Weather Art
-
-
+
+ <% if @weather_art.image.attached? %>
+
+
+
+ <% blob = @weather_art.image_blob %>
+ <%= link_to rails_blob_path(blob.variant(resize_to_fit: [896, 512])),
+ data: {
+ pswp_src: rails_blob_url(blob),
+ pswp_caption: 'Weather Art',
+ pswp_width: 1792,
+ pswp_height: 1024
+ } do %>
+ <%= image_tag @weather_art.image.variant(resize_to_fill: [896, 512]),
+ class: "object-cover w-full h-full transition-transform scale-95 transform hover:scale-105 ease-in-out" %>
+ <% end %>
+
+
+
+ <% end %>
-
-
-
-
-
- <%= @weather_art.weather_date.strftime("%B %d, %Y") %>
-
-
-
-
-
- <%= @weather_art.weather_date.strftime("%H:%M") %>
-
-
-
+
+
+
+
+ Weather Art
+
-
-
-
- <% if @weather_art.image.attached? %>
- <%= image_tag @weather_art.image,
- class: "w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" %>
-
- <% end %>
-
+
+
+ <%= @weather_art.weather_date.strftime("%B %d, %Y") %>
+
+
+ <%= @weather_art.weather_date.strftime("%H:%M") %>
+
+
-
-
-
+
<%= weather_description_icon(@weather_art.description) %>
<%= @weather_art.description %>
-
-
-
-
-
- <%= weather_stat_icon("temperature") %>
-
Temperature
-
-
<%= @weather_art.temperature %>°C
-
Feels like <%= @weather_art.feeling_temp %>°C
-
-
-
-
- <%= weather_stat_icon("wind") %>
-
Wind
-
-
<%= @weather_art.wind_scale %>
-
<%= @weather_art.wind_speed %> km/h
-
-
-
-
- <%= weather_stat_icon("humidity") %>
-
Humidity
-
-
<%= @weather_art.humidity %>%
-
Relative humidity
-
-
-
-
- <%= weather_stat_icon("visibility") %>
-
Visibility
-
-
<%= @weather_art.visibility %> km
-
Clear view distance
-
-
-
-
- <%= weather_stat_icon("pressure") %>
-
Pressure
-
-
<%= @weather_art.pressure %> hPa
-
Atmospheric pressure
-
-
-
-
- <%= weather_stat_icon("cloud") %>
-
Cloud Cover
-
-
<%= @weather_art.cloud %>%
-
Sky coverage
-
-
-
-
-
-
-
-
- <%= @weather_art.prompt %>
-
+
+ <%= render 'weather_stats', weather_art: @weather_art %>
+
+
+
+
+
+ <%= @weather_art.prompt %>
+
+
\ No newline at end of file
diff --git a/package.json b/package.json
index 3f93649..8b11caf 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"autoprefixer": "^10.4.20",
"jquery": "^3.7.1",
"jquery-ui": "^1.14.1",
+ "photoswipe": "^5.4.4",
"postcss": "^8.5.1",
"sass": "^1.83.4",
"tailwindcss": "^3.4.17"
diff --git a/yarn.lock b/yarn.lock
index 91e1d6e..29ceef2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -153,7 +153,7 @@
"@hotwired/stimulus@^3.2.2":
version "3.2.2"
- resolved "https://registry.npmjs.org/@hotwired/stimulus/-/stimulus-3.2.2.tgz"
+ resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.2.tgz#071aab59c600fed95b97939e605ff261a4251608"
integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==
"@hotwired/turbo-rails@^8.0.12":
@@ -722,20 +722,13 @@ jiti@^1.21.6:
resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz"
integrity sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==
-jquery-ui@^1.13.3:
+jquery-ui@^1.13.3, jquery-ui@^1.14.1:
version "1.14.1"
resolved "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.14.1.tgz"
integrity sha512-DhzsYH8VeIvOaxwi+B/2BCsFFT5EGjShdzOcm5DssWjtcpGWIMsn66rJciDA6jBruzNiLf1q0KvwMoX1uGNvnQ==
dependencies:
jquery ">=1.12.0 <5.0.0"
-jquery-ui@^1.14.1:
- version "1.14.1"
- resolved "https://registry.yarnpkg.com/jquery-ui/-/jquery-ui-1.14.1.tgz#ba342ea3ffff662b787595391f607d923313e040"
- integrity sha512-DhzsYH8VeIvOaxwi+B/2BCsFFT5EGjShdzOcm5DssWjtcpGWIMsn66rJciDA6jBruzNiLf1q0KvwMoX1uGNvnQ==
- dependencies:
- jquery ">=1.12.0 <5.0.0"
-
jquery-ujs@^1.2.2:
version "1.2.3"
resolved "https://registry.npmjs.org/jquery-ujs/-/jquery-ujs-1.2.3.tgz"
@@ -853,6 +846,11 @@ path-scurry@^1.11.1:
lru-cache "^10.2.0"
minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+photoswipe@^5.4.4:
+ version "5.4.4"
+ resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-5.4.4.tgz#e045dc036453493188d5c8665b0e8f1000ac4d6e"
+ integrity sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==
+
picocolors@^1, picocolors@^1.0.1, picocolors@^1.1.1:
version "1.1.1"
resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz"