Merge remote-tracking branch 'origin/master' into redesign

assets/.eslintignore

@@ -1,3 +1,3 @@
 js/vendor/*
-webpack.config.js
+vite.config.ts
 jest.config.js

assets/css/application.scss

@@ -9,46 +9,46 @@
 
 $fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
 
-@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
-@import "~@fortawesome/fontawesome-free/scss/solid.scss";
-@import "~@fortawesome/fontawesome-free/scss/regular.scss";
-@import "~@fortawesome/fontawesome-free/scss/brands.scss";
-@import "~normalize-scss/sass/normalize/import-now";
+@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "@fortawesome/fontawesome-free/scss/solid.scss";
+@import "@fortawesome/fontawesome-free/scss/regular.scss";
+@import "@fortawesome/fontawesome-free/scss/brands.scss";
+@import "normalize-scss/sass/normalize/import-now";
 
 // Import the default theme to act as a fallback.
-@import "~themes/dark-blue";
+@import "themes/dark-blue";
 
 // Files containing common properties, such as variable definitions.
-@import "~common/measurements";
-@import "~common/mixins";
+@import "common/measurements";
+@import "common/mixins";
 
 // General style elements that are used throughout the project.
-@import "~elements/avatar";
-@import "~elements/base";
-@import "~elements/block";
-@import "~elements/button";
-@import "~elements/dropdown";
-@import "~elements/flash";
-@import "~elements/flex";
-@import "~elements/heading";
-@import "~elements/input";
-@import "~elements/interaction";
-@import "~elements/layout";
-@import "~elements/media";
-@import "~elements/mobile";
-@import "~elements/separator";
-@import "~elements/table";
+@import "elements/avatar";
+@import "elements/base";
+@import "elements/block";
+@import "elements/button";
+@import "elements/dropdown";
+@import "elements/flash";
+@import "elements/flex";
+@import "elements/heading";
+@import "elements/input";
+@import "elements/interaction";
+@import "elements/layout";
+@import "elements/media";
+@import "elements/mobile";
+@import "elements/separator";
+@import "elements/table";
 
 // Style elements specific to certain pages.
-@import "~views/admin";
-@import "~views/burger";
-@import "~views/communication";
-@import "~views/footer";
-@import "~views/header";
-@import "~views/image";
-@import "~views/markdown";
-@import "~views/metabar";
-@import "~views/pagination";
-@import "~views/staff";
-@import "~views/statistics";
-@import "~views/tag";
+@import "views/admin";
+@import "views/burger";
+@import "views/communication";
+@import "views/footer";
+@import "views/header";
+@import "views/image";
+@import "views/markdown";
+@import "views/metabar";
+@import "views/pagination";
+@import "views/staff";
+@import "views/statistics";
+@import "views/tag";

assets/js/autocomplete.js

@@ -2,8 +2,8 @@
  * Autocomplete.
  */
 
-import { LocalAutocompleter } from 'utils/local-autocompleter';
-import { handleError } from 'utils/requests';
+import { LocalAutocompleter } from './utils/local-autocompleter';
+import { handleError } from './utils/requests';
 
 const cache = {};
 let inputField, originalTerm;

assets/js/utils/dom.ts

