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.

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"

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

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 = {};

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

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 %>
   }
 }

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;