Use Vite

.gitignore

@@ -56,3 +56,11 @@ yarn-debug.log*
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
+
+# Vite Ruby
+/public/vite*
+node_modules
+# Vite uses dotenv and suggests to ignore local-only env files. See
+# https://vitejs.dev/guide/env-and-mode.html#env-files
+*.local
+

Gemfile

@@ -8,7 +8,6 @@ gem "jbuilder"
 gem "rails", "~> 7.0"
 gem "rails_autolink"
 gem "sass-rails"
-gem "shakapacker"
 gem "turbolinks"
 gem "uglifier"
 
@@ -113,3 +112,5 @@ group :development, :test do
 
   gem "standard"
 end
+
+gem "vite_rails", "~> 3.0"

Gemfile.lock

@@ -144,6 +144,7 @@ GEM
     dotenv-rails (2.8.1)
       dotenv (= 2.8.1)
       railties (>= 3.2)
+    dry-cli (0.7.0)
     enumize (0.2.1)
       rails (>= 5.0.0)
     erubi (1.11.0)
@@ -428,12 +429,6 @@ GEM
     second_level_cache (2.7.1)
       activerecord (>= 6.0)
       activesupport (>= 6.0)
-    semantic_range (3.0.0)
-    shakapacker (6.5.2)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     sidekiq (6.5.7)
       connection_pool (>= 2.2.5)
       rack (~> 2.0)
@@ -480,6 +475,13 @@ GEM
       activesupport (>= 5.0.0, < 8.0)
       concurrent-ruby (~> 1.0)
       method_source (~> 1.0)
+    vite_rails (3.0.13)
+      railties (>= 5.1, < 8)
+      vite_ruby (~> 3.0, >= 3.2.2)
+    vite_ruby (3.2.13)
+      dry-cli (~> 0.7.0)
+      rack-proxy (~> 0.6, >= 0.6.1)
+      zeitwerk (~> 2.2)
     warden (1.2.9)
       rack (>= 2.0.9)
     websocket-driver (0.7.5)
@@ -552,7 +554,6 @@ DEPENDENCIES
   rucaptcha
   sass-rails
   second_level_cache
-  shakapacker
   sidekiq
   sidekiq-cron
   social-share-button
@@ -562,6 +563,7 @@ DEPENDENCIES
   twemoji
   uglifier
   view_component
+  vite_rails (~> 3.0)
 
 BUNDLED WITH
    2.3.22

Procfile.dev

@@ -0,0 +1,3 @@
+
+vite: bin/vite dev
+web: bin/rails s

app/javascript/admin/index.scss

@@ -1,6 +1,6 @@
-@import "homeland/application.tailwind";
-@import "~homeland/index";
-@import "~homeland/dark-mode";
+@import "~/homeland/application.tailwind";
+@import "~/homeland/index";
+@import "~/homeland/dark-mode";
 
 body,
 p,
