From 675ff2d94dc23204b296dd4c17043240d8c5a784 Mon Sep 17 00:00:00 2001 From: Send_Nukez Date: Sun, 21 Nov 2021 22:30:46 +0100 Subject: [PATCH] inject fonts into user.css as base64 url --- package.json | 1 - .../images/tracklist-row-song-fallback.svg | 4 ---- src/{assets => }/fonts/GoogleSans-Black.ttf | Bin src/{assets => }/fonts/GoogleSans-Bold.ttf | Bin src/{assets => }/fonts/GoogleSans-Light.ttf | Bin src/{assets => }/fonts/GoogleSans-Medium.ttf | Bin src/{assets => }/fonts/GoogleSans-Regular.ttf | Bin src/{assets => }/fonts/GoogleSans-Thin.ttf | Bin src/{assets => }/fonts/Roboto-Black.ttf | Bin src/{assets => }/fonts/Roboto-Bold.ttf | Bin src/{assets => }/fonts/Roboto-Light.ttf | Bin src/{assets => }/fonts/Roboto-Medium.ttf | Bin src/{assets => }/fonts/Roboto-Regular.ttf | Bin src/{assets => }/fonts/Roboto-Thin.ttf | Bin src/styles/Fonts.scss | 2 +- webpack.config.js | 15 ++++++++++----- 16 files changed, 11 insertions(+), 11 deletions(-) delete mode 100644 src/assets/images/tracklist-row-song-fallback.svg rename src/{assets => }/fonts/GoogleSans-Black.ttf (100%) rename src/{assets => }/fonts/GoogleSans-Bold.ttf (100%) rename src/{assets => }/fonts/GoogleSans-Light.ttf (100%) rename src/{assets => }/fonts/GoogleSans-Medium.ttf (100%) rename src/{assets => }/fonts/GoogleSans-Regular.ttf (100%) rename src/{assets => }/fonts/GoogleSans-Thin.ttf (100%) rename src/{assets => }/fonts/Roboto-Black.ttf (100%) rename src/{assets => }/fonts/Roboto-Bold.ttf (100%) rename src/{assets => }/fonts/Roboto-Light.ttf (100%) rename src/{assets => }/fonts/Roboto-Medium.ttf (100%) rename src/{assets => }/fonts/Roboto-Regular.ttf (100%) rename src/{assets => }/fonts/Roboto-Thin.ttf (100%) diff --git a/package.json b/package.json index 5b66433..f215873 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,6 @@ }, "devDependencies": { "clean-webpack-plugin": "^4.0.0", - "copy-webpack-plugin": "^9.0.1", "sass": "^1.43.4", "sass-loader": "^12.2.0", "webpack": "^5.58.2", diff --git a/src/assets/images/tracklist-row-song-fallback.svg b/src/assets/images/tracklist-row-song-fallback.svg deleted file mode 100644 index 22a0fc4..0000000 --- a/src/assets/images/tracklist-row-song-fallback.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/fonts/GoogleSans-Black.ttf b/src/fonts/GoogleSans-Black.ttf similarity index 100% rename from src/assets/fonts/GoogleSans-Black.ttf rename to src/fonts/GoogleSans-Black.ttf diff --git a/src/assets/fonts/GoogleSans-Bold.ttf b/src/fonts/GoogleSans-Bold.ttf similarity index 100% rename from src/assets/fonts/GoogleSans-Bold.ttf rename to src/fonts/GoogleSans-Bold.ttf diff --git a/src/assets/fonts/GoogleSans-Light.ttf b/src/fonts/GoogleSans-Light.ttf similarity index 100% rename from src/assets/fonts/GoogleSans-Light.ttf rename to src/fonts/GoogleSans-Light.ttf diff --git a/src/assets/fonts/GoogleSans-Medium.ttf b/src/fonts/GoogleSans-Medium.ttf similarity index 100% rename from src/assets/fonts/GoogleSans-Medium.ttf rename to src/fonts/GoogleSans-Medium.ttf diff --git a/src/assets/fonts/GoogleSans-Regular.ttf b/src/fonts/GoogleSans-Regular.ttf similarity index 100% rename from src/assets/fonts/GoogleSans-Regular.ttf rename to src/fonts/GoogleSans-Regular.ttf diff --git a/src/assets/fonts/GoogleSans-Thin.ttf b/src/fonts/GoogleSans-Thin.ttf similarity index 100% rename from src/assets/fonts/GoogleSans-Thin.ttf rename to src/fonts/GoogleSans-Thin.ttf diff --git a/src/assets/fonts/Roboto-Black.ttf b/src/fonts/Roboto-Black.ttf similarity index 100% rename from src/assets/fonts/Roboto-Black.ttf rename to src/fonts/Roboto-Black.ttf diff --git a/src/assets/fonts/Roboto-Bold.ttf b/src/fonts/Roboto-Bold.ttf similarity index 100% rename from src/assets/fonts/Roboto-Bold.ttf rename to src/fonts/Roboto-Bold.ttf diff --git a/src/assets/fonts/Roboto-Light.ttf b/src/fonts/Roboto-Light.ttf similarity index 100% rename from src/assets/fonts/Roboto-Light.ttf rename to src/fonts/Roboto-Light.ttf diff --git a/src/assets/fonts/Roboto-Medium.ttf b/src/fonts/Roboto-Medium.ttf similarity index 100% rename from src/assets/fonts/Roboto-Medium.ttf rename to src/fonts/Roboto-Medium.ttf diff --git a/src/assets/fonts/Roboto-Regular.ttf b/src/fonts/Roboto-Regular.ttf similarity index 100% rename from src/assets/fonts/Roboto-Regular.ttf rename to src/fonts/Roboto-Regular.ttf diff --git a/src/assets/fonts/Roboto-Thin.ttf b/src/fonts/Roboto-Thin.ttf similarity index 100% rename from src/assets/fonts/Roboto-Thin.ttf rename to src/fonts/Roboto-Thin.ttf diff --git a/src/styles/Fonts.scss b/src/styles/Fonts.scss index 666de08..291e591 100644 --- a/src/styles/Fonts.scss +++ b/src/styles/Fonts.scss @@ -20,7 +20,7 @@ $font-weights: ( font-family: $font; font-weight: $weight; font-style: normal; - src: url("fonts/#{$font}-#{$style}.ttf") format("truetype"); + src: url(font64("#{$font}-#{$style}.ttf")) format("truetype"); } } } diff --git a/webpack.config.js b/webpack.config.js index d645468..af818de 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,8 +1,8 @@ const webpack = require("webpack"); const sass = require("sass"); -const CopyPlugin = require("copy-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const path = require("path"); +const fs = require("fs"); /** @type {import('webpack').Configuration} */ module.exports = { @@ -34,7 +34,15 @@ module.exports = { loader: "sass-loader", options: { implementation: sass, - sourceMap: true + sourceMap: true, + sassOptions: { + functions: { + "font64($font)": (font) => { + const file = path.resolve(__dirname, "./src/fonts", font.getValue()); + return new sass.types.String(`"data:font/truetype;charset=utf-8;base64,${fs.readFileSync(file, { encoding: "base64" })}"`); + } + } + } } } ] @@ -57,9 +65,6 @@ module.exports = { }, devtool: "inline-source-map", plugins: [ - new CopyPlugin({ - patterns: [{ from: "src/assets", to: "assets" }] - }), new webpack.DefinePlugin({ "process.env.DRIBBBLISH_VERSION": JSON.stringify(process.env.DRIBBBLISH_VERSION || "Dev"), "process.env.COMMIT_HASH": JSON.stringify(process.env.COMMIT_HASH || "local")