diff --git a/.vscode/settings.json b/.vscode/settings.json index ca6fe06..28ad01f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,6 @@ { - "git.ignoreLimitWarning": true + "git.ignoreLimitWarning": true, + "cSpell.words": [ + "Fontmin" + ] } \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..30a5c92 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# web font serverless 版 + +[在线尝试地址](http://webfontserverless.shenzilong.cn/) diff --git a/apps/backend/malagu.yml b/apps/backend/malagu.yml index deae007..a33e1f0 100644 --- a/apps/backend/malagu.yml +++ b/apps/backend/malagu.yml @@ -2,8 +2,9 @@ targets: - backend malagu: - # serve-static: - # root: .malagu/frontend/dist + serve-static: + # apiPath: /* + apiPath: /api/* faas-adapter: customDomain: @@ -11,3 +12,8 @@ malagu: service: name: web_font # 默认值是 malagu + includeModules: true + webpack: + config: + externals: fontmin + diff --git a/apps/backend/package.json b/apps/backend/package.json index 36a7178..b5b3979 100644 --- a/apps/backend/package.json +++ b/apps/backend/package.json @@ -12,7 +12,9 @@ "dependencies": { "@malagu/fc-adapter": "latest", "@malagu/mvc": "latest", - "@malagu/serve-static": "latest" + "@malagu/serve-static": "latest", + "fontmin": "^0.9.8", + "zip-a-folder": "^0.1.0" }, "devDependencies": { "@malagu/cli": "latest", @@ -27,4 +29,4 @@ "deploy:pre": "malagu deploy -m pre", "deploy:prod": "malagu deploy -m prod" } -} \ No newline at end of file +} diff --git a/apps/backend/src/fontmin.ts b/apps/backend/src/fontmin.ts new file mode 100644 index 0000000..c2c7e3c --- /dev/null +++ b/apps/backend/src/fontmin.ts @@ -0,0 +1,91 @@ +import { Controller, File, Get, Query } from "@malagu/mvc/lib/node"; +import { Context } from "@malagu/web/lib/node"; +import { createHash } from "crypto"; +//@ts-ignore +import * as Fontmin from "fontmin"; +import { promises as fs } from "fs"; +import * as path from "path"; +import { join } from "path"; +//@ts-ignore +import { zip } from "zip-a-folder"; +import { Stream } from "stream"; + +const font_src = path.join(__dirname, "../../frontend/font"); +console.log("[__dirname]", __dirname); +console.log("[font_src]", font_src); +@Controller("api") +export class FontMinController { + @Get("generate_fonts_dynamically") + @File() + async generate_fonts_dynamically( + @Query("text") text: string, + @Query("font") font: string, + @Query("temp") temp: string = "true", + @Query("type") type: string = "ttf", + ) { + console.log("字体请求", { text, font, temp, type }); + + text += "●"; + const res = Context.getResponse(); + + const hash = createHash("md5"); + hash.update(`${type}${font}${text}`); + const hash_str = hash.digest("hex"); + + const srcPath = path.join(font_src, `${font.replace(/.ttf$/, "")}.ttf`); // 字体源文件 + const outPath = `asset/dynamically/${hash_str}`; + const destPath = `./${outPath}`; // 输出路径 + + const full_path = join(__dirname, "../../", destPath, `${font}.${type}`); + /** 需要持久化 */ + if (temp !== "true") { + try { + return await fs.readFile(full_path); + } catch (error) { + console.log(`开始生成 ${full_path}`, error); + } + } + // 初始化 + const fontmin = new Fontmin() + .src(srcPath) // 输入配置 + .use( + Fontmin.glyph({ + text, // 所需文字 + }), + ); + + if ("eot" === type) { + fontmin.use(Fontmin.ttf2eot()); // eot 转换插件 + } + if ("woff" === type) { + fontmin.use(Fontmin.ttf2woff()); // eot 转换插件 + } + if ("svg" === type) { + fontmin.use(Fontmin.ttf2svg()); // eot 转换插件 + } + /** 缓存数据 */ + if (temp !== "true") { + fontmin.dest(destPath); + } + + // 执行 + return new Promise((resolve, reject) => { + fontmin.run(async function (err: Error, files: any[]) { + if (err) { + // 异常捕捉 + reject(err); + } else { + const buffer = files.filter((f) => + /** 筛选需要的类型 */ + (f.history[f.history.length - 1] as string).endsWith(type), + )[0]._contents; + console.log("[buffer]", Buffer.isBuffer(buffer)); + const bufferStream = new Stream.PassThrough(); + bufferStream.end(buffer); + bufferStream.pipe(res); + // resolve(buffer); // 成功 + } + }); + }); + } +} diff --git a/apps/backend/src/home-controller.ts b/apps/backend/src/home-controller.ts deleted file mode 100644 index d3a3de2..0000000 --- a/apps/backend/src/home-controller.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Controller, Get, Text } from "@malagu/mvc/lib/node"; - -@Controller() -export class HomeController { - @Get("/12") - @Text() - home(): string { - console.log(222); - - return "Welcome to Malagu"; - } -} diff --git a/apps/backend/src/module.ts b/apps/backend/src/module.ts index 3db6f3d..2455a40 100644 --- a/apps/backend/src/module.ts +++ b/apps/backend/src/module.ts @@ -1,5 +1,4 @@ -import './home-controller'; +import './fontmin'; import { autoBind } from '@malagu/core'; -console.log("app start"); export default autoBind(); diff --git a/apps/frontend/src/App.vue b/apps/frontend/src/App.vue index 26d5731..33af2c6 100644 --- a/apps/frontend/src/App.vue +++ b/apps/frontend/src/App.vue @@ -1,27 +1,80 @@