From 6df35db1bdbe083b0a1b4bd643738a4cd1dab725 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Wed, 17 Jan 2024 21:49:22 -0500
Subject: [PATCH 1/5] Create JS configs for each environment and replace
 process.env with config imports

---
 src/addons/progress/AddonStatus.svelte      |   3 +-
 src/api/auth.js                             |  11 +-
 src/api/base.js                             |   4 +-
 src/api/document.js                         |  20 ++--
 src/api/languages.js                        |  12 ++-
 src/api/session.js                          |   4 +-
 src/api/viewer.js                           |  17 +--
 src/common/FilePicker.svelte                |  13 +--
 src/common/Progress.svelte                  |  10 +-
 src/common/ProgressiveImage.svelte          |  10 +-
 src/common/SpecialMessage.svelte            |  11 +-
 src/common/Toast.svelte                     |  11 +-
 src/common/dialog/DataDialog.svelte         |  16 +--
 src/common/dialog/DiagnosticDialog.svelte   |  13 +--
 src/common/dialog/EditSectionsDialog.svelte |  24 +++--
 src/common/dialog/NoteEmbedDialog.svelte    |  10 +-
 src/common/dialog/PageEmbedDialog.svelte    |   7 +-
 src/common/dialog/ProjectDialog.svelte      |  13 ++-
 src/common/dialog/metaDialogs.js            |  22 ++--
 src/common/fileHandler.js                   |   7 +-
 src/config/config.js                        | 108 ++++++++++++++++++++
 src/config/production.js                    |   6 ++
 src/config/staging.js                       |   6 ++
 src/embed/documentLoader.js                 |   4 +-
 src/embed/enhance.js                        |   3 +-
 src/embed/noteLoader.js                     |   3 +-
 src/embed/projectLoader.js                  |   8 +-
 src/manager/documents.js                    |   7 +-
 src/pages/FlatPage.svelte                   |   4 +-
 src/pages/app/Document.svelte               |   7 +-
 src/pages/app/upload/UploadDialog.svelte    |  25 ++---
 src/pages/embed/note/Note.svelte            |   6 +-
 src/pages/embed/page/Annotation.svelte      |   2 +-
 src/pages/embed/page/Page.svelte            |  13 ++-
 src/pages/entities/Entities.svelte          |   4 +-
 src/pages/legacy/Redirect.svelte            |  11 +-
 src/pages/viewer/Annotation.svelte          |  14 +--
 src/search/search.js                        |   3 +-
 src/search/searchFields.js                  |   5 +-
 src/structure/document.js                   |  12 ++-
 src/structure/documentFactory.js            |   3 +-
 src/structure/project.js                    |   2 +-
 src/ticker/ticker.js                        |   3 +-
 src/util/paginate.js                        |   2 +-
 44 files changed, 314 insertions(+), 185 deletions(-)
 create mode 100644 src/config/config.js
 create mode 100644 src/config/production.js
 create mode 100644 src/config/staging.js

diff --git a/src/addons/progress/AddonStatus.svelte b/src/addons/progress/AddonStatus.svelte
index 0c1160316..9ad7b647f 100644
--- a/src/addons/progress/AddonStatus.svelte
+++ b/src/addons/progress/AddonStatus.svelte
@@ -4,8 +4,7 @@
 
   import AddonRun, { runs } from "./AddonRun.svelte";
   import { baseApiUrl } from "../../api/base.js";
