dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-07-06 11:41:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'main' of https://github.com/JulienMaille/dribbblish-dynamic-theme

Browse source
This commit is contained in:
Send_Nukez 2022-01-23 11:07:24 +01:00
commit 7d3341b7a7
2 changed files with 123 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/js/SassUtil.js
View file

@ -1,13 +1,13 @@
export function lightOffset(n, offset) { export function lightOffset(n, offset) {
return `calc(${n} + ${offset} * var(--is_light))`; return `calc(${n} + ${offset} * var(--is_light))`;
} }
export function spiceColor(key, alpha = 1, _lightOffset = 0) { export function spiceColor(key, alpha = 1, _lightOffset = 0) {
if (alpha == 1) { if (alpha == 1) {
return `var(--spice-${key})`; return `var(--spice-${key})`;
} else if (_lightOffset == 0) { } else if (_lightOffset == 0) {
return `rgba(var(--spice-rgb-${key}), ${alpha})`; return `rgba(var(--spice-rgb-${key}), ${alpha})`;
} else { } else {
return `rgba(var(--spice-rgb-${key}), ${lightOffset(alpha, _lightOffset)})`; return `rgba(var(--spice-rgb-${key}), ${lightOffset(alpha, _lightOffset)})`;
} }
} }

220
webpack.config.babel.js
View file

