From 206a4b5de5b33095390e6af5698d68165a7c5f64 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Tue, 12 Oct 2021 23:03:08 -0500
Subject: [PATCH] docker: avoid rebuilding CSS/JS assets on every commit.

Restructure the Dockerfile and the CSS/JS files so that we only rebuild
the CSS and JS when they change, not on every commit.

Before it took several minutes to rebuild the Docker image after every
commit, even when the JS/CSS files didn't change. This also made pulling
images slower.

This requires refactoring the CSS and JS to not use embedded Ruby (ERB)
templates, since this made the CSS and JS dependent on the Ruby
codebase, which is why we had to rebuild the assets after every Ruby
change.
---
 .dockerignore                                 |  1 -
 app/javascript/packs/application.js           |  6 ++--
 .../{autocomplete.js.erb => autocomplete.js}  | 11 ++++---
 .../src/javascripts/post_mode_menu.js         |  2 +-
 .../javascripts/{posts.js.erb => posts.js}    |  0
 .../{uploads.js.erb => uploads.js}            | 10 ++++---
 .../common/{tags.scss.erb => tags.scss}       |  0
 .../{mod_queue.scss.erb => mod_queue.scss}    |  6 ----
 .../specific/{notes.scss.erb => notes.scss}   | 11 ++++---
 app/logical/autocomplete_service.rb           |  2 ++
 app/views/layouts/default.html.erb            |  2 ++
 app/views/modqueue/index.html.erb             | 10 +++++++
 app/views/uploads/new.html.erb                |  4 +++
 config/docker/Dockerfile.danbooru             | 29 +++++++++++--------
 config/webpack/base.js                        |  9 ------
 package.json                                  |  1 -
 yarn.lock                                     | 22 +-------------
 17 files changed, 56 insertions(+), 70 deletions(-)
 delete mode 120000 .dockerignore
 rename app/javascript/src/javascripts/{autocomplete.js.erb => autocomplete.js} (95%)
 rename app/javascript/src/javascripts/{posts.js.erb => posts.js} (100%)
 rename app/javascript/src/javascripts/{uploads.js.erb => uploads.js} (96%)
 rename app/javascript/src/styles/common/{tags.scss.erb => tags.scss} (100%)
 rename app/javascript/src/styles/specific/{mod_queue.scss.erb => mod_queue.scss} (68%)
 rename app/javascript/src/styles/specific/{notes.scss.erb => notes.scss} (92%)

diff --git a/.dockerignore b/.dockerignore
deleted file mode 120000
index 3e4e48b0b..000000000
--- a/.dockerignore
+++ /dev/null
@@ -1 +0,0 @@
-.gitignore
\ No newline at end of file
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 4fbd50adb..7daf6f1cd 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -32,7 +32,7 @@ importAll(require.context('../src/styles', true, /\.s?css(?:\.erb)?$/));
 importAll(require.context('../../components', true, /\.js(\.erb)?$/));
 importAll(require.context('../../components', true, /\.s?css(?:\.erb)?$/));
 
-import Autocomplete from "../src/javascripts/autocomplete.js.erb";
+import Autocomplete from "../src/javascripts/autocomplete.js";
 import Blacklist from "../src/javascripts/blacklists.js";
 import CommentComponent from "../../components/comment_component/comment_component.js";
 import CurrentUser from "../src/javascripts/current_user.js";
@@ -40,13 +40,13 @@ import Dtext from "../src/javascripts/dtext.js";
 import IqdbQuery from "../src/javascripts/iqdb_queries.js";
 import Note from "../src/javascripts/notes.js";
 import PopupMenuComponent from "../../components/popup_menu_component/popup_menu_component.js";
-import Post from "../src/javascripts/posts.js.erb";
+import Post from "../src/javascripts/posts.js";
 import PostModeMenu from "../src/javascripts/post_mode_menu.js";
 import PostTooltip from "../src/javascripts/post_tooltips.js";
 import RelatedTag from "../src/javascripts/related_tag.js";
 import Shortcuts from "../src/javascripts/shortcuts.js";
 import TagCounter from "../src/javascripts/tag_counter.js";
-import Upload from "../src/javascripts/uploads.js.erb";
+import Upload from "../src/javascripts/uploads.js";
 import UserTooltip from "../src/javascripts/user_tooltips.js";
 import Utility from "../src/javascripts/utility.js";
 import Ugoira from "../src/javascripts/ugoira.js"
diff --git a/app/javascript/src/javascripts/autocomplete.js.erb b/app/javascript/src/javascripts/autocomplete.js
similarity index 95%
rename from app/javascript/src/javascripts/autocomplete.js.erb
rename to app/javascript/src/javascripts/autocomplete.js
index 64482ac4a..b0da16fea 100644
--- a/app/javascript/src/javascripts/autocomplete.js.erb
+++ b/app/javascript/src/javascripts/autocomplete.js
@@ -1,10 +1,5 @@
 let Autocomplete = {};
 
