Set page title

Kale-Ko · Jun 30, 2024 · f947694 · f947694
1 parent 781d435
commit f947694
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -45,7 +45,7 @@
         <div id="settings">
             <select id="settings-language" title="Language"></select>
 
-            <button id="settings-theme" title="Theme">
+            <button type="button" id="settings-theme" title="Theme">
                 <img class="lightmode hidden" src="/assets/lightmode.webp" width="24" height="24" alt="Lightmode">
                 <img class="darkmode" src="/assets/darkmode.webp" width="24" height="24" alt="Darkmode">
             </button>

diff --git a/pages/en/404-not-found.md b/pages/en/404-not-found.md
@@ -1,5 +1,5 @@
 # Emotecraft Wiki
 
-## 404 Not Found
+## Not Found
 
 The page you were looking for could not be found. (Typo?)
diff --git a/pages/en/404-untranslated-language.md b/pages/en/404-untranslated-language.md
@@ -1,5 +1,5 @@
 # Emotecraft Wiki
 
-## 404 Untranslated Language
+## Untranslated Language
 
 The language you were trying to use has not been added yet.
diff --git a/pages/en/404-untranslated-page.md b/pages/en/404-untranslated-page.md
@@ -1,5 +1,5 @@
 # Emotecraft Wiki
 
-## 404 Untranslated Page
+## Untranslated Page
 
 The page you were trying to access has not been translated into that language yet.
diff --git a/pages/en/a-helpful-feature.md b/pages/en/a-helpful-feature.md
@@ -5,5 +5,5 @@
 If you are trying to quickly create and test emotes it can be a pain to have to restart Minecraft every time you want to test it.\
 So instead if you place the emote file at `.minecraft/emote.json` and restart your game a special feature will be enabled in the mod.
 
-If you press the O key (Or whatever, its a configurable keybind) it will load the emote.json file and then attempt to play the emote so you don't have to restart the gane each time.\
+If you press the O key (Or whatever, its a configurable keybind) it will load the emote.json file and then attempt to play the emote so you don't have to restart the game each time.\
 This will also provide additional feedback in the game log if something goes wrong.
diff --git a/pages/version.json b/pages/version.json
@@ -12,9 +12,6 @@
         "/pages/{language}/home.md",
         "/pages/{language}/about.md",
         "/pages/{language}/faq.md",
-        "/pages/{language}/404-not-found.md",
-        "/pages/{language}/404-untranslated-page.md",
-        "/pages/en/404-untranslated-language.md",
         "/pages/{language}/downloads.md",
         "/pages/{language}/install-client.md",
         "/pages/{language}/install-server.md",
@@ -27,6 +24,9 @@
         "/pages/{language}/creating-emotes-blockbench.md",
         "/pages/{language}/creating-music.md",
         "/pages/{language}/a-helpful-feature.md",
-        "/pages/{language}/sharing-emotes.md"
+        "/pages/{language}/sharing-emotes.md",
+        "/pages/{language}/404-not-found.md",
+        "/pages/{language}/404-untranslated-page.md",
+        "/pages/en/404-untranslated-language.md"
     ]
 }
diff --git a/scripts/main.js b/scripts/main.js
@@ -90,6 +90,7 @@ async function fetchJsonCached(url, options) {
             element.classList.remove("highlight");
         });
     }
+    let originalTitle = document.title;
     let currentUrl = new URL(window.location.href);
     async function loadPage() {
         console.group("Loading page...");
@@ -187,19 +188,28 @@ async function fetchJsonCached(url, options) {
                 }
             }
         }
