Scale Kali Linux back up

Fixes regression from aef7b01 by
scaling kali logo up to fit to SVG height (instead of width).
This makes kali wider than 1em, breaking the existing .fa-fw style.
Work around this by overwriting .fa-fw font-size for wider icons to
scale them back down.

Makefile

@@ -1,6 +1,7 @@
 name := font-logos
 dest := assets
-font_exts := .ttf .woff .woff2
+out_json_ext := .out.json
+font_exts := .ttf .woff .woff2 $(out_json_ext)
 font_assets := $(foreach ext,$(font_exts),$(dest)/$(name)$(ext))
 json_file = $(dest)/$(name).json
 version = $(shell jq -r .version package.json)
@@ -11,6 +12,7 @@ preview_width := 888
 export START_CODEPOINT
 export FONT_NAME=$(name)
 export OUTPUT_DIR=$(dest)
+export JSON_FILE=$(json_file)
 
 all_files=$(font_assets) $(dest)/$(name).css $(dest)/preview.html $(dest)/readme-header.png README.md
 
@@ -40,7 +42,7 @@ $(json_file): scripts/generate-json.mjs icons.tsv package.json
 $(font_assets)&: scripts/generate-font.py icons.tsv $(shell find vectors) $(json_file)
 	python $<
 
-%: templates/$$*.njk icons.tsv scripts/render-template.mjs $(json_file)
+%: templates/$$*.njk icons.tsv scripts/render-template.mjs $(json_file) $(dest)/$(name)$(out_json_ext)
 	node scripts/render-template.mjs $< $@
 
 $(dest)/readme-header.png: $(dest)/readme-header.html $(font_assets) $(dest)/font-logos.css

package.json

@@ -21,6 +21,7 @@
     "README.md"
   ],
   "devDependencies": {
+    "lodash.merge": "^4.6.2",
     "nunjucks": "^3.2.3"
   }
 }

scripts/generate-font.py

@@ -6,12 +6,13 @@
 autowidth = False
 font_em = 512
 font_design_size = 16
+jsonfile = os.environ['JSON_FILE']
 fontname = os.environ['FONT_NAME']
 outputdir = os.environ['OUTPUT_DIR']
 vectorsdir = 'vectors'
 start_codepoint = int(os.environ['START_CODEPOINT'], base=0)
 design_px = font_em // font_design_size
-
+outjsonfile = os.path.join(outputdir, fontname+'.out.json')
 font = fontforge.font()
 # font.encoding = 'UnicodeFull'
 font.fontname = fontname
@@ -28,16 +29,30 @@
 glyph = font.createChar(32)
 glyph.width = 200
 
-def addGlyph(name, source, code):
-	glyph = font.createChar(code, name)
-	glyph.importOutlines(source)
+outputInfo = {
+	'em': font.em,
+	'icons': {},
+}
+
+def addIcon(iconId, icon):
+	glyph = font.createChar(icon['codepoint'], icon['name'])
+	glyph.importOutlines(
+		os.path.join(vectorsdir, (iconId+'.svg')),
+	)
 	glyph.left_side_bearing = 0
 	glyph.right_side_bearing = 0
 
-with open(f'{outputdir}/{fontname}.json') as f:
-	for icon in json.load(f)['icons']:
-		addGlyph(icon['name'], os.path.join(vectorsdir, (icon['id']+'.svg')), start_codepoint+int(icon['offset']))
+	outputInfo['icons'][iconId] = {
+		'width': glyph.width,
+	}
+
+with open(jsonfile) as f:
+	for iconId, icon in json.load(f)['icons'].items():
+		addIcon(iconId, icon)
 
 font.generate(os.path.join(outputdir, fontname + '.ttf'))
 font.generate(os.path.join(outputdir, fontname + '.woff'))
 font.generate(os.path.join(outputdir, fontname + '.woff2'))
+
+with open(outjsonfile, 'w') as f:
+	json.dump(outputInfo, f, indent=2)

scripts/generate-json.mjs

@@ -1,21 +1,26 @@
-import fs from 'node:fs';
+import fs from 'node:fs/promises';
 import {tsvFileToObjects} from './tsv.mjs';
 const iconsFile = './icons.tsv';
 
