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.scss";

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,7 +1,4 @@
-import i18n from "homeland/i18n";
-
-require("./emoji-modal");
-require("./notifier");
+import i18n from "~/homeland/i18n";
 
 const AppView = Backbone.View.extend({
   el: "body",
@@ -37,8 +34,6 @@ const AppView = Backbone.View.extend({
   },
 
   initComponents() {
-    $("abbr.timeago").timeago();
-
     // Bind Ctrl+Enter for submit
     $(".cell_comments_new textarea").unbind("keydown");
     $(".cell_comments_new textarea").bind(

app/javascript/front/home.scss

@@ -1,4 +1,4 @@
-@import "~homeland/_vars";
+@import "~/homeland/_vars";
 
 #home_index {
   line-height: 160%;

app/javascript/front/index.js

@@ -1,5 +1,6 @@
-require("./app");
-require("./topics");
-require("./toc");
-require("./notifier");
-require("./editor");
+import("./emoji-modal");
+import("./notifier");
+import("./app");
+import("./topics");
+import("./toc");
+import("./editor");

app/javascript/front/index.scss

@@ -1,9 +1,8 @@
-@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/tooltipster.bundle";
+@import "~/vendor/social-share-button/index";
 
 @import "notifications";
 @import "home";
@@ -13,7 +12,7 @@
 @import "search";
 @import "toc";
 @import "highlight";
-@import "~homeland/dark-mode";
+@import "~/homeland/dark-mode";
 
 .page-topics {
   .navbar-fixed-active {

app/javascript/front/notifier.js

@@ -41,7 +41,7 @@ class Notifier {
         }
       }
     } else {
-      return console.log(
+      return console.warn(
         "Desktop notifications are not supported for this Browser/OS version yet."
       );
     }

app/javascript/front/search.scss

@@ -1,4 +1,5 @@
-@import "~homeland/_vars";
+@import "~/homeland/_vars";
+
 .search-results {
   .pagination {
     margin-top: 25px;

app/javascript/front/teams.scss

@@ -1,4 +1,4 @@
-@import "~homeland/_vars";
+@import "~/homeland/_vars";
 
 .team-header {
   background: var(--sub-navbar-background-color);

app/javascript/front/toc.scss

@@ -1,4 +1,4 @@
-@import "~homeland/_vars";
+@import "~/homeland/_vars";
 
 .toc-container {
   display: none;

app/javascript/front/topics.js

@@ -1,7 +1,7 @@
-import i18n from "homeland/i18n";
+import i18n from "~/homeland/i18n";
 
 // TopicsController
-window.Topics = {
+window.Topics = window.Topics || {
   topic_id: null,
   user_liked_reply_ids: [],
 };
@@ -28,7 +28,6 @@ window.TopicView = Backbone.View.extend({
 
     this.initComponents();
     this.initCableUpdate();
-    this.initContentImageZoom();
     this.checkRepliesLikeStatus();
     return this.itemsUpdated();
   },
@@ -126,35 +125,6 @@ window.TopicView = Backbone.View.extend({
     return this.unsetReplyTo();
   },
 
-  initContentImageZoom() {
-    const exceptClasses = ["emoji", "twemoji", "media-object avatar-16"];
-    const imgEls = $(".markdown img");
-    for (let el of Array.from(imgEls)) {
-      if (exceptClasses.indexOf($(el).attr("class")) === -1) {
-        $(el).wrap(
-          `<a href='${$(el).attr(
-            "src"
-          )}' class='zoom-image' data-action='zoom'></a>`
-        );
-      }
-    }
-
-    // Bind click event
-    if (App.turbolinks || App.mobile) {
-      $("a.zoom-image").attr("target", "_blank");
-    } else {
-      $("a.zoom-image").fluidbox({
-        closeTrigger: [
-          {
-            selector: "window",
-            event: "scroll",
-          },
-        ],
-      });
-    }
-    return true;
-  },
-
   preview(body) {
     $("#preview").text("Loading...");
 
@@ -174,6 +144,7 @@ window.TopicView = Backbone.View.extend({
     preview_box.hide();
 
     return $(".preview", switcher).click((e) => {
+      debugger;
       e.preventDefault();
       const target = e.currentTarget;
 

app/javascript/front/users.scss

@@ -1,4 +1,5 @@
-@import "~homeland/_vars";
+@import "~/homeland/_vars";
+
 .subnav {
   margin-bottom: -18px;
   .nav-tabs {

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);