@@ -57,8 +57,8 @@ export function makeEl<Tag extends keyof HTMLElementTagNameMap>(tag: Tag, attr?:
   if (attr) {
     for (const prop in attr) {
       const newValue = attr[prop];
-      if (typeof newValue !== 'undefined') {
-        el[prop] = newValue as Exclude<typeof newValue, undefined>;
+      if (newValue) {
+        el[prop] = newValue;
       }
     }
   }

assets/package.json

@@ -1,60 +1,36 @@
 {
   "type": "module",
   "scripts": {
-    "deploy": "cross-env NODE_ENV=production webpack",
+    "deploy": "cross-env NODE_ENV=production tsc && cross-env NODE_ENV=production vite build",
     "lint": "eslint . --ext .js,.ts",
     "test": "jest --ci",
     "test:watch": "jest --watch",
-    "watch": "webpack --watch"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.3.0",
-    "@rollup/plugin-multi-entry": "^6.0.0",
-    "@rollup/plugin-typescript": "^11.0.0",
-    "@rollup/plugin-virtual": "^3.0.1",
-    "@types/web": "^0.0.91",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
-    "@typescript-eslint/parser": "^5.52.0",
-    "acorn": "^8.8.2",
-    "autoprefixer": "^10.4.13",
-    "brunch": "^4.0.2",
-    "copy-webpack-plugin": "^11.0.0",
-    "copycat-brunch": "^1.1.1",
+    "@fortawesome/fontawesome-free": "^6.5.2",
+    "@types/web": "^0.0.143",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "autoprefixer": "^10.4.19",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.7.3",
-    "css-minimizer-webpack-plugin": "^5.0.0",
     "eslint": "^8.34.0",
-    "eslint-webpack-plugin": "^4.0.0",
-    "file-loader": "^6.2.0",
-    "ignore-emit-webpack-plugin": "^2.0.6",
-    "jest-environment-jsdom": "^29.4.3",
-    "mini-css-extract-plugin": "^2.7.2",
-    "normalize-scss": "^7.0.1",
-    "postcss": "^8.4.31",
-    "postcss-loader": "^7.2.4",
-    "postcss-scss": "^4.0.6",
-    "postcss-url": "^10.1.3",
-    "rollup": "^2.57.0",
-    "rollup-plugin-includepaths": "^0.2.4",
-    "sass": "^1.58.3",
-    "sass-loader": "^13.2.0",
-    "source-map-support": "^0.5.21",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.6",
-    "tslib": "^2.5.0",
-    "typescript": "^4.9",
-    "webpack": "^5.76.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-rollup-loader": "^0.8.1"
+    "jest-environment-jsdom": "^29.7.0",
+    "normalize-scss": "^8.0.0",
+    "sass": "^1.75.0",
+    "typescript": "^5.4",
+    "vite": "^5.2"
   },
   "devDependencies": {
-    "@testing-library/dom": "^9.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@types/jest": "^29.4.0",
-    "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-jest-dom": "^4.0.3",
-    "jest": "^29.4.3",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@types/jest": "^29.5.12",
+    "eslint-plugin-jest": "^28.3.0",
+    "eslint-plugin-jest-dom": "^5.4.0",
+    "jest": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
-    "ts-jest": "^29.1.0"
+    "ts-jest": "^29.1.2"
   }
 }

assets/tsconfig.json

@@ -1,16 +1,24 @@
 {
   "compilerOptions": {
-    "noEmit": true,
     "baseUrl": "./js",
-    "target": "ES2018",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
     "esModuleInterop": true,
-    "moduleResolution": "Node",
     "allowJs": true,
     "skipLibCheck": true,
     "lib": [
-      "ES2018",
-      "DOM"
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
     ],
+
+    "moduleResolution": "Node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+
     "strict": true
   }
 }

assets/vite.config.ts

@@ -0,0 +1,69 @@
+import fs from 'fs';
+import path from 'path';
+import autoprefixer from 'autoprefixer';
+import { defineConfig, UserConfig, ConfigEnv } from 'vite';
+
+export default defineConfig(({ command }: ConfigEnv): UserConfig => {
+  const isDev = command !== 'build';
+
+  if (isDev) {
+    process.stdin.on('close', () => {
+      // eslint-disable-next-line no-process-exit
+      process.exit(0);
+    });
+
+    process.stdin.resume();
+  }
+
+  const themeNames =
+    fs.readdirSync(path.resolve(__dirname, 'css/themes/')).map(name => {
+      const m = name.match(/([-a-z]+).scss/);
+
+      if (m) { return m[1]; }
+      return null;
+    });
+
+  const themes = new Map();
+
+  for (const name of themeNames) {
+    themes.set(`css/${name}`, `./css/themes/${name}.scss`);
+  }
+
+  return {
+    publicDir: 'static',
+    plugins: [],
+    resolve: {
+      alias: {
+        common: path.resolve(__dirname, 'css/common/'),
+        views: path.resolve(__dirname, 'css/views/'),
+        elements: path.resolve(__dirname, 'css/elements/'),
+        themes: path.resolve(__dirname, 'css/themes/')
+      }
+    },
+    build: {
+      target: 'es2020',
+      outDir: path.resolve(__dirname, '../priv/static'),
+      emptyOutDir: false,
+      sourcemap: isDev,
+      manifest: false,
+      cssCodeSplit: true,
+      rollupOptions: {
+        input: {
+          'js/app': './js/app.js',
+          'css/application': './css/application.scss',
+          ...Object.fromEntries(themes)
+        },
+        output: {
+          entryFileNames: '[name].js',
+          chunkFileNames: '[name].js',
+          assetFileNames: '[name][extname]'
+        }
+      }
+    },
+    css: {
+      postcss:  {
+        plugins: [autoprefixer]
+      }
+    }
+  };
+});

assets/webpack.config.js

@@ -1,159 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import url from 'url';
-import TerserPlugin from 'terser-webpack-plugin';
-import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
-import CopyPlugin from 'copy-webpack-plugin';
-import MiniCssExtractPlugin from "mini-css-extract-plugin";
-import IgnoreEmitPlugin from 'ignore-emit-webpack-plugin';
-import ESLintPlugin from 'eslint-webpack-plugin';
-import autoprefixer from 'autoprefixer';
-import rollupPluginIncludepaths from 'rollup-plugin-includepaths';
-import rollupPluginMultiEntry from '@rollup/plugin-multi-entry';
-import rollupPluginTypescript from '@rollup/plugin-typescript';
-
-const isDevelopment = process.env.NODE_ENV !== 'production';
-const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
-
-const includePaths = rollupPluginIncludepaths();
-const multiEntry = rollupPluginMultiEntry();
-const typescript = rollupPluginTypescript();
-
-let plugins = [
-  new IgnoreEmitPlugin(/css\/.*(?<!css)$/),
-  new MiniCssExtractPlugin({
-    filename: '[name].css',
-    chunkFilename: '[id].css'
-  }),
-  new CopyPlugin({
-    patterns: [
-      { from: path.resolve(__dirname, 'static') },
-    ],
-  }),
-];
-
-if (isDevelopment) {
-  plugins = plugins.concat([
-    new ESLintPlugin({
-      extensions: ['js', 'ts'],
-      failOnError: true,
-      failOnWarning: isDevelopment
-    })
-  ]);
-}
-else {
-  plugins = plugins.concat([
-    new TerserPlugin({
-      parallel: true,
-    }),
-    new CssMinimizerPlugin(),
-  ]);
-}
-
-const themeNames =
-  fs.readdirSync(path.resolve(__dirname, 'css/themes')).map(name =>
-    name.match(/([-a-z]+).scss/)[1]
-  );
-
-const themes = {};
-for (const name of themeNames) {
-  themes[`css/${name}`] = `./css/themes/${name}.scss`;
-}
-
-export default {
-  mode: isDevelopment ? 'development' : 'production',
-  entry: {
-    'js/app.js': './js/app.js',
-    'css/application': './css/application.scss',
-    ...themes
-  },
-  output: {
-    filename: '[name]',
-    path: path.resolve(__dirname, '../priv/static'),
-  },
-  optimization: {
-    minimize: !isDevelopment,
-    providedExports: true,
-    usedExports: true,
-    concatenateModules: true,
-  },
-  devtool: isDevelopment ? 'inline-source-map' : undefined,
-  performance: { hints: false },
-  resolve: {
-    alias: {
-      elements: path.resolve(__dirname, 'css/elements/'),
-      themes: path.resolve(__dirname, 'css/themes/'),
-      common: path.resolve(__dirname, 'css/common/'),
-      views: path.resolve(__dirname, 'css/views/')
-    }
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(ttf|eot|svg|woff2?)$/,
-        loader: 'file-loader',
-        options: {
-          name: '[name].[ext]',
-          outputPath: './fonts',
-          publicPath: '../fonts',
-        },
-        dependency: { not: ['url'] },
-      },
-      {
-        test: /app\.js/,
-        use: [
-          {
-            loader: 'webpack-rollup-loader',
-            options: {
-              plugins: [
-                includePaths,
-                multiEntry,
-                typescript,
-              ]
-            }
-          },
-        ],
-      },
-      {
-        test: /(themes\/[a-z\-]+\.scss|application.scss)$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: isDevelopment,
-              url: {
-                filter: (url, _resourcePath) => {
-                  return !url.startsWith('/');
-                }
-              }
-            },
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              postcssOptions: {
-                sourceMaps: isDevelopment,
-                ident: 'postcss',
-                syntax: 'postcss-scss',
-                plugins: [
-                  autoprefixer(),
-                ],
-              },
-            },
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              sourceMap: isDevelopment,
-              sassOptions: {
-                quietDeps: true
-              }
-            }
-          },
-        ]
-      },
-    ],
-  },
-  plugins,
-};