@@ -75,7 +75,7 @@ pre {
 }
 
 .toolbar {
-  @apply mb-4 flex gap-4;  
+  @apply mb-4 flex gap-4;
 }
 
 .toolbar .form-inline {

app/javascript/entrypoints/admin.css

@@ -0,0 +1 @@
+@import "~/admin/index";

app/javascript/entrypoints/application.js

@@ -0,0 +1,3 @@
+import "~/front/index";
+import "~/homeland/index";
+import "~/vendor/bootstrap";

app/javascript/entrypoints/front.css

@@ -0,0 +1,2 @@
+@import "~/front/index.scss";
+@import "~/homeland/application.tailwind";

app/javascript/entrypoints/turbolinks-app.css

@@ -0,0 +1 @@
+@import "~/homeland/turbolinks-app";

app/javascript/front/app.js

@@ -1,4 +1,4 @@
-import i18n from "homeland/i18n";
+import i18n from "~/homeland/i18n";
 
 require("./emoji-modal");
 require("./notifier");

app/javascript/front/index.scss

@@ -1,9 +1,9 @@
-@import "~homeland/index";
+@import "~/homeland/index.scss";
 
-@import "~vendor/atwho";
-@import "~vendor/jquery.fluidbox";
-@import "~vendor/tooltipster.bundle";
-@import "~vendor/social-share-button/index";
+@import "~/vendor/atwho";
+@import "~/vendor/jquery.fluidbox";
+@import "~/vendor/tooltipster.bundle";
+@import "~/vendor/social-share-button/index";
 
 @import "notifications";
 @import "home";

app/javascript/front/topics.js

@@ -1,4 +1,4 @@
-import i18n from "homeland/i18n";
+import i18n from "~/homeland/i18n";
 
 // TopicsController
 window.Topics = {

app/javascript/homeland/_vars.scss

@@ -27,7 +27,6 @@ $yellow: #dbc12d;
   --filter-color: #808080;
   --filter-active-color: #202020;
 
-  // speical vars
   --btn-border-radius: 0.375rem;
   --btn-box-shaodw: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --btn-secondary-text-color: rgba(55, 65, 81, 1);

app/javascript/homeland/bootstrap_custom.scss

@@ -4,15 +4,10 @@
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
-
-// scss-docs-start import-stack
-// Configuration
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/utilities";
-
-// Layout & components
 @import "~bootstrap/scss/root";
 @import "~bootstrap/scss/reboot";
 @import "~bootstrap/scss/images";
@@ -35,10 +30,5 @@
 @import "~bootstrap/scss/tooltip";
 @import "~bootstrap/scss/popover";
 @import "~bootstrap/scss/spinners";
-
-// Helpers
 @import "~bootstrap/scss/helpers";
-
-// Utilities
 @import "~bootstrap/scss/utilities/api";
-// scss-docs-end import-stack

app/javascript/homeland/index.js

@@ -17,20 +17,20 @@ TubrolinksPrefetch.start();
 window.Rails = require("@rails/ujs");
 Rails.start();
 
-require("pagination");
-require("jquery.timeago");
-require("jquery.timeago.settings");
-require("jquery.hotkeys");
-require("jquery.autogrow-textarea");
-require("tooltipster.bundle.min");
-require("dropzone");
-require("jquery.fluidbox.min");
-require("jquery.caret");
-require("jquery.atwho.min");
-require("google_analytics");
-require("jquery.infinitescroll.min");
-require("jquery.mobile-events");
-require("vendor/social-share-button");
+require("~/pagination");
+require("~/jquery.timeago");
+require("~/jquery.timeago.settings");
+require("~/jquery.hotkeys");
+require("~/jquery.autogrow-textarea");
+require("~/tooltipster.bundle.min");
+require("~/dropzone");
+require("~/jquery.fluidbox.min");
+require("~/jquery.caret");
+require("~/jquery.atwho.min");
+require("~/google_analytics");
+require("~/jquery.infinitescroll.min");
+require("~/jquery.mobile-events");
+require("~/vendor/social-share-button");
 
 import { createConsumer } from "@rails/actioncable";
 

app/javascript/homeland/index.scss

@@ -1,10 +1,10 @@
-@import "_mixins";
-@import "_vars";
+@import "_mixins.scss";
+@import "_vars.scss";
 
 /* TODO: Remove Bootstrap, its utilities class conflict with tailwindcss
   eg: mb-4(margin-bottom: 1rem) in Tailwind, and margin-bottom: 1.5rem !important; in Bootstrap.
 */
-@import "./bootstrap_custom";
+@import "./bootstrap_custom.scss";
 @import "./iconfont.scss";
 @import "./markdown.scss";
 

app/javascript/homeland/turbolinks-app.scss

@@ -1,4 +1,4 @@
-@import "vars";
+@import "./_vars.scss";
 
 :root {
   --primary: #000;

app/javascript/vendor/social-share-button/index.js

@@ -1,14 +1,18 @@
-require("jquery.qrcode.min")
+require("~/jquery.qrcode.min");
 require("./wechat");
 
 window.SocialShareButton = {
   openUrl(url, width, height) {
-    if (width == null) { width = 640; }
-    if (height == null) { height = 480; }
-    const left = (screen.width / 2) - (width / 2);
-    const top = (screen.height * 0.3) - (height / 2);
+    if (width == null) {
+      width = 640;
+    }
+    if (height == null) {
+      height = 480;
+    }
+    const left = screen.width / 2 - width / 2;
+    const top = screen.height * 0.3 - height / 2;
     const opt = `width=${width},height=${height},left=${left},top=${top},menubar=no,status=no,location=no`;
-    window.open(url, 'popup', opt);
+    window.open(url, "popup", opt);
     return false;
   },
 
@@ -18,46 +22,72 @@ window.SocialShareButton = {
     }
 
     const site = el.getAttribute("data-site");
-    const appkey = el.getAttribute("data-appkey") || '';
+    const appkey = el.getAttribute("data-appkey") || "";
     const $parent = el.parentNode;
-    let title = encodeURIComponent(el.getAttribute("data-" + site + "-title") || $parent.getAttribute('data-title') || '');
-    const img = encodeURIComponent($parent.getAttribute("data-img") || '');
-    let url = encodeURIComponent($parent.getAttribute("data-url") || '');
-    const via = encodeURIComponent($parent.getAttribute("data-via") || '');
-    const desc = encodeURIComponent($parent.getAttribute("data-desc") || ' ');
+    let title = encodeURIComponent(
+      el.getAttribute("data-" + site + "-title") ||
+        $parent.getAttribute("data-title") ||
+        ""
+    );
+    const img = encodeURIComponent($parent.getAttribute("data-img") || "");
+    let url = encodeURIComponent($parent.getAttribute("data-url") || "");
+    const via = encodeURIComponent($parent.getAttribute("data-via") || "");
+    const desc = encodeURIComponent($parent.getAttribute("data-desc") || " ");
 
     // tracking click events if google analytics enabled
-    const ga = window[window['GoogleAnalyticsObject'] || 'ga'];
-    if (typeof ga === 'function') {
-      ga('send', 'event', 'Social Share Button', 'click', site);
+    const ga = window[window["GoogleAnalyticsObject"] || "ga"];
+    if (typeof ga === "function") {
+      ga("send", "event", "Social Share Button", "click", site);
     }
 
     if (url.length === 0) {
       url = encodeURIComponent(location.href);
     }
     switch (site) {
       case "weibo":
-        SocialShareButton.openUrl(`http://service.weibo.com/share/share.php?url=${url}&type=3&pic=${img}&title=${title}&appkey=${appkey}`, 620, 370);
+        SocialShareButton.openUrl(
+          `http://service.weibo.com/share/share.php?url=${url}&type=3&pic=${img}&title=${title}&appkey=${appkey}`,
+          620,
+          370
+        );
         break;
       case "twitter":
-        var hashtags = encodeURIComponent(el.getAttribute("data-" + site + "-hashtags") || $parent.getAttribute("data-hashtags") || '');
-        var via_str = '';
-        if (via.length > 0) { via_str = `&via=${via}`; }
-        title = `${title}` + encodeURIComponent("\n\n") + `${url}`
-        SocialShareButton.openUrl(`https://twitter.com/intent/tweet?text=${title}&hashtags=${hashtags}${via_str}`, 650, 300);
+        var hashtags = encodeURIComponent(
+          el.getAttribute("data-" + site + "-hashtags") ||
+            $parent.getAttribute("data-hashtags") ||
+            ""
+        );
+        var via_str = "";
+        if (via.length > 0) {
+          via_str = `&via=${via}`;
+        }
+        title = `${title}` + encodeURIComponent("\n\n") + `${url}`;
+        SocialShareButton.openUrl(
+          `https://twitter.com/intent/tweet?text=${title}&hashtags=${hashtags}${via_str}`,
+          650,
+          300
+        );
         break;
       case "facebook":
-        SocialShareButton.openUrl(`http://www.facebook.com/sharer/sharer.php?u=${url}&display=popup&quote=${desc}`, 555, 400);
+        SocialShareButton.openUrl(
+          `http://www.facebook.com/sharer/sharer.php?u=${url}&display=popup&quote=${desc}`,
+          555,
+          400
+        );
         break;
       case "wechat":
-        if (!window.SocialShareWeChatButton) { throw new Error("You should require social-share-button/wechat to your application.js"); }
+        if (!window.SocialShareWeChatButton) {
+          throw new Error(
+            "You should require social-share-button/wechat to your application.js"
+          );
+        }
         window.SocialShareWeChatButton.qrcode({
           url: decodeURIComponent(url),
-          header: el.getAttribute('title'),
-          footer: el.getAttribute("data-wechat-footer")
+          header: el.getAttribute("title"),
+          footer: el.getAttribute("data-wechat-footer"),
         });
         break;
     }
     return false;
-  }
+  },
 };

app/views/admin/photos/index.html.erb

@@ -16,7 +16,7 @@
         <%= link_to image_tag(photo.image.url(:md)), photo.image.url, target: "_blank" if !photo[:image].blank? %>
       </div>
       <div class="card-body">
-        <div class="card-text mb-2">
+        <div class="mb-2 card-text">
           <% if photo.user %>
             <%= link_to photo.user&.login, edit_admin_user_path(photo.user_id), target: "_blank" %>
           <% end %>

app/views/layouts/admin.html.erb

@@ -3,15 +3,16 @@
   <head>
     <meta name="theme" content="<%= user_theme %>">
     <title><%= Setting.app_name %> - Admin Panel</title>
-    <%= stylesheet_pack_tag "admin" %>
-    <%= javascript_pack_tag "application", defer: false %>
+    <%= vite_client_tag %>
+    <%= vite_stylesheet_tag "admin" %>
+    <%= vite_javascript_tag "application", defer: false %>
     <%= csrf_meta_tag %>
   </head>
   <body>
     <div class="header">
       <div class="header navbar navbar-expand flex-md-row bd-navbar">
         <div class="container mx-auto sm:flex">
-          <div class="navbar-header hidden md:flex items-center" data-turbolinks-permanent>
+          <div class="items-center hidden navbar-header md:flex" data-turbolinks-permanent>
             <%= link_to("Admin Panel", main_app.admin_root_path, class: "navbar-brand") %>
           </div>
           <div class="navbar-nav-scroll">