-        async function displayPage(data) {
-            await displayMarkdown(document.querySelector("#main"), data);
-            await displayTableOfContents(generateTableOfContents(data));
-        }
-        async function displaySidebar(data) {
-            await displayMarkdown(document.querySelector("#sidebar"), data);
-        }
-        function generateTableOfContents(data) {
+        function getHeadings(data) {
             let markedInstance = new marked.Marked();
             markedInstance.use({ gfm: true });
             markedInstance.use(markedGfmHeadingId.gfmHeadingId({ prefix: "" }));
             markedInstance.parse(data);
-            let tokens = markedGfmHeadingId.getHeadingList();
+            return markedGfmHeadingId.getHeadingList();
+        }
+        function generateTitle(data) {
+            let tokens = getHeadings(data);
+            for (let token of tokens) {
+                if (token.level === 1 && token.text !== originalTitle) {
+                    break;
+                }
+                if (token.level !== 2) {
+                    continue;
+                }
+                return token.text;
+            }
+            return "Unknown";
+        }
+        function generateTableOfContents(data) {
+            let tokens = getHeadings(data);
             let output = "";
             for (let token of tokens) {
                 if (token.level <= 1) {
@@ -209,6 +219,14 @@ async function fetchJsonCached(url, options) {
             }
             return output;
         }
+        async function displayPage(data) {
+            await displayMarkdown(document.querySelector("#main"), data);
+            await displayTableOfContents(generateTableOfContents(data));
+            document.title = originalTitle + " - " + generateTitle(data);
+        }
+        async function displaySidebar(data) {
+            await displayMarkdown(document.querySelector("#sidebar"), data);
+        }
         async function displayTableOfContents(data) {
             await displayMarkdown(document.querySelector("#table-of-contents"), data);
         }

diff --git a/scripts/main.ts b/scripts/main.ts
@@ -126,6 +126,7 @@ interface VersionInfo {
         });
     }
 
+    let originalTitle: string = document.title;
     let currentUrl: URL = new URL(window.location.href);
 
     async function loadPage() {
@@ -247,23 +248,34 @@ interface VersionInfo {
             }
         }
 
-        async function displayPage(data: string): Promise<void> {
-            await displayMarkdown(document.querySelector("#main") as HTMLElement, data);
+        function getHeadings(data: string): any[] {
+            let markedInstance = new marked.Marked();
+            markedInstance.use({ gfm: true });
+            markedInstance.use(markedGfmHeadingId.gfmHeadingId({ prefix: "" }));
+            markedInstance.parse(data);
 
-            await displayTableOfContents(generateTableOfContents(data));
+            return markedGfmHeadingId.getHeadingList();
         }
 
-        async function displaySidebar(data: string): Promise<void> {
-            await displayMarkdown(document.querySelector("#sidebar") as HTMLElement, data);
+        function generateTitle(data: string): string {
+            let tokens: any[] = getHeadings(data);
+
+            for (let token of tokens) {
+                if (token.level === 1 && token.text !== originalTitle) {
+                    break;
+                }
+                if (token.level !== 2) {
+                    continue;
+                }
+
+                return token.text;
+            }
+
+            return "Unknown";
         }
 
         function generateTableOfContents(data: string): string {
-            let markedInstance = new marked.Marked();
-            markedInstance.use({ gfm: true });
-            markedInstance.use(markedGfmHeadingId.gfmHeadingId({ prefix: "" }));
-            markedInstance.parse(data);
-
-            let tokens: any[] = markedGfmHeadingId.getHeadingList();
+            let tokens: any[] = getHeadings(data);
 
             let output: string = "";
 
@@ -278,6 +290,18 @@ interface VersionInfo {
             return output;
         }
 
+        async function displayPage(data: string): Promise<void> {
+            await displayMarkdown(document.querySelector("#main") as HTMLElement, data);
+
+            await displayTableOfContents(generateTableOfContents(data));
+
+            document.title = originalTitle + " - " + generateTitle(data);
+        }
+
+        async function displaySidebar(data: string): Promise<void> {
+            await displayMarkdown(document.querySelector("#sidebar") as HTMLElement, data);
+        }
+
         async function displayTableOfContents(data: string): Promise<void> {
             await displayMarkdown(document.querySelector("#table-of-contents") as HTMLElement, data);
         }

diff --git a/styles/main.css b/styles/main.css
@@ -3,7 +3,7 @@
 */
 
 html {
-    --text-font: "ui-monospace";
+    --text-font: "noto-serif", "ui-serif", "serif";
 }
 
 html.lightmode {
@@ -99,6 +99,7 @@ body {
     padding: 0%;
 
     overflow-y: scroll;
+    scrollbar-width: thin;
 }
 
 #settings {