config/dev.exs

@@ -8,7 +8,7 @@ config :philomena, Philomena.Repo, show_sensitive_data_on_connection_error: true
 #
 # The watchers configuration can be used to run external
 # watchers to your application. For example, we use it
-# with webpack to recompile .js and .css sources.
+# with vite to recompile .js and .css sources.
 config :philomena, PhilomenaWeb.Endpoint,
   http: [port: 4000],
   debug_errors: true,
@@ -16,11 +16,13 @@ config :philomena, PhilomenaWeb.Endpoint,
   check_origin: false,
   watchers: [
     node: [
-      "node_modules/webpack/bin/webpack.js",
+      "node_modules/vite/bin/vite.js",
+      "build",
       "--mode",
       "development",
       "--watch",
-      "--watch-options-stdin",
+      "--config",
+      "vite.config.ts",
       cd: Path.expand("../assets", __DIR__)
     ]
   ]

config/runtime.exs

@@ -134,10 +134,16 @@ if config_env() == :prod do
     url: [host: System.fetch_env!("APP_HOSTNAME"), scheme: "https", port: 443],
     secret_key_base: System.fetch_env!("SECRET_KEY_BASE"),
     server: not is_nil(System.get_env("START_ENDPOINT"))
+
+  # Do not relax CSP in production
+  config :philomena, csp_relaxed: false
 else
   # Don't send email in development
   config :philomena, Philomena.Mailer, adapter: Bamboo.LocalAdapter
 
   # Use this to debug slime templates
   # config :slime, :keep_lines, true
