Build optimizations

aldwin7894 · Jan 20, 2024 · 92b969c · 92b969c
1 parent 31ce82d
commit 92b969c
Show file tree

Hide file tree

Showing 38 changed files with 99,605 additions and 643 deletions.
diff --git a/.gitignore b/.gitignore
@@ -59,3 +59,5 @@ vendor
 .vscode/*
 !.vscode/multi-terminals.json
 !.vscode/*.shared.json
+
+stats.html
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -331,7 +331,7 @@ GEM
       language_server-protocol (~> 3.17.0)
       prism (>= 0.19.0, < 0.20)
       sorbet-runtime (>= 0.5.10782)
-    ruby-lsp-rails (0.2.8)
+    ruby-lsp-rails (0.2.9)
       actionpack (>= 6.0)
       activerecord (>= 6.0)
       railties (>= 6.0)
@@ -344,13 +344,13 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    sorbet (0.5.11205)
-      sorbet-static (= 0.5.11205)
-    sorbet-runtime (0.5.11205)
-    sorbet-static (0.5.11205-x86_64-linux)
-    sorbet-static-and-runtime (0.5.11205)
-      sorbet (= 0.5.11205)
-      sorbet-runtime (= 0.5.11205)
+    sorbet (0.5.11213)
+      sorbet-static (= 0.5.11213)
+    sorbet-runtime (0.5.11213)
+    sorbet-static (0.5.11213-x86_64-linux)
+    sorbet-static-and-runtime (0.5.11213)
+      sorbet (= 0.5.11213)
+      sorbet-runtime (= 0.5.11213)
     spoom (1.2.4)
       erubi (>= 1.10.0)
       sorbet-static-and-runtime (>= 0.5.10187)

diff --git a/app/frontend/entrypoints/admin.js b/app/frontend/entrypoints/admin.js
@@ -1,7 +1,6 @@
 import "iconify-icon";
 import "@hotwired/turbo-rails";
 import Alpine from "alpinejs";
-import "../channels";
 import "~/stylesheets/admin.css.scss";
 
 window.Alpine = Alpine;

diff --git a/app/frontend/entrypoints/application.js b/app/frontend/entrypoints/application.js
@@ -4,23 +4,34 @@ import "iconify-icon";
 import "@hotwired/turbo-rails";
 import Alpine from "alpinejs";
 import { Chart, PieController, ArcElement, Tooltip } from "chart.js";
-import tippy, { followCursor } from "tippy.js";
-import Swiper from "swiper/bundle";
-import "../channels";
+import Tippy, { followCursor } from "tippy.js";
+import Swiper from "swiper";
+import {
+  Autoplay,
+  Navigation,
+  EffectFade,
+  EffectCoverflow,
+} from "swiper/modules";
 
 import "tippy.js/dist/tippy.css";
 import "tippy.js/themes/light.css";
 import "tippy.js/animations/perspective-subtle.css";
 import "tippy.js/animations/shift-away-subtle.css";
-import "swiper/css/bundle";
+
+import "swiper/css";
+import "swiper/css/autoplay";
+import "swiper/css/navigation";
+import "swiper/css/effect-fade";
+import "swiper/css/effect-coverflow";
+
 import "~/stylesheets/application.css.scss";
 
 const initElems = (parent = null) => {
   // popover
   const tippyPopoverList = [].slice.call(
     (parent || document).querySelectorAll("[data-tippy=popover]"),
   );
-  tippy(tippyPopoverList, {
+  Tippy(tippyPopoverList, {
     theme: "light",
     trigger: "click",
     animation: "shift-away-subtle",
@@ -38,7 +49,7 @@ const initElems = (parent = null) => {
   const tippyTooltipList = [].slice.call(
     (parent || document).querySelectorAll("[data-tippy=tooltip]"),
   );
-  tippy(tippyTooltipList, {
+  Tippy(tippyTooltipList, {
     theme: "light",
     placement: "top",
     followCursor: "horizontal",
@@ -155,10 +166,16 @@ document.addEventListener("turbo:before-stream-render", () => {
   Turbo.navigator.delegate.adapter.progressBar.hide();
 });
 
-Chart.register([PieController, ArcElement, Tooltip]);
-
-window.Alpine = Alpine;
-window.Chart = Chart;
-window.tippy = tippy;
-window.Swiper = Swiper;
+Chart.register(PieController, ArcElement, Tooltip);
+
+Object.assign(window, {
+  Alpine,
+  Chart,
+  Tippy,
+  Swiper,
+  Autoplay,
+  Navigation,
+  EffectFade,
+  EffectCoverflow,
+});
 Alpine.start();
diff --git a/app/views/anilist/index.html.erb b/app/views/anilist/index.html.erb
@@ -2,7 +2,7 @@
 
 <section x-data="{swiper:null}">
   <div class=" relative flex w-screen min-h-[calc(100vh-56px)] xs:min-h-[calc(100vh-116px)] max-h-[calc(100vh-56px)] xs:max-h-[calc(100vh-116px)] font-sans ">
-    <div id="anilist-carousel" class="absolute top-0 left-0 w-full h-full swiper" x-init="swiper = new Swiper('#anilist-carousel', { effect: 'fade', loop: true, speed: 1000, threshold: 40, autoplay: { delay: 5000, disableOnInteraction: false }, fadeEffect: { crossFade: true }, }); swiper.translateTo(window.screen.width * -1, 0, false, false);">
+    <div id="anilist-carousel" class="absolute top-0 left-0 w-full h-full swiper" x-init="swiper = new Swiper('#anilist-carousel', { modules: [Navigation, Autoplay, EffectFade], effect: 'fade', loop: true, speed: 1000, threshold: 40, autoplay: { delay: 5000, disableOnInteraction: false }, fadeEffect: { crossFade: true }, }); swiper.translateTo(window.screen.width * -1, 0, false, false);">
       <div class="swiper-wrapper">
         <% bgs.each do |num| %>
           <div class="swiper-slide background-ailane-<%= num %>">

diff --git a/app/views/home/_profile_section.html.erb b/app/views/home/_profile_section.html.erb
@@ -1,6 +1,6 @@
 <section x-data="{swiper: null}">
   <div class="relative flex w-screen min-h-screen">
-    <div id="profile-carousel" class="absolute top-0 left-0 w-full h-full swiper" x-init="swiper = new Swiper('#profile-carousel', { effect: 'fade', loop: true, speed: 1000, threshold: 40, autoplay: { delay: 5000, disableOnInteraction: false }, fadeEffect: { crossFade: true }, }); swiper.translateTo(window.screen.width * -1, 0, false, false);">
+    <div id="profile-carousel" class="absolute top-0 left-0 w-full h-full swiper" x-init="swiper = new Swiper('#profile-carousel', { modules: [Navigation, Autoplay, EffectFade], effect: 'fade', loop: true, speed: 1000, threshold: 40, autoplay: { delay: 5000, disableOnInteraction: false }, fadeEffect: { crossFade: true }, }); swiper.translateTo(window.screen.width * -1, 0, false, false);">
       <div class="swiper-wrapper">
         <% bgs.each do |num| %>
           <div class="swiper-slide background-cyan-<%= num %>">
@@ -14,7 +14,13 @@
         <div></div>
         <div class="flex flex-col col-span-6 tablet:items-center portrait:text-center laptop:items-start">
           <div class="pb-3">
-            <video autoplay loop muted inline playsinline defaultMuted oncontextmenu="return false;" preload="auto" class="rounded-full outline outline-white outline-5 w-52 portrait:mx-auto" poster="<%= vite_asset_url "images/cyan-avatar-2.webp" %>">
+            <video
+              autoplay
+              loop
+              muted
+              inline
+              playsinline
+              defaultMuted oncontextmenu="return false;" preload="auto" class="rounded-full outline outline-white outline-5 w-52 portrait:mx-auto" poster="<%= vite_asset_url "images/cyan-avatar-2.webp" %>">
               <source src="<%= vite_asset_url "images/cyan-avatar-2.webm" %>" type="video/webm">
               Your browser does not support the
               <video></video>tag
@@ -55,13 +61,13 @@
               <iconify-icon icon="simple-icons:twitch" width="50"></iconify-icon>
             </a>
             <a href="https://steamcommunity.com/id/aldwin7894/" rel="noopener noreferrer" target="_blank" class="text-white hover:text-[#075a8e] h-fit" aria-label="Steam" data-tippy="tooltip" data-tippy-content="Steam">
-              <iconify-icon icon="simple-icons:steam" width="50" class=" hover:bg-white hover:outline-[#075a8e] outline-2 outline outline-offset-[-1px] rounded-full "></iconify-icon>
+              <iconify-icon icon="simple-icons:steam" width="50" class="hover:bg-white hover:outline-[#075a8e] outline-2 outline outline-offset-[-1px] rounded-full"></iconify-icon>
             </a>
             <a href="https://osu.ppy.sh/users/10038123" rel="noopener noreferrer" target="_blank" class="text-white h-fit" aria-label="Osu!" data-tippy="tooltip" data-tippy-content="Osu!">
               <iconify-icon icon="simple-icons:osu" width="50" class="hover:bg-[#f170aa] rounded-full"></iconify-icon>
             </a>
             <a href="https://github.com/aldwin7894" rel="noopener noreferrer" target="_blank" class="hover:text-[#171a1e] text-white h-fit" aria-label="GitHub" data-tippy="tooltip" data-tippy-content="GitHub">
-              <iconify-icon icon="simple-icons:github" width="50" class=" hover:bg-white hover:outline-[#171a1e] outline-2 outline outline-offset-[-1px] rounded-full "></iconify-icon>
+              <iconify-icon icon="simple-icons:github" width="50" class="hover:bg-white hover:outline-[#171a1e] outline-2 outline outline-offset-[-1px] rounded-full"></iconify-icon>
             </a>
           </div>
           <div class="flex flex-row flex-wrap justify-around col-span-12 gap-4 pt-10 pointer-events-auto phone:px-2 tablet:justify-center laptop:justify-start">

diff --git a/app/views/home/lastfm_top_artists.html.erb b/app/views/home/lastfm_top_artists.html.erb
@@ -11,7 +11,7 @@
         <a href="https://www.last.fm/user/aldwin7894/library/artists?date_preset=ALL" rel="noopener noreferrer" target="_blank" class="self-start px-4 text-lg font-bold text-left hover:underline">
           <h3>LAST.FM (TOP ARTISTS OF ALL TIME)</h3>
         </a>
-        <div id="lastfm_top_artists_swiper" class="relative h-full overflow-hidden" x-init="swiper = new Swiper('#lastfm_top_artists_swiper', { effect: 'coverflow', slidesPerView: 'auto', speed: 800, loop: true, centeredSlides: true, coverflowEffect: { rotate: 50, stretch: 0, depth: 300, modifier: 1, slideShadows: false, }, navigation: { disabledClass: 'disabled', hiddenClass: 'invisible', prevEl: '#lastfm_top_prev', nextEl: '#lastfm_top_next' } });">
+        <div id="lastfm_top_artists_swiper" class="relative h-full overflow-hidden" x-init="swiper = new Swiper('#lastfm_top_artists_swiper', { modules: [Navigation,  EffectCoverflow], effect: 'coverflow', slidesPerView: 'auto', speed: 800, loop: true, centeredSlides: true, coverflowEffect: { rotate: 50, stretch: 0, depth: 300, modifier: 1, slideShadows: false, }, navigation: { disabledClass: 'disabled', hiddenClass: 'invisible', prevEl: '#lastfm_top_prev', nextEl: '#lastfm_top_next' } });">
           <div class="absolute inset-y-0 z-10 flex items-center pointer-events-none left-2">
             <button id="lastfm_top_prev" class=" disabled:invisible disabled:pointer-events-none bg-[#019edf] text-white visible lg:-ml-4 focus:outline-none flex items-center justify-center w-10 h-10 -ml-2 rounded-full shadow pointer-events-auto ">
               <iconify-icon icon="material-symbols:chevron-left" width="30" height="30"></iconify-icon>

diff --git a/app/views/home/watched_anime_section.html.erb b/app/views/home/watched_anime_section.html.erb
@@ -1,16 +1,20 @@
 <turbo-frame id="watched_anime_section">
   <div class="absolute inset-y-0 left-[-10px] z-10 flex items-center pointer-events-none">
-    <button id="watched_anime_prev" class=" disabled:invisible disabled:pointer-events-none bg-[#019edf] text-white visible flex lg:-ml-4 focus:outline-none items-center justify-center w-10 h-10 -ml-2 rounded-full shadow pointer-events-auto ">
+    <button id="watched_anime_prev" class="disabled:invisible disabled:pointer-events-none bg-[#019edf] text-white visible flex lg:-ml-4 focus:outline-none items-center justify-center w-10 h-10 -ml-2 rounded-full shadow pointer-events-auto">
       <iconify-icon icon="material-symbols:chevron-left" width="30" height="30"></iconify-icon>
     </button>
   </div>
   <div class="right-[-10px] absolute inset-y-0 z-10 flex items-center pointer-events-none">
-    <button id="watched_anime_next" class=" disabled:invisible disabled:pointer-events-none bg-[#019edf] text-white visible lg:-mr-4 focus:outline-none flex items-center justify-center w-10 h-10 -mr-2 rounded-full shadow pointer-events-auto ">
+    <button id="watched_anime_next" class="disabled:invisible disabled:pointer-events-none bg-[#019edf] text-white visible lg:-mr-4 focus:outline-none flex items-center justify-center w-10 h-10 -mr-2 rounded-full shadow pointer-events-auto">
       <iconify-icon icon="material-symbols:chevron-right" width="30" height="30"></iconify-icon>
     </button>
   </div>
 
-  <div id="watched_anime_swiper" class="overflow-hidden" x-init="swiper = new Swiper('#watched_anime_swiper', { slidesPerView: 'auto', spaceBetween: 20, speed: 500, breakpoints: { 320: { slidesPerView: 1 }, 576: { slidesPerView: 2 }, 900: { slidesPerView: 3 }, 1100: { slidesPerView: 4 }, 1350: { slidesPerView: 5 }, 1600: { slidesPerView: 6 } }, navigation: { disabledClass: 'disabled', hiddenClass: 'invisible', prevEl: '#watched_anime_prev', nextEl: '#watched_anime_next' } });">
+  <div
+    id="watched_anime_swiper"
+    class="overflow-hidden"
+    x-init="swiper = new Swiper('#watched_anime_swiper', { modules: [Navigation], slidesPerView: 'auto', spaceBetween: 20, speed: 500, breakpoints: { 320: { slidesPerView: 1 }, 576: { slidesPerView: 2 }, 900: { slidesPerView: 3 }, 1100: { slidesPerView: 4 }, 1350: { slidesPerView: 5 }, 1600: { slidesPerView: 6 } }, navigation: { disabledClass: 'disabled', hiddenClass: 'invisible', prevEl: '#watched_anime_prev', nextEl: '#watched_anime_next' } });"
+  >
     <div class="text-center swiper-wrapper">
       <% @watched_anime.each_slice(6).first(4).each_with_index do |(*activities), index| %>
         <% activities.each_index do |index2| %>

diff --git a/app/views/home/watched_movie_section.html.erb b/app/views/home/watched_movie_section.html.erb
@@ -1,16 +1,20 @@
 <turbo-frame id="watched_movie_section">
   <div class="absolute inset-y-0 left-[-10px] z-10 flex items-center pointer-events-none">
-    <button id="watched_movie_prev" class=" disabled:invisible disabled:pointer-events-none bg-[#019edf] text-white visible lg:-ml-4 focus:outline-none flex items-center justify-center w-10 h-10 -ml-2 rounded-full shadow pointer-events-auto ">
+    <button id="watched_movie_prev" class="disabled:invisible disabled:pointer-events-none bg-[#019edf] text-white visible lg:-ml-4 focus:outline-none flex items-center justify-center w-10 h-10 -ml-2 rounded-full shadow pointer-events-auto">
       <iconify-icon icon="material-symbols:chevron-left" width="30" height="30"></iconify-icon>
     </button>
   </div>
   <div class="right-[-10px] absolute inset-y-0 z-10 flex items-center pointer-events-none">
-    <button id="watched_movie_next" class=" disabled:invisible disabled:pointer-events-none bg-[#019edf] text-white visible lg:-mr-4 focus:outline-none flex items-center justify-center w-10 h-10 -mr-2 rounded-full shadow pointer-events-auto ">
+    <button id="watched_movie_next" class="disabled:invisible disabled:pointer-events-none bg-[#019edf] text-white visible lg:-mr-4 focus:outline-none flex items-center justify-center w-10 h-10 -mr-2 rounded-full shadow pointer-events-auto">
       <iconify-icon icon="material-symbols:chevron-right" width="30" height="30"></iconify-icon>
     </button>
   </div>
 
-  <div id="watched_movie_swiper" class="overflow-hidden" x-init="swiper = new Swiper('#watched_movie_swiper', { slidesPerView: 'auto', spaceBetween: 20, speed: 500, breakpoints: { 320: { slidesPerView: 1 }, 576: { slidesPerView: 2 }, 900: { slidesPerView: 3 }, 1100: { slidesPerView: 4 }, 1350: { slidesPerView: 5 }, 1600: { slidesPerView: 6 } }, navigation: { disabledClass: 'disabled', hiddenClass: 'invisible', prevEl: '#watched_movie_prev', nextEl: '#watched_movie_next' } });">
+  <div
+    id="watched_movie_swiper"
+    class="overflow-hidden"
+    x-init="swiper = new Swiper('#watched_movie_swiper', { modules: [Navigation], slidesPerView: 'auto', spaceBetween: 20, speed: 500, breakpoints: { 320: { slidesPerView: 1 }, 576: { slidesPerView: 2 }, 900: { slidesPerView: 3 }, 1100: { slidesPerView: 4 }, 1350: { slidesPerView: 5 }, 1600: { slidesPerView: 6 } }, navigation: { disabledClass: 'disabled', hiddenClass: 'invisible', prevEl: '#watched_movie_prev', nextEl: '#watched_movie_next' } });"
+  >
     <div class="text-center swiper-wrapper">
       <% @watched_movie.each_slice(6).first(4).each_with_index do |(*activities), index| %>
         <% activities.each_index do |index2| %>

diff --git a/app/views/layouts/_content.html.erb b/app/views/layouts/_content.html.erb
@@ -6,7 +6,8 @@
 
 <footer class="dark:text-[#bfb3a4] text-gray-400 p-4 bg-[#151515] shadow md:flex md:items-center md:justify-between md:p-6 hidden" id="footer">
   <div class="container flex flex-row gap-2 xs:flex-col">
-    <span class="flex-1 text-sm xs:text-center xs:order-3">© 2022-2023 aldwin7894. All Rights Reserved.</span>
+    <span class="flex-1 text-sm xs:text-center xs:order-3">© 2022-<%= Time.zone.now.year %>
+      aldwin7894. All Rights Reserved.</span>
     <%= link_to "Home", root_path, class: "hover:text-cyan-600 text-center text-md xs:order-1 px-2", target: "_top", data: { turbo_preload: "" } %>
     <%= link_to "AniList Follow Checker", anilist_index_path, class: "hover:text-cyan-600 text-center text-md xs:order-2 px-2", target: "_top", data: { turbo_preload: "" } %>
   </div>

diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "tailwindcss-animatecss": "^3.0.5",
     "terser": "^5.27.0",
     "tippy.js": "^6.3.7",
-    "vite": "^5.0.11",
+    "vite": "^5.0.12",
     "vite-plugin-full-reload": "^1.1.0",
     "vite-plugin-ruby": "^5.0.0"
   },
@@ -58,6 +58,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-tailwindcss": "^3.14.0",
     "prettier": "^3.2.4",
+    "rollup-plugin-visualizer": "^5.12.0",
     "typescript": "^5.3.3"
   },
   "engines": {