@ -1,110 +1,110 @@
import webpack from "webpack"; import webpack from "webpack";
import sass from "sass"; import sass from "sass";
import { CleanWebpackPlugin } from "clean-webpack-plugin"; import { CleanWebpackPlugin } from "clean-webpack-plugin";
import path from "path"; import path from "path";
import fs from "fs"; import fs from "fs";
import Icons from "./src/js/Icons"; import Icons from "./src/js/Icons";
import { lightOffset, spiceColor } from "./src/js/SassUtil"; import { lightOffset, spiceColor } from "./src/js/SassUtil";
const _icons = {}; const _icons = {};
function addIcon(name, style, path) { function addIcon(name, style, path) {
name = name.replace(/_/g, "-"); name = name.replace(/_/g, "-");
if (!_icons.hasOwnProperty(name)) _icons[name] = {}; if (!_icons.hasOwnProperty(name)) _icons[name] = {};
_icons[name][style] = fs.readFileSync(path, { encoding: "utf8" }); _icons[name][style] = fs.readFileSync(path, { encoding: "utf8" });
} }
// Add Material Icons // Add Material Icons
let iconDir = path.resolve(__dirname, "node_modules/@material-icons/svg/svg"); let iconDir = path.resolve(__dirname, "node_modules/@material-icons/svg/svg");
for (const dir of fs.readdirSync(iconDir)) { for (const dir of fs.readdirSync(iconDir)) {
for (const file of fs.readdirSync(path.resolve(iconDir, dir))) { for (const file of fs.readdirSync(path.resolve(iconDir, dir))) {
addIcon(dir, `material:${file.replace(/\..*?$/, "")}`, path.resolve(iconDir, dir, file)); addIcon(dir, `material:${file.replace(/\..*?$/, "")}`, path.resolve(iconDir, dir, file));
} }
} }
// Add Custom Icons // Add Custom Icons
iconDir = path.resolve(__dirname, "src/icons"); iconDir = path.resolve(__dirname, "src/icons");
for (const icon of fs.readdirSync(iconDir)) { for (const icon of fs.readdirSync(iconDir)) {
addIcon(icon.replace(/\..*?$/, ""), "custom", path.resolve(iconDir, icon)); addIcon(icon.replace(/\..*?$/, ""), "custom", path.resolve(iconDir, icon));
} }
const icons = new Icons(_icons); const icons = new Icons(_icons);
/** @type {import('webpack').Configuration} */ /** @type {import('webpack').Configuration} */
const config = { const config = {
mode: "development", mode: "development",
entry: [path.resolve(__dirname, "src/js/main.js"), path.resolve(__dirname, "src/styles/main.scss"), path.resolve(__dirname, "src/styles/Colors.scss")], entry: [path.resolve(__dirname, "src/js/main.js"), path.resolve(__dirname, "src/styles/main.scss"), path.resolve(__dirname, "src/styles/Colors.scss")],
output: { output: {
path: path.resolve(__dirname, "dist"), path: path.resolve(__dirname, "dist"),
filename: "dribbblish-dynamic.js" filename: "dribbblish-dynamic.js"
}, },
module: { module: {
rules: [ rules: [
{ {
include: path.resolve(__dirname, "src/js/main.js"), include: path.resolve(__dirname, "src/js/main.js"),
use: [] use: []
}, },
{ {
include: path.resolve(__dirname, "src/styles/main.scss"), include: path.resolve(__dirname, "src/styles/main.scss"),
type: "asset/resource", type: "asset/resource",
generator: { generator: {
filename: "user.css" filename: "user.css"
}, },
use: [ use: [
{ {
loader: "sass-loader", loader: "sass-loader",
options: { options: {
implementation: sass, implementation: sass,
sourceMap: true, sourceMap: true,
sassOptions: { sassOptions: {
functions: { functions: {
"lightOffset($n, $offset)": (n, offset) => { "lightOffset($n, $offset)": (n, offset) => {
return new sass.types.String(lightOffset(n.getValue(), offset.getValue())); return new sass.types.String(lightOffset(n.getValue(), offset.getValue()));
}, },
"spiceColor($key, $alpha: 1, $light-offset: 0)": (key, alpha, _lightOffset) => { "spiceColor($key, $alpha: 1, $light-offset: 0)": (key, alpha, _lightOffset) => {
return new sass.types.String(spiceColor(key.getValue(), alpha.getValue(), _lightOffset.getValue())); return new sass.types.String(spiceColor(key.getValue(), alpha.getValue(), _lightOffset.getValue()));
}, },
"font64($font)": (font) => { "font64($font)": (font) => {
const file = path.resolve(__dirname, "src/fonts", font.getValue()); 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" })}"`); return new sass.types.String(`"data:font/truetype;charset=utf-8;base64,${fs.readFileSync(file, { encoding: "base64" })}"`);
}, },
'icon64($name, $options: "{}")': (name, options) => { 'icon64($name, $options: "{}")': (name, options) => {
name = name.getValue(); name = name.getValue();
options = JSON.parse(options.getValue()); options = JSON.parse(options.getValue());
return new sass.types.String(icons.get(name, { ...options, base64: true })); return new sass.types.String(icons.get(name, { ...options, base64: true }));
} }
} }
} }
} }
} }
] ]
}, },
{ {
include: path.resolve(__dirname, "src/styles/Colors.scss"), include: path.resolve(__dirname, "src/styles/Colors.scss"),
type: "asset/resource", type: "asset/resource",
generator: { generator: {
filename: "color.ini" filename: "color.ini"
}, },
use: [path.resolve(__dirname, "src/loaders/color-loader.js")] use: [path.resolve(__dirname, "src/loaders/color-loader.js")]
} }
] ]
}, },
devtool: "inline-source-map", devtool: "inline-source-map",
plugins: [ plugins: [
new webpack.DefinePlugin({ new webpack.DefinePlugin({
"process.env.BUG_REPORT": JSON.stringify( "process.env.BUG_REPORT": JSON.stringify(
fs fs
.readFileSync(path.resolve(__dirname, ".github/ISSUE_TEMPLATE/bug_report.md"), { encoding: "utf8" }) .readFileSync(path.resolve(__dirname, ".github/ISSUE_TEMPLATE/bug_report.md"), { encoding: "utf8" })
.replace(/^---(.*?\r?\n)+---(.*?\r?\n)*?(?=\S)/, "") // Replace GitHub header .replace(/^---(.*?\r?\n)+---(.*?\r?\n)*?(?=\S)/, "") // Replace GitHub header
.replace(/\*\*Desktop Setup\*\*\r?\n(- .*?\r?\n)+\r?\n/, "") // Replace **Desktop Setup** block .replace(/\*\*Desktop Setup\*\*\r?\n(- .*?\r?\n)+\r?\n/, "") // Replace **Desktop Setup** block
), ),
"process.env.DRIBBBLISH_ICONS": JSON.stringify(_icons), "process.env.DRIBBBLISH_ICONS": JSON.stringify(_icons),
"process.env.DRIBBBLISH_VERSION": JSON.stringify(process.env.DRIBBBLISH_VERSION ?? "Dev"), "process.env.DRIBBBLISH_VERSION": JSON.stringify(process.env.DRIBBBLISH_VERSION ?? "Dev"),
"process.env.COMMIT_HASH": JSON.stringify(process.env.COMMIT_HASH ?? "local") "process.env.COMMIT_HASH": JSON.stringify(process.env.COMMIT_HASH ?? "local")
}), }),
new CleanWebpackPlugin({ new CleanWebpackPlugin({
protectWebpackAssets: false, protectWebpackAssets: false,
cleanAfterEveryBuildPatterns: ["*.LICENSE.txt"] cleanAfterEveryBuildPatterns: ["*.LICENSE.txt"]
}) })
] ]
}; };
export default config; export default config;