cache busting: Import version, changelog (#1201)

## Description:

Import version, changelog statically using webpack for cache busting
purposes.

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

---------

Co-authored-by: Scott Anderson <662325+scottanderson@users.noreply.github.com>

resources/lang/en.json

@@ -24,6 +24,8 @@
     "wiki": "Wiki"
   },
   "news": {
+    "full_changelog": "See the complete change log",
+    "github_link": "on GitHub",
     "title": "Version 23 released!"
   },
   "help_modal": {

src/client/Main.ts

@@ -1,4 +1,5 @@
 import favicon from "../../resources/images/Favicon.svg";
+import version from "../../resources/version.txt";
 import { GameRecord, GameStartInfo, ID } from "../core/Schemas";
 import { getServerConfigFromClient } from "../core/configuration/ConfigLoader";
 import { GameType } from "../core/game/Game";
@@ -64,9 +65,7 @@ class Client {
     if (!gameVersion) {
       console.warn("Game version element not found");
     }
-    fetch("/version.txt")
-      .then((response) => (response.ok ? response.text() : "Failed to load"))
-      .then((version) => (gameVersion.innerText = version));
+    gameVersion.innerText = version;
 
     const newsModal = document.querySelector("news-modal") as NewsModal;
     if (!newsModal) {
@@ -79,9 +78,6 @@ class Client {
     } else {
       console.log("News button element found");
     }
-    fetch("/changelog.md")
-      .then((response) => (response.ok ? response.text() : "Failed to load"))
-      .then((changelog) => (newsModal.markdown = changelog));
 
     // Comment out to show news button.
     // newsButton.hidden = true;

src/client/NewsModal.ts

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { resolveMarkdown } from "lit-markdown";
 import { customElement, property, query } from "lit/decorators.js";
+import changelog from "../../resources/changelog.md";
 import { translateText } from "../client/Utils";
 import "./components/baseComponents/Button";
 import "./components/baseComponents/Modal";
@@ -14,6 +15,8 @@ export class NewsModal extends LitElement {
 
   @property({ type: String }) markdown = "Loading...";
 
+  private initialized: boolean = false;
+
   static styles = css`
     :host {
       display: block;
@@ -63,6 +66,15 @@ export class NewsModal extends LitElement {
           </div>
         </div>
 
+        <div>
+          ${translateText("news.full_changelog")}
+          <a
+            href="https://github.com/openfrontio/OpenFrontIO/releases"
+            target="_blank"
+            >${translateText("news.github_link")}</a
+          >.
+        </div>
+
         <o-button
           title=${translateText("common.close")}
           @click=${this.close}
@@ -73,6 +85,12 @@ export class NewsModal extends LitElement {
   }
 
   public open() {
+    if (!this.initialized) {
+      this.initialized = true;
+      fetch(changelog)
+        .then((response) => (response.ok ? response.text() : "Failed to load"))
+        .then((markdown) => (this.markdown = markdown));
+    }
     this.requestUpdate();
     this.modalEl?.open();
   }

src/global.d.ts

@@ -24,6 +24,10 @@ declare module "*.bin" {
   const value: string;
   export default value;
 }
+declare module "*.md" {
+  const value: string;
+  export default value;
+}
 declare module "*.txt" {
   const value: string;
   export default value;

webpack.config.js

@@ -34,6 +34,10 @@ export default async (env, argv) => {
         },
         {
           test: /\.txt$/,
+          type: "asset/source",
+        },
+        {
+          test: /\.md$/,
           type: "asset/resource", // Changed from raw-loader
           generator: {
             filename: "text/[name].[contenthash][ext]", // Added content hash