death.au/fluent-emoji
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finished up and added a landing page for testing

Browse source 
Also added a melting-face animated emoji I found
This commit is contained in:
Gordon Pedersen 2024-05-20 17:05:38 +10:00
parent c6a43654b2
commit d058278cb2
6 changed files with 1438 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
index.html Normal file
View file

@ -0,0 +1,60 @@
<html>
<head>
<title>FluentUI Emoji</title>
<link rel="stylesheet" id="emoji-css" href="/css/animated.css">
<style>
body {display: flex; flex-flow: row wrap; justify-content:space-evenly; gap: 20px; background-color: #fff; color: #000; font-size: 18px; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
body{ --fluentui-high-contrast-color:#0088FF; }
figure {text-align: center;}
figure>:not(figcaption) { width: 256px; height: 256px; display:block; }
textarea {width: 100%; border-color: #000;}
#style-selector {flex-basis: 100%; text-align: center;}
#style-selector select { font-size: 25px; border-radius: 8px; padding: 10px; margin: 4px; border-color:#000; }
#style-selector textarea {text-align: center; padding:8px;}
[loading="lazy"]{content:none; mask-image: none;}
@media (prefers-color-scheme: dark) {
body, textarea, #style-selector select { background-color: #000; color: #fff; border-color: #fff; }
}
</style>
</head>
<body>
<div id="style-selector">
<select>
<option value="/css/animated.css">Animated</option>
<option value="/css/3d.css">3D</option>
<option value="/css/color.css">Color</option>
<option value="/css/flat.css">Flat</option>
<option value="/css/high-contrast.css">High Contrast</option>
<option value="/css/high-contrast-mask.css">High Contrast (as mask)</option>
</select>
<textarea><link rel="stylesheet" href="/css/animated.css"></textarea>
</div>
{{content}}
</body>
<script type="text/javascript">
// functionality for style selector dropdown and lazily loading images
const imageObserver = new IntersectionObserver((entries, observer) => entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.setAttribute('loading', 'loaded')
imageObserver.unobserve(entry.target)
}
}))
function setCss(path) {
document.querySelectorAll('[loading]:not([loading="lazy"])').forEach(e => {
e.setAttribute('loading', 'lazy')
imageObserver.observe(e)
})
document.querySelector('#style-selector textarea').value = `<link rel="stylesheet" href="${path.startsWith('/') ? new URL(window.location.href).origin : ''}${path}">`
if(path.endsWith('high-contrast-mask.css')) {
document.querySelector('#style-selector textarea').value +=`\n<style>html{--fluentui-high-contrast-color:#0088FF; /* your color here */}</style>`
}
document.getElementById('emoji-css').href = path
}
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll('[loading="lazy"]').forEach(image => imageObserver.observe(image))
document.querySelector('#style-selector select').addEventListener('change', (ev) => setCss(ev.target.value))
setCss(document.getElementById('emoji-css').href)
})
</script>
</html>

67
index.ts
View file