-/* eslint-disable */
-Autocomplete.TAG_CATEGORIES = <%= TagCategory.mapping.to_json.html_safe %>;
-/* eslint-enable */
-
-Autocomplete.TAG_PREFIXES = "-|~|" + Object.keys(Autocomplete.TAG_CATEGORIES).map(category => category + ":").join("|");
 Autocomplete.MAX_RESULTS = 10;
 
 Autocomplete.initialize_all = function() {
@@ -117,7 +112,7 @@ Autocomplete.insert_completion = function(input, completion) {
   var before_caret_text = input.value.substring(0, input.selectionStart).replace(/^[ \t]+|[ \t]+$/gm, "");
   var after_caret_text = input.value.substring(input.selectionStart).replace(/^[ \t]+|[ \t]+$/gm, "");
 
-  var regexp = new RegExp("(" + Autocomplete.TAG_PREFIXES + ")?\\S+$", "g");
+  var regexp = new RegExp("(" + Autocomplete.tag_prefixes().join("|") + ")?\\S+$", "g");
   before_caret_text = before_caret_text.replace(regexp, "$1") + completion + " ";
 
   input.value = before_caret_text + after_caret_text;
@@ -208,6 +203,10 @@ Autocomplete.autocomplete_source = function(query, type) {
   });
 }
 
+Autocomplete.tag_prefixes = function() {
+  return JSON.parse($("meta[name=autocomplete-tag-prefixes]").attr("content"));
+};
+
 $(document).ready(function() {
   Autocomplete.initialize_all();
 });
diff --git a/app/javascript/src/javascripts/post_mode_menu.js b/app/javascript/src/javascripts/post_mode_menu.js
index cb0f5cea3..91f1a5480 100644
--- a/app/javascript/src/javascripts/post_mode_menu.js
+++ b/app/javascript/src/javascripts/post_mode_menu.js
@@ -1,4 +1,4 @@
-import Post from './posts.js.erb'
+import Post from './posts.js'
 import Utility from './utility'
 
 let PostModeMenu = {};
diff --git a/app/javascript/src/javascripts/posts.js.erb b/app/javascript/src/javascripts/posts.js
similarity index 100%
rename from app/javascript/src/javascripts/posts.js.erb
rename to app/javascript/src/javascripts/posts.js
diff --git a/app/javascript/src/javascripts/uploads.js.erb b/app/javascript/src/javascripts/uploads.js
similarity index 96%
rename from app/javascript/src/javascripts/uploads.js.erb
rename to app/javascript/src/javascripts/uploads.js
index ef69ad543..e4f989690 100644
--- a/app/javascript/src/javascripts/uploads.js.erb
+++ b/app/javascript/src/javascripts/uploads.js
@@ -3,8 +3,6 @@ import SparkMD5 from 'spark-md5';
 
 let Upload = {};
 
-Upload.MAX_FILE_SIZE_BYTES = <%= Danbooru.config.max_file_size.to_json %>;
-Upload.MAX_FILE_SIZE = Upload.MAX_FILE_SIZE_BYTES / (1024 * 1024);
 Upload.IQDB_LIMIT = 5;
 Upload.IQDB_MIN_SIMILARITY = 50;
 Upload.IQDB_HIGH_SIMILARITY = 70;
@@ -183,8 +181,8 @@ Upload.initialize_dropzone = function() {
     thumbnailMethod: "contain",
     addRemoveLinks: false,
     maxFiles: 1,
-    maxFilesize: Upload.MAX_FILE_SIZE,
-    maxThumbnailFilesize: Upload.MAX_FILE_SIZE,
+    maxFilesize: Upload.max_file_size(),
+    maxThumbnailFilesize: Upload.max_file_size(),
     timeout: 0,
     acceptedFiles: "image/jpeg,image/png,image/gif,video/mp4,video/webm",
     previewTemplate: $("#dropzone-preview-template").html(),
@@ -226,6 +224,10 @@ Upload.batch_open_all = function() {
   $(".upload-preview > a").each((_i, link) => window.open(link.href));
 };
 
+Upload.max_file_size = function() {
+  return Number($("meta[name=max-file-size]").attr("content")) / (1024 * 1024);
+};
+
 $(function() {
   Upload.initialize_all();
 });
diff --git a/app/javascript/src/styles/common/tags.scss.erb b/app/javascript/src/styles/common/tags.scss
similarity index 100%
rename from app/javascript/src/styles/common/tags.scss.erb
rename to app/javascript/src/styles/common/tags.scss
diff --git a/app/javascript/src/styles/specific/mod_queue.scss.erb b/app/javascript/src/styles/specific/mod_queue.scss
similarity index 68%
rename from app/javascript/src/styles/specific/mod_queue.scss.erb
rename to app/javascript/src/styles/specific/mod_queue.scss
index 43925c57f..575f24bde 100644
--- a/app/javascript/src/styles/specific/mod_queue.scss.erb
+++ b/app/javascript/src/styles/specific/mod_queue.scss
@@ -23,11 +23,5 @@ div#c-modqueue {
         margin-top: 1em;
       }
     }
