feat: add cascadia code font

assets/resources.json

@@ -9,6 +9,9 @@
   "css-show_votes": "style/showVotes.css",
   "css-vol_slider_size": "style/volSliderSize.css",
   "doc-changelog": "/changelog.md",
+  "font-cascadia_code_ttf": "fonts/CascadiaCode.ttf",
+  "font-cascadia_code_woff": "fonts/CascadiaCode.woff",
+  "font-cascadia_code_woff2": "fonts/CascadiaCode.woff2",
   "icon-advanced_mode": "icons/plus_circle_small.svg",
   "icon-alert": "icons/alert.svg",
   "icon-arrow_down": "icons/arrow_down.svg",

assets/translations/README.md

@@ -16,15 +16,15 @@ To submit or edit a translation, please follow [this guide](../../contributing.m
 ### Translation progress:
 |   | Locale | Translated keys | Based on |
 | :----: | ------ | --------------- | :------: |
-|  | [`en_US`](./en_US.json) | `323` (default locale) |  |
-| ✅ | [`de_DE`](./de_DE.json) | `323/323` (100%) | ─ |
-|  | [`en_UK`](./en_UK.json) | `323/323` (100%) | `en_US` |
-| ✅ | [`es_ES`](./es_ES.json) | `323/323` (100%) | ─ |
-| ✅ | [`fr_FR`](./fr_FR.json) | `323/323` (100%) | ─ |
-| ✅ | [`hi_IN`](./hi_IN.json) | `323/323` (100%) | ─ |
-| ✅ | [`ja_JA`](./ja_JA.json) | `323/323` (100%) | ─ |
-| ✅ | [`pt_BR`](./pt_BR.json) | `323/323` (100%) | ─ |
-| ✅ | [`zh_CN`](./zh_CN.json) | `323/323` (100%) | ─ |
+|  | [`en_US`](./en_US.json) | `324` (default locale) |  |
+| ✅ | [`de_DE`](./de_DE.json) | `324/324` (100%) | ─ |
+|  | [`en_UK`](./en_UK.json) | `324/324` (100%) | `en_US` |
+| ✅ | [`es_ES`](./es_ES.json) | `324/324` (100%) | ─ |
+| ✅ | [`fr_FR`](./fr_FR.json) | `324/324` (100%) | ─ |
+| ✅ | [`hi_IN`](./hi_IN.json) | `324/324` (100%) | ─ |
+| ✅ | [`ja_JA`](./ja_JA.json) | `324/324` (100%) | ─ |
+| ✅ | [`pt_BR`](./pt_BR.json) | `324/324` (100%) | ─ |
+| ✅ | [`zh_CN`](./zh_CN.json) | `324/324` (100%) | ─ |
 
 <sub>
 ✅ - Fully translated

changelog.md

@@ -7,7 +7,7 @@
   - Added an experimental feature to like songs and videos of certain channels (on both sites) automatically.  
     Since this feature is still experimental, to be able to turn it on, you first need to enable advanced mode in the settings.  
     The button to toggle auto-liking will only show up on channel pages until the next update. Please report any issues you encounter.
-  - Added the ability to show the approximate amount of likes and dislikes on the currently playing song (powered by [ReturnYoutubeDislike](https://returnyoutubedislike.com/))
+  - Added the ability to show the approximate amount of likes and dislikes on the currently playing song (powered by [Return YouTube Dislike](https://returnyoutubedislike.com/))
   - Added support for themes set by the [ThemeSong](https://github.com/KristofferTroncoso/ThemeSong) extension
   - Added a dialog for listing the currently installed and active plugins including some metadata
 - **Changes:**
@@ -31,6 +31,7 @@
   - Removed unnecessary experimental feature "advancedLyricsFilter" as the API's native search improved a lot
   - Made all integration features configurable and gave them their own config category
   - Created a prompt dialog to replace the browser's native dialogs, which could accidentally be turned off by the user and would softlock the script
+  - Made all <code> tags use the [Cascadia Code](https://github.com/microsoft/cascadia-code) font
 - **Fixes:**
   - Fixed major bug that threw "This document requires 'TrustedHTML' assignment" errors on Chromium browsers
   - Adjusted script to UI redesign of playlists

dist/BetterYTM.css

@@ -548,7 +548,7 @@ select.bytm-ftconf-input {
   background-color: #222;
   border-radius: 3px;
   padding: 1px 5px;
-  font-family: monospace;
+  font-family: "Cascadia Code", "Consolas", monospace;
 }
 
 .bytm-markdown-container h2 {

src/components/BytmDialog.css

@@ -372,7 +372,7 @@ select.bytm-ftconf-input {
   background-color: #222;
   border-radius: 3px;
   padding: 1px 5px;
-  font-family: monospace;
+  font-family: "Cascadia Code", "Consolas", monospace;
 }
 
 .bytm-markdown-container h2 {

src/index.ts

@@ -1,5 +1,5 @@
 import { compress, decompress, pauseFor, type Stringifiable } from "@sv443-network/userutils";
-import { addStyleFromResource, domLoaded, setGlobalCssVars, warn } from "./utils/index.js";
+import { addStyle, addStyleFromResource, domLoaded, getResourceUrl, setGlobalCssVars, warn } from "./utils/index.js";
 import { clearConfig, fixCfgKeys, getFeatures, initConfig, setFeatures } from "./config.js";
 import { buildNumber, compressionFormat, defaultLogLevel, mode, scriptInfo } from "./constants.js";
 import { dbg, error, getDomain, info, getSessionId, log, setLogLevel, initTranslations, setLocale } from "./utils/index.js";
@@ -58,7 +58,8 @@ import { MarkdownDialog } from "./components/index.js";
 ─ This TrustedTypes-compatible HTML sanitization library: https://github.com/cure53/DOMPurify
 ─ This markdown parser library: https://github.com/markedjs/marked
 ─ This tiny event listener library: https://github.com/ai/nanoevents
-─ TypeScript and the tslib runtime: https://github.com/microsoft/TypeScript`;
+─ TypeScript and the tslib runtime: https://github.com/microsoft/TypeScript
+─ The Cascadia Code font: https://github.com/microsoft/cascadia-code`;
 
   console.log(
     `\
@@ -316,6 +317,8 @@ async function injectCssBundle() {
 /** Initializes global CSS variables */
 function initGlobalCssVars() {
   try {
+    loadFonts();
+
     const applyVars = () => {
       setGlobalCssVars({
         "inner-height": `${window.innerHeight}px`,
@@ -333,6 +336,32 @@ function initGlobalCssVars() {
   }
 }
 
+async function loadFonts() {
+  const fonts = {
+    "Cascadia Code": {
+      woff: await getResourceUrl("font-cascadia_code_woff"),
+      woff2: await getResourceUrl("font-cascadia_code_woff2"),
+      ttf: await getResourceUrl("font-cascadia_code_ttf"),
+    },
+  };
+
+  let css = "";
+  for(const [font, urls] of Object.entries(fonts))
+    css += `\
+@font-face {
+  font-family: "${font}";
+  src: url("${urls.woff2}") format("woff2"),
+    url("${urls.woff}") format("woff"),
+    url("${urls.ttf}") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+`;
+
+  addStyle(css, "fonts");
+}
+
 //#region dev menu cmds
 
 /** Registers dev commands using `GM.registerMenuCommand` */