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
+

.vscode/settings.json

@@ -18,7 +18,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[ruby]": {
-    "editor.defaultFormatter": "rebornix.ruby"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[scss]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

Gemfile

@@ -8,10 +8,10 @@ gem "jbuilder"
 gem "rails", "~> 7.1.0"
 gem "rails_autolink"
 gem "sass-rails"
-gem "shakapacker"
 gem "turbolinks"
 gem "uglifier"
 
+gem "vite_rails"
 gem "view_component", "~> 2.82"
 
 gem "pg"

Gemfile.lock

@@ -84,10 +84,6 @@ GEM
     ast (2.4.2)
     autocorrect-rb (2.8.5-arm64-darwin)
       rb_sys (>= 0.9.54)
-    autocorrect-rb (2.8.5-x86_64-linux)
-      rb_sys (>= 0.9.54)
-    autocorrect-rb (2.8.5-x86_64-linux-musl)
-      rb_sys (>= 0.9.54)
     base64 (0.1.1)
     bcrypt (3.1.19)
     benchmark-ips (2.12.0)
@@ -158,6 +154,7 @@ GEM
       railties (>= 3.2)
     drb (2.1.1)
       ruby2_keywords
+    dry-cli (1.0.0)
     enumize (0.2.1)
       rails (>= 5.0.0)
     erubi (1.12.0)
@@ -277,8 +274,6 @@ GEM
     nio4r (2.5.9)
     nokogiri (1.15.4-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.15.4-x86_64-linux)
-      racc (~> 1.4)
     notifications (1.1.0)
       kaminari (>= 0.15)
       rails (>= 5.2)
@@ -343,22 +338,22 @@ GEM
       rexml (~> 3.2)
     raabro (1.4.0)
     racc (1.7.1)
-    rack (2.2.8)
+    rack (3.0.8)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-cors (2.0.1)
       rack (>= 2.0.0)
-    rack-protection (3.1.0)
-      rack (~> 2.2, >= 2.2.4)
+    rack-protection (3.0.6)
+      rack
     rack-proxy (0.7.7)
       rack
-    rack-session (1.0.1)
-      rack (< 3)
+    rack-session (2.0.0)
+      rack (>= 3.0.0)
     rack-test (2.1.0)
       rack (>= 1.3)
-    rackup (1.0.0)
-      rack (< 3)
-      webrick
+    rackup (2.1.0)
+      rack (>= 3)
+      webrick (~> 1.8)
     rails (7.1.0)
       actioncable (= 7.1.0)
       actionmailbox (= 7.1.0)
@@ -452,12 +447,6 @@ GEM
     rucaptcha (3.2.1-arm64-darwin)
       railties (>= 3.2)
       rb_sys (>= 0.9.18)
-    rucaptcha (3.2.1-x86_64-linux)
-      railties (>= 3.2)
-      rb_sys (>= 0.9.18)
-    rucaptcha (3.2.1-x86_64-linux-musl)
-      railties (>= 3.2)
-      rb_sys (>= 0.9.18)
     sass-rails (6.0.0)
       sassc-rails (~> 2.1, >= 2.1.1)
     sassc (2.4.0)
@@ -471,12 +460,6 @@ GEM
     second_level_cache (2.7.1)
       activerecord (>= 6.0)
       activesupport (>= 6.0)
-    semantic_range (3.0.0)
-    shakapacker (7.1.0)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     sidekiq (7.1.5)
       concurrent-ruby (< 2)
       connection_pool (>= 2.3.0)
@@ -534,6 +517,13 @@ GEM
       activesupport (>= 5.2.0, < 8.0)
       concurrent-ruby (~> 1.0)
       method_source (~> 1.0)
+    vite_rails (3.0.17)
+      railties (>= 5.1, < 8)
+      vite_ruby (~> 3.0, >= 3.2.2)
+    vite_ruby (3.3.4)
+      dry-cli (>= 0.7, < 2)
+      rack-proxy (~> 0.6, >= 0.6.1)
+      zeitwerk (~> 2.2)
     warden (1.2.9)
       rack (>= 2.0.9)
     webrick (1.8.1)
@@ -543,11 +533,7 @@ GEM
     zeitwerk (2.6.12)
 
 PLATFORMS
-  arm64-darwin-21
-  arm64-darwin-22
   arm64-darwin-23
-  x86_64-linux
-  x86_64-linux-musl
 
 DEPENDENCIES
   action-store
@@ -609,7 +595,6 @@ DEPENDENCIES
   rucaptcha
   sass-rails
   second_level_cache
-  shakapacker
   sidekiq (< 8)
   sidekiq-cron
   social-share-button
@@ -619,6 +604,7 @@ DEPENDENCIES
   twemoji
   uglifier
   view_component (~> 2.82)
+  vite_rails
 
 BUNDLED WITH
-   2.4.15
+   2.4.19

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,

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";
@@ -34,10 +29,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;