From 1115ba81e9a1a169fa9ebc28f8ab1cd5bdec9551 Mon Sep 17 00:00:00 2001 From: elonz Date: Sun, 21 Nov 2021 11:53:58 +0800 Subject: [PATCH] =?UTF-8?q?Modify:=20=E5=BC=BA=E5=88=B6=E6=A3=80=E6=9F=A5?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E7=9A=84=E9=85=8D=E7=BD=AE=E9=A1=B9=E5=BF=85?= =?UTF-8?q?=E9=A1=BB=E5=AD=98=E5=9C=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Ie44f0786aec1b61a498147d822a2b330bfe07a67 --- .github/workflows/release.yml | 2 +- package.json | 2 + scripts/compile.js | 63 +++++++++++++------------- scripts/utils.js | 10 ++++- src/themes/typora-config.js | 83 +++++++++++++++++++++++++++++++++++ 5 files changed, 128 insertions(+), 32 deletions(-) create mode 100644 src/themes/typora-config.js diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index bc5d005..c6111ba 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -16,7 +16,7 @@ jobs: - name: Install and Build run: | npm install - npm run compile -- --platform mweb --distDir dist/mweb3-themes + npm run compile -- --platform mweb3 --distDir dist/mweb3-themes npm run compile -- --platform mweb4 --distDir dist/mweb4-themes npm run compile -- --platform typora --distDir dist/typora-themes - name: Pack diff --git a/package.json b/package.json index 8bb7936..b95b5e4 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,8 @@ "typora-watch": "rm -rf static/typora.css static/typora.css.map && node scripts/typora/watch.js", "clean": "rm -rf static/*.css static/*.map", "compile": "node scripts/compile.js", + "compile-mweb4": "npm run compile -- --platform mweb4 --distDir dist/mweb4", + "compile-typora": "npm run compile -- --platform typora --distDir dist/typora", "gallery-watch": "rm -rf dist/gallery && node scripts/gallery/index.js watch", "gallery-build": "rm -rf dist/gallery && node scripts/gallery/index.js build" }, diff --git a/scripts/compile.js b/scripts/compile.js index 62155a7..1e47cd1 100644 --- a/scripts/compile.js +++ b/scripts/compile.js @@ -17,32 +17,35 @@ const sass = require("sass"); const path = require("path"); const minimist = require("minimist"); const sassExtract = require("sass-extract"); -const themeConfig = require("../src/themes/mweb-config"); -const { adjust } = require("./utils"); +const { adjust, getFileName, getFileNameWithoutExtension } = require("./utils"); const args = minimist(process.argv.slice(2), { string: ["file", "platform", "themeDir", "distDir"], default: { - platform: "mweb", // juejin, typora + platform: "mweb3", // mweb4, typora themeDir: "src/themes", distDir: "dist/themes", }, }); const platformConfig = { - mweb: { + mweb3: { filter: (filename) => /^mweb-/.test(filename), // 过滤需要编译的 scss 文件 namer: (filename) => `${filename}.css`, // scss 编译后写入的文件名 - writer: writerForMWeb + themeConfig: require("../src/themes/mweb-config"), + getThemeName: (filePath) => filePath.match(/mweb-(.*)\.scss$/)[1], // ayu, lark, etc. }, mweb4: { filter: (filename) => /^mweb-/.test(filename), namer: (filename) => `${filename}.mwebtheme`, + themeConfig: require("../src/themes/mweb-config"), + getThemeName: (filePath) => filePath.match(/mweb-(.*)\.scss$/)[1], // ayu, lark, etc. compiler: compilerForMWeb4, - writer: writerForMWeb }, typora: { filter: (filename) => /^typora-/.test(filename), namer: (filename) => `${filename}.css`, + themeConfig: require("../src/themes/typora-config"), + getThemeName: (filePath) => filePath.match(/typora-(.*)\.scss$/)[1], // ayu, lark, etc. }, }; @@ -293,14 +296,15 @@ function compilerForMWeb4({ filePath }) { color: "555555", }, }; + const { themeConfig } = platformConfig[args.platform]; + const themeName = platformConfig[args.platform].getThemeName(filePath); const css = sass.renderSync({ file: filePath }).css; - const themeName = filePath.match(/mweb-(.*)\.scss$/)[1]; // eg: ayu, lark, etc. const isMWeb4EditorThemeCompatible = themeConfig[themeName].isMWeb4EditorThemeCompatible; if (isMWeb4EditorThemeCompatible) { // sass-extract 有 bug，import 优先级不正确，算出来的 final value 不正确，都是 bear-default.scss 里定义的。 - // 所以这里不解析入口文件，只计算 bear-palettes 里的变量值。 + // 所以这里不直接解析入口文件 mweb-xxx.scss，而是只解析 bear-palettes/xxx.scss。 const rendered = (() => { let variablePath = `bear-palettes/${themeName}`; // 简单的适配几个特殊主题 @@ -312,8 +316,6 @@ function compilerForMWeb4({ filePath }) { case "lark": variablePath = `mweb-lark`; // 这个可以直接解析入口文件，因为没有 import bear-default.scss break; - default: - break; } return sassExtract.renderSync({ file: `${args.themeDir}/${variablePath}.scss`, @@ -399,26 +401,14 @@ ${css}`; function write({ filePath, css }) { fs.ensureDirSync(args.distDir); - const { namer } = platformConfig[args.platform]; - const filename = path.basename(filePath); // with extension - const outFile = `${args.distDir}/${namer(path.parse(filename).name)}`; - fs.writeFile(outFile, css, (error) => { - if (error) { - console.log(`写入文件失败：${outFile}`, error); - process.exit(1); - } else console.log(`输出：${outFile}`); - }); -} - -function writerForMWeb({ filePath, css }) { - fs.ensureDirSync(args.distDir); - fs.ensureDirSync(args.distDir + '/dark'); - fs.ensureDirSync(args.distDir + '/light'); - const { namer } = platformConfig[args.platform]; - const themeName = filePath.match(/mweb-(.*)\.scss$/)[1]; // eg: ayu, lark, etc. - const filename = filePath.match(/(mweb-.*)\.scss$/)[1]; + fs.ensureDirSync(args.distDir + "/dark"); + fs.ensureDirSync(args.distDir + "/light"); + const { namer, themeConfig } = platformConfig[args.platform]; + const themeName = platformConfig[args.platform].getThemeName(filePath); const isDark = themeConfig[themeName].mode == "dark"; - const outFile = `${args.distDir}/${isDark ? 'dark' : 'light'}/${namer(filename)}`; + const outFile = `${args.distDir}/${isDark ? "dark" : "light"}/${namer( + getFileNameWithoutExtension(filePath) + )}`; fs.writeFile(outFile, css, (error) => { if (error) { console.log(`写入文件失败：${outFile}`, error); @@ -441,11 +431,24 @@ function main() { files.forEach(async (filePath) => { try { + if (cfg.themeConfig) { + const themeName = platformConfig[args.platform].getThemeName(filePath); + console.log(`检查主题配置是否存在：${themeName}`); + if (!cfg.themeConfig[themeName]) { + console.log( + `主题配置不存在，需要在主题配置文件中添加配置项：${themeName}` + ); + process.exit(1); + } + } + console.log(`编译中：${filePath}`); let css = cfg.compiler ? await cfg.compiler({ filePath }) : await compile({ filePath }); - cfg.writer + + console.log(`写入文件中：${filePath}`); + cfg.writer ? await cfg.writer({ filePath, css }) : await write({ filePath, css }); } catch (err) { diff --git a/scripts/utils.js b/scripts/utils.js index 00a4eab..7462fcc 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -17,6 +17,14 @@ function adjust(color, amount) { ); } +function getFileName (filePath) { + return filePath.match(/([a-zA-Z\-]*\..*)$/)[1]; // eg: mweb-ayu +} + +function getFileNameWithoutExtension (filePath) { + return filePath.match(/([a-zA-Z\-]*)\..*$/)[1]; // eg: mweb-ayu +} + module.exports = { - adjust, + adjust, getFileName, getFileNameWithoutExtension }; diff --git a/src/themes/typora-config.js b/src/themes/typora-config.js new file mode 100644 index 0000000..30aa142 --- /dev/null +++ b/src/themes/typora-config.js @@ -0,0 +1,83 @@ +/** + * 每次新增一个 typora 主题文件，都需要在这里新增一项，字段包括： + * - file: 文件名 + * - mode（可选）: "dark"，是否是深色主题 + */ + +const themes = { + ayu: { file: "typora-ayu.scss" }, + "ayu-mirage": { + file: "typora-ayu-mirage.scss", + mode: "dark", + }, + charcoal: { + file: "typora-charcoal.scss", + mode: "dark", + }, // Night Text Theme + cobalt: { + file: "typora-cobalt.scss", + mode: "dark", + }, + contrast: { file: "typora-contrast.scss" }, + "d-boring": { + file: "typora-d-boring.scss", + }, + "dark-graphite": { + file: "typora-dark-graphite.scss", + mode: "dark", + }, + dieci: { + file: "typora-dieci.scss", + mode: "dark", + }, + dracula: { + file: "typora-dracula.scss", + mode: "dark", + }, + "duotone-heat": { + file: "typora-duotone-heat.scss", + }, + "duotone-light": { + file: "typora-duotone-light.scss", + }, + gandalf: { file: "typora-gandalf.scss" }, + gotham: { + file: "typora-gotham.scss", + mode: "dark", + }, + lighthouse: { + file: "mweb-lighthouse.scss", + mode: "dark", + }, + lark: { file: "typora-lark.scss" }, + "lark-bold-color": { + file: "typora-lark-bold-color.scss", + }, + nord: { + file: "typora-nord.scss", + mode: "dark", + }, + "olive-dunk": { + file: "typora-olive-dunk.scss", + }, + panic: { + file: "typora-panic.scss", + mode: "dark", + }, + "red-graphite": { + file: "typora-red-graphite.scss", + }, + "solarized-dark": { + file: "typora-solarized-dark.scss", + mode: "dark", + }, + "solarized-light": { + file: "typora-solarized-light.scss", + }, + toothpaste: { + file: "typora-toothpaste.scss", + mode: "dark", + }, +}; + +module.exports = themes;