songtianlun/today_ai_weather
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add page load time tracking and footer

Browse Source 
- Introduced PageLoadTimeController to measure and display
  page load times.
- Moved the footer content into a partial for better code
  organization.
- Added 'bullet' gem for performance monitoring.

This commit enhances the application by providing useful
information about load time directly in the UI and
refactoring the layout code for maintainability.
This commit is contained in:
songtianlun 2025-02-14 09:47:01 +08:00
parent c808b72c63
commit 496dcf83a9
8 changed files with 52 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gemfile
View File

@ -79,6 +79,8 @@ end
group :development do
# Use console on exceptions pages [https://github.com/rails/web-console]
gem "web-console"
gem 'bullet', '~> 8.0'
end
group :production do

5
Gemfile.lock
View File

@ -121,6 +121,9 @@ GEM
brakeman (7.0.0)
racc
builder (3.3.0)
bullet (8.0.1)
activesupport (>= 3.0.0)
uniform_notifier (~> 1.11)
capybara (3.40.0)
addressable
matrix
@ -478,6 +481,7 @@ GEM
unicode-display_width (3.1.4)
unicode-emoji (~> 4.0, >= 4.0.4)
unicode-emoji (4.0.4)
uniform_notifier (1.16.0)
uri (1.0.2)
useragent (0.16.11)
warden (1.2.9)
@ -515,6 +519,7 @@ DEPENDENCIES
aws-sdk-s3 (~> 1.170)
bootsnap
brakeman
bullet (~> 8.0)
capybara
cssbundling-rails
debug

10
app/controllers/weather_arts_controller.rb
View File

@ -3,16 +3,6 @@ class WeatherArtsController < ApplicationController
@city = City.friendly.find(params[:city_id])
@weather_art = @city.weather_arts.friendly.find(params[:slug])
@previous_weather_art = @city.weather_arts
.where("id < ?", @weather_art.id)
.order(id: :desc)
.first
@next_weather_art = @city.weather_arts
.where("id > ?", @weather_art.id)
.order(id: :asc)
.first
ahoy.track "View Weather Art", {
weather_art_id: @weather_art.id,
city_id: @weather_art.city_id,

2
app/javascript/controllers/index.js
View File

@ -7,8 +7,10 @@ import HelloController from "./hello_controller"
import PhotoSwipeLightBoxController from "./photo_swipe_lightbox_controller"
import FlashMessageController from "./flash_controller"
import SearchController from "./search_controller"
import PageLoadTimeController from "./page_load_time_controller"
application.register("hello", HelloController)
application.register("photo-swipe-lightbox", PhotoSwipeLightBoxController)
application.register("flash", FlashMessageController)
application.register("search", SearchController)
application.register("page-load-time", PageLoadTimeController)

18
app/javascript/controllers/page_load_time_controller.js Normal file
View File

@ -0,0 +1,18 @@
import {Controller} from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["timer"]
connect() {
// 记录页面加载开始的时间
const startTime = performance.now();
// 监听页面加载完成事件
window.addEventListener('load', () => {
const endTime = performance.now();
const loadTime = endTime - startTime;
// 更新显示
this.timerTarget.textContent = loadTime;
});
}
}

24
app/views/layouts/_footer.html.erb Normal file
View File

@ -0,0 +1,24 @@
<!-- 页脚 -->
<footer class="footer footer-center p-8 bg-base-200 text-base-content">
<div class="container mx-auto flex flex-col gap-2">
<div id="busuanzi_container" class="text-xs opacity-70">
<div class="space-x-2">
<span>Page Views: <span id="busuanzi_page_pv"></span></span>
<span>|</span>
<span>Page Visitors: <span id="busuanzi_page_uv"></span></span>
<span>|</span>
<span>Total Views: <span id="busuanzi_site_pv"></span></span>
<span>|</span>
<span>Total Visitors: <span id="busuanzi_site_uv"></span></span>
<span>|</span>
<span data-controller="page-load-time">
Page Load Time: <span data-page-load-time-target="timer">x</span> ms
</span>
</div>
</div>
<p class="font-display opacity-80">
Copyright © 2024 - All rights reserved by AI Weather Art
</p>
</div>
</footer>

21
app/views/layouts/application.html.erb
View File

@ -64,26 +64,7 @@
<%= yield %>
</main>
<!-- 页脚 -->
<footer class="footer footer-center p-8 bg-base-200 text-base-content">
<div class="container mx-auto flex flex-col gap-2">
<div id="busuanzi_container" class="text-xs opacity-70">
<div class="space-x-2">
<span>Page Views: <span id="busuanzi_page_pv"></span></span>
<span>|</span>
<span>Page Visitors: <span id="busuanzi_page_uv"></span></span>
<span>|</span>
<span>Total Views: <span id="busuanzi_site_pv"></span></span>
<span>|</span>
<span>Total Visitors: <span id="busuanzi_site_uv"></span></span>
</div>
</div>
<p class="font-display opacity-80">
Copyright © 2024 - All rights reserved by AI Weather Art
</p>
</div>
</footer>
<%= render 'layouts/footer' %>
</body>
</html>

28
app/views/weather_arts/show.html.erb
View File

@ -86,34 +86,6 @@
</p>
</div>
<!-- 上一个和下一个导航 -->
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 mt-8">
<% if @previous_weather_art %>
<%= link_to city_weather_art_path(@city, @previous_weather_art),
class: "btn btn-outline btn-primary w-full sm:w-auto flex items-center justify-center gap-2" do %>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
Previous Weather Art
<% end %>
<% end %>
<% if @next_weather_art %>
<%= link_to city_weather_art_path(@city, @next_weather_art),
class: "btn btn-outline btn-primary w-full sm:w-auto flex items-center justify-center gap-2" do %>
Next Weather Art
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<% end %>
<% end %>
</div>
<% if @previous_weather_art.nil? && @next_weather_art.nil? %>
<div class="text-center text-base-content/70 py-4">
No more Weather Arts available
</div>
<% end %>
</div>
</div>