-
-    <% Danbooru.config.modqueue_warning_tags.each do |tag| %>
-      a[data-tag-name="<%= tag %>"] {
-        background-color: var(--modqueue-tag-warning-color);
-      }
-    <% end %>
   }
 }
diff --git a/app/javascript/src/styles/specific/notes.scss.erb b/app/javascript/src/styles/specific/notes.scss
similarity index 92%
rename from app/javascript/src/styles/specific/notes.scss.erb
rename to app/javascript/src/styles/specific/notes.scss
index c0a21f760..ee0a83b73 100644
--- a/app/javascript/src/styles/specific/notes.scss.erb
+++ b/app/javascript/src/styles/specific/notes.scss
@@ -148,12 +148,11 @@
         border: 1px solid var(--movable-note-box-border-color);
       }
 
-      <% for i in 1..5 do %>
-        <%# Selector order is deliberate as placing the not after the level consistently caused segmentaion faults for unknown reasons. %>
-        &:not(:hover).level-<%= i %> {
-          z-index: <%= 100 + i %>;
-        }
-      <% end %>
+      &:not(:hover).level-1 { z-index: 101; }
+      &:not(:hover).level-2 { z-index: 102; }
+      &:not(:hover).level-3 { z-index: 103; }
+      &:not(:hover).level-4 { z-index: 104; }
+      &:not(:hover).level-5 { z-index: 105; }
 
       &:not(:hover) div.ui-resizable-handle {
         display: none !important;
diff --git a/app/logical/autocomplete_service.rb b/app/logical/autocomplete_service.rb
index 733a67b1d..255d38453 100644
--- a/app/logical/autocomplete_service.rb
+++ b/app/logical/autocomplete_service.rb
@@ -23,6 +23,8 @@ class AutocompleteService
     order: PostQueryBuilder::ORDER_METATAGS
   }
 
+  TAG_PREFIXES = ["-", "~"] + TagCategory.mapping.keys.map { |prefix| prefix + ":" }
+
   attr_reader :query, :type, :limit, :current_user
 
   # Perform completion for the given search type and query.
diff --git a/app/views/layouts/default.html.erb b/app/views/layouts/default.html.erb
index 602c22fb5..d33f6bd77 100644
--- a/app/views/layouts/default.html.erb
+++ b/app/views/layouts/default.html.erb
@@ -18,6 +18,8 @@
     <meta name="blacklisted-tags" content="<%= CurrentUser.user.blacklisted_tags.gsub(/(?:\r|\n)+/, ",") %>">
   <% end %>
 
+  <%= tag.meta name: "autocomplete-tag-prefixes", content: AutocompleteService::TAG_PREFIXES.to_json %>
+
   <%# XXX hack to only load Ruffle on Flash posts %>
   <% if controller_name == "posts" && action_name == "show" && @post&.is_flash? %>
     <%= javascript_pack_tag "application", "flash" %>
diff --git a/app/views/modqueue/index.html.erb b/app/views/modqueue/index.html.erb
index b28bbd82c..e403ef8a0 100644
--- a/app/views/modqueue/index.html.erb
+++ b/app/views/modqueue/index.html.erb
@@ -1,5 +1,15 @@
 <% page_title "Moderation Queue" %>
 
+<%= content_for :html_header do %>
+  <style>
+    <% Danbooru.config.modqueue_warning_tags.each do |tag| %>
+      div.post a[data-tag-name="<%= tag %>"] {
+        background-color: var(--modqueue-tag-warning-color);
+      }
+    <% end %>
+  </style>
+<% end %>
+
 <% content_for(:top_content) do %>
   <h1>Moderation Queue</h1>
 
diff --git a/app/views/uploads/new.html.erb b/app/views/uploads/new.html.erb
index 7d50b9a70..eea9099eb 100644
--- a/app/views/uploads/new.html.erb
+++ b/app/views/uploads/new.html.erb
@@ -1,3 +1,7 @@
+<%= content_for :html_header do %>
+  <meta name="max-file-size" content="<%= Danbooru.config.max_file_size %>">
+<% end %>
+
 <div id="c-uploads">
   <div id="a-new" data-image-size="small">
     <h1>Upload</h1>
diff --git a/config/docker/Dockerfile.danbooru b/config/docker/Dockerfile.danbooru
index 4e16aff3d..4e5eb13b9 100644
--- a/config/docker/Dockerfile.danbooru
+++ b/config/docker/Dockerfile.danbooru
@@ -35,32 +35,37 @@ RUN \
   rm -rf "$(gem environment gemdir)/cache" && \
   find "$(gem environment gemdir)" -name "*.o" -delete
 
