Fix JavaScript import in Vite.

app/javascript/entrypoints/admin.css

@@ -1 +1 @@
-@import "~/admin/index";
+@import "~/admin/index.scss";

app/javascript/front/app.js

@@ -1,8 +1,5 @@
 import i18n from "~/homeland/i18n";
 
-require("./emoji-modal");
-require("./notifier");
-
 const AppView = Backbone.View.extend({
   el: "body",
   repliesPerPage: 50,
@@ -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/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,7 +1,6 @@
 @import "~/homeland/index.scss";
 
 @import "~/vendor/atwho";
-@import "~/vendor/jquery.fluidbox";
 @import "~/vendor/tooltipster.bundle";
 @import "~/vendor/social-share-button/index";
 

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/topics.js

@@ -1,7 +1,7 @@
 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/homeland/i18n.js.erb → app/javascript/homeland/i18n.js

@@ -1,8 +1,8 @@
 /* eslint-disable */
 import i18n from "i18next";
-const deepAssign = require('deep-assign');
-const metaLocale = document.querySelector('meta[name=locale]');
-const lang = (metaLocale && metaLocale.content || 'en').replace('-', '_');
+const deepAssign = import("deep-assign");
+const metaLocale = document.querySelector("meta[name=locale]");
+const lang = ((metaLocale && metaLocale.content) || "en").replace("-", "_");
 
 i18n.init({
   // we init with resources
@@ -13,34 +13,38 @@ i18n.init({
         "common.unlike": "Unlike",
         "common.follow_user": "Follow",
         "common.unfollow_user": "Followed",
-        "common.block_user_title": "Block this user, you will not see him topics.",
+        "common.block_user_title":
+          "Block this user, you will not see him topics.",
         "common.block_user": "Block",
         "common.unblock_user": "Unblock",
-        "common.block_node_title": "Block this node, you will not see topics in this node.",
+        "common.block_node_title":
+          "Block this node, you will not see topics in this node.",
         "common.block_node": "Block node",
         "common.unblock_node": "Unblock node",
         "common.favorite": "Favorite",
-        "common.unfavorite": "Unfavorite"
-      }
+        "common.unfavorite": "Unfavorite",
+      },
     },
     zh_CN: {
       translation: {
         "common.likes": "个赞",
         "common.unlike": "取消赞",
         "common.follow_user": "关注",
         "common.unfollow_user": "已关注",
-        "common.block_user_title": "屏蔽后，社区列表将不会出现此用户发布的内容。",
+        "common.block_user_title":
+          "屏蔽后，社区列表将不会出现此用户发布的内容。",
         "common.block_user": "屏蔽",
         "common.unblock_user": "取消屏蔽",
-        "common.block_node_title": "屏蔽后，社区列表将不会显示此节点有关的内容。",
+        "common.block_node_title":
+          "屏蔽后，社区列表将不会显示此节点有关的内容。",
         "common.block_node": "屏蔽节点",
         "common.unblock_node": "取消节点屏蔽",
         "common.favorite": "收藏",
-        "common.unfavorite": "取消收藏"
-      }
-    }
-  },  
+        "common.unfavorite": "取消收藏",
+      },
+    },
+  },
   debug: false,
-  lng: lang  
+  lng: lang,
 });
 export default i18n;

app/javascript/homeland/index.js

@@ -1,38 +1,40 @@
-import jQuery from "jquery";
-window.jQuery = jQuery;
-window.$ = jQuery;
-window.Backbone = require("backbone");
-window._ = require("underscore");
+import { createConsumer } from "@rails/actioncable";
+import * as Rails from "@rails/ujs";
+import TubrolinksPrefetch from "turbolinks-prefetch";
 
+import Backbone from "backbone";
+import jQuery from "jquery";
 import Turbolinks from "turbolinks";
-import TubrolinksPrefetch from "turbolinks-prefetch";
+import * as Underscore from "underscore";
+
+import("dropzone");
+import("jquery.caret");
 
+window.jQuery = jQuery;
+window.$ = jQuery;
+window.Backbone = Backbone;
+window._ = Underscore;
 window.Turbolinks = Turbolinks;
