[Enhancement] Added support for subdirectory-style reverse proxies (#276)

* Updated routes and other fun stuff to support reverse proxies

* Updated README

* Linting

README.md

@@ -153,6 +153,7 @@ If you change this setting and it works well for you, please leave a comment on
 | EXPOSE_FEED_ENDPOINTS | No        |                           | See [RSS feed docs](https://github.com/kieraneglin/pinchflat/wiki/Podcast-RSS-Feeds)           |
 | JOURNAL_MODE          | No        | `wal`                     | Set to `delete` if your config directory is stored on a network share (not recommended)        |
 | TZ_DATA_DIR           | No        | `/etc/elixir_tzdata_data` | The container path where the timezone database is stored                                       |
+| BASE_ROUTE_PATH       | No        | `/`                       | The base path for route generation. Useful when running behind certain reverse proxies         |
 
 ## EFF donations
 

assets/css/satoshi.css

@@ -22,8 +22,8 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src: url('/fonts/satoshi/Satoshi-Light.woff2'), url('/fonts/satoshi/Satoshi-Light.woff'),
-    url('/fonts/satoshi/Satoshi-Light.ttf');
+  src: url('../fonts/satoshi/Satoshi-Light.woff2'), url('../fonts/satoshi/Satoshi-Light.woff'),
+    url('../fonts/satoshi/Satoshi-Light.ttf');
   font-weight: 300;
   font-display: swap;
   font-style: normal;
@@ -31,8 +31,9 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src: url('/fonts/satoshi/Satoshi-LightItalic.woff2'),
-    url('/fonts/satoshi/Satoshi-LightItalic.woff'), url('/fonts/satoshi/Satoshi-LightItalic.ttf');
+  src: url('../fonts/satoshi/Satoshi-LightItalic.woff2'),
+    url('../fonts/satoshi/Satoshi-LightItalic.woff'),
+    url('../fonts/satoshi/Satoshi-LightItalic.ttf');
   font-weight: 300;
   font-display: swap;
   font-style: italic;
@@ -40,8 +41,8 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src: url('/fonts/satoshi/Satoshi-Regular.woff2'), url('/fonts/satoshi/Satoshi-Regular.woff'),
-    url('/fonts/satoshi/Satoshi-Regular.ttf');
+  src: url('../fonts/satoshi/Satoshi-Regular.woff2'), url('../fonts/satoshi/Satoshi-Regular.woff'),
+    url('../fonts/satoshi/Satoshi-Regular.ttf');
   font-weight: 400;
   font-display: swap;
   font-style: normal;
@@ -49,8 +50,8 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src: url('/fonts/satoshi/Satoshi-Italic.woff2'), url('/fonts/satoshi/Satoshi-Italic.woff'),
-    url('/fonts/satoshi/Satoshi-Italic.ttf');
+  src: url('../fonts/satoshi/Satoshi-Italic.woff2'), url('../fonts/satoshi/Satoshi-Italic.woff'),
+    url('../fonts/satoshi/Satoshi-Italic.ttf');
   font-weight: 400;
   font-display: swap;
   font-style: italic;
@@ -58,8 +59,8 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src: url('/fonts/satoshi/Satoshi-Medium.woff2'), url('/fonts/satoshi/Satoshi-Medium.woff'),
-    url('/fonts/satoshi/Satoshi-Medium.ttf');
+  src: url('../fonts/satoshi/Satoshi-Medium.woff2'), url('../fonts/satoshi/Satoshi-Medium.woff'),
+    url('../fonts/satoshi/Satoshi-Medium.ttf');
   font-weight: 500;
   font-display: swap;
   font-style: normal;
@@ -67,8 +68,9 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src: url('/fonts/satoshi/Satoshi-MediumItalic.woff2'),
-    url('/fonts/satoshi/Satoshi-MediumItalic.woff'), url('/fonts/satoshi/Satoshi-MediumItalic.ttf');
+  src: url('../fonts/satoshi/Satoshi-MediumItalic.woff2'),
+    url('../fonts/satoshi/Satoshi-MediumItalic.woff'),
+    url('../fonts/satoshi/Satoshi-MediumItalic.ttf');
   font-weight: 500;
   font-display: swap;
   font-style: italic;
@@ -76,8 +78,8 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src: url('/fonts/satoshi/Satoshi-Bold.woff2'), url('/fonts/satoshi/Satoshi-Bold.woff'),
-    url('/fonts/satoshi/Satoshi-Bold.ttf');
+  src: url('../fonts/satoshi/Satoshi-Bold.woff2'), url('../fonts/satoshi/Satoshi-Bold.woff'),
+    url('../fonts/satoshi/Satoshi-Bold.ttf');
   font-weight: 700;
   font-display: swap;
   font-style: normal;
@@ -85,8 +87,8 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src: url('/fonts/satoshi/Satoshi-BoldItalic.woff2'), url('/fonts/satoshi/Satoshi-BoldItalic.woff'),
-    url('/fonts/satoshi/Satoshi-BoldItalic.ttf');
+  src: url('../fonts/satoshi/Satoshi-BoldItalic.woff2'),
+    url('../fonts/satoshi/Satoshi-BoldItalic.woff'), url('../fonts/satoshi/Satoshi-BoldItalic.ttf');
   font-weight: 700;
   font-display: swap;
   font-style: italic;
@@ -94,8 +96,9 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src: url('/fonts/satoshi/Satoshi-BlackItalic.woff2'),
-    url('/fonts/satoshi/Satoshi-BlackItalic.woff'), url('/fonts/satoshi/Satoshi-BlackItalic.ttf');
+  src: url('../fonts/satoshi/Satoshi-BlackItalic.woff2'),
+    url('../fonts/satoshi/Satoshi-BlackItalic.woff'),
+    url('../fonts/satoshi/Satoshi-BlackItalic.ttf');
   font-weight: 900;
   font-display: swap;
   font-style: italic;

assets/js/app.js

@@ -29,7 +29,7 @@ window.Alpine = Alpine
 Alpine.start()
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
-let liveSocket = new LiveSocket('/live', Socket, {
+let liveSocket = new LiveSocket(document.body.dataset.socketPath, Socket, {
   params: { _csrf_token: csrfToken },
   dom: {
     onBeforeElUpdated(from, to) {

config/config.exs

@@ -26,7 +26,8 @@ config :pinchflat,
   basic_auth_password: "",
   expose_feed_endpoints: false,
   file_watcher_poll_interval: 1000,
-  timezone: "UTC"
+  timezone: "UTC",
+  base_route_path: "/"
 
 config :pinchflat, Pinchflat.Repo,
   journal_mode: :wal,

config/runtime.exs

@@ -46,12 +46,12 @@ if config_env() == :prod do
   log_path = System.get_env("LOG_PATH", Path.join([config_path, "logs", "pinchflat.log"]))
   metadata_path = System.get_env("METADATA_PATH", Path.join([config_path, "metadata"]))
   extras_path = System.get_env("EXTRAS_PATH", Path.join([config_path, "extras"]))
-
   # For running PF as a podcast host on self-hosted environments
   expose_feed_endpoints = String.length(System.get_env("EXPOSE_FEED_ENDPOINTS", "")) > 0
-
   # For testing alternate journal modes (see issue #137)
   journal_mode = String.to_existing_atom(System.get_env("JOURNAL_MODE", "wal"))
+  # For running PF in a subdirectory via a reverse proxy
+  base_route_path = System.get_env("BASE_ROUTE_PATH", "/")
 
   config :logger, level: String.to_existing_atom(System.get_env("LOG_LEVEL", "debug"))
 
@@ -65,7 +65,8 @@ if config_env() == :prod do
     dns_cluster_query: System.get_env("DNS_CLUSTER_QUERY"),
     expose_feed_endpoints: expose_feed_endpoints,
     timezone: System.get_env("TIMEZONE") || System.get_env("TZ") || "UTC",
-    log_path: log_path
+    log_path: log_path,
+    base_route_path: base_route_path
 
   config :tzdata, :data_dir, System.get_env("TZ_DATA_DIR", "/etc/elixir_tzdata_data")
 
@@ -108,6 +109,7 @@ if config_env() == :prod do
       ip: {0, 0, 0, 0},
       port: String.to_integer(System.get_env("PORT") || "4000")
     ],
+    url: [path: base_route_path],
     secret_key_base: secret_key_base
 
   config :pinchflat, :logger, [

lib/pinchflat_web/components/layouts/root.html.heex

@@ -19,6 +19,7 @@
       onboarding: #{Settings.get!(:onboarding)}
     }"}
     class="dark text-bodydark bg-boxdark-2"
+    data-socket-path={Path.join(Application.get_env(:pinchflat, :base_route_path), "/live")}
   >
     <%= @inner_content %>