diff --git a/.browserslistrc b/.browserslistrc deleted file mode 100644 index e94f8140cc..0000000000 --- a/.browserslistrc +++ /dev/null @@ -1 +0,0 @@ -defaults diff --git a/.gitignore b/.gitignore index 574d9633a8..11a9fa0c3c 100644 --- a/.gitignore +++ b/.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 + diff --git a/Gemfile b/Gemfile index 01cd300560..8a4aac9e8b 100644 --- a/Gemfile +++ b/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" diff --git a/Gemfile.lock b/Gemfile.lock index 8e7e52aff7..af9e503167 100644 --- a/Gemfile.lock +++ b/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 diff --git a/Procfile.dev b/Procfile.dev new file mode 100644 index 0000000000..1acf605c34 --- /dev/null +++ b/Procfile.dev @@ -0,0 +1,3 @@ + +vite: bin/vite dev +web: bin/rails s diff --git a/app/javascript/admin.scss b/app/javascript/admin.scss deleted file mode 100644 index e9a41f39f8..0000000000 --- a/app/javascript/admin.scss +++ /dev/null @@ -1 +0,0 @@ -@import "admin/index"; diff --git a/app/javascript/admin/index.scss b/app/javascript/admin/index.scss index 5ce0f2c810..e4147092db 100644 --- a/app/javascript/admin/index.scss +++ b/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 { diff --git a/app/javascript/application.js b/app/javascript/application.js deleted file mode 100644 index b81a149cd7..0000000000 --- a/app/javascript/application.js +++ /dev/null @@ -1,3 +0,0 @@ -import "homeland/index"; -import "vendor/bootstrap"; -import "front/index"; diff --git a/app/javascript/entrypoints/admin.css b/app/javascript/entrypoints/admin.css new file mode 100644 index 0000000000..648b165c89 --- /dev/null +++ b/app/javascript/entrypoints/admin.css @@ -0,0 +1 @@ +@import "~/admin/index"; diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js new file mode 100644 index 0000000000..5cb43d97ce --- /dev/null +++ b/app/javascript/entrypoints/application.js @@ -0,0 +1,3 @@ +import "~/front/index"; +import "~/homeland/index"; +import "~/vendor/bootstrap"; diff --git a/app/javascript/entrypoints/front.css b/app/javascript/entrypoints/front.css new file mode 100644 index 0000000000..db03324227 --- /dev/null +++ b/app/javascript/entrypoints/front.css @@ -0,0 +1,2 @@ +@import "~/front/index.scss"; +@import "~/homeland/application.tailwind"; diff --git a/app/javascript/entrypoints/turbolinks-app.css b/app/javascript/entrypoints/turbolinks-app.css new file mode 100644 index 0000000000..981b72ca3e --- /dev/null +++ b/app/javascript/entrypoints/turbolinks-app.css @@ -0,0 +1 @@ +@import "~/homeland/turbolinks-app"; diff --git a/app/javascript/front.scss b/app/javascript/front.scss deleted file mode 100644 index 3c267a6b0b..0000000000 --- a/app/javascript/front.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import "front/index"; -@import "homeland/application.tailwind"; diff --git a/app/javascript/front/app.js b/app/javascript/front/app.js index 4195aae6b4..4466a19ad2 100644 --- a/app/javascript/front/app.js +++ b/app/javascript/front/app.js @@ -1,4 +1,4 @@ -import i18n from "homeland/i18n"; +import i18n from "~/homeland/i18n"; require("./emoji-modal"); require("./notifier"); diff --git a/app/javascript/front/index.scss b/app/javascript/front/index.scss index 64137c092d..2182da4221 100644 --- a/app/javascript/front/index.scss +++ b/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"; diff --git a/app/javascript/front/topics.js b/app/javascript/front/topics.js index 7d91bb7c1c..98bd86c0b1 100644 --- a/app/javascript/front/topics.js +++ b/app/javascript/front/topics.js @@ -1,4 +1,4 @@ -import i18n from "homeland/i18n"; +import i18n from "~/homeland/i18n"; // TopicsController window.Topics = { diff --git a/app/javascript/homeland/_vars.scss b/app/javascript/homeland/_vars.scss index 8bb59b4609..b2d4eac292 100644 --- a/app/javascript/homeland/_vars.scss +++ b/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); diff --git a/app/javascript/homeland/bootstrap_custom.scss b/app/javascript/homeland/bootstrap_custom.scss index fa313caff1..02a819dd6e 100644 --- a/app/javascript/homeland/bootstrap_custom.scss +++ b/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 diff --git a/app/javascript/homeland/index.js b/app/javascript/homeland/index.js index e6cbde58b3..aae812ca2f 100644 --- a/app/javascript/homeland/index.js +++ b/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"; diff --git a/app/javascript/homeland/index.scss b/app/javascript/homeland/index.scss index 867498eff4..b3259a7ce1 100644 --- a/app/javascript/homeland/index.scss +++ b/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"; diff --git a/app/javascript/homeland/turbolinks-app.scss b/app/javascript/homeland/turbolinks-app.scss index c79bf825ee..c22ab8fb1d 100644 --- a/app/javascript/homeland/turbolinks-app.scss +++ b/app/javascript/homeland/turbolinks-app.scss @@ -1,4 +1,4 @@ -@import "vars"; +@import "./_vars.scss"; :root { --primary: #000; diff --git a/app/javascript/turbolinks-app.scss b/app/javascript/turbolinks-app.scss deleted file mode 100644 index 8b2b7572f6..0000000000 --- a/app/javascript/turbolinks-app.scss +++ /dev/null @@ -1 +0,0 @@ -@import "homeland/turbolinks-app"; diff --git a/app/javascript/vendor/social-share-button/index.js b/app/javascript/vendor/social-share-button/index.js index 24a5c0b7f3..92e7123ae3 100644 --- a/app/javascript/vendor/social-share-button/index.js +++ b/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,18 +22,22 @@ 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) { @@ -37,27 +45,49 @@ window.SocialShareButton = { } 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"e=${desc}`, 555, 400); + SocialShareButton.openUrl( + `http://www.facebook.com/sharer/sharer.php?u=${url}&display=popup"e=${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; - } + }, }; diff --git a/app/views/admin/photos/index.html.erb b/app/views/admin/photos/index.html.erb index 0e598e8c8f..58b9a7f5ac 100644 --- a/app/views/admin/photos/index.html.erb +++ b/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? %>
-
+
<% if photo.user %> <%= link_to photo.user&.login, edit_admin_user_path(photo.user_id), target: "_blank" %> <% end %> diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb index d3b0748a2c..b18554bdf3 100644 --- a/app/views/layouts/admin.html.erb +++ b/app/views/layouts/admin.html.erb @@ -3,15 +3,16 @@ <%= Setting.app_name %> - Admin Panel - <%= 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 %>
-