implement getStaticDir util

src/server/index.tsx

@@ -1,4 +1,5 @@
 import { setupDateFns } from "@utils/app";
+import { getStaticDir } from "@utils/env";
 import express from "express";
 import path from "path";
 import process from "process";
@@ -19,10 +20,7 @@ const [hostname, port] = process.env["LEMMY_UI_HOST"]
 
 server.use(express.json());
 server.use(express.urlencoded({ extended: false }));
-server.use(
+server.use(getStaticDir(), express.static(path.resolve("./dist")));
-  `/static/${process.env.COMMIT_HASH}`,
-  express.static(path.resolve("./dist"))
-);
 server.use(setCacheControl);
 
 if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) {

src/server/utils/create-ssr-html.tsx

@@ -1,3 +1,4 @@
+import { getStaticDir } from "@utils/env";
 import { Helmet } from "inferno-helmet";
 import { renderToString } from "inferno-server";
 import serialize from "serialize-javascript";
@@ -87,9 +88,7 @@ export async function createSsrHtml(
     <link rel="apple-touch-startup-image" href=${appleTouchIcon} />
   
     <!-- Styles -->
-    <link rel="stylesheet" type="text/css" href="/static/${
+    <link rel="stylesheet" type="text/css" href="${getStaticDir()}/styles/styles.css" />
-      process.env.COMMIT_HASH
-    }/styles/styles.css" />
   
     <!-- Current theme and more -->
     ${helmet.link.toString() || fallbackTheme}
@@ -104,9 +103,7 @@ export async function createSsrHtml(
       </noscript>
   
       <div id='root'>${root}</div>
-      <script defer src='/static/${
+      <script defer src='${getStaticDir()}/js/client.js'></script>
-        process.env.COMMIT_HASH
-      }/js/client.js'></script>
     </body>
   </html>
   `;

src/shared/components/common/icon.tsx

@@ -1,3 +1,4 @@
+import { getStaticDir } from "@utils/env";
 import classNames from "classnames";
 import { Component } from "inferno";
 import { I18NextService } from "../../services";
@@ -23,7 +24,9 @@ export class Icon extends Component<IconProps, any> {
         })}
       >
         <use
-          xlinkHref={`/static/${process.env.COMMIT_HASH}/assets/symbols.svg#icon-${this.props.icon}`}
+          xlinkHref={`${getStaticDir()}/assets/symbols.svg#icon-${
+            this.props.icon
+          }`}
         ></use>
         <div className="visually-hidden">
           <title>{this.props.icon}</title>

src/shared/components/person/person-listing.tsx

@@ -1,4 +1,5 @@
 import { showAvatars } from "@utils/app";
+import { getStaticDir } from "@utils/env";
 import { hostname, isCakeDay } from "@utils/helpers";
 import classNames from "classnames";
 import { Component } from "inferno";
@@ -88,10 +89,7 @@ export class PersonListing extends Component<PersonListingProps, any> {
           !this.props.person.banned &&
           showAvatars() && (
             <PictrsImage
-              src={
+              src={avatar ?? `${getStaticDir()}/assets/icons/icon-96x96.png`}
-                avatar ??
-                `/static/${process.env.COMMIT_HASH}/assets/icons/icon-96x96.png`
-              }
               icon
             />
           )}

src/shared/config.ts

@@ -1,5 +1,7 @@
-export const favIconUrl = `/static/${process.env.COMMIT_HASH}/assets/icons/favicon.svg`;
+import { getStaticDir } from "@utils/env";
-export const favIconPngUrl = `/static/${process.env.COMMIT_HASH}/assets/icons/apple-touch-icon.png`;
+
+export const favIconUrl = `${getStaticDir()}/assets/icons/favicon.svg`;
+export const favIconPngUrl = `${getStaticDir()}/assets/icons/apple-touch-icon.png`;
 
 export const repoUrl = "https://github.com/LemmyNet";
 export const joinLemmyUrl = "https://join-lemmy.org";

src/shared/utils/env/get-static-dir.ts

@@ -0,0 +1,5 @@
+// Returns path to static directory, intended
+// for cache-busting based on latest commit hash.
+export default function getStaticDir() {
+  return `/static/${process.env.COMMIT_HASH}`;
+}

src/shared/utils/env/index.ts

@@ -6,6 +6,7 @@ import getHttpBaseExternal from "./get-http-base-external";
 import getHttpBaseInternal from "./get-http-base-internal";
 import getInternalHost from "./get-internal-host";
 import getSecure from "./get-secure";
+import getStaticDir from "./get-static-dir";
 import httpExternalPath from "./http-external-path";
 import isHttps from "./is-https";
 
@@ -18,6 +19,7 @@ export {
   getHttpBaseInternal,
   getInternalHost,
   getSecure,
+  getStaticDir,
   httpExternalPath,
   isHttps,
 };