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

Also push up the ttf font

Browse source
This commit is contained in:
Gordon Pedersen 2024-05-21 14:07:38 +10:00
parent d058278cb2
commit 3a9e6f0fc4
3 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -1,9 +1,10 @@
<html> <html>
<head> <head>
<title>FluentUI Emoji</title> <title>FluentUI Emoji</title>
<link rel="stylesheet" href="/css/SegoeUIEmoji.css">
<link rel="stylesheet" id="emoji-css" href="/css/animated.css"> <link rel="stylesheet" id="emoji-css" href="/css/animated.css">
<style> <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 {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, SegoeUIEmoji, 'Segoe UI Emoji';}
body{ --fluentui-high-contrast-color:#0088FF; } body{ --fluentui-high-contrast-color:#0088FF; }
figure {text-align: center;} figure {text-align: center;}
figure>:not(figcaption) { width: 256px; height: 256px; display:block; } figure>:not(figcaption) { width: 256px; height: 256px; display:block; }

28
index.ts
View file

@ -10,9 +10,10 @@ const cssDir = distDir + '/css'
if(!await exists(cssDir)) await mkdir(cssDir) if(!await exists(cssDir)) await mkdir(cssDir)
// setup input dirs // setup input dirs
const fluentDir = (process.env.FLUENTUI_EMOJI_DIR || './sources/fluentui-emoji') + '/assets' const sourcesDir = (process.env.SOURCES_DIR || './sources')
const fluentDir = (process.env.FLUENTUI_EMOJI_DIR || sourcesDir + '/fluentui-emoji') + '/assets'
const fluentList = await readdir(fluentDir) const fluentList = await readdir(fluentDir)
const animatedDir = (process.env.ANIMATED_FLUENT_EMOJIS_DIR || './sources/Animated-Fluent-Emojis') + '/Emojis' const animatedDir = (process.env.ANIMATED_FLUENT_EMOJIS_DIR || sourcesDir + '/Animated-Fluent-Emojis') + '/Emojis'
const animatedCatList = await readdir(animatedDir) const animatedCatList = await readdir(animatedDir)
// generate a list of all the animated emojis, // generate a list of all the animated emojis,
@ -86,7 +87,7 @@ await Promise.all(fluentList.map(async (folder) => {
case 'keycap #': imgAnimPath = animatedList.get("keycap number sign"); break; case 'keycap #': imgAnimPath = animatedList.get("keycap number sign"); break;
case 'keycap *': imgAnimPath = animatedList.get("keycap asterisk"); break; case 'keycap *': imgAnimPath = animatedList.get("keycap asterisk"); break;
case 'pouting face': imgAnimPath = animatedList.get("enraged face"); break; case 'pouting face': imgAnimPath = animatedList.get("enraged face"); break;
case 'melting face': imgAnimPath = './sources/melting-face_1fae0.png'; break; case 'melting face': imgAnimPath = sourcesDir + '/melting-face_1fae0.png'; break;
default: console.warn(`could not find animated ${metadata.glyph} ${inAnim}. Defaulting to 3D version: ${img3DPath}`) default: console.warn(`could not find animated ${metadata.glyph} ${inAnim}. Defaulting to 3D version: ${img3DPath}`)
} }
} }
@ -120,12 +121,12 @@ await Promise.all(fluentList.map(async (folder) => {
})) }))
// create file references for the css files // create file references for the css files
const cssAnim = Bun.file(path.join(cssDir, 'animated.css')) const cssAnim = Bun.file(cssDir + '/animated.css')
const css3d = Bun.file(path.join(cssDir, '3d.css')) const css3d = Bun.file(cssDir + '/3d.css')
const cssColor = Bun.file(path.join(cssDir, 'color.css')) const cssColor = Bun.file(cssDir + '/color.css')
const cssFlat = Bun.file(path.join(cssDir, 'flat.css')) const cssFlat = Bun.file(cssDir + '/flat.css')
const cssHighContrast = Bun.file(path.join(cssDir, 'high-contrast.css')) const cssHighContrast = Bun.file(cssDir + '/high-contrast.css')
const cssHighContrastMask = Bun.file(path.join(cssDir, 'high-contrast-mask.css')) const cssHighContrastMask = Bun.file(cssDir + '/high-contrast-mask.css')
// output the css files // output the css files
await Bun.write(cssAnim, cssRules.animated.join('\n')) await Bun.write(cssAnim, cssRules.animated.join('\n'))
@ -135,8 +136,15 @@ await Bun.write(cssFlat, cssRules.flat.join('\n'))
await Bun.write(cssHighContrast, cssRules.highContrast.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')}`) await Bun.write(cssHighContrastMask, `:root{--fluentui-high-contrast-color:#212121}\n${cssRules.highContrastMask.join('\n')}`)
// do the same for the font
const fontSrc = Bun.file(sourcesDir + '/seguiemj.ttf')
const fontDst = Bun.file(distDir + '/seguiemj.ttf')
const cssFont = Bun.file(cssDir + '/SegoeUIEmoji.css')
await Bun.write(fontDst, fontSrc)
await Bun.write(cssFont, /*css*/`@font-face{font-family:SegoeUIEmoji;src:url(/seguiemj.ttf);}`)
const templateHtml = Bun.file('./index.html') const templateHtml = Bun.file('./index.html')
const html = (await templateHtml.text()).replace('{{content}}', htmlTags.join('\n ')) const html = (await templateHtml.text()).replace('{{content}}', htmlTags.join('\n '))
const htmlFile = Bun.file(path.join(distDir, 'index.html')) const htmlFile = Bun.file(distDir + '/index.html')
await Bun.write(htmlFile, html) await Bun.write(htmlFile, html)

BIN
sources/seguiemj.ttf Normal file
View file

Binary file not shown.