-function getIcons() {
+async function getIcons() {
 	const startCodepoint = parseInt(process.env.START_CODEPOINT);
-	return tsvFileToObjects(iconsFile, {
+	let icons = tsvFileToObjects(iconsFile, {
 		'offset': parseInt,
+		'scale': s => s.toLowerCase() === 'true',
 	})
 		.map(r => ({...r, codepoint: startCodepoint + r.offset}))
+		.map(r => ({...r, variant: r.id.endsWith('-inverse')}))
+		.map(({id, ...r}) => [id, r])
 	;
+	icons = Object.fromEntries(icons);
+	return icons;
 }
 
-function readPackage() {
-	return JSON.parse(fs.readFileSync('package.json'));
+async function readPackage() {
+	return JSON.parse(await fs.readFile('package.json'));
 }
 
-const {version} = readPackage();
+const {version} = await readPackage();
 const [major, minor, patch] = version.match(/^(\d+)\.(\d+)\.(\d+)/).slice(1);
 
 const data = {
@@ -25,10 +30,10 @@ const data = {
 		major, minor, patch,
 		stable: parseInt(major) > 0 ? major : `${major}.${minor}.${patch}`,
 	},
-	icons: getIcons(),
+	icons: await getIcons(),
 };
 
-fs.writeFileSync(
+await fs.writeFile(
 	process.env.OUTPUT_DIR + '/' + process.env.FONT_NAME + '.json', 
 	JSON.stringify(data, null, 2)
 );

scripts/render-template.mjs

@@ -1,24 +1,30 @@
 import fs from 'node:fs';
 import nunjucks from 'nunjucks';
 import font from './data.mjs';
+import merge from 'lodash.merge';
 
 const [templateFile, outFile] = process.argv.slice(2);
 
+const outInfo = JSON.parse(
+  fs.readFileSync(`${process.env.OUTPUT_DIR}/${process.env.FONT_NAME}.out.json`));
+
 const context = {
-	font,
+	font: merge(font, outInfo),
 	classPrefix: 'fl-',
 	formats: [
 		{name: 'woff', ext: 'woff'}, 
 		{name: 'woff2', ext: 'woff2'}, 
 		{name: 'truetype', ext: 'ttf'}, 
 	],
 	icons: font.icons,
-	uniqueIcons: font.icons.filter(i => !i.id.endsWith('-inverse')),
+	uniqueIcons: Object.fromEntries(Object.entries(font.icons).filter(([,icon]) => !icon.variant)),
 };
 
 const env = new nunjucks.Environment(new nunjucks.FileSystemLoader(), {
 	throwOnUndefined: true,
 });
+env.addFilter('keys', obj => Object.keys(obj));
+env.addFilter('values', obj => Object.values(obj));
 env.addFilter('column', (objs, col) => objs.map(o => o[col]));
 env.addFilter('map', (array, fn) => array.map(fn));
 env.addFilter('maxLength', array => Math.max(...array.map(x => x.length)));

templates/README.md.njk

@@ -34,16 +34,18 @@ Available logos are:
 {%- macro img(id) %}<img src="vectors/{{ id }}.svg" width="24">{% endmacro %}
 {%- macro class(id) %}`fl-{{ id }}`{% endmacro %}
 {%- macro code(id) %}`<i class="fl-{{ id }}"></i>`{% endmacro %}
-{%- set nameW = icons|column('name')|maxLength %}
-{%- set maxIdLength = icons|column('id')|maxLength %}
+{%- set ids = icons|keys|sort %}
+{%- set nameW = icons|values|column('name')|maxLength %}
+{%- set maxIdLength = ids|maxLength %}
 {%- set imgW = maxIdLength + img("")|length %}
 {%- set classW = maxIdLength + class("")|length %}
 {%- set codeW = maxIdLength + code("")|length %}
 
 | {{ "Distribution"|center(nameW) }} | {{ "CSS class"|center(classW) }} | {{ "Code"|center(codeW) }} | Code point | Image
 | {{ "-".repeat(nameW) }} | {{ "-".repeat(classW) }} | {{ "-".repeat(codeW) }} | ---------- | -----------
-{%- for icon in icons|sort(null, null, "id") %}
-| {{ icon.name.padEnd(nameW) }} | {{ class(icon.id).padEnd(classW) }} | {{ code(icon.id).padEnd(codeW)|safe }} | `0x{{ icon.codepoint.toString(16) }}`   | {{ img(icon.id) }}
+{%- for id in ids %}
+{%- set icon=icons[id] %}
+| {{ icon.name.padEnd(nameW) }} | {{ class(id).padEnd(classW) }} | {{ code(id).padEnd(codeW)|safe }} | `0x{{ icon.codepoint.toString(16) }}`   | {{ img(id) }}
 {%- endfor %}
 
 ## Building ##

templates/assets/font-logos.css.njk

@@ -1,3 +1,4 @@
+{% set fwClass = classPrefix+'fw' %}
 @font-face {
   font-display: auto;
   font-family: "{{ font.name }}";
@@ -9,8 +10,8 @@
   {%- endfor -%}
 }
 
-{% for icon in icons -%}
-.{{ classPrefix }}{{ icon.id }}::before{% if not loop.last %}, {% endif %}
+{% for id, icon in icons -%}
+.{{ classPrefix }}{{ id }}::before{% if not loop.last %}, {% endif %}
 {% endfor %} {
   display: inline-block;
   font-family: "{{ font.name }}";
@@ -24,13 +25,19 @@
   font-smoothing: antialiased;
 }
 
-.{{ classPrefix }}fw {
+.{{ fwClass }} {
   text-align: center;
   width: 1em;
 }
 
-{%- for icon in icons %}
-.{{ classPrefix }}{{ icon.id }}::before {
+{%- for id, icon in icons %}
+.{{ classPrefix }}{{ id }}::before {
   content: "\{{ icon.codepoint.toString(16) }}";
 }
+{%- if icon.width > font.em %}
+.{{ fwClass }}.{{ classPrefix }}{{ id }}::before {
+  font-size: {{ font.em/icon.width }}em;
+  line-height: {{ icon.width/font.em }}em;
+}
+{%- endif -%}
 {%- endfor -%}

templates/assets/preview.html.njk

@@ -24,8 +24,9 @@
 <body>
 	<table>
 		<tbody>
-			{% for icon in icons|sort(false, false, "id") %}
-				{% set id=icon.id %}
+			{% set ids=icons|keys|sort %}
+			{% for id in ids %}
+				{% set icon=icons[id] %}
 				<tr>
 						<td><code>fl-{{ id }}</code></td>
 					{% for size in [12,14,16,18,20,24,28,32,36,42,48,54] %}

templates/assets/readme-header.html.njk

@@ -30,6 +30,8 @@
 
 <body>
 	<div>
-		{% for icon in icons|sort(false, false, "id") %}<i class="fl-{{icon.id}} fl-fw"></i>{% endfor %}
+		{% for id in icons|keys|sort %}
+			<i class="fl-{{id}} fl-fw"></i>
+		{% endfor %}
 	</div>
 </body>