@ -1,15 +1,22 @@
import { mkdir, exists, readdir, copyFile } from "node:fs/promises"
import { mkdir, exists, readdir } from "node:fs/promises"
import * as path from 'path'
const emojiDir = './emoji'
// setup output dirs
const distDir = process.env.DIST_DIR || './dist'
if(!await exists(distDir)) await mkdir(distDir)
const emojiDir = distDir + '/emoji'
if(!await exists(emojiDir)) await mkdir(emojiDir)
const cssDir = './css'
const cssDir = distDir + '/css'
if(!await exists(cssDir)) await mkdir(cssDir)
const fluentDir = './sources/fluentui-emoji/assets'
// setup input dirs
const fluentDir = (process.env.FLUENTUI_EMOJI_DIR || './sources/fluentui-emoji') + '/assets'
const fluentList = await readdir(fluentDir)
const animatedDir = `./sources/Animated-Fluent-Emojis/Emojis`
const animatedDir = (process.env.ANIMATED_FLUENT_EMOJIS_DIR || './sources/Animated-Fluent-Emojis') + '/Emojis'
const animatedCatList = await readdir(animatedDir)
// generate a list of all the animated emojis,
// so we don't have to search through the folder later
const animatedList:Map<string, string> = new Map<string, string>()
for(let c in animatedCatList) {
const category = animatedCatList[c]
@ -20,22 +27,32 @@ for(let c in animatedCatList) {
animatedList.set(key, `${catDir}/${filename}`)
})
}
const rootURL = process.env.ROOT_URL || "https://flumoji.pages.dev/emoji/"
// set up the root url for the css rules
const rootURL = process.env.ROOT_URL || "https://flumoji.pages.dev"
const cssRules = {
animated: [] as string[],
threeD: [] as string[],
color: [] as string[],
flat: [] as string[],
highContrast: [] as string[]
highContrast: [] as string[],
highContrastMask: [] as string[]
}
const htmlTags = [] as string[]
// now, we're going to loop through all the emoji from the official repo
await Promise.all(fluentList.map(async (folder) => {
// gather the necessary information
let thisEmojiIn = `${fluentDir}/${folder}`
const metadataFile = Bun.file(`${thisEmojiIn}/metadata.json`)
const metadata = await metadataFile.json()
const thisEmojiOut = `${emojiDir}/${metadata.glyph}`
const thisEmojiDir = metadata.unicode.replaceAll(' ', '-')
const thisEmojiOut = `${emojiDir}/${thisEmojiDir}`
// create the output directory
if(!await exists(thisEmojiOut)) await mkdir(thisEmojiOut)
// copy the metadata across (not necessary?)
if(!await exists(`${thisEmojiOut}/metadata.json`)) await Bun.write(`${thisEmojiOut}/metadata.json`, metadataFile)
// for the purposes of this excersise, I'm only worried about default skin-tone
if(metadata.unicodeSkintones) thisEmojiIn = `${thisEmojiIn}/Default`
const in3d = `${thisEmojiIn}/3D`
@ -44,10 +61,10 @@ await Promise.all(fluentList.map(async (folder) => {
const inHighContrast = `${thisEmojiIn}/High Contrast`
// we have to search for the appropriate animated folder
let title = metadata.tts.toLowerCase().replace(/[:]/g, '')
// if(metadata.unicodeSkintones) title += ' Light Skin Tone'
const inAnim = metadata.tts.toLowerCase().replace(/[:]/g, '')
let imgAnimPath = animatedList.get(title)
// get the correct image file
let imgAnimPath = animatedList.get(inAnim)
const img3DPath = `${in3d}/${(await readdir(in3d))[0]}`
const imgColorPath = `${inColor}/${(await readdir(inColor))[0]}`
const imgFlatPath = `${inFlat}/${(await readdir(inFlat))[0]}`
@ -55,7 +72,7 @@ await Promise.all(fluentList.map(async (folder) => {
if(!imgAnimPath){
// hard-coded matches:
switch(title){
switch(inAnim){
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;
@ -69,41 +86,57 @@ await Promise.all(fluentList.map(async (folder) => {
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}`)
}
case 'melting face': imgAnimPath = './sources/melting-face_1fae0.png'; break;
default: console.warn(`could not find animated ${metadata.glyph} ${inAnim}. Defaulting to 3D version: ${img3DPath}`)
}
}
// create file references
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)
// output the files to the output folder
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)
const cssRule = `[alt|="${metadata.glyph}"]{ content: url(${rootURL}${metadata.glyph}/{file}); }`
// create the css rule ('{file}' to be replaced next)
const cssRule = `[data-emoji|="${metadata.glyph}"]{ content: url(${rootURL}/emoji/${thisEmojiDir}/{file}); }`
// replace '{file}' with the appropriate file name
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"))
cssRules.highContrastMask.push(`[data-emoji|="${metadata.glyph}"]{ mask-size: cover; background-color: var(--fluentui-high-contrast-color); mask-image: url(${rootURL}/emoji/${thisEmojiDir}/high-contrast.svg); }`)
htmlTags.push(`<figure><i data-emoji="${metadata.glyph}" title="${metadata.tts}" loading="lazy"></i><figcaption>${metadata.glyph} ${folder}<br><textarea><i data-emoji="${metadata.glyph}" title="${metadata.tts}"></i></textarea></figcaption></figure>`)
}))
// create file references for the css files
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'))
const cssHighContrastMask = Bun.file(path.join(cssDir, 'high-contrast-mask.css'))
// output the css files
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'))
await Bun.write(cssHighContrastMask, `:root{--fluentui-high-contrast-color:#212121}\n${cssRules.highContrastMask.join('\n')}`)
const templateHtml = Bun.file('./index.html')
const html = (await templateHtml.text()).replace('{{content}}', htmlTags.join('\n '))
const htmlFile = Bun.file(path.join(distDir, 'index.html'))
await Bun.write(htmlFile, html)

1318
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

3
package.json
View file

@ -3,7 +3,8 @@
"module": "index.ts",
"type": "module",
"devDependencies": {
"@types/bun": "latest"
"@types/bun": "latest",
"wrangler": "^3.57.0"
},
"peerDependencies": {
"typescript": "^5.0.0"

BIN
sources/melting-face_1fae0.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 MiB

7
wrangler.toml Normal file
View file

@ -0,0 +1,7 @@
# Generated by Wrangler on Mon May 20 2024 11:59:58 GMT+1000 (Australian Eastern Standard Time)
name = "flumoji"
compatibility_date = "2024-05-16"
pages_build_output_dir = "dist"
[env.production]
compatibility_date = "2024-05-16"