+
+  # Relax CSP rules in development and test servers
+  config :philomena, csp_relaxed: true
 end

lib/philomena_web/plugs/content_security_policy_plug.ex

@@ -41,7 +41,13 @@ defmodule PhilomenaWeb.ContentSecurityPolicyPlug do
         |> Enum.map(&cspify_element/1)
         |> Enum.join("; ")
 
+      if conn.status == 500 and allow_relaxed_csp() do
+        # Allow Plug.Debugger to function in this case
+        delete_resp_header(conn, "content-security-policy")
+      else
+        # Enforce CSP otherwise
         put_resp_header(conn, "content-security-policy", csp_value)
+      end
     end)
   end
 
@@ -69,4 +75,6 @@ defmodule PhilomenaWeb.ContentSecurityPolicyPlug do
 
     Enum.join([key | value], " ")
   end
+
+  defp allow_relaxed_csp, do: Application.get_env(:philomena, :csp_relaxed, false)
 end

lib/philomena_web/templates/layout/app.html.slime

@@ -20,7 +20,7 @@ html lang="en"
     meta name="theme-color" content="#618fc3"
     meta name="format-detection" content="telephone=no"
     = csrf_meta_tag()
-    script type="text/javascript" src=Routes.static_path(@conn, "/js/app.js")
+    script type="module" src=Routes.static_path(@conn, "/js/app.js") async="async"
     = render PhilomenaWeb.LayoutView, "_opengraph.html", assigns
   body data-theme=theme_name(@current_user)
     = render PhilomenaWeb.LayoutView, "_burger.html", assigns