Use relative paths on web

package-lock.json

@@ -27,6 +27,7 @@
         "domino": "^2.1.6",
         "enquirer": "^2.4.1",
         "entities": "^5.0.0",
+        "get-relative-path": "^1.0.2",
         "get-stream": "^6.0.1",
         "h3": "^1.12.0",
         "heatsync": "^2.5.5",
@@ -1535,9 +1536,9 @@
       }
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
+      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
@@ -1843,6 +1844,11 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
+    "node_modules/get-relative-path": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-relative-path/-/get-relative-path-1.0.2.tgz",
+      "integrity": "sha512-dGkopYfmB4sXMTcZslq5SojEYakpdCSj/SVSHLhv7D6RBHzvDtd/3Q8lTEOAhVKxPPeAHu/YYkENbbz3PaH+8w=="
+    },
     "node_modules/get-source": {
       "version": "2.0.12",
       "resolved": "https://registry.npmjs.org/get-source/-/get-source-2.0.12.tgz",

package.json

@@ -36,6 +36,7 @@
     "domino": "^2.1.6",
     "enquirer": "^2.4.1",
     "entities": "^5.0.0",
+    "get-relative-path": "^1.0.2",
     "get-stream": "^6.0.1",
     "h3": "^1.12.0",
     "heatsync": "^2.5.5",

src/web/pug-sync.js

@@ -3,11 +3,11 @@
 const assert = require("assert/strict")
 const fs = require("fs")
 const {join} = require("path")
+const getRelativePath = require("get-relative-path")
 const h3 = require("h3")
 const {defineEventHandler, defaultContentType, setResponseStatus, useSession, getQuery} = h3
 const {compileFile} = require("@cloudrac3r/pug")
 
-const {as} = require("../passthrough")
 const {reg} = require("../matrix/read-registration")
 
 // Pug
@@ -35,11 +35,12 @@ function render(event, filename, locals) {
 			pugCache.set(path, async (event, locals) => {
 				defaultContentType(event, "text/html; charset=utf-8")
 				const session = await useSession(event, {password: reg.as_token})
+				const rel = x => getRelativePath(event.path, x)
 				return template(Object.assign({},
 					getQuery(event), // Query parameters can be easily accessed on the top level but don't allow them to overwrite anything
 					globals, // Globals
 					locals, // Explicit locals overwrite globals in case we need to DI something
-					{session} // Session is always session because it has to be trusted
+					{session, event, rel} // These are assigned last so they overwrite everything else. It would be catastrophically bad if they can't be trusted.
 				))
 			})
 		/* c8 ignore start */

src/web/pug/guild.pug

@@ -73,7 +73,7 @@ block body
         let size = 105
         let p = new URLSearchParams()
         p.set("data", `https://bridge.cadence.moe/invite?nonce=${nonce}`)
-      img(width=size height=size src=`/qr?${p}`)
+      img(width=size height=size src=rel(`/qr?${p}`))
 
   h2.mt48.fs-headline1 Moderation
 

src/web/pug/guild_access_denied.pug

@@ -5,7 +5,7 @@ block body
     .s-empty-state.wmx4.p48
       != icons.Spots.SpotEmptyXL
       p You need to log in to manage your servers.
-      a.s-btn.s-btn__icon.s-btn__filled(href="/oauth")
+      a.s-btn.s-btn__icon.s-btn__filled(href=rel("/oauth"))
         != icons.Icons.IconDiscord
         = ` Log in with Discord`
 
@@ -13,10 +13,10 @@ block body
     .s-empty-state.wmx4.p48
       != icons.Spots.SpotEmptyXL
       p Select a server from the top right corner to continue.
-      p If the server you're looking for isn't there, try #[a(href="/oauth?action=add") logging in again.]
+      p If the server you're looking for isn't there, try #[a(href=rel("/oauth?action=add")) logging in again.]
 
   else if !discord.guilds.has(guild_id) || !session.data.managedGuilds.includes(guild_id)
     .s-empty-state.wmx4.p48
       != icons.Spots.SpotAlertXL
       p Either the selected server doesn't exist, or you don't have the Manage Server permission on Discord.
-      p If you've checked your permissions, try #[a(href="/oauth") logging in again.]
+      p If you've checked your permissions, try #[a(href=rel("/oauth")) logging in again.]

src/web/pug/home.pug

@@ -10,7 +10,7 @@ block body
       p Add the bot to your Discord server.
       p It will automatically create new Matrix rooms for you.
       .fl-grow1
-      a.s-btn.s-btn__filled.s-btn__icon(href="/oauth?action=add")
+      a.s-btn.s-btn__filled.s-btn__icon(href=rel("/oauth?action=add"))
         != icons.Icons.IconPlus
         = ` Add to server`
     .s-card.bs-md.d-flex.fd-column
@@ -19,6 +19,6 @@ block body
       p Choose this option if you already have a community set up on Matrix.
       p Or, choose this if you're migrating from a different bridge.
       .fl-grow1
-      a.s-btn.s-btn__outlined.s-btn__icon(href="/oauth?action=add-self-service")
+      a.s-btn.s-btn__outlined.s-btn__icon(href=rel("/oauth?action=add-self-service"))
         != icons.Icons.IconUnorderedList
         = ` Set up self-service`

src/web/pug/includes/template.pug

@@ -14,7 +14,7 @@ html(lang="en")
   head
     title Out Of Your Element
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    link(rel="stylesheet" type="text/css" href="/static/stacks.min.css")
+    link(rel="stylesheet" type="text/css" href=rel("/static/stacks.min.css"))
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 80%22><text y=%22.83em%22 font-size=%2283%22>💬</text></svg>">
     meta(name="htmx-config" content='{"indicatorClass":"is-loading"}')
     style.
@@ -34,13 +34,13 @@ html(lang="en")
     header.s-topbar
       .s-topbar--skip-link(href="#content") Skip to main content
       .s-topbar--container.wmx9
-        a.s-topbar--logo(href="/")
+        a.s-topbar--logo(href=rel("/"))
-          img.s-avatar.s-avatar__32(src="/icon.png")
+          img.s-avatar.s-avatar__32(src=rel("/icon.png"))
         nav.s-topbar--navigation
           ul.s-topbar--content
             li.ps-relative
               if !session.data.managedGuilds || session.data.managedGuilds.length === 0
-                a.s-btn.s-btn__icon.as-center(href="/oauth")
+                a.s-btn.s-btn__icon.as-center(href=rel("/oauth"))
                   != icons.Icons.IconDiscord
                   = ` Log in`
               else if guild_id && session.data.managedGuilds.includes(guild_id) && discord.guilds.has(guild_id)
@@ -55,7 +55,7 @@ html(lang="en")
                   ul.s-menu(role="menu")
                     each guild in (session.data.managedGuilds || []).map(id => discord.guilds.get(id)).filter(g => g)
                       li(role="menuitem")
-                        a.s-topbar--item.s-user-card.d-flex.p4(href=`/guild?guild_id=${guild.id}`)
+                        a.s-topbar--item.s-user-card.d-flex.p4(href=rel(`/guild?guild_id=${guild.id}`))
                           +guild(guild)
     .mx-auto.w100.wmx9.py24.px8.fs-body1#content
       block body
@@ -68,4 +68,4 @@ html(lang="en")
           document.styleSheets[0].insertRule(t)
         })
       })
-    script(src="/static/htmx.min.js")
+    script(src=rel("/static/htmx.min.js"))