Move source-code fonts to new build workflow

Changes Include:
- Removed the old scripts/yarn/** dir, as it is no longer needed.
- Moved source-code-pro and source-sans to client/
- Built and bundled the fonts.
- Updated templates to use the new built fonts and styles.
- Added new built bundles license info in REUSE.toml.

Note:
- The old bundles did not get removed to keep this PR simple for review.

TODO:
- Remove old fonts bundles.
- Update any dependents on them to use the new bundles.
- if FONTS_CDN_URL is configured it should be seted up with static/js/vendor/fonts instead of the old font-source/
- Remove the old yarn-update workflow and its configs and workflows

Related: WeblateOrg#12172

Author: meel-hd

REUSE.toml

@@ -67,6 +67,12 @@ SPDX-License-Identifier = "OFL-1.1"
 path = "weblate/static/vendor/font-source/**"
 precedence = "aggregate"
 
+[[annotations]]
+SPDX-FileCopyrightText = "Paul D. Hunt"
+SPDX-License-Identifier = "OFL-1.1"
+path = "weblate/static/js/vendor/fonts/**"
+precedence = "aggregate"
+
 [[annotations]]
 SPDX-FileCopyrightText = "Lea Verou"
 SPDX-License-Identifier = "MIT"

client/package.json

@@ -19,6 +19,8 @@
     "multi.js": "0.5.3",
     "prismjs": "1.29.0",
     "slugify": "1.6.6",
+    "source-code-pro": "2.38.0",
+    "source-sans": "3.46.0",
     "tributejs": "5.1.3"
   },
   "devDependencies": {

client/src/fonts.js

@@ -0,0 +1,8 @@
+// Copyright © Michal Čihař <michal@weblate.org>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+// Importing font styles, when built will include also
+// the font assets they depend on, automatically
+import "source-code-pro/source-code-pro.css";
+import "source-sans/source-sans-3.css";

client/webpack.config.js

@@ -131,6 +131,7 @@ module.exports = {
     mousetrap: "./src/mousetrap.js",
     prismjs: "./src/prismjs.js",
     altcha: "./src/altcha.js",
+    "fonts/fonts": "./src/fonts.js",
   },
   mode: "production",
   optimization: {
@@ -152,6 +153,13 @@ module.exports = {
         test: /\.css$/,
         use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: "asset/resource",
+        generator: {
+          filename: "fonts/font-source/[hash][ext]",
+        },
+      },
     ],
   },
   plugins: [

client/yarn.lock

@@ -962,6 +962,11 @@ slugify@1.6.6:
   resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.6.6.tgz#2d4ac0eacb47add6af9e04d3be79319cbcc7924b"
   integrity sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==
 
+source-code-pro@2.38.0:
+  version "2.38.0"
+  resolved "https://registry.yarnpkg.com/source-code-pro/-/source-code-pro-2.38.0.tgz#85c57689f7386bb9d0515fb00ba4845bfb7b485b"
+  integrity sha512-JMXu7l3XrLREG17eEwY66ANG9716WTu6OeNvZfRKQKANEvbSERDZjk5AYTHeV6owQNPQTeiiW3ri2Ou93XFGvg==
+
 source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
@@ -980,6 +985,11 @@ source-map@^0.6.0:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+source-sans@3.46.0:
+  version "3.46.0"
+  resolved "https://registry.yarnpkg.com/source-sans/-/source-sans-3.46.0.tgz#6af0a47ead682fa8971f0c83e9692e75ef3cbb86"
+  integrity sha512-bVC2YX4VNiv5vMcy77dL0XKsNp794ThfynNsr+FqSAwk8TGG0pZsg7eUQi6yHwaRBMVmZ3Aaf4FY46dxIIGgsg==
+
 spdx-exceptions@^2.1.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz#5d607d27fc806f66d7b64a766650fa890f04ed66"

scripts/yarn-update

@@ -4,36 +4,7 @@
 #
 # SPDX-License-Identifier: GPL-3.0-or-later
 
-# Wrapper around yarn to update our javascript dependencies
-set -e
-
-cd scripts/yarn/
-
-yarn install --check-files
-
-# Source Sans/Code Pro fonts
-sed '/font-family/ a font-display: swap;' < node_modules/source-sans/source-sans-3.css > ../../weblate/static/vendor/font-source/source-sans-3.css
-sed '/font-family/ a font-display: swap;' < node_modules/source-code-pro/source-code-pro.css > ../../weblate/static/vendor/font-source/source-code-pro.css
-find node_modules/source-sans/WOFF node_modules/source-sans/WOFF2 node_modules/source-sans/TTF node_modules/source-code-pro/ \
-    -name 'SourceSans3-ExtraLight.*' \
-    -o -name 'SourceSans3-Light.*' \
-    -o -name 'SourceSans3-Semibold.*' \
-    -o -name 'SourceSans3-Black.*' \
-    -o -name 'SourceSans3-Bold.*' \
-    -o -name 'SourceSans3-Regular.*' \
-    -o -name 'SourceSans3-It.*' \
-    -o -name 'SourceSans3-BoldIt.*' \
-    -o -name 'SourceCodePro-Medium.*' \
-    -o -name 'SourceCodePro-Regular.*' \
-    -o -name 'SourceCodePro-Bold.*' \
-    -o -name 'SourceCodePro-Semibold.*' | while read -r name; do
-    target=$(echo "$name" | sed 's@node_modules/source-\(sans\|code-pro\)/@../../weblate/static/vendor/font-source/@')
-    dir=$(dirname "$target")
-    if [ ! -d "$dir" ]; then
-        mkdir -p "$dir"
-    fi
-    cp "$name" "$target"
-done
+echo Deprecated
 
 # Not updated:
 # Bootstrap, use online customizer