build: Fix bundling and use noto

Author: Danielku15

docusaurus.config.ts

@@ -274,16 +274,12 @@ const config: Config = {
       injectHtmlTags() {
         return {};
       },
-      configurePostCss(options) {
-        options["map"] = true;
-        return options;
-      },
       configureWebpack(config, isServer, options) {
         const matchRule = (r: Configuration["module"]["rules"][0]) => {
           if (typeof r === "object") {
-            if(r.test instanceof RegExp) {
+            if (r.test instanceof RegExp) {
               return !!r.test.exec("custom.sass");
-            } else if(typeof r.test === "undefined") {
+            } else if (typeof r.test === "undefined") {
               return true;
             } else {
               // unsupported
@@ -312,16 +308,27 @@ const config: Config = {
           throw new Error("Need SASS rule with use[]");
         }
 
-        const sassLoaderIndex = sassRule.use.findIndex(l => typeof l === "object" && l.loader?.includes('sass-loader'));
+        const sassLoaderIndex = sassRule.use.findIndex(
+          (l) => typeof l === "object" && l.loader?.includes("sass-loader")
+        );
         if (sassLoaderIndex === -1) {
           throw new Error("Could not find sass-loader in rule");
         }
 
+        // ensure source-map before resolve-url-loader
+        const sassLoader = sassRule.use[sassLoaderIndex] as RuleSetRule;
+        sassLoader.options = {
+          ...((sassLoader.options as object | undefined) ?? {}),
+          sourceMap: true // force sourcemaps
+        };
+
+
         // insert resolve-url-loader before SASS loader to fix relative URLs
         sassRule.use.splice(sassLoaderIndex, 0, {
           loader: "resolve-url-loader",
         });
 
+        
         return {
           plugins: [
             // Copy the Font and SoundFont Files to the output

package-lock.json

@@ -19,8 +19,8 @@
     "@docusaurus/core": "^3.3.2",
     "@docusaurus/preset-classic": "^3.3.2",
     "@docusaurus/theme-mermaid": "^3.3.2",
-    "@fontsource/pt-serif": "^5.1.1",
-    "@fontsource/roboto": "^5.1.1",
+    "@fontsource/noto-sans": "^5.1.1",
+    "@fontsource/noto-serif": "^5.1.1",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",

package.json

@@ -4,13 +4,14 @@
  * work well for content-centric websites.
  */
 
-@import "@fontsource/roboto";
-@import "@fontsource/roboto/300.css";
-@import "@fontsource/roboto/500.css";
-@import "@fontsource/roboto/700.css";
-@import "@fontsource/pt-serif";
-@import "@fontsource/pt-serif/700.css";
- 
+@import "@fontsource/noto-sans";
+@import "@fontsource/noto-sans/300.css";
+@import "@fontsource/noto-sans/500.css";
+@import "@fontsource/noto-sans/700.css";
+@import "@fontsource/noto-serif";
+@import "@fontsource/noto-serif/300.css";
+@import "@fontsource/noto-serif/500.css";
+@import "@fontsource/noto-serif/700.css";
 
 /* You can override the default Infima variables here. */
 :root {
@@ -25,7 +26,7 @@
   --ifm-z-index-fixed: 2000;
   --docusaurus-highlighted-code-line-bg: rgba(0,0,0, 0.20);
 
-  --ifm-font-family-base: Roboto;
+  --ifm-font-family-base: "Noto Sans";
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */

src/css/custom.scss

@@ -5,21 +5,21 @@ export default {
     settings.core.fontDirectory = "/font/";
     settings.player.soundFont = "/soundfont/sonivox.sf3";
 
-    settings.display.resources.copyrightFont.families = ["Roboto"];
-    settings.display.resources.titleFont.families = ["PT Serif"];
-    settings.display.resources.subTitleFont.families = ["PT Serif"];
-    settings.display.resources.wordsFont.families = ["PT Serif"];
-    settings.display.resources.effectFont.families = ["PT Serif"];
-    settings.display.resources.timerFont.families = ["PT Serif"];
-    settings.display.resources.fretboardNumberFont.families = ["Roboto"];
-    settings.display.resources.tablatureFont.families = ["Roboto"];
-    settings.display.resources.graceFont.families = ["Roboto"];
-    settings.display.resources.barNumberFont.families = ["Roboto"];
-    settings.display.resources.fingeringFont.families = ["PT Serif"];
-    settings.display.resources.inlineFingeringFont.families = ["PT Serif"];
-    settings.display.resources.markerFont.families = ["PT Serif"];
-    settings.display.resources.directionsFont.families = ["PT Serif"];
-    settings.display.resources.numberedNotationFont.families = ["Roboto"];
-    settings.display.resources.numberedNotationGraceFont.families = ["Roboto"];
+    settings.display.resources.copyrightFont.families = ["Noto Sans"];
+    settings.display.resources.titleFont.families = ["Noto Serif"];
+    settings.display.resources.subTitleFont.families = ["Noto Serif"];
+    settings.display.resources.wordsFont.families = ["Noto Serif"];
+    settings.display.resources.effectFont.families = ["Noto Serif"];
+    settings.display.resources.timerFont.families = ["Noto Serif"];
+    settings.display.resources.fretboardNumberFont.families = ["Noto Sans"];
+    settings.display.resources.tablatureFont.families = ["Noto Sans"];
+    settings.display.resources.graceFont.families = ["Noto Sans"];
+    settings.display.resources.barNumberFont.families = ["Noto Sans"];
+    settings.display.resources.fingeringFont.families = ["Noto Serif"];
+    settings.display.resources.inlineFingeringFont.families = ["Noto Serif"];
+    settings.display.resources.markerFont.families = ["Noto Serif"];
+    settings.display.resources.directionsFont.families = ["Noto Serif"];
+    settings.display.resources.numberedNotationFont.families = ["Noto Sans"];
+    settings.display.resources.numberedNotationGraceFont.families = ["Noto Sans"];
   },
 };