Merge upstream/master into fix/hljs-highlighter-regression-5334

Author: Ashutoshx7

.eslintrc.json

@@ -1,4 +1,5 @@
 {
+  "root": true,
   "env": {
     "es6": true,
     "browser": true,
@@ -13,8 +14,12 @@
       "globalReturn": false
     }
   },
-  "extends": ["eslint:recommended"],
-  "ignorePatterns": ["lib/**"],
+  "extends": [
+    "eslint:recommended"
+  ],
+  "ignorePatterns": [
+    "lib/**"
+  ],
   "rules": {
     "no-console": "off",
     "no-unused-vars": "off",
@@ -25,12 +30,12 @@
     "semi": "error",
     "no-duplicate-case": "error",
     "no-irregular-whitespace": "warn",
-    "no-prototype-builtins" : "off",
-    "no-useless-escape" : "off",
-    "no-inner-declarations" : "off",
-    "no-constant-assign" : "off",
-    "no-const-assign" : "off",
-    "no-dupe-keys" : "off",
-    "no-useless-catch" : "off"
+    "no-prototype-builtins": "off",
+    "no-useless-escape": "off",
+    "no-inner-declarations": "off",
+    "no-constant-assign": "off",
+    "no-const-assign": "off",
+    "no-dupe-keys": "off",
+    "no-useless-catch": "off"
   }
 }

.github/workflows/node.js.yml

@@ -4,34 +4,38 @@
 name: Smoke Test
 
 on:
-  push:
-    branches: [master]
-  pull_request:
-    branches: [master]
+    push:
+        branches: [master]
+    pull_request:
+        branches: [master]
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [18.x, 20.x]
-
-    steps:
-    - name: Checkout code
-      uses: actions/checkout@v4
-      with:
-        fetch-depth: 0
-
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node-version }}
-
-    - run: npm ci
-    - run: npm run build --if-present
-
-    # Post-run cleanup to remove the build directory after the job finishes
-    - name: Post-run cleanup
-      if: always()
-      run: rm -rf ./build
+    build:
+        runs-on: ubuntu-latest
+
+        strategy:
+            matrix:
+                node-version: [18.x, 20.x]
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
+
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v4
+              with:
+                  node-version: ${{ matrix.node-version }}
+                  cache: "npm"
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Build project
+              run: npm run build --if-present
+
+            # Post-run cleanup to remove the build directory after the job finishes
+            - name: Post-run cleanup
+              if: always()
+              run: rm -rf ./build

Docs/guide-es/README.md

@@ -718,8 +718,8 @@ can be used inside the _Pitch-time Matrix_ block.
 
 The _Set Drum_ block is used to map the enclosed pitches into drum
 sounds. Drum sounds are played in a monopitch using the specified drum
-sample. In the example above, a `kick drum` will be substitued for
-each occurance of a `Re` `4`.
+sample. In the example above, a `kick drum` will be substituted for
+each occurrence of a `Re` `4`.
 
 ![alt tag](./drum8.svg " ")
 

Docs/guide-ja/README.md

@@ -818,8 +818,8 @@ can be used inside the *ピッチ・タイム行列* block.
 
 The *Set ドラム* block is used to map the enclosed pitches into ドラム
 sounds. ドラム sounds are played in a monopitch using the specified ドラム
-sample. In the example above, a `kick ドラム` will be substitued for
-each occurance of a `レ` `4`.
+sample. In the example above, a `kick ドラム` will be substituted for
+each occurrence of a `レ` `4`.
 
 ![alt tag](./drum8.svg "ピッチ・ドラム・グラフ 1")
 

Docs/guide-zhCN/README.md

@@ -755,8 +755,8 @@ notes.
 
 The *Set Drum* block is used to map the enclosed pitches into drum
 sounds. Drum sounds are played in a monopitch using the specified drum
-sample. In the example above, a `kick drum` will be substitued for
-each occurance of a `Re` `4`.
+sample. In the example above, a `kick drum` will be substituted for
+each occurrence of a `Re` `4`.
 
 *Set Drum* 块用于将封闭的音高映射到鼓中声音。
 鼓声使用指定的鼓在单声道中播放。

css/activities.css

@@ -1051,12 +1051,12 @@ table {
 }
 
 #right-arrow {
-  left: 385px;
+  right: 25px;
   background: url("../header-icons/right-arrow.png");
 }
 
 #left-arrow {
-  left: 5px;
+  left: 10px;
   background: url("../header-icons/left-arrow.png");
 }
 
