From c6a43654b2b8e2d56439e4bc9c6c91107410534b Mon Sep 17 00:00:00 2001 From: Gordon Pedersen Date: Fri, 17 May 2024 17:07:36 +1000 Subject: [PATCH] outputs everything in the right format and outputs css files --- .gitignore | 1 + index.ts | 80 ++++++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 69 insertions(+), 12 deletions(-) diff --git a/.gitignore b/.gitignore index 3c135f4..a91b961 100644 --- a/.gitignore +++ b/.gitignore @@ -174,3 +174,4 @@ dist # Finder (MacOS) folder config .DS_Store emoji +css diff --git a/index.ts b/index.ts index b1f6c26..c2f01c7 100644 --- a/index.ts +++ b/index.ts @@ -3,6 +3,8 @@ import * as path from 'path' const emojiDir = './emoji' if(!await exists(emojiDir)) await mkdir(emojiDir) +const cssDir = './css' +if(!await exists(cssDir)) await mkdir(cssDir) const fluentDir = './sources/fluentui-emoji/assets' const fluentList = await readdir(fluentDir) @@ -14,13 +16,20 @@ for(let c in animatedCatList) { const catDir = `${animatedDir}/${category}` const catFiles = await readdir(catDir) catFiles.forEach((filename) => { - animatedList.set(path.parse(filename).name, `${catDir}/${filename}`) + let key = path.parse(filename).name.toLowerCase()//.replace(/[\(\)'’“”]/g, '') + animatedList.set(key, `${catDir}/${filename}`) }) } +const rootURL = process.env.ROOT_URL || "https://flumoji.pages.dev/emoji/" +const cssRules = { + animated: [] as string[], + threeD: [] as string[], + color: [] as string[], + flat: [] as string[], + highContrast: [] as string[] +} -const mapping = [] - -await fluentList.forEach(async (folder) => { +await Promise.all(fluentList.map(async (folder) => { let thisEmojiIn = `${fluentDir}/${folder}` const metadataFile = Bun.file(`${thisEmojiIn}/metadata.json`) const metadata = await metadataFile.json() @@ -35,19 +44,66 @@ await fluentList.forEach(async (folder) => { const inHighContrast = `${thisEmojiIn}/High Contrast` // we have to search for the appropriate animated folder - let title = folder - if(metadata.unicodeSkintones) title += ' Light Skin Tone' + let title = metadata.tts.toLowerCase().replace(/[:]/g, '') + // if(metadata.unicodeSkintones) title += ' Light Skin Tone' - let imgAnim = Bun.file(animatedList.get(title) || `${in3d}/${(await readdir(in3d))[0]}`) + let imgAnimPath = animatedList.get(title) + const img3DPath = `${in3d}/${(await readdir(in3d))[0]}` + const imgColorPath = `${inColor}/${(await readdir(inColor))[0]}` + const imgFlatPath = `${inFlat}/${(await readdir(inFlat))[0]}` + const imgHighContrastPath = `${inHighContrast}/${(await readdir(inHighContrast))[0]}` - const img3d = Bun.file(`${in3d}/${(await readdir(in3d))[0]}`) - const imgColor = Bun.file(`${inColor}/${(await readdir(inColor))[0]}`) - const imgFlat = Bun.file(`${inFlat}/${(await readdir(inFlat))[0]}`) - const imgHighContrast = Bun.file(`${inHighContrast}/${(await readdir(inHighContrast))[0]}`) + if(!imgAnimPath){ + // hard-coded matches: + switch(title){ + case 'keycap 0': imgAnimPath = animatedList.get("keycap digit zero"); break; + case 'keycap 1': imgAnimPath = animatedList.get("keycap digit one"); break; + case 'keycap 2': imgAnimPath = animatedList.get("keycap digit two"); break; + case 'keycap 3': imgAnimPath = animatedList.get("keycap digit three"); break; + case 'keycap 4': imgAnimPath = animatedList.get("keycap digit four"); break; + case 'keycap 5': imgAnimPath = animatedList.get("keycap digit five"); break; + case 'keycap 6': imgAnimPath = animatedList.get("keycap digit six"); break; + case 'keycap 7': imgAnimPath = animatedList.get("keycap digit seven"); break; + case 'keycap 8': imgAnimPath = animatedList.get("keycap digit eight"); break; + case 'keycap 9': imgAnimPath = animatedList.get("keycap digit nine"); break; + case 'keycap #': imgAnimPath = animatedList.get("keycap number sign"); break; + case 'keycap *': imgAnimPath = animatedList.get("keycap asterisk"); break; + case 'pouting face': imgAnimPath = animatedList.get("enraged face"); break; + default: console.warn(`could not find animated ${metadata.glyph} ${title}. Defaulting to 3D version: ${img3DPath}`) + } + + } + + const imgAnim = Bun.file(imgAnimPath || img3DPath) + const img3d = Bun.file(img3DPath) + const imgColor = Bun.file(imgColorPath) + const imgFlat = Bun.file(imgFlatPath) + const imgHighContrast = Bun.file(imgHighContrastPath) if(!await exists(`${thisEmojiOut}/animated.png`)) await Bun.write(`${thisEmojiOut}/animated.png`, imgAnim) if(!await exists(`${thisEmojiOut}/3d.png`)) await Bun.write(`${thisEmojiOut}/3d.png`, img3d) if(!await exists(`${thisEmojiOut}/color.svg`)) await Bun.write(`${thisEmojiOut}/color.svg`, imgColor) if(!await exists(`${thisEmojiOut}/flat.svg`)) await Bun.write(`${thisEmojiOut}/flat.svg`, imgFlat) if(!await exists(`${thisEmojiOut}/high-contrast.svg`)) await Bun.write(`${thisEmojiOut}/high-contrast.svg`, imgHighContrast) -}) \ No newline at end of file + + const cssRule = `[alt|="${metadata.glyph}"]{ content: url(${rootURL}${metadata.glyph}/{file}); }` + + + cssRules.animated.push(cssRule.replace("{file}", "animated.png")) + cssRules.threeD.push(cssRule.replace("{file}", "3d.png")) + cssRules.color.push(cssRule.replace("{file}", "color.svg")) + cssRules.flat.push(cssRule.replace("{file}", "flat.svg")) + cssRules.highContrast.push(cssRule.replace("{file}", "high-contrast.svg")) +})) + +const cssAnim = Bun.file(path.join(cssDir, 'animated.css')) +const css3d = Bun.file(path.join(cssDir, '3d.css')) +const cssColor = Bun.file(path.join(cssDir, 'color.css')) +const cssFlat = Bun.file(path.join(cssDir, 'flat.css')) +const cssHighContrast = Bun.file(path.join(cssDir, 'high-contrast.css')) + +await Bun.write(cssAnim, cssRules.animated.join('\n')) +await Bun.write(css3d, cssRules.threeD.join('\n')) +await Bun.write(cssColor, cssRules.color.join('\n')) +await Bun.write(cssFlat, cssRules.flat.join('\n')) +await Bun.write(cssHighContrast, cssRules.highContrast.join('\n')) \ No newline at end of file