-COPY .yarn package.json yarn.lock ./
+COPY .yarnrc.yml package.json yarn.lock ./
+COPY .yarn/ ./.yarn/
 RUN yarn install
 
-COPY . .
-
-ARG SOURCE_COMMIT
-RUN echo "$SOURCE_COMMIT" > REVISION
-
-
-
-FROM development AS assets
+COPY postcss.config.js Rakefile ./
+COPY bin/rails bin/webpack ./bin/
+COPY config/application.rb config/boot.rb config/danbooru_default_config.rb config/webpacker.yml ./config/
+COPY config/webpack/ ./config/webpack/
+COPY public/images ./public/images
+COPY public/fonts ./public/fonts
+COPY app/components/ ./app/components/
+COPY app/javascript/ ./app/javascript/
 
 RUN \
   bin/rails assets:precompile && \
   rm -rf \
     node_modules .yarn/cache tmp /usr/local/share/.cache/yarn \
     /root/.yarn/berry/cache /root/.bundle/cache /root/.npm && \
-  asdf uninstall nodejs && \
-  ln -s /tmp tmp
+  ln -s /tmp tmp && \
+  ln -s packs public/packs-test
 
 
 
 FROM base as production
 
 COPY --from=development /root /root
-COPY --from=assets /danbooru /danbooru
+COPY --from=development /danbooru /danbooru
+
+COPY . .
+ARG SOURCE_COMMIT
+RUN echo "$SOURCE_COMMIT" > REVISION
 
 USER danbooru
 ENTRYPOINT ["tini", "--"]
diff --git a/config/webpack/base.js b/config/webpack/base.js
index 1e8cde659..b11868785 100644
--- a/config/webpack/base.js
+++ b/config/webpack/base.js
@@ -13,15 +13,6 @@ module.exports = merge(webpackConfig, {
   },
   module: {
     rules: [{
-      // https://github.com/usabilityhub/rails-erb-loader
-      test: /.erb$/,
-      enforce: "pre",
-      exclude: /node_modules/,
-      loader: "rails-erb-loader",
-      options: {
-        runner: "bin/rails runner"
-      }
-    }, {
       test: /\.wasm$/,
       type: 'asset/resource',
       generator: {
diff --git a/package.json b/package.json
index 516eef4aa..c647f427c 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,6 @@
     "postcss-import": "^14.0.2",
     "postcss-loader": "^6.1.1",
     "postcss-preset-env": "^6.7.0",
-    "rails-erb-loader": "^5.5.2",
     "ruffle-mirror": "2021.10.12",
     "sass": "^1.38.2",
     "sass-loader": "^12.1.0",
diff --git a/yarn.lock b/yarn.lock
index 56b48810e..9fda1564d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5864,7 +5864,7 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"loader-utils@npm:^1.1.0, loader-utils@npm:^1.4.0":
+"loader-utils@npm:^1.4.0":
   version: 1.4.0
   resolution: "loader-utils@npm:1.4.0"
   dependencies:
@@ -5917,13 +5917,6 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"lodash.defaults@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "lodash.defaults@npm:4.2.0"
-  checksum: fde72e71f7b7ece10c24e43dd601574168467d50bc76687302d40de341d5cb8e35b100105d938458747d2ad5f20d8bb736e62523ef39d1a8b40f7307c50f10ac
-  languageName: node
-  linkType: hard
-
 "lodash.get@npm:^4.0":
   version: 4.4.2
   resolution: "lodash.get@npm:4.4.2"
@@ -7885,18 +7878,6 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"rails-erb-loader@npm:^5.5.2":
-  version: 5.5.2
-  resolution: "rails-erb-loader@npm:5.5.2"
-  dependencies:
-    loader-utils: ^1.1.0
-    lodash.defaults: ^4.2.0
-  peerDependencies:
-    webpack: ^2.0.0 || >= 3.0.0-rc.0 || ^3.0.0
-  checksum: 3862a70a892db8392990f2a48431597c30ca88260dfa0a658bc612db944ec7138411aa9fbe5219fb9c08a66659073720b016d39580d58c5cd0ff810bbd5f31d0
-  languageName: node
-  linkType: hard
-
 "randombytes@npm:^2.1.0":
   version: 2.1.0
   resolution: "randombytes@npm:2.1.0"
@@ -8387,7 +8368,6 @@ fsevents@~2.3.2:
     postcss-import: ^14.0.2
     postcss-loader: ^6.1.1
     postcss-preset-env: ^6.7.0
-    rails-erb-loader: ^5.5.2
     ruffle-mirror: 2021.10.12
     sass: ^1.38.2
     sass-loader: ^12.1.0