+
 Turbolinks.start();
 Turbolinks.setProgressBarDelay(200);
 // Increment Turbolinks cache size upto 30
 Turbolinks.controller.cache.size = 30;
 TubrolinksPrefetch.start();
 
-window.Rails = require("@rails/ujs");
+window.Rails = Rails;
 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");
+import("~/vendor/pagination");
+import("~/vendor/jquery.hotkeys");
+import("~/vendor/jquery.autogrow-textarea");
+import("~/vendor/tooltipster.bundle.min");
+import("~/vendor/jquery.atwho.min");
+import("~/vendor/jquery.infinitescroll.min");
+import("~/vendor/jquery.mobile-events");
+import("~/vendor/social-share-button");
 
-import { createConsumer } from "@rails/actioncable";
+import("./timeago.settings");
 
 window.App = {
   turbolinks: false,

app/javascript/homeland/index.scss

@@ -423,6 +423,7 @@ body {
   font-size: 14px;
 }
 
+.form-select,
 .form-control {
   background-color: var(--form-control-background-color);
   border-color: var(--form-control-border-color);

app/javascript/homeland/timeago.settings.js

@@ -0,0 +1,71 @@
+import("timeago");
+
+const strings = {
+  "zh-CN": {
+    prefixAgo: null,
+    prefixFromNow: null,
+    suffixAgo: "前",
+    suffixFromNow: "刚刚",
+    seconds: "1 分钟",
+    minute: "约 1 分钟",
+    minutes: "%d 分钟",
+    hour: "1 小时",
+    hours: "%d 小时",
+    day: "1 天",
+    days: "%d 天",
+    month: "1 月",
+    months: "%d 月",
+    year: "1 年",
+    years: "%d 年",
+    numbers: [],
+    wordSeparator: "",
+  },
+  en: {
+    prefixAgo: null,
+    prefixFromNow: null,
+    suffixAgo: "ago",
+    suffixFromNow: "one second",
+    seconds: "few seconds",
+    minute: "one minute",
+    minutes: "%d minutes",
+    hour: "one hour",
+    hours: "%d hours",
+    day: "one day",
+    days: "%d days",
+    month: "one month",
+    months: "%d months",
+    year: "one year",
+    years: "%d years",
+    numbers: [],
+  },
+  "zh-TW": {
+    prefixAgo: null,
+    prefixFromNow: null,
+    suffixAgo: "前",
+    suffixFromNow: "剛剛",
+    seconds: "1 分鐘",
+    minute: "約 1 分鐘",
+    minutes: "%d 分鐘",
+    hour: "1 小時",
+    hours: "%d 小時",
+    day: "1 天",
+    days: "%d 天",
+    month: "1 月",
+    months: "%d 月",
+    year: "1 年",
+    years: "%d 年",
+    numbers: [],
+    wordSeparator: "",
+  },
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+  const localized = strings[App.locale];
+  if (jQuery.timeago && localized) {
+    jQuery.timeago.settings.strings = localized;
+    // Display original dates older than 3 months.
+    jQuery.timeago.settings.cutoff = 1000 * 60 * 60 * 24 * 30 * 3;
+  }
+
+  $("abbr.timeago").timeago();
+});

app/javascript/vendor/bootstrap.js

@@ -1,15 +1,2 @@
 import * as bootstrap from "bootstrap/dist/js/bootstrap.esm";
 window.bootstrap = bootstrap;
-require("bootstrap-select");
-
-document.addEventListener("turbolinks:load", () => {
-  $("select.bootstrap-select").selectpicker({
-    size: 10,
-    style: "btn-secondary",
-  });
-});
-document.addEventListener("turbolinks:before-cache", () => {
-  $("select.bootstrap-select")
-    .selectpicker("destroy")
-    .addClass("bootstrap-select");
-});

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

@@ -1,5 +1,5 @@
-require("~/jquery.qrcode.min");
-require("./wechat");
+import("~/vendor/jquery.qrcode.min");
+import("./wechat");
 
 window.SocialShareButton = {
   openUrl(url, width, height) {