From 4b68bb0d997e38b39fbc1aab7ea16f0adc2e9dec Mon Sep 17 00:00:00 2001
From: "Luna D." <luna@nighty.cloud>
Date: Tue, 30 Apr 2024 19:01:28 +0200
Subject: [PATCH] the best solution to a problem is usually the easiest one
---
assets/js/app.js | 10 ++++++++--
config/dev.exs | 10 ++++++++++
.../plugs/content_security_policy_plug.ex | 14 +++++++++++---
lib/philomena_web/templates/layout/app.html.slime | 6 +++---
4 files changed, 32 insertions(+), 8 deletions(-)
diff --git a/assets/js/app.js b/assets/js/app.js
index 018200ff..4f23d655 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -9,5 +9,11 @@
import './ujs';
import './when-ready';
-// Fallback on the dark theme for now
-import '../css/themes/dark.scss';
+// When developing CSS, include the relevant CSS you're working on here
+// in order to enable HMR (live reload) on it.
+// Would typically be either the theme file, or any additional file
+// you later intend to put in the <link> tag.
+
+// import '../css/themes/default.scss';
+// import '../css/themes/dark.scss';
+// import '../css/themes/red.scss';
diff --git a/config/dev.exs b/config/dev.exs
index 9f613906..781d0ee2 100644
--- a/config/dev.exs
+++ b/config/dev.exs
@@ -24,6 +24,16 @@ config :philomena, PhilomenaWeb.Endpoint,
"--config",
"vite.config.ts",
cd: Path.expand("../assets", __DIR__)
+ ],
+ node: [
+ "node_modules/vite/bin/vite.js",
+ "build",
+ "--mode",
+ "development",
+ "--watch",
+ "--config",
+ "vite.config.ts",
+ cd: Path.expand("../assets", __DIR__)
]
]
diff --git a/lib/philomena_web/plugs/content_security_policy_plug.ex b/lib/philomena_web/plugs/content_security_policy_plug.ex
index d85b1046..d958541e 100644
--- a/lib/philomena_web/plugs/content_security_policy_plug.ex
+++ b/lib/philomena_web/plugs/content_security_policy_plug.ex
@@ -24,9 +24,9 @@ defmodule PhilomenaWeb.ContentSecurityPolicyPlug do
csp_config = [
{:default_src, ["'self'"]},
- {:script_src, ["'self' localhost:5173" | script_src]},
- {:connect_src, ["'self' ws://localhost:5173 localhost:5173"]},
- {:style_src, ["'self' 'unsafe-inline'" | style_src]},
+ {:script_src, [default_script_src() | script_src]},
+ {:connect_src, [default_connect_src()]},
+ {:style_src, [default_style_src() | style_src]},
{:object_src, ["'none'"]},
{:frame_ancestors, ["'none'"]},
{:frame_src, frame_src || ["'none'"]},
@@ -64,6 +64,14 @@ defmodule PhilomenaWeb.ContentSecurityPolicyPlug do
defp cdn_uri, do: Application.get_env(:philomena, :cdn_host) |> to_uri()
defp camo_uri, do: Application.get_env(:philomena, :camo_host) |> to_uri()
+ defp vite_reload?, do: Application.get_env(:philomena, :vite_reload)
+
+ defp default_script_src, do: if(vite_reload?(), do: "'self' localhost:5173", else: "'self'")
+
+ defp default_connect_src,
+ do: if(vite_reload?(), do: "'self' localhost:5173 ws://localhost:5173", else: "'self'")
+
+ defp default_style_src, do: if(vite_reload?(), do: "'self' 'unsafe-inline'", else: "'self'")
defp to_uri(host) when host in [nil, ""], do: ""
defp to_uri(host), do: URI.to_string(%URI{scheme: "https", host: host})
diff --git a/lib/philomena_web/templates/layout/app.html.slime b/lib/philomena_web/templates/layout/app.html.slime
index 58ebd057..16a43d7a 100644
--- a/lib/philomena_web/templates/layout/app.html.slime
+++ b/lib/philomena_web/templates/layout/app.html.slime
@@ -10,6 +10,9 @@ html lang="en"
' - Derpibooru
- else
' Derpibooru
+ link rel="stylesheet" href=stylesheet_path(@conn, @current_user)
+ = if is_nil(@current_user) do
+ link rel="stylesheet" href=dark_stylesheet_path(@conn) media="(prefers-color-scheme: dark)"
link rel="icon" href="/favicon.ico" type="image/x-icon"
link rel="icon" href="/favicon.svg" type="image/svg+xml"
meta name="generator" content="philomena"
@@ -21,9 +24,6 @@ html lang="en"
script type="module" src="http://localhost:5173/@vite/client"
script type="module" src="http://localhost:5173/js/app.js"
- else
- link rel="stylesheet" href=stylesheet_path(@conn, @current_user)
- = if is_nil(@current_user) do
- link rel="stylesheet" href=dark_stylesheet_path(@conn) media="(prefers-color-scheme: dark)"
script type="text/javascript" src=Routes.static_path(@conn, "/js/app.js") async="async"
= render PhilomenaWeb.LayoutView, "_opengraph.html", assigns
body data-theme=theme_name(@current_user) data-vite-reload=to_string(vite_reload?())