@@ -1177,12 +1177,14 @@ table {
 
 #helpBodyDiv {
   position: relative;
-  left: 45px;
+  margin: 0 auto !important;
+  left: 0 !important;
   border: 0 !important;
   overflow-x: hidden;
   overflow-y: auto;
-  width: 350px;
-  padding: 1rem 1rem 0 0;
+  width: calc(100% - 130px) !important;
+  max-width: 350px;
+  padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -2107,7 +2109,7 @@ table {
 
 #right-arrow {
     left: auto !important;  /* Unset the old fixed pixel value */
-    right: 10px !important; /* Stick to the right edge */
+    right: 25px !important; /* Stick to the right edge */
 }
 
 /* --- Desktop View (Screens wider than 900px) --- */
@@ -2138,7 +2140,8 @@ table {
 
     /* Fix the inner text box width so it doesn't overflow */
     #helpBodyDiv {
-        width: 100% !important;
+        width: calc(100% - 110px) !important;
+        margin: 0 auto !important;
         left: 0 !important;
         padding: 0 10px;
         box-sizing: border-box; 

css/darkmode.css

@@ -17,9 +17,9 @@ body.dark {
 
 /* Help widget colors */
 .dark #helpBodyDiv {
-  background: #1d1d20;
+  background: #505050;
   color: var(--fg);
-}
+} 
 
 .dark #helpBodyDiv > .heading,
 .dark #helpBodyDiv p {

css/themes.css

@@ -143,6 +143,7 @@
 .dark #confirmation-message {
   color: #e2e2e2;
 }
+
 body {
   --border: #cccccc;
   --bg: #ffffff;
@@ -159,4 +160,16 @@ body.dark {
   --accent: #3fe0d1;
 }
 
-/* Your Custom Theme can go here if you don't want to modify the existing dark mode */
+/* Your Custom Theme can go here if you don't want to modify the existing dark mode */
+
+/* Selected language highlight in language dropdown */
+#languagedropdown li a.selected-language {
+  background-color: rgba(33, 150, 243, 0.15);
+  border-left: 3px solid #2196F3;
+  font-weight: 600;
+}
+
+.dark #languagedropdown li a.selected-language {
+  background-color: rgba(33, 150, 243, 0.25);
+  border-left: 3px solid #64B5F6;
+}

gulpfile.mjs

@@ -0,0 +1,75 @@
+import gulp from "gulp";
+import babel from "gulp-babel";
+import uglify from "gulp-uglify";
+import rename from "gulp-rename";
+import concat from "gulp-concat";
+import cleanCSS from "gulp-clean-css";
+import * as sassCompiler from "sass";
+import gulpSass from "gulp-sass";
+import postcss from "gulp-postcss";
+import autoprefixer from "autoprefixer";
+import cssnano from "cssnano";
+import sourcemaps from "gulp-sourcemaps";
+import prettier from "gulp-prettier";
+
+const sass = gulpSass(sassCompiler);
+
+const paths = {
+    scripts: {
+        src: "js/**/*.js",
+        dest: "dist/js"
+    },
+    styles: {
+        src: "css/**/*.css",
+        dest: "dist/css"
+    },
+    sass: {
+        src: "scss/**/*.scss",
+        dest: "dist/css"
+    }
+};
+
+export function jsTask() {
+    return gulp
+        .src(paths.scripts.src)
+        .pipe(sourcemaps.init())
+        .pipe(
+            babel({
+                presets: ["@babel/preset-env"]
+            })
+        )
+        .pipe(uglify())
+        .pipe(concat("main.min.js"))
+        .pipe(sourcemaps.write("."))
+        .pipe(gulp.dest(paths.scripts.dest));
+}
+
+export function cssTask() {
+    return gulp
+        .src(paths.styles.src)
+        .pipe(sourcemaps.init())
+        .pipe(postcss([autoprefixer(), cssnano()]))
+        .pipe(cleanCSS())
+        .pipe(rename({ suffix: ".min" }))
+        .pipe(sourcemaps.write("."))
+        .pipe(gulp.dest(paths.styles.dest));
+}
+
+export function sassTask() {
+    return gulp
+        .src(paths.sass.src)
+        .pipe(sourcemaps.init())
+        .pipe(sass().on("error", sass.logError))
+        .pipe(postcss([autoprefixer(), cssnano()]))
+        .pipe(cleanCSS())
+        .pipe(rename({ suffix: ".min" }))
+        .pipe(sourcemaps.write("."))
+        .pipe(gulp.dest(paths.sass.dest));
+}
+
+export function prettify() {
+    return gulp.src(paths.scripts.src).pipe(prettier()).pipe(gulp.dest("js"));
+}
+
+export const build = gulp.series(gulp.parallel(jsTask, sassTask));
+export default build;