-
-  const POLL_INTERVAL = parseInt(process.env.POLL_INTERVAL, 10);
+  import { POLL_INTERVAL } from "../../config/config.js";
 
   const endpoint = new URL(
     "/api/addon_runs/?expand=addon&dismissed=false&per_page=20",
diff --git a/src/api/auth.js b/src/api/auth.js
index c76bb191f..459d5d4cb 100644
--- a/src/api/auth.js
+++ b/src/api/auth.js
@@ -1,14 +1,15 @@
 import { Svue } from "svue";
+import * as config from "../config/config.js";
 
 const DOCUMENTCLOUD_TOKEN_STORAGE_KEY = "documentcloud_token";
 
-export const SQUARELET_URL = process.env.SQUARELET_BASE;
-export const SIGN_IN_URL = process.env.DC_BASE + process.env.DC_LOGIN;
+export const SQUARELET_URL = config.SQUARELET_BASE;
+export const SIGN_IN_URL = config.DC_BASE + config.DC_LOGIN;
 export const SIGN_UP_URL =
-  process.env.SQUARELET_BASE +
-  process.env.SQUARELET_SIGNUP +
+  config.SQUARELET_BASE +
+  config.SQUARELET_SIGNUP +
   encodeURIComponent(window.location.href);
-export const SIGN_OUT_URL = process.env.DC_BASE + process.env.DC_LOGOUT;
+export const SIGN_OUT_URL = config.DC_BASE + config.DC_LOGOUT;
 
 export const auth = new Svue({
   data() {
diff --git a/src/api/base.js b/src/api/base.js
index 794350c3c..e4c01dd96 100644
--- a/src/api/base.js
+++ b/src/api/base.js
@@ -1,4 +1,6 @@
-export const baseApiUrl = process.env.DC_BASE + process.env.API;
+import { DC_BASE, API } from "../config/config.js";
+
+export const baseApiUrl = DC_BASE + API;
 
 export function apiUrl(url) {
   return `${baseApiUrl}${url}`;
diff --git a/src/api/document.js b/src/api/document.js
index 66bc9907c..493c4fec0 100644
--- a/src/api/document.js
+++ b/src/api/document.js
@@ -15,15 +15,15 @@ import axios from "axios";
 
 import { Document, transformHighlights } from "@/structure/document.js";
 
-const POLL_TIMEOUT = process.env.POLL_TIMEOUT;
-
-const GET_BATCH = parseInt(process.env.GET_BATCH);
-const GET_BATCH_DELAY = parseInt(process.env.GET_BATCH_DELAY);
-const UPLOAD_BATCH = parseInt(process.env.UPLOAD_BATCH);
-const UPLOAD_BATCH_DELAY = parseInt(process.env.UPLOAD_BATCH_DELAY);
-
-const HIGHLIGHT_START = process.env.HIGHLIGHT_START;
-const HIGHLIGHT_END = process.env.HIGHLIGHT_END;
+import {
+  POLL_TIMEOUT,
+  GET_BATCH,
+  GET_BATCH_DELAY,
+  UPLOAD_BATCH,
+  UPLOAD_BATCH_DELAY,
+  HIGHLIGHT_START,
+  HIGHLIGHT_END,
+} from "../config/config.js";
 
 // Statuses
 export const PENDING = "pending";
@@ -169,7 +169,7 @@ export async function changeRevisionControl(id, revision_control) {
         expand: [DEFAULT_EXPAND, "revisions"].join(","),
       }),
     ),
-    {revision_control}
+    { revision_control },
   );
   return data;
 }
diff --git a/src/api/languages.js b/src/api/languages.js
index d9ea8b438..9fc6e4747 100644
--- a/src/api/languages.js
+++ b/src/api/languages.js
@@ -1,6 +1,10 @@
-const languageCodes = process.env.LANGUAGE_CODES.split("|");
-const languageNames = process.env.LANGUAGE_NAMES.split("|");
-export const defaultLanguage = process.env.DEFAULT_LANGUAGE;
+import {
+  LANGUAGE_CODES,
+  LANGUAGE_NAMES,
+  DEFAULT_LANGUAGE,
+} from "../config/config.js";
+
+export const defaultLanguage = DEFAULT_LANGUAGE;
 
 function makeLanguagePairs(codes, names) {
   const results = [];
@@ -11,7 +15,7 @@ function makeLanguagePairs(codes, names) {
   return results;
 }
 
-export const languages = makeLanguagePairs(languageCodes, languageNames);
+export const languages = makeLanguagePairs(LANGUAGE_CODES, LANGUAGE_NAMES);
 
 const textractLanguageCodes = ["eng", "spa", "ita", "por", "fra", "deu"];
 export const textractLanguages = languages.filter(
diff --git a/src/api/session.js b/src/api/session.js
index 2b4b53e47..fc6267ebd 100644
--- a/src/api/session.js
+++ b/src/api/session.js
@@ -1,6 +1,8 @@
 import axios from "axios";
 import axiosRetry from "axios-retry";
 
+import { DC_BASE } from "../config/config.js";
+
 // Hook in failed request interceptor
 axiosRetry(axios, {
   retries: 3,
@@ -97,7 +99,7 @@ session.getStatic = async function getStatic(url) {
   // On the second request, we do not sent the session cookie
   // If we are fetching a public asset, the first request is directly to S3.  In
   // that case we must not send the session cookie on the first request.
-  if (url.startsWith(process.env.DC_BASE)) {
+  if (url.startsWith(DC_BASE)) {
     result = await session.get(url).then((r) => r.data);
     let redirect = result.location;
 
diff --git a/src/api/viewer.js b/src/api/viewer.js
index f16c43ed0..d83c2c1be 100644
--- a/src/api/viewer.js
+++ b/src/api/viewer.js
@@ -1,13 +1,4 @@
-function processImageWidths(widthSpec) {
-  let result = widthSpec.split(",").map((width) => {
-    const parts = width.split(":");
-    return [parseFloat(parts[1]), parts[0]];
-  });
-  result = result.sort((a, b) => a[0] - b[0]);
-  return result;
-}
-
-export const imageWidths = processImageWidths(process.env.IMAGE_WIDTHS);
+import { IMAGE_WIDTHS } from "../config/config.js";
 
 export function documentDimensionUrl(document) {
   return `${document.assetUrl}documents/${document.id}/${document.slug}.pagesize`;
@@ -19,11 +10,11 @@ export function documentDimensionUrl(document) {
  * @param {number} desiredWidth The desired width of the page image.
  */
 function getDesiredSize(desiredWidth) {
-  for (let i = 0; i < imageWidths.length; i++) {
-    const [width, name] = imageWidths[i];
+  for (let i = 0; i < IMAGE_WIDTHS.length; i++) {
+    const [width, name] = IMAGE_WIDTHS[i];
     if (desiredWidth <= width) return name;
   }
-  return imageWidths[imageWidths.length - 1][1];
+  return IMAGE_WIDTHS[IMAGE_WIDTHS.length - 1][1];
 }
 
 export function pageImageUrl(document, pageNumber, desiredWidth) {
diff --git a/src/common/FilePicker.svelte b/src/common/FilePicker.svelte
index 11231b2ae..62c8b701e 100644
--- a/src/common/FilePicker.svelte
+++ b/src/common/FilePicker.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { DOCUMENT_TYPES } from "../config/config.js";
   import emitter from "@/emit.js";
   import { filterFiles } from "./fileHandler.js";
 
@@ -8,10 +9,6 @@
 
   export let multiselect = false;
 
-  const documentTypes = process.env.DOCUMENT_TYPES.split(",")
-    .map((x) => `.${x.toLowerCase().trim()}`)
-    .join(",");
-
   // Bound to the file picker input
   let picker;
 
@@ -34,20 +31,20 @@
 </script>
 
 <span class="container">
-  <span class="content" on:click={trigger}>
+  <button class="content buttonLike" on:click={trigger}>
     <slot />
-  </span>
+  </button>
   <input
     multiple={multiselect}
     bind:this={picker}
     class="picker"
     type="file"
     on:change={handleFiles}
-    accept={documentTypes}
+    accept={DOCUMENT_TYPES.join(",")}
   />
 </span>
 
-<style lang="scss">
+<style>
   .container {
     display: inline-block;
     position: relative;
diff --git a/src/common/Progress.svelte b/src/common/Progress.svelte
index a6be3de18..4f004f572 100644
--- a/src/common/Progress.svelte
+++ b/src/common/Progress.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import { tweened } from "svelte/motion";
-  import { sigmoid, interp, scale } from "../util/easing";
+  import { POLL_INTERVAL } from "../config/config.js";
+  import { sigmoid, interp, scale } from "../util/easing.js";
 
   export let progress: null | number;
   export let initializing = false;
   export let compact = false;
   export let failure = false;
 
-  const PROGRESS_DURATION = parseInt(process.env.POLL_INTERVAL);
   const PROGRESS_END_DURATION = 400; // how quickly to jump at end
   const PROGRESS_BACKWARDS_DURATION = 400; // how quickly to jump backwards
 
@@ -23,7 +23,7 @@
   }
 
   const smoothProgress = tweened(realProgress, {
-    duration: PROGRESS_DURATION,
+    duration: POLL_INTERVAL,
     interpolate(a, b) {
       // Jump immediately to 0
       if (b == 0) return (t) => 0;
@@ -31,7 +31,7 @@
       // If going backwards, don't tween
       if (b < a) {
         return interp(
-          scale(sigmoid, PROGRESS_BACKWARDS_DURATION / PROGRESS_DURATION),
+          scale(sigmoid, PROGRESS_BACKWARDS_DURATION / POLL_INTERVAL),
           a,
           b,
         );
@@ -40,7 +40,7 @@
       // If reaching end of progress, tween with a faster rate
       if (b == 1) {
         return interp(
-          scale(sigmoid, PROGRESS_END_DURATION / PROGRESS_DURATION),
+          scale(sigmoid, PROGRESS_END_DURATION / POLL_INTERVAL),
           a,
           b,
         );
diff --git a/src/common/ProgressiveImage.svelte b/src/common/ProgressiveImage.svelte
index 0f10b72c6..ded438ff9 100644
--- a/src/common/ProgressiveImage.svelte
+++ b/src/common/ProgressiveImage.svelte
@@ -1,8 +1,9 @@
 <script>
   import { onMount, onDestroy } from "svelte";
+  import emitter from "@/emit.js";
+  import { IMAGE_WIDTHS } from "../config/config.js";
   import { pageImageUrl } from "@/api/viewer.js";
   import { timeout } from "@/util/timeout.js";
-  import emitter from "@/emit.js";
 
   const emit = emitter({
     load() {},
@@ -23,13 +24,10 @@
   let loading = {};
   let largestLoaded = -1;
 
-  const IMAGE_WIDTHS = process.env.IMAGE_WIDTHS.split(",")
-    .map((x) => x.split(":"))
-    .map((x) => [parseFloat(x[1]), x[0]])
-    .sort((a, b) => a[0] - b[0]);
   const NORMAL_WIDTH = IMAGE_WIDTHS.map((x, i) => [x, i]).filter(
     (x) => x[0][1] == "normal",
   )[0];
+
   let mounted = false;
 
   onMount(async () => {
@@ -144,7 +142,7 @@
   class:crosshair
 />
 
-<style lang="scss">
+<style>
   div {
     position: relative;
     width: 100%;
diff --git a/src/common/SpecialMessage.svelte b/src/common/SpecialMessage.svelte
index 877526721..073e2f4fc 100644
--- a/src/common/SpecialMessage.svelte
+++ b/src/common/SpecialMessage.svelte
@@ -2,9 +2,8 @@
   import { _ } from "svelte-i18n";
   import { onMount } from "svelte";
   import { baseApiUrl } from "../api/base.js";
+  import { SPECIAL_VERSION, SPECIAL_CONTACT } from "../config/config.js";
 
-  const version = process.env.SPECIAL_VERSION;
-  const contact = process.env.SPECIAL_CONTACT;
   const endpoint = new URL("/api/flatpages/tipofday/", baseApiUrl);
 
   let loading;
@@ -25,8 +24,8 @@
     loading = load();
   });
 
-  $: show = version != null && version.trim().length > 0;
-  $: showContact = contact != null && contact.trim().length > 0;
+  $: show = SPECIAL_VERSION != null && SPECIAL_VERSION.trim().length > 0;
+  $: showContact = SPECIAL_CONTACT != null && SPECIAL_CONTACT.trim().length > 0;
 </script>
 
 {#if show}
@@ -35,10 +34,10 @@
       {#await loading then content}
         {@html content}
       {:catch}
-        {version}
+        {SPECIAL_VERSION}
         {#if showContact}
           {@html $_("specialMessage.constactUs", {
-            values: { contact: contact },
+            values: { contact: SPECIAL_CONTACT },
           })}
         {/if}
       {/await}
diff --git a/src/common/Toast.svelte b/src/common/Toast.svelte
index ea36f5869..1ce6cc34c 100644
--- a/src/common/Toast.svelte
+++ b/src/common/Toast.svelte
@@ -33,12 +33,9 @@
 
 <script lang="ts">
   import { onMount } from "svelte";
-
   import CloseIcon from "svelte-octicons/lib/X16.svelte";
 
-  // Constants
-  const toastLength = parseInt(process.env.TOAST_LENGTH);
-  const toastFade = parseInt(process.env.TOAST_FADE);
+  import { TOAST_LENGTH, TOAST_FADE } from "../config/config.js";
 
   export let toast: Toast;
   export let i: number;
@@ -52,7 +49,7 @@
 
   function beginClose() {
     fading = true;
-    toastTimeout = setTimeout(close, toastFade);
+    toastTimeout = setTimeout(close, TOAST_FADE);
   }
 
   function close() {
@@ -73,13 +70,13 @@
 
     cancel();
     if (fade) {
-      toastTimeout = setTimeout(beginClose, toastLength);
+      toastTimeout = setTimeout(beginClose, TOAST_LENGTH);
     }
   }
 
   onMount(() => {
     if (fade) {
-      toastTimeout = setTimeout(beginClose, toastLength);
+      toastTimeout = setTimeout(beginClose, TOAST_LENGTH);
     }
   });
 </script>
diff --git a/src/common/dialog/DataDialog.svelte b/src/common/dialog/DataDialog.svelte
index 5f7471a16..1236a719c 100644
--- a/src/common/dialog/DataDialog.svelte
+++ b/src/common/dialog/DataDialog.svelte
@@ -1,10 +1,15 @@
 <script>
+  import { writable } from "svelte/store";
+  import { _ } from "svelte-i18n";
+
   import Loader from "@/common/Loader.svelte";
   import Button from "@/common/Button.svelte";
   import Dropdown from "@/common/Dropdown.svelte";
   import Menu from "@/common/Menu.svelte";
   import MenuItem from "@/common/MenuItem.svelte";
   import NoWhitespace from "@/common/NoWhitespace.svelte";
+
+  import { TAG_KEY } from "../../config/config.js";
   import { viewer } from "@/viewer/viewer.js";
   import emitter from "@/emit.js";
   import { layout } from "@/manager/layout.js";
@@ -17,8 +22,6 @@
   import { showConfirm } from "@/manager/confirmDialog.js";
   import { wrapMultipleSeparate } from "@/util/wrapLoad.js";
   import { intersection } from "@/util/array.js";
-  import { writable } from "svelte/store";
-  import { _ } from "svelte-i18n";
 
   // SVG assets
   import pencilSvg from "@/assets/pencil.svg?raw";
@@ -36,8 +39,6 @@
 
   let loading = writable(false);
 
-  const TAG_KEY = process.env.TAG_KEY;
-
   // Technically needs to pass one or more of these characters,
   // but keyTrimmed captures that and gives a more descriptive message
   const KEY_REGEX = /^[A-Za-z0-9-_]*$/;
@@ -320,9 +321,12 @@
               {:else}
                 {#if key != TAG_KEY}<input readonly bind:value={key} /> :{/if}
                 <input readonly bind:value />
-                <span class="pencil" on:click={() => startEdit(key, value)}>
+                <button
+                  class="buttonLike pencil"
+                  on:click={() => startEdit(key, value)}
+                >
                   {@html pencilSvg}
-                </span>
+                </button>
                 <Button
                   nondescript={true}
                   caution={true}
diff --git a/src/common/dialog/DiagnosticDialog.svelte b/src/common/dialog/DiagnosticDialog.svelte
index 2236f65cb..361f87985 100644
--- a/src/common/dialog/DiagnosticDialog.svelte
+++ b/src/common/dialog/DiagnosticDialog.svelte
@@ -1,10 +1,13 @@
 <script>
+  import { _ } from "svelte-i18n";
+
   import Button from "@/common/Button.svelte";
+  import DocumentThumbnail from "@/pages/app/DocumentThumbnail.svelte";
+
+  import { STAFF_ONLY_S3_URL } from "../../config/config.js";
   import emitter from "@/emit.js";
   import { layout } from "@/manager/layout.js";
-  import DocumentThumbnail from "@/pages/app/DocumentThumbnail.svelte";
   import { apiUrl } from "@/api/base.js";
-  import { _ } from "svelte-i18n";
 
   const emit = emitter({
     dismiss() {},
@@ -47,10 +50,8 @@
               </a>
               <a
                 target="_blank"
-                href={process.env.STAFF_ONLY_S3_URL.replace(
-                  "$$ID$$",
-                  document.id,
-                )}
+                rel="noopener noreferer"
+                href={STAFF_ONLY_S3_URL.replace("$$ID$$", document.id)}
               >
                 <Button small={true}
                   >{$_("dialogDiagnosticDialog.viewS3")}</Button
diff --git a/src/common/dialog/EditSectionsDialog.svelte b/src/common/dialog/EditSectionsDialog.svelte
index 922d46b3d..e4b469481 100644
--- a/src/common/dialog/EditSectionsDialog.svelte
+++ b/src/common/dialog/EditSectionsDialog.svelte
@@ -1,6 +1,10 @@
 <script>
+  import { writable } from "svelte/store";
+  import { _ } from "svelte-i18n";
+
   import Button from "@/common/Button.svelte";
   import Loader from "@/common/Loader.svelte";
+
   import { hideEditSections } from "@/viewer/layout.js";
   import { viewer } from "@/viewer/viewer.js";
   import { layout } from "@/viewer/layout.js";
@@ -8,15 +12,12 @@
   import { addSection, removeSection, replaceSection } from "@/api/section.js";
   import { wrapLoadSeparate } from "@/util/wrapLoad.js";
   import { showConfirm } from "@/manager/confirmDialog.js";
-  import { _ } from "svelte-i18n";
 
   // SVG assets
   import pencilSvg from "@/assets/pencil.svg?raw";
   import closeSimpleSvg from "@/assets/close_simple.svg?raw";
 
-  import { writable } from "svelte/store";
-
-  const sectionTitleLimit = process.env.SECTION_TITLE_CHAR_LIMIT;
+  import { SECTION_TITLE_CHAR_LIMIT } from "../../config/config.js";
 
   let loading = writable(false);
 
@@ -177,15 +178,18 @@
         {#if $viewer.sections.length > 0}
           {#each $viewer.sections as section, i}
             <div class="section" class:special={update && updatingIndex == i}>
-              <span class="edit" on:click={() => !update && editSection(i)}>
+              <button
+                class="buttonLike edit"
+                on:click={() => !update && editSection(i)}
+              >
                 {@html pencilSvg}
-              </span>
-              <span
-                class="remove"
+              </button>
+              <button
+                class="remove buttonLike"
                 on:click={async () => !update && (await handleSectionRemove(i))}
               >
                 {@html closeSimpleSvg}
-              </span>
+              </button>
               <span class="page"
                 >{$_("dialogEditSectionsDialog.pageAbbrevNo", {
                   values: { n: section.page + 1 },
@@ -220,7 +224,7 @@
             bind:value={pendingPage}
           />
           <input
-            maxlength={sectionTitleLimit}
+            maxlength={SECTION_TITLE_CHAR_LIMIT}
             class="titleinput"
             type="text"
             placeholder={$_("dialogEditSectionsDialog.title")}
diff --git a/src/common/dialog/NoteEmbedDialog.svelte b/src/common/dialog/NoteEmbedDialog.svelte
index 94a3d8dd0..7b42cead0 100644
--- a/src/common/dialog/NoteEmbedDialog.svelte
+++ b/src/common/dialog/NoteEmbedDialog.svelte
@@ -6,16 +6,10 @@
   import { layout } from "@/viewer/layout.js";
   import { getEmbed } from "@/api/embed.js";
 
-  const IMAGE_WIDTHS = process.env.IMAGE_WIDTHS.split(",")
-    .map((x) => x.split(":"))
-    .map((x) => [parseFloat(x[1]), x[0]])
-    .sort((a, b) => a[0] - b[0]);
-  const LARGE_WIDTH = IMAGE_WIDTHS.map((x, i) => [x, i]).filter(
-    (x) => x[0][1] == "large",
-  )[0];
+  import { APP_URL } from "../../config/config.js";
 
   $: noteUrl = $layout.embedDocument.noteUrl($layout.embedNote);
-  $: loaderSrc = `${process.env.APP_URL}notes/loader.js`;
+  $: loaderSrc = `${APP_URL}notes/loader.js`;
   $: annotationSrc = `${$layout.embedDocument.fakeNoteUrl(
     $layout.embedNote,
   )}.js`;
diff --git a/src/common/dialog/PageEmbedDialog.svelte b/src/common/dialog/PageEmbedDialog.svelte
index 5983417eb..3d5523a3e 100644
--- a/src/common/dialog/PageEmbedDialog.svelte
+++ b/src/common/dialog/PageEmbedDialog.svelte
@@ -1,10 +1,13 @@
 <script>
+  import { _ } from "svelte-i18n";
+
   import BoundedNumberInput from "@/common/BoundedNumberInput.svelte";
   import ShareOptions from "@/common/ShareOptions.svelte";
   import { layout } from "@/viewer/layout.js";
   import { getEmbed } from "@/api/embed.js";
   import { doc } from "@/viewer/document.js";
-  import { _ } from "svelte-i18n";
+
+  import { APP_URL } from "../../config/config.js";
 
   let selectedPage = null;
 
@@ -15,7 +18,7 @@
     page == "visible" ? doc.visiblePageNumber - 1 : anotherNumber - 1;
   $: visiblePage = selectedPage + 1;
   $: pageUrl = $layout.embedDocument.pageUrl(visiblePage);
-  $: enhanceSrc = `${process.env.APP_URL}embed/enhance.js`;
+  $: enhanceSrc = `${APP_URL}embed/enhance.js`;
 
   let embedCode = null;
   let errorOccurred = false;
diff --git a/src/common/dialog/ProjectDialog.svelte b/src/common/dialog/ProjectDialog.svelte
index b7bf1096f..0e2963dd6 100644
--- a/src/common/dialog/ProjectDialog.svelte
+++ b/src/common/dialog/ProjectDialog.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { _ } from "svelte-i18n";
+
   import Button from "@/common/Button.svelte";
   import Loader from "@/common/Loader.svelte";
 
@@ -14,10 +16,11 @@
     removeProject,
   } from "@/manager/projects";
   import { showConfirm } from "@/manager/confirmDialog.js";
-  import { _ } from "svelte-i18n";
 
-  const projectTitleLimit = process.env.PROJECT_TITLE_CHAR_LIMIT;
-  const projectDescriptionLimit = process.env.PROJECT_DESCRIPTION_CHAR_LIMIT;
+  import {
+    PROJECT_TITLE_CHAR_LIMIT,
+    PROJECT_DESCRIPTION_CHAR_LIMIT,
+  } from "../../config/config.js";
 
   const emit = emitter({
     dismiss() {},
@@ -83,14 +86,14 @@
       </h1>
       <div class="inputpadded">
         <input
-          maxlength={projectTitleLimit}
+          maxlength={PROJECT_TITLE_CHAR_LIMIT}
           placeholder={$_("dialogProjectDialog.title")}
           bind:value={name}
           bind:this={input}
         />
         <p>
           <textarea
-            maxlength={projectDescriptionLimit}
+            maxlength={PROJECT_DESCRIPTION_CHAR_LIMIT}
             placeholder={$_("dialogProjectDialog.projectDesc")}
             bind:value={description}
             use:textAreaResize
diff --git a/src/common/dialog/metaDialogs.js b/src/common/dialog/metaDialogs.js
index 1818d11d2..b9161f114 100644
--- a/src/common/dialog/metaDialogs.js
+++ b/src/common/dialog/metaDialogs.js
@@ -1,13 +1,15 @@
-const docTitleLimit = process.env.DOCUMENT_TITLE_CHAR_LIMIT;
-const docSourceLimit = process.env.DOCUMENT_SOURCE_CHAR_LIMIT;
-const docDescriptionLimit = process.env.DOCUMENT_DESCRIPTION_CHAR_LIMIT;
-const relatedArticleLimit = process.env.RELATED_ARTICLE_URL_CHAR_LIMIT;
-const publishedUrlLimit = process.env.PUBLISHED_URL_CHAR_LIMIT;
+import {
+  DOCUMENT_TITLE_CHAR_LIMIT,
+  DOCUMENT_SOURCE_CHAR_LIMIT,
+  DOCUMENT_DESCRIPTION_CHAR_LIMIT,
+  RELATED_ARTICLE_URL_CHAR_LIMIT,
+  PUBLISHED_URL_CHAR_LIMIT,
+} from "../../config/config.js";
 
 export const metaDialogs = [
   {
     menuTitle: "metaFields.titleFieldTitle",
-    charLimit: docTitleLimit,
+    charLimit: DOCUMENT_TITLE_CHAR_LIMIT,
     fieldAccessor: (x) => x.title,
     fieldName: "metaFields.titleFieldName",
     fieldNameUppercase: "metaFields.titleFieldNameUppercase",
@@ -26,7 +28,7 @@ export const metaDialogs = [
   },
   {
     menuTitle: "metaFields.sourceFieldTitle",
-    charLimit: docSourceLimit,
+    charLimit: DOCUMENT_SOURCE_CHAR_LIMIT,
     fieldAccessor: (x) => x.source,
     fieldName: "metaFields.sourceFieldName",
     fieldNameUppercase: "metaFields.sourceFieldNameUppercase",
@@ -37,7 +39,7 @@ export const metaDialogs = [
   },
   {
     menuTitle: "metaFields.descriptionFieldTitle",
-    charLimit: docDescriptionLimit,
+    charLimit: DOCUMENT_DESCRIPTION_CHAR_LIMIT,
     fieldAccessor: (x) => x.description,
     fieldName: "metaFields.descriptionFieldName",
     fieldNameUppercase: "metaFields.descriptionFieldNameUppercase",
@@ -49,7 +51,7 @@ export const metaDialogs = [
   },
   {
     menuTitle: "metaFields.relatedArticleFieldTitle",
-    charLimit: relatedArticleLimit,
+    charLimit: RELATED_ARTICLE_URL_CHAR_LIMIT,
     fieldAccessor: (x) => x.relatedArticleUrl,
     fieldName: "rmetaFields.relatedArticleFieldName",
     fieldNameUppercase: "metaFields.relatedArticleFieldNameUppercase",
@@ -60,7 +62,7 @@ export const metaDialogs = [
   },
   {
     menuTitle: "metaFields.publishedUrlFieldTitle",
-    charLimit: publishedUrlLimit,
+    charLimit: PUBLISHED_URL_CHAR_LIMIT,
     fieldAccessor: (x) => x.publishedUrl,
     fieldName: "metaFields.publishedUrlFieldName",
     fieldNameUppercase: "metaFields.publishedUrlFieldNameUppercase",
diff --git a/src/common/fileHandler.js b/src/common/fileHandler.js
index 3ef5cf538..f0922d888 100644
--- a/src/common/fileHandler.js
+++ b/src/common/fileHandler.js
@@ -1,13 +1,10 @@
 import { includes } from "@/util/array.js";
-
-const documentTypes = process.env.DOCUMENT_TYPES.split(",").map(
-  (x) => `.${x.toLowerCase().trim()}`,
-);
+import { DOCUMENT_TYPES } from "../config/config.js";
 
 export function filterFiles(files) {
   // Filter for just valid files
   return files.filter((file) => {
-    return includes(documentTypes, file.name.toLowerCase().trim(), (a, b) =>
+    return includes(DOCUMENT_TYPES, file.name.toLowerCase().trim(), (a, b) =>
       b.endsWith(a),
     );
   });
diff --git a/src/config/config.js b/src/config/config.js
new file mode 100644
index 000000000..e55cd8543
--- /dev/null
+++ b/src/config/config.js
@@ -0,0 +1,108 @@
+import * as staging from "./staging.js";
+import * as production from "./production.js";
+
+// these are the only values that change across environments
+let DC_BASE = "https://api.dev.documentcloud.org";
+let APP_URL = "https://www.dev.documentcloud.org/";
+let EMBED_URL = "https://www.dev.documentcloud.org/";
+let SQUARELET_BASE = "https://dev.squarelet.com";
+let STAFF_ONLY_S3_URL =
+  "http://minio.documentcloud.org:9000/minio/documents/documents/$$ID$$/";
+
+if (process.env.NODE_ENV === "staging") {
+  DC_BASE = staging.DC_BASE;
+  APP_URL = staging.APP_URL;
+  EMBED_URL = staging.EMBED_URL;
+  SQUARELET_BASE = staging.SQUARELET_BASE;
+  STAFF_ONLY_S3_URL = staging.STAFF_ONLY_S3_URL;
+}
+
+if (process.env.NODE_ENV === "production") {
+  DC_BASE = production.DC_BASE;
+  APP_URL = production.APP_URL;
+  EMBED_URL = production.EMBED_URL;
+  SQUARELET_BASE = production.SQUARELET_BASE;
+  STAFF_ONLY_S3_URL = production.STAFF_ONLY_S3_URL;
+}
+
+export { DC_BASE, APP_URL, EMBED_URL, SQUARELET_BASE, STAFF_ONLY_S3_URL };
+
+// these never change
+export const DC_LOGIN = "/accounts/login/squarelet";
+export const DC_LOGOUT = "/accounts/logout/";
+export const SQUARELET_SIGNUP = "/accounts/signup/?intent=documentcloud&next=";
+
+export const POLL_INTERVAL = 5000;
+export const IMAGE_WIDTHS = [
+  ["xlarge", 2000],
+  ["large", 1000],
+  ["normal", 700],
+  ["small", 180],
+  ["thumbnail", 60],
+];
+
+export const MAX_PER_PAGE = 100;
+
+export const PDF_SIZE_LIMIT = 525336576;
+export const PDF_SIZE_LIMIT_READABLE = "500 MB";
+
+export const DOCUMENT_SIZE_LIMIT = 27262976;
+export const DOCUMENT_SIZE_LIMIT_READABLE = "25 MB";
+
+export const TOAST_LENGTH = 5000;
+export const TOAST_FADE = 800;
+
+export const LEGACY_CUT_OFF = 20000000;
+
+export const HIGHLIGHT_START = "<em>";
+export const HIGHLIGHT_END = "</em>";
+
+export const API = "/api/";
+
+export const UPLOAD_LIMIT = 1000;
+export const UPLOAD_BATCH = 25;
+export const UPLOAD_BATCH_DELAY = 1000;
+export const GET_BATCH = 25;
+export const GET_BATCH_DELAY = 1000;
+
+export const TAG_KEY = "_tag";
+
+export const SPECIAL_VERSION = "Thanks for using DocumentCloud!";
+export const SPECIAL_CONTACT =
+  "mailto:info@documentcloud.org?subject=DocumentCloud Feedback";
+export const TIP_OF_THE_DAY = "tipofday/";
+export const LOGIN_ERROR =
+  "DocumentCloud is only available to users we have explicitly granted permission.";
+
+export const LANGUAGE_CODES =
+  "afr|amh|ara|asm|aze|aze_cyrl|bel|ben|bod|bos|bul|cat|ceb|ces|zho|tra|chr|cym|dan|deu|dzo|ell|eng|enm|epo|est|eus|fas|fin|fra|frk|frm|gle|glg|grc|guj|hat|heb|hin|hrv|hun|iku|ind|isl|ita|ita_old|jav|jpn|kan|kat|kat_old|kaz|khm|kir|kor|kur|lao|lat|lav|lit|mal|mar|mkd|mlt|msa|mya|nep|nld|nor|ori|pan|pol|por|pus|ron|rus|san|sin|slk|slv|spa|spa_old|sqi|srp|srp_latn|swa|swe|syr|tam|tel|tgk|tgl|tha|tir|tur|uig|ukr|urd|uzb|uzb_cyrl|vie|yid".split(
+    "|",
+  );
+export const LANGUAGE_NAMES =
+  "Afrikaans|Amharic|Arabic|Assamese|Azerbaijani|Azerbaijani - Cyrillic|Belarusian|Bengali|Tibetan|Bosnian|Bulgarian|Catalan|Cebuano|Czech|Chinese - Simplified|Chinese - Traditional|Cherokee|Welsh|Danish|German|Dzongkha|Greek|English|Middle English|Esperanto|Estonian|Basque|Persian|Finnish|French|German Fraktur|Middle French|Irish|Galician|Ancient Greek|Gujarati|Haitian; Haitian Creole|Hebrew|Hindi|Croatian|Hungarian|Inuktitut|Indonesian|Icelandic|Italian|Italian - Old|Javanese|Japanese|Kannada|Georgian|Georgian - Old|Kazakh|Central Khmer|Kirghiz; Kyrgyz|Korean|Kurdish|Lao|Latin|Latvian|Lithuanian|Malayalam|Marathi|Macedonian|Maltese|Malay|Burmese|Nepali|Dutch; Flemish|Norwegian|Oriya|Panjabi; Punjabi|Polish|Portuguese|Pushto; Pashto|Romanian; Moldavian; Moldovan|Russian|Sanskrit|Sinhala; Sinhalese|Slovak|Slovenian|Spanish; Castilian|Spanish; Castilian - Old|Albanian|Serbian|Serbian - Latin|Swahili|Swedish|Syriac|Tamil|Telugu|Tajik|Tagalog|Thai|Tigrinya|Turkish|Uighur; Uyghur|Ukrainian|Urdu|Uzbek|Uzbek - Cyrillic|Vietnamese|Yiddish".split(
+    "|",
+  );
+export const DEFAULT_LANGUAGE = "eng";
+
+export const DOCUMENT_TYPES =
+  "123,602,abw,agd,bmp,cdr,cgm,cmx,csv,cwk,dbf,dif,doc,docx,dot,emf,eps,fb2,fhd,fodg,fodp,fods,fodt,gif,gnm,gnumeric,htm,html,hwp,jpeg,jpg,jtd,jtt,key,kth,mml,numbers,odb,odf,odg,odp,ods,odt,p65,pages,pbm,pcd,pct,pcx,pdf,pgm,plt,pm3,pm4,pm5,pm6,pmd,png,pot,ppm,pps,ppt,pptx,psd,pub,qxp,ras,rlf,rtf,sda,sdc,sdd,sdp,sdw,sgf,sgl,sgv,slk,stc,std,sti,stw,svg,svm,sxc,sxd,sxi,sxm,sxw,tga,tif,tiff,txt,uof,uop,uos,uot,vor,vsd,wb2,wdb,wk1,wk3,wk4,wks,wpd,wps,wq1,wq2,wri,xbm,xls,xlsx,xlt,xlw,xml,xpm,zabw,zmf".split(
+    ",",
+  );
+
+export const DOCUMENT_TITLE_CHAR_LIMIT = 1000;
+export const DOCUMENT_DESCRIPTION_CHAR_LIMIT = 4000;
+export const DOCUMENT_SOURCE_CHAR_LIMIT = 1000;
+export const RELATED_ARTICLE_URL_CHAR_LIMIT = 1024;
+export const PUBLISHED_URL_CHAR_LIMIT = 1024;
+
+export const PROJECT_DESCRIPTION_CHAR_LIMIT = 1000;
+export const PROJECT_TITLE_CHAR_LIMIT = 255;
+
+export const NOTE_TITLE_CHAR_LIMIT = 500;
+export const NOTE_CONTENT_CHAR_LIMIT = 2000;
+export const SECTION_TITLE_CHAR_LIMIT = 200;
+
+export const PROJECT_REDIRECT_HASH_URL =
+  "https://s3.amazonaws.com/s3.documentcloud.org/legacy/project_redirects.bin";
+export const ORG_REDIRECT_HASH_URL =
+  "https://s3.amazonaws.com/s3.documentcloud.org/legacy/org_redirects.bin";
diff --git a/src/config/production.js b/src/config/production.js
new file mode 100644
index 000000000..eb68020f2
--- /dev/null
+++ b/src/config/production.js
@@ -0,0 +1,6 @@
+export const DC_BASE = "https://api.www.documentcloud.org";
+export const APP_URL = "https://www.documentcloud.org/";
+export const EMBED_URL = "https://embed.documentcloud.org/";
+export const SQUARELET_BASE = "https://accounts.muckrock.com";
+export const STAFF_ONLY_S3_URL =
+  "https://s3.console.aws.amazon.com/s3/buckets/s3.documentcloud.org?region=us-east-1&prefix=documents/$$ID$$/&showversions=false";
diff --git a/src/config/staging.js b/src/config/staging.js
new file mode 100644
index 000000000..7cec1f875
--- /dev/null
+++ b/src/config/staging.js
@@ -0,0 +1,6 @@
+export const DC_BASE = "https://api.muckcloud.com";
+export const APP_URL = "https://muckcloud.com";
+export const EMBED_URL = "https://muckcloud.com";
+export const SQUARELET_BASE = "https://squarelet-staging.herokuapp.com";
+export const STAFF_ONLY_S3_URL =
+  "https://s3.console.aws.amazon.com/s3/buckets/documentcloud-staging-files?region=us-east-1&prefix=documents/$$ID$$/&showversions=false";
diff --git a/src/embed/documentLoader.js b/src/embed/documentLoader.js
index f520b1f97..cce2f95b8 100644
--- a/src/embed/documentLoader.js
+++ b/src/embed/documentLoader.js
@@ -1,5 +1,6 @@
 import { setupResizeEvent } from "./iframeSizer.js";
 import { queryBuilder } from "@/util/url.js";
+import { APP_URL } from "../config/config.js";
 
 function injectIframe(url, options, container) {
   const parts = url.split("/").slice(-2);
@@ -66,8 +67,7 @@ function injectIframe(url, options, container) {
 
   iframe.style = style;
   iframe.src =
-    queryBuilder(`${process.env.APP_URL}documents/${id}-${slug}`, queryParams) +
-    urlPostfix;
+    queryBuilder(`${APP_URL}documents/${id}-${slug}`, queryParams) + urlPostfix;
   setupResizeEvent(iframe);
 
   container.appendChild(iframe);
diff --git a/src/embed/enhance.js b/src/embed/enhance.js
index 05171b466..cdc177686 100644
--- a/src/embed/enhance.js
+++ b/src/embed/enhance.js
@@ -1,4 +1,5 @@
 import { setupResizeEvent } from "./iframeSizer.js";
+import { APP_URL } from "../config/config.js";
 
 const embeds = document.querySelectorAll(".DC-embed");
 const enhanced = "DC-embed-enhanced";
@@ -34,7 +35,7 @@ embeds.forEach((embed) => {
   // Create the iframe
   const iframe = document.createElement("iframe");
   iframe.style = "border: none; width: 100%;";
-  iframe.src = `${process.env.APP_URL}documents/${slugId}/pages/${page}`;
+  iframe.src = `${APP_URL}documents/${slugId}/pages/${page}`;
   setupResizeEvent(iframe);
 
   embed.appendChild(iframe);
diff --git a/src/embed/noteLoader.js b/src/embed/noteLoader.js
index c322292de..39fcf9e49 100644
--- a/src/embed/noteLoader.js
+++ b/src/embed/noteLoader.js
@@ -1,4 +1,5 @@
 import { setupResizeEvent } from "./iframeSizer.js";
+import { APP_URL } from "../config/config.js";
 
 const enhanced = "DC-embed-enhanced";
 
@@ -21,7 +22,7 @@ function loadNote(src) {
     // Create the iframe
     const iframe = document.createElement("iframe");
     iframe.style = "border: none; width: 100%;";
-    iframe.src = `${process.env.APP_URL}documents/${id}/annotations/${noteId}`;
+    iframe.src = `${APP_URL}documents/${id}/annotations/${noteId}`;
     setupResizeEvent(iframe);
 
     noteElem.appendChild(iframe);
diff --git a/src/embed/projectLoader.js b/src/embed/projectLoader.js
index 06eb3bb2d..9f7a1ed99 100644
--- a/src/embed/projectLoader.js
+++ b/src/embed/projectLoader.js
@@ -1,11 +1,12 @@
 import { setupResizeEvent } from "./iframeSizer.js";
 import { queryBuilder } from "@/util/url.js";
+import { EMBED_URL } from "../config/config.js";
 
 function logInvalidQuery(options, container) {
   const q = options.q;
   console.error(`Query ${q} is not supported`);
   const iframe = document.createElement("iframe");
-  iframe.src = queryBuilder(`${process.env.EMBED_URL}project404`, {
+  iframe.src = queryBuilder(`${EMBED_URL}project404`, {
     projectQuery: q,
     toc: 0,
   });
@@ -80,10 +81,7 @@ function injectIframe(options, container) {
 
   // Set up iframe
   const iframe = document.createElement("iframe");
-  iframe.src = queryBuilder(
-    `${process.env.EMBED_URL}projects/${slugId}`,
-    queryParams,
-  );
+  iframe.src = queryBuilder(`${EMBED_URL}projects/${slugId}`, queryParams);
   iframe.style = style;
   iframe.title =
     options.title != null
diff --git a/src/manager/documents.js b/src/manager/documents.js
index 55267e8ed..e1a6c52fc 100644
--- a/src/manager/documents.js
+++ b/src/manager/documents.js
@@ -269,7 +269,7 @@ export function removeFromCollection(docId, modify = true) {
   }
 
   // Refresh when you delete everything to pull new search
-  if (newDocuments.length == 0 && process.env.NODE_ENV != "test")
+  if (newDocuments.length == 0 && process.env.NODE_ENV !== "test")
     window.location.reload();
 }
 
@@ -439,10 +439,7 @@ export async function changeRevisionControlForDocument(
   revision_control,
 ) {
   await wrapLoad(layout, async () => {
-    await changeRevisionControl(
-      document.id,
-      revision_control,
-    );
+    await changeRevisionControl(document.id, revision_control);
     updateInCollection(document, (d) => {
       d.doc = {
         ...d.doc,
diff --git a/src/pages/FlatPage.svelte b/src/pages/FlatPage.svelte
index 1eac19275..e447c78fe 100644
--- a/src/pages/FlatPage.svelte
+++ b/src/pages/FlatPage.svelte
@@ -9,6 +9,8 @@
   import { getQueryStringParams, falsyParamValue } from "../util/url.js";
   import { inIframe } from "../util/iframe.js";
 
+  import { APP_URL } from "../config/config.js";
+
   // SVG assets
   import mastLogoSvg from "@/assets/mastlogo.svg?raw";
 
@@ -176,7 +178,7 @@
   <header>
     <div class="logo">
       {#if inIframe()}
-        <a href={process.env.APP_URL} target="_blank" rel="noreferrer"
+        <a href={APP_URL} target="_blank" rel="noreferrer noopener"
           >{@html mastLogoSvg}</a
         >
       {:else}
diff --git a/src/pages/app/Document.svelte b/src/pages/app/Document.svelte
index 99fb772fc..d0a3ba901 100644
--- a/src/pages/app/Document.svelte
+++ b/src/pages/app/Document.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { _, date } from "svelte-i18n";
+
   import Checkbox from "@/common/Checkbox.svelte";
   import Button from "@/common/Button.svelte";
   import AccessIcon from "@/common/AccessIcon.svelte";
@@ -8,7 +10,8 @@
   import Link from "@/router/Link.svelte";
   import DocumentThumbnail from "./DocumentThumbnail.svelte";
   import Annotation from "@/pages/viewer/Annotation.svelte";
-  import { _, date } from "svelte-i18n";
+
+  import { TAG_KEY } from "../../config/config.js";
 
   // Stores
   import {
@@ -65,8 +68,6 @@
   function handleKeyup(e) {
     if (e.key == "Shift") shiftKey = false;
   }
-
-  const TAG_KEY = process.env.TAG_KEY;
 </script>
 
 <div class="card">
diff --git a/src/pages/app/upload/UploadDialog.svelte b/src/pages/app/upload/UploadDialog.svelte
index 91825bbb9..dbb8feb1c 100644
--- a/src/pages/app/upload/UploadDialog.svelte
+++ b/src/pages/app/upload/UploadDialog.svelte
@@ -1,4 +1,7 @@
 <script>
+  import { _ } from "svelte-i18n";
+  import { onMount } from "svelte";
+
   // Components
   import File from "../File.svelte";
   import Button from "@/common/Button.svelte";
@@ -17,12 +20,16 @@
   import { layout } from "@/manager/layout.js";
   import { handleNewDocuments } from "@/manager/documents.js";
 
-  // Utils
-  import { _ } from "svelte-i18n";
-
-  import { onMount } from "svelte";
   import emitter from "@/emit.js";
 
+  import {
+    UPLOAD_LIMIT,
+    PDF_SIZE_LIMIT,
+    PDF_SIZE_LIMIT_READABLE,
+    DOCUMENT_SIZE_LIMIT,
+    DOCUMENT_SIZE_LIMIT_READABLE,
+  } from "../../../config/config.js";
+
   const emit = emitter({
     setDismissable() {},
   });
@@ -48,12 +55,6 @@
   let ocrEngine = "tess4";
   let revisionControl = false;
 
-  const LIMIT = parseInt(process.env.UPLOAD_LIMIT);
-  const PDF_SIZE_LIMIT = parseInt(process.env.PDF_SIZE_LIMIT);
-  const PDF_SIZE_LIMIT_READABLE = process.env.PDF_SIZE_LIMIT_READABLE;
-  const DOCUMENT_SIZE_LIMIT = parseInt(process.env.DOCUMENT_SIZE_LIMIT);
-  const DOCUMENT_SIZE_LIMIT_READABLE = process.env.DOCUMENT_SIZE_LIMIT_READABLE;
-
   let tooManyFiles = false;
   let tooManyBigFiles = [false, false];
 
@@ -89,7 +90,7 @@
     let hasTooBigDocument = false;
 
     for (let i = 0; i < newFiles.length; i++) {
-      if (files.length < LIMIT) {
+      if (files.length < UPLOAD_LIMIT) {
         const newFile = newFiles[i];
         const isPdf = newFile.name.toLowerCase().trim().endsWith(".pdf");
         if (
@@ -208,7 +209,7 @@
         {#if tooManyFiles}
           <p class="danger">
             {$_("uploadDialog.fileLimitWarning", {
-              values: { limit: LIMIT },
+              values: { limit: UPLOAD_LIMIT },
             })}
           </p>
         {/if}
diff --git a/src/pages/embed/note/Note.svelte b/src/pages/embed/note/Note.svelte
index 21b022bad..2c403be55 100644
--- a/src/pages/embed/note/Note.svelte
+++ b/src/pages/embed/note/Note.svelte
@@ -16,6 +16,8 @@
     getQueryStringParams,
   } from "@/util/url.js";
 
+  import { IMAGE_WIDTHS } from "../../../config/config.js";
+
   export let id;
   export let noteId;
 
@@ -39,10 +41,6 @@
   const docWidth = 700;
   $: maxWidth = note == null ? 0 : docWidth * note.width;
 
-  const IMAGE_WIDTHS = process.env.IMAGE_WIDTHS.split(",")
-    .map((x) => x.split(":"))
-    .map((x) => [parseFloat(x[1]), x[0]])
-    .sort((a, b) => a[0] - b[0]);
   const LARGE_WIDTH = IMAGE_WIDTHS.map((x, i) => [x, i]).filter(
     (x) => x[0][1] == "large",
   )[0];
diff --git a/src/pages/embed/page/Annotation.svelte b/src/pages/embed/page/Annotation.svelte
index dd94e4951..30e44dfef 100644
--- a/src/pages/embed/page/Annotation.svelte
+++ b/src/pages/embed/page/Annotation.svelte
@@ -2,7 +2,7 @@
   import DomPurify from "dompurify";
   import { onMount } from "svelte";
 
-  const APP_URL = process.env.APP_URL;
+  import { APP_URL } from "../../../config/config.js";
 
   export let note;
   export let slugId;
diff --git a/src/pages/embed/page/Page.svelte b/src/pages/embed/page/Page.svelte
index f7a9f9357..9858aeb54 100644
--- a/src/pages/embed/page/Page.svelte
+++ b/src/pages/embed/page/Page.svelte
@@ -1,14 +1,18 @@
 <script>
+  import { onMount, tick } from "svelte";
+  import { _ } from "svelte-i18n";
+
   import Note from "./Note.svelte";
   import Annotation from "./Annotation.svelte";
   import ProgressiveImage from "@/common/ProgressiveImage.svelte";
+
   import { informSize } from "@/embed/iframeSizer.js";
-  import { onMount, tick } from "svelte";
   import { getDocument } from "@/api/document.js";
   import { getAnnotations } from "@/api/annotation.js";
   import { textUrl, pageImageUrl } from "@/api/viewer.js";
   import { embedUrl } from "@/api/embed.js";
-  import { _ } from "svelte-i18n";
+
+  import { APP_URL, DC_BASE } from "../../../config/config.js";
 
   export let id;
   export let page;
@@ -39,8 +43,7 @@
   onMount(async () => {
     const pageResourcePath = isPageResourcePath.exec(window.location.pathname);
     if (pageResourcePath != null) {
-      const pageResourceUrl =
-        process.env.DC_BASE + "/files" + window.location.pathname;
+      const pageResourceUrl = DC_BASE + "/files" + window.location.pathname;
       window.location.href = pageResourceUrl;
       return;
     }
@@ -149,7 +152,7 @@
     <div style="font-size:14px;line-height:18px;text-align:center">
       Contributed to
       <a
-        href={process.env.APP_URL}
+        href={APP_URL}
         title={$_("embedPage.gotoDocCloud")}
         target="_blank"
         style="color: #5a76a0; text-decoration: underline;
diff --git a/src/pages/entities/Entities.svelte b/src/pages/entities/Entities.svelte
index 1abf017b1..f7ec11409 100644
--- a/src/pages/entities/Entities.svelte
+++ b/src/pages/entities/Entities.svelte
@@ -15,7 +15,7 @@
 
   import closeSvg from "@/assets/close_inline.svg?raw";
 
-  const CONTACT = process.env.SPECIAL_CONTACT;
+  import { SPECIAL_CONTACT } from "../../config/config.js";
 
   let loading = true;
   let fullText = null;
@@ -405,7 +405,7 @@
       </p>
     {:else}
       <p>
-        {@html $_("entities.welcome", { values: { contact: CONTACT } })}
+        {@html $_("entities.welcome", { values: { contact: SPECIAL_CONTACT } })}
       </p>
       <p>
         {$_("entities.manual")}
diff --git a/src/pages/legacy/Redirect.svelte b/src/pages/legacy/Redirect.svelte
index 0958ce0f3..c0103126e 100644
--- a/src/pages/legacy/Redirect.svelte
+++ b/src/pages/legacy/Redirect.svelte
@@ -1,22 +1,27 @@
 <script>
-  import { onMount } from "svelte";
   import axios from "axios";
+  import { onMount } from "svelte";
   import { pushUrl } from "@/router/router.js";
   import { projectUrl, orgUrl, userUrl } from "@/search/search.js";
 
+  import {
+    PROJECT_REDIRECT_HASH_URL,
+    ORG_REDIRECT_HASH_URL,
+  } from "../../config/config.js";
+
   export let query = null;
 
   const redirects = [
     {
       regex: /^Project: ?"(.*)" ?$/,
       type: "hash",
-      fn: process.env.PROJECT_REDIRECT_HASH_URL,
+      fn: PROJECT_REDIRECT_HASH_URL,
       urlHandler: (id, projectName) => projectUrl({ title: projectName, id }),
     },
     {
       regex: /^Group:(.*) ?$/,
       type: "hash",
-      fn: process.env.ORG_REDIRECT_HASH_URL,
+      fn: ORG_REDIRECT_HASH_URL,
       urlHandler: (id, orgSlug) => orgUrl({ name: orgSlug, id }),
     },
     {
diff --git a/src/pages/viewer/Annotation.svelte b/src/pages/viewer/Annotation.svelte
index 13449918c..4ca337289 100644
--- a/src/pages/viewer/Annotation.svelte
+++ b/src/pages/viewer/Annotation.svelte
@@ -26,13 +26,15 @@
   import simpleLinkSvg from "@/assets/simplelink.svg?raw";
   import pencilSvg from "@/assets/pencil.svg?raw";
 
+  import {
+    NOTE_TITLE_CHAR_LIMIT,
+    NOTE_CONTENT_CHAR_LIMIT,
+  } from "../../config/config.js";
+
   // Asynchronously load dompurify
   import { loadDompurify } from "@/util/domPurify.js";
   loadDompurify();
 
-  const noteTitleLimit = process.env.NOTE_TITLE_CHAR_LIMIT;
-  const noteContentLimit = process.env.NOTE_CONTENT_CHAR_LIMIT;
-
   const emit = emitter({
     stateChange() {},
   });
@@ -201,7 +203,7 @@
       <!-- Title -->
       {#if editMode}
         <input
-          maxlength={noteTitleLimit}
+          maxlength={NOTE_TITLE_CHAR_LIMIT}
           bind:this={titleInput}
           placeholder={$_("annotation.title")}
           bind:value={title}
@@ -289,7 +291,7 @@
         <!-- Title -->
         {#if editMode}
           <input
-            maxlength={noteTitleLimit}
+            maxlength={NOTE_TITLE_CHAR_LIMIT}
             bind:this={titleInput}
             placeholder={$_("annotation.title")}
             bind:value={title}
@@ -314,7 +316,7 @@
     <!-- Description/Content -->
     {#if editMode}
       <HtmlEditor
-        maxlength={noteContentLimit}
+        maxlength={NOTE_CONTENT_CHAR_LIMIT}
         placeholder={$_("annotation.description")}
         bind:value={description}
       />
diff --git a/src/search/search.js b/src/search/search.js
index 3ddaed8ba..830812c5a 100644
--- a/src/search/search.js
+++ b/src/search/search.js
@@ -12,7 +12,8 @@ import { apiSearchUrl, searchDocumentsUrl } from "@/api/document.js";
 import deepEqual from "fast-deep-equal";
 import { _ } from "@/langs/i18n.js";
 
-const TAG_KEY = process.env.TAG_KEY;
+import { TAG_KEY } from "../config/config.js";
+
 let lastSearch = null;
 
 export const search = new Svue({
diff --git a/src/search/searchFields.js b/src/search/searchFields.js
index 3eac1005e..6be5078fd 100644
--- a/src/search/searchFields.js
+++ b/src/search/searchFields.js
@@ -1,6 +1,5 @@
 import { extractSlugId, isNumber } from "@/util/string.js";
-
-const languageOptions = process.env.LANGUAGE_CODES.split("|");
+import { LANGUAGE_CODES } from "../config/config.js";
 
 export const sortCompletions = [
   {
@@ -104,7 +103,7 @@ export function fieldValid(text, example = false) {
     };
   } else if (field == "language") {
     return {
-      valid: id != null && languageOptions.includes(id),
+      valid: id != null && LANGUAGE_CODES.includes(id),
     };
   } else if (field.startsWith("data_")) {
     return {
diff --git a/src/structure/document.js b/src/structure/document.js
index eff14b5e3..f898d53d9 100644
--- a/src/structure/document.js
+++ b/src/structure/document.js
@@ -6,12 +6,14 @@ import { Section } from "@/structure/section.js";
 import deepEqual from "fast-deep-equal";
 import deepCopy from "fast-copy";
 
-const HIGHLIGHT_START = process.env.HIGHLIGHT_START;
-const HIGHLIGHT_END = process.env.HIGHLIGHT_END;
-const PAGE_NO_RE = /^page_no_(\d+)$/;
+import {
+  HIGHLIGHT_START,
+  HIGHLIGHT_END,
+  TAG_KEY,
+  APP_URL,
+} from "../config/config.js";
 
-const TAG_KEY = process.env.TAG_KEY;
-const APP_URL = process.env.APP_URL;
+const PAGE_NO_RE = /^page_no_(\d+)$/;
 
 export class Document extends Svue {
   constructor(rawDocument, structure = {}) {
diff --git a/src/structure/documentFactory.js b/src/structure/documentFactory.js
index 08d47fa4d..32469ffd2 100644
--- a/src/structure/documentFactory.js
+++ b/src/structure/documentFactory.js
@@ -1,11 +1,12 @@
 import { Document } from "./document.js";
+import { DC_BASE } from "../config/config.js";
 
 let id = 1;
 
 export function makeDocument(options = {}) {
   return new Document({
     access: options.access || "private",
-    asset_url: options.asset_url || process.env.DC_BASE + "/files/",
+    asset_url: options.asset_url || DC_BASE + "/files/",
     created_at: options.created_at || "2020-01-01T00:00:00.000Z",
     data: options.data || {},
     highlights: options.highlights || null,
diff --git a/src/structure/project.js b/src/structure/project.js
index 0215999fc..6ec9ec6a6 100644
--- a/src/structure/project.js
+++ b/src/structure/project.js
@@ -1,7 +1,7 @@
 import { Svue } from "svue";
 import { uniquify } from "@/util/array.js";
 
-const APP_URL = process.env.APP_URL;
+import { APP_URL } from "../config/config.js";
 
 export class Project extends Svue {
   constructor(rawProject, structure = {}) {
diff --git a/src/ticker/ticker.js b/src/ticker/ticker.js
index d72ae886c..517e6ad17 100644
--- a/src/ticker/ticker.js
+++ b/src/ticker/ticker.js
@@ -5,8 +5,7 @@ import { layout } from "../viewer/layout.js";
 import { entities } from "../entities/entities.js";
 import { batchDelay } from "../util/batchDelay.js";
 
-const POLL_INTERVAL = parseInt(process.env.POLL_INTERVAL);
-const GET_BATCH_DELAY = parseInt(process.env.GET_BATCH_DELAY);
+import { POLL_INTERVAL, GET_BATCH_DELAY } from "../config/config.js";
 
 export const ticker = new Svue({
   data() {
diff --git a/src/util/paginate.js b/src/util/paginate.js
index a26aa0ecd..7892020fa 100644
--- a/src/util/paginate.js
+++ b/src/util/paginate.js
@@ -1,7 +1,7 @@
 import session from "@/api/session.js";
 import { queryBuilder } from "./url.js";
 
-export const MAX_PER_PAGE = parseInt(process.env.MAX_PER_PAGE);
+import { MAX_PER_PAGE } from "../config/config.js";
 
 /**
  * Requests the specified URL and paginates through to return all

From c7f9feea47f76ec492ba75e2c018877c757d6da4 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Thu, 18 Jan 2024 09:43:45 -0500
Subject: [PATCH 2/5] Remove old .env files

---
 .env                   | 67 ------------------------------------------
 .env.production        |  5 ----
 .env.staging           |  5 ----
 src/api/document.js    |  4 +--
 webpack.base.config.js |  3 +-
 5 files changed, 3 insertions(+), 81 deletions(-)
 delete mode 100644 .env
 delete mode 100644 .env.production
 delete mode 100644 .env.staging

diff --git a/.env b/.env
deleted file mode 100644
index 272f4e2b3..000000000
--- a/.env
+++ /dev/null
@@ -1,67 +0,0 @@
-DC_BASE=https://api.dev.documentcloud.org
-APP_URL=https://www.dev.documentcloud.org/
-EMBED_URL=https://www.dev.documentcloud.org/
-SQUARELET_BASE=https://dev.squarelet.com
-
-DC_LOGIN=/accounts/login/squarelet
-DC_LOGOUT=/accounts/logout/
-SQUARELET_SIGNUP=/accounts/signup/?intent=documentcloud&next=
-
-POLL_INTERVAL=5000
-IMAGE_WIDTHS=xlarge:2000,large:1000,normal:700,small:180,thumbnail:60
-
-MAX_PER_PAGE=100
-
-PDF_SIZE_LIMIT=525336576
-PDF_SIZE_LIMIT_READABLE=500 MB
-
-DOCUMENT_SIZE_LIMIT=27262976
-DOCUMENT_SIZE_LIMIT_READABLE=25 MB
-
-TOAST_LENGTH=5000
-TOAST_FADE=800
-
-LEGACY_CUT_OFF=20000000
-
-HIGHLIGHT_START=<em>
-HIGHLIGHT_END=</em>
-
-API=/api/
-
-UPLOAD_LIMIT=1000
-UPLOAD_BATCH=25
-UPLOAD_BATCH_DELAY=1000
-GET_BATCH=25
-GET_BATCH_DELAY=1000
-
-TAG_KEY=_tag
-
-SPECIAL_VERSION=Thanks for using DocumentCloud!
-SPECIAL_CONTACT=mailto:info@documentcloud.org?subject=DocumentCloud Feedback
-TIP_OF_THE_DAY=tipofday/
-LOGIN_ERROR=DocumentCloud is only available to users we have explicitly granted permission.
-
-LANGUAGE_CODES=afr|amh|ara|asm|aze|aze_cyrl|bel|ben|bod|bos|bul|cat|ceb|ces|zho|tra|chr|cym|dan|deu|dzo|ell|eng|enm|epo|est|eus|fas|fin|fra|frk|frm|gle|glg|grc|guj|hat|heb|hin|hrv|hun|iku|ind|isl|ita|ita_old|jav|jpn|kan|kat|kat_old|kaz|khm|kir|kor|kur|lao|lat|lav|lit|mal|mar|mkd|mlt|msa|mya|nep|nld|nor|ori|pan|pol|por|pus|ron|rus|san|sin|slk|slv|spa|spa_old|sqi|srp|srp_latn|swa|swe|syr|tam|tel|tgk|tgl|tha|tir|tur|uig|ukr|urd|uzb|uzb_cyrl|vie|yid
-LANGUAGE_NAMES=Afrikaans|Amharic|Arabic|Assamese|Azerbaijani|Azerbaijani - Cyrillic|Belarusian|Bengali|Tibetan|Bosnian|Bulgarian|Catalan|Cebuano|Czech|Chinese - Simplified|Chinese - Traditional|Cherokee|Welsh|Danish|German|Dzongkha|Greek|English|Middle English|Esperanto|Estonian|Basque|Persian|Finnish|French|German Fraktur|Middle French|Irish|Galician|Ancient Greek|Gujarati|Haitian; Haitian Creole|Hebrew|Hindi|Croatian|Hungarian|Inuktitut|Indonesian|Icelandic|Italian|Italian - Old|Javanese|Japanese|Kannada|Georgian|Georgian - Old|Kazakh|Central Khmer|Kirghiz; Kyrgyz|Korean|Kurdish|Lao|Latin|Latvian|Lithuanian|Malayalam|Marathi|Macedonian|Maltese|Malay|Burmese|Nepali|Dutch; Flemish|Norwegian|Oriya|Panjabi; Punjabi|Polish|Portuguese|Pushto; Pashto|Romanian; Moldavian; Moldovan|Russian|Sanskrit|Sinhala; Sinhalese|Slovak|Slovenian|Spanish; Castilian|Spanish; Castilian - Old|Albanian|Serbian|Serbian - Latin|Swahili|Swedish|Syriac|Tamil|Telugu|Tajik|Tagalog|Thai|Tigrinya|Turkish|Uighur; Uyghur|Ukrainian|Urdu|Uzbek|Uzbek - Cyrillic|Vietnamese|Yiddish
-DEFAULT_LANGUAGE=eng
-
-DOCUMENT_TYPES=123,602,abw,agd,bmp,cdr,cgm,cmx,csv,cwk,dbf,dif,doc,docx,dot,emf,eps,fb2,fhd,fodg,fodp,fods,fodt,gif,gnm,gnumeric,htm,html,hwp,jpeg,jpg,jtd,jtt,key,kth,mml,numbers,odb,odf,odg,odp,ods,odt,p65,pages,pbm,pcd,pct,pcx,pdf,pgm,plt,pm3,pm4,pm5,pm6,pmd,png,pot,ppm,pps,ppt,pptx,psd,pub,qxp,ras,rlf,rtf,sda,sdc,sdd,sdp,sdw,sgf,sgl,sgv,slk,stc,std,sti,stw,svg,svm,sxc,sxd,sxi,sxm,sxw,tga,tif,tiff,txt,uof,uop,uos,uot,vor,vsd,wb2,wdb,wk1,wk3,wk4,wks,wpd,wps,wq1,wq2,wri,xbm,xls,xlsx,xlt,xlw,xml,xpm,zabw,zmf
-
-STAFF_ONLY_S3_URL=http://minio.documentcloud.org:9000/minio/documents/documents/$$ID$$/
-
-
-DOCUMENT_TITLE_CHAR_LIMIT=1000
-DOCUMENT_DESCRIPTION_CHAR_LIMIT=4000
-DOCUMENT_SOURCE_CHAR_LIMIT=1000
-RELATED_ARTICLE_URL_CHAR_LIMIT=1024
-PUBLISHED_URL_CHAR_LIMIT=1024
-
-PROJECT_DESCRIPTION_CHAR_LIMIT=1000
-PROJECT_TITLE_CHAR_LIMIT=255
-
-NOTE_TITLE_CHAR_LIMIT=500
-NOTE_CONTENT_CHAR_LIMIT=2000
-SECTION_TITLE_CHAR_LIMIT=200
-
-PROJECT_REDIRECT_HASH_URL=https://s3.amazonaws.com/s3.documentcloud.org/legacy/project_redirects.bin
-ORG_REDIRECT_HASH_URL=https://s3.amazonaws.com/s3.documentcloud.org/legacy/org_redirects.bin
diff --git a/.env.production b/.env.production
deleted file mode 100644
index e0f709935..000000000
--- a/.env.production
+++ /dev/null
@@ -1,5 +0,0 @@
-DC_BASE=https://api.www.documentcloud.org
-APP_URL=https://www.documentcloud.org/
-EMBED_URL=https://embed.documentcloud.org/
-SQUARELET_BASE=https://accounts.muckrock.com
-STAFF_ONLY_S3_URL=https://s3.console.aws.amazon.com/s3/buckets/s3.documentcloud.org?region=us-east-1&prefix=documents/$$ID$$/&showversions=false
diff --git a/.env.staging b/.env.staging
deleted file mode 100644
index 47bb2951d..000000000
--- a/.env.staging
+++ /dev/null
@@ -1,5 +0,0 @@
-DC_BASE=https://api.muckcloud.com
-APP_URL=https://muckcloud.com
-EMBED_URL=https://muckcloud.com
-SQUARELET_BASE=https://squarelet-staging.herokuapp.com
-STAFF_ONLY_S3_URL=https://s3.console.aws.amazon.com/s3/buckets/documentcloud-staging-files?region=us-east-1&prefix=documents/$$ID$$/&showversions=false
diff --git a/src/api/document.js b/src/api/document.js
index 493c4fec0..5539f52a9 100644
--- a/src/api/document.js
+++ b/src/api/document.js
@@ -16,7 +16,7 @@ import axios from "axios";
 import { Document, transformHighlights } from "@/structure/document.js";
 
 import {
-  POLL_TIMEOUT,
+  POLL_INTERVAL,
   GET_BATCH,
   GET_BATCH_DELAY,
   UPLOAD_BATCH,
@@ -254,7 +254,7 @@ export async function pollDocument(
   }
 
   // Retrigger after timeout
-  await timeout(POLL_TIMEOUT);
+  await timeout(POLL_INTERVAL);
   pollDocument(id, docFn, doneFn, conditionFn);
 }
 
diff --git a/webpack.base.config.js b/webpack.base.config.js
index 35a69086d..a8190d2c7 100644
--- a/webpack.base.config.js
+++ b/webpack.base.config.js
@@ -120,8 +120,7 @@ export default wrap({
       filename: "assets/[name].[contenthash].css",
     }),
     new DotEnv({
-      path: prod ? `.env.${environment}` : ".env",
-      defaults: ".env",
+      path: ".env",
       systemvars: true,
     }),
     new CircularDependencyPlugin({

From 886476b72528d5484c995c0d9a3190474e86f526 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Thu, 18 Jan 2024 12:03:21 -0500
Subject: [PATCH 3/5] Cleanup and figuring out ProgressiveImage

---
 Makefile                                |  6 ------
 README.md                               |  2 +-
 local.builder.yml                       |  8 ++++----
 src/common/ProgressiveImage.svelte      | 15 ++++++---------
 src/config/config.js                    |  2 ++
 tests/anonymous/viewer/document.spec.js |  5 +----
 6 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/Makefile b/Makefile
index 32f7e47fc..b92277f8f 100644
--- a/Makefile
+++ b/Makefile
@@ -34,12 +34,6 @@ build-serve:
 build-analyze:
 	docker compose -f local.yml up documentcloud_frontend_analyze
 
-test:
-	docker compose -f local.builder.yml run --rm test
-
-test-watch:
-	docker compose -f local.builder.yml run --rm test-watch
-
 prettier-check:
 	prettier --check --plugin-search-dir=. src
 
diff --git a/README.md b/README.md
index 81bbca395..115b2142f 100644
--- a/README.md
+++ b/README.md
@@ -58,7 +58,7 @@ Run the relevant `npm install ...` command and then get the change mirrored on t
 
 ## Unit tests
 
-Run unit tests with `make test`. This will run the tests via the builder Docker image.
+Run unit tests with `npm test`.
 
 ## Functional tests
 
diff --git a/local.builder.yml b/local.builder.yml
index acc920f98..d4668db7e 100644
--- a/local.builder.yml
+++ b/local.builder.yml
@@ -77,8 +77,8 @@ services:
       squarelet_default:
         aliases:
           - www.dev.documentcloud.org
-    env_file:
-      - .env.test
+    environment:
+      - NODE_ENV=test
     command: ./browser-test-all.sh
 
   browser-test-staging:
@@ -91,8 +91,8 @@ services:
       squarelet_default:
         aliases:
           - www.dev.documentcloud.org
-    env_file:
-      - .env.staging
+    environment:
+      - NODE_ENV=staging
     command: ./browser-test-all.sh
 
 volumes:
diff --git a/src/common/ProgressiveImage.svelte b/src/common/ProgressiveImage.svelte
index ded438ff9..0ecd3ea30 100644
--- a/src/common/ProgressiveImage.svelte
+++ b/src/common/ProgressiveImage.svelte
@@ -1,13 +1,10 @@
 <script>
-  import { onMount, onDestroy } from "svelte";
-  import emitter from "@/emit.js";
-  import { IMAGE_WIDTHS } from "../config/config.js";
+  import { onMount, onDestroy, createEventDispatcher } from "svelte";
+  import { IMAGE_WIDTHS, IMAGE_WIDTHS_MAP } from "../config/config.js";
   import { pageImageUrl } from "@/api/viewer.js";
   import { timeout } from "@/util/timeout.js";
 
-  const emit = emitter({
-    load() {},
-  });
+  const dispatch = createEventDispatcher();
 
   export let alt;
   export let page;
@@ -18,6 +15,7 @@
   export let crosshair = false;
   export let transform = null;
   export let delay = 0;
+
   let elem;
   let destroyed = false;
   let imgs = [];
@@ -25,7 +23,7 @@
   let largestLoaded = -1;
 
   const NORMAL_WIDTH = IMAGE_WIDTHS.map((x, i) => [x, i]).filter(
-    (x) => x[0][1] == "normal",
+    (x) => x[1][0] == "normal",
   )[0];
 
   let mounted = false;
@@ -92,7 +90,7 @@
       setTimeout(() => (img.className = "loaded"), 100);
     }
     largestLoaded = i;
-    setTimeout(() => emit.load(), 100);
+    setTimeout(() => dispatch("load"), 100);
   }
 
   function loadImg(i) {
@@ -160,7 +158,6 @@
     top: 0;
     left: 0;
 
-    user-drag: none;
     user-select: none;
 
     transition: opacity 0.2s linear;
diff --git a/src/config/config.js b/src/config/config.js
index e55cd8543..75afd6d65 100644
--- a/src/config/config.js
+++ b/src/config/config.js
@@ -41,6 +41,8 @@ export const IMAGE_WIDTHS = [
   ["thumbnail", 60],
 ];
 
+export const IMAGE_WIDTHS_MAP = new Map(IMAGE_WIDTHS);
+
 export const MAX_PER_PAGE = 100;
 
 export const PDF_SIZE_LIMIT = 525336576;
diff --git a/tests/anonymous/viewer/document.spec.js b/tests/anonymous/viewer/document.spec.js
index 69c6aacb9..cbcf7f0ee 100644
--- a/tests/anonymous/viewer/document.spec.js
+++ b/tests/anonymous/viewer/document.spec.js
@@ -2,10 +2,7 @@
 import fs from "node:fs/promises";
 import { test as base, expect } from "@playwright/test";
 
-const {
-  DC_BASE = "https://api.dev.documentcloud.org",
-  NODE_ENV = "development",
-} = process.env;
+const { NODE_ENV = "development" } = process.env;
 
 const test = base.extend({
   document: async ({ page }, use) => {

From fb7bfc2748c4d84a3f7ad602dd6a4768a50014a9 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Thu, 18 Jan 2024 13:21:38 -0500
Subject: [PATCH 4/5] Fix image widths

---
 src/common/ProgressiveImage.svelte  | 2 +-
 src/config/config.js                | 8 +++++++-
 tests/anonymous/manager/app.spec.js | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/common/ProgressiveImage.svelte b/src/common/ProgressiveImage.svelte
index 0ecd3ea30..ef94070de 100644
--- a/src/common/ProgressiveImage.svelte
+++ b/src/common/ProgressiveImage.svelte
@@ -23,7 +23,7 @@
   let largestLoaded = -1;
 
   const NORMAL_WIDTH = IMAGE_WIDTHS.map((x, i) => [x, i]).filter(
-    (x) => x[1][0] == "normal",
+    (x) => x[0][1] == "normal",
   )[0];
 
   let mounted = false;
diff --git a/src/config/config.js b/src/config/config.js
index 75afd6d65..f8aa8dccd 100644
--- a/src/config/config.js
+++ b/src/config/config.js
@@ -33,7 +33,8 @@ export const DC_LOGOUT = "/accounts/logout/";
 export const SQUARELET_SIGNUP = "/accounts/signup/?intent=documentcloud&next=";
 
 export const POLL_INTERVAL = 5000;
-export const IMAGE_WIDTHS = [
+
+export const IMAGE_WIDTHS_ENTRIES = [
   ["xlarge", 2000],
   ["large", 1000],
   ["normal", 700],
@@ -41,6 +42,11 @@ export const IMAGE_WIDTHS = [
   ["thumbnail", 60],
 ];
 
+export const IMAGE_WIDTHS = IMAGE_WIDTHS_ENTRIES.map(([name, width]) => [
+  width,
+  name,
+]);
+
 export const IMAGE_WIDTHS_MAP = new Map(IMAGE_WIDTHS);
 
 export const MAX_PER_PAGE = 100;
diff --git a/tests/anonymous/manager/app.spec.js b/tests/anonymous/manager/app.spec.js
index 5b338d954..44469607a 100644
--- a/tests/anonymous/manager/app.spec.js
+++ b/tests/anonymous/manager/app.spec.js
@@ -19,7 +19,7 @@ test.describe("manager tests", () => {
     ).toBeVisible();
 
     // close the overlay
-    await page.getByRole("button").nth(3).click();
+    await page.locator("button.dismiss").click();
 
     // can we see documents?
     await expect(page.locator(".outer > div").first()).toBeVisible();

From f817cefe069261809e059723daf8deaa62c0f4aa Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Fri, 19 Jan 2024 09:55:07 -0500
Subject: [PATCH 5/5] README cleanup

---
 .gitignore |  5 ++--
 README.md  | 71 ++++++++++++++++++++++++------------------------------
 2 files changed, 33 insertions(+), 43 deletions(-)

diff --git a/.gitignore b/.gitignore
index db643eacd..2b5317021 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,9 +27,8 @@ public/assets/
 .netlify
 
 # Local test env file
-.env.secret
-.env.test
-.env.sentry-build-plugin
+.env
+.env.*
 playwright-report
 test-results
 
diff --git a/README.md b/README.md
index 115b2142f..03d2c805c 100644
--- a/README.md
+++ b/README.md
@@ -6,16 +6,16 @@ The main frontend for DocumentCloud, written in [Svelte](https://svelte.dev/).
 
 ## Usage
 
-This project is a standard Node project but wrapped to run in Docker compose.
+This project depends on both [Squarelet](https://github.com/muckrock/squarelet) and the [DocumentCloud (Django)](https://github.com/muckrock/documentcloud). Follow the steps in their READMEs before setting up this project.
 
-In order to install, run:
+This project is a Svelte + Webpack project wrapped in Docker compose.
+
+In order to install dependencies inside the Docker container, run:
 
 ```bash
 make install
 ```
 
-If this process fails because it can't find `.env.test`, run `cp .env .env.test` to create the test environment file.
-
 Once the node modules have been installed, start the app with:
 
 ```bash
@@ -32,8 +32,6 @@ echo "127.0.0.1 www.dev.documentcloud.org" | sudo tee -a /etc/hosts
 
 Once everything is up and running, you should be able to see the website live at [www.dev.documentcloud.org](http://www.dev.documentcloud.org/). Note the frontend is not yet functional.
 
-To utilize the frontend with its necessary authentication system and backend, [Squarelet](https://github.com/muckrock/squarelet) and [DocumentCloud (Django)](https://github.com/muckrock/documentcloud) are a requirement. Follow the steps in their READMEs.
-
 ## Building for production
 
 Run `make build` to build the production version of the app. The project will be output in the `public` directory.
@@ -60,54 +58,47 @@ Run the relevant `npm install ...` command and then get the change mirrored on t
 
 Run unit tests with `npm test`.
 
-## Functional tests
+## Browser tests
 
-All of the functional test commands depend on the front end running, so start the app with `make dev-app` and start the backend and Squarelet as well.
+All of the browser test commands depend on the front end running, so start the app with `make dev` and start the backend and Squarelet as well.
 
 ### Running tests locally
 
-Run `make browser-test` in another terminal. This will run the `browser-test` Docker image against the running front-end app using all of the browsers, except Chromium for now.
-
-You will need to create a user that is verified for uploading as described in the [backend documentation](muckrock/documentcloud). Then, you need to put that users credentials in a `.env.test` file in the project root that looks like this:
-
-TEST_USER=<the test user>
-TEST_PASS=<the password>
-APP_URL=https://www.dev.documentcloud.org/
-
-To run the functional tests without the Docker image, run `make browser-test-direct`. This will run the test suite files via your computer's Node. It will use the webkit browser only (but you can change this in the Makefile if you like).
-
-`make browser-test-direct` will do the same thing, except it will use all of the browsers.
-
-The above commands run the browsers headlessly. If you want to see what's going on, you can use `make browser-test-headful`.
-
-If you want to step through the tests with the debugger, use `make browser-test-debug`.
-
-### Running against staging
-
-Add the following for a verified-to-upload user an staging to `.env.staging`:
-
-TEST_USER=<the test user>
-TEST_PASS=<the password>
-
-Then, run `make browser-test-staging`. To run it headfully, use `make browser-test-headful-staging`.
+Run `npm run test:browser` in another terminal. This will run Playwright using Chromium and Firefox.
 
 ### Development
 
 The functional tests are organized like this:
 
-`tests/functional`: Common utilities for the test go here.
-`tests/functional/cases`: The bodies of individual test cases.
-`tests/functional/suites`: These files are the test runner entry points ([`tape`](https://github.com/ljharb/tape/) is the test runner). They use the utilties to start up and shut down the browsers via Playwright and load and run individual test cases. It may make sense to repeat some test cases across suites, like signing in, uploading a document, and deleting an uploaded document, for example.
-`tests/functional/fixtures`: Artifacts and data needed by the tests go here.
+```
+tests
+├── README.md
+├── anonymous
+│   ├── manager
+│   │   └── app.spec.js
+│   ├── pages
+│   │   └── home.spec.js
+│   └── viewer
+│       └── document.spec.js
+└── fixtures
+    ├── Small pdf.pdf
+    ├── development.json
+    ├── production.json
+    ├── staging.json
+    └── the-nature-of-the-firm-CPEC11.pdf
+```
+
+Tests are organized around major parts of the codebase -- `manager`, `pages` and `viewer`. Tests under `anonymous` don't use an authenticated user.
+
+Tests rely on specific docouments available in each environment, which will have different URLs, so lists of known documents are provided in `development.json`, `staging.json` and `production.json`. Those correspond to the `NODE_ENV` environment variable.
 
 ## Storybooks
 
-Storybooks are used to create isolated environments for developing, testing, and demonstrating the Svelte components that compose the user interface.
+Storybooks are used to create isolated environments for developing, testing and demonstrating the Svelte components that compose the user interface.
 
-For now, Storybooks run locally to your machine, not in the Docker container.
-They also require Node v16 or later to run (the frontend containers currently run on v12).
+Storybooks run locally to your machine, not in the Docker container.
 
-To run the Storybook dev server with Node 16 enabled:
+To run the Storybook dev server:
 
 ```sh
 npm run storybook