feat: optimize Material Symbols
This commit is contained in:
Michael Zetterberg
277
scripts/material-symbols-update.mjs
Normal file
277
scripts/material-symbols-update.mjs
Normal file
@@ -0,0 +1,277 @@
|
||||
// @ts-check
|
||||
import crypto from 'node:crypto';
|
||||
import { mkdir, readFile, rm, writeFile } from 'node:fs/promises';
|
||||
import { createWriteStream } from 'node:fs';
|
||||
import { resolve, join } from 'node:path';
|
||||
import { Readable } from 'node:stream';
|
||||
import { pipeline } from 'node:stream/promises';
|
||||
|
||||
import stringify from 'json-stable-stringify-without-jsonify';
|
||||
|
||||
// Defines where the font lives
|
||||
const DESIGN_SYSTEM_FONT_DIR = `./packages/design-system/public/_static/fonts/material-symbols`;
|
||||
const WEB_FONT_DIR = `./apps/scandic-web/public/_static/fonts/material-symbols`;
|
||||
|
||||
// Defines the settings for the font
|
||||
const FONT_BASE_URL = `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0..1,0`;
|
||||
|
||||
// Defines the subset of icons for the font
|
||||
const icons = [
|
||||
'accessibility',
|
||||
'accessible',
|
||||
'add',
|
||||
'add_circle',
|
||||
'air',
|
||||
'air_purifier_gen',
|
||||
'apparel',
|
||||
'arrow_back',
|
||||
'arrow_forward',
|
||||
'arrow_right',
|
||||
'arrow_upward',
|
||||
'asterisk',
|
||||
'bakery_dining',
|
||||
'beach_access',
|
||||
'bed',
|
||||
'business_center',
|
||||
'calendar_add_on',
|
||||
'calendar_month',
|
||||
'calendar_today',
|
||||
'call',
|
||||
'call_quality',
|
||||
'camera',
|
||||
'cancel',
|
||||
'chair',
|
||||
'check',
|
||||
'check_box',
|
||||
'check_circle',
|
||||
'checkroom',
|
||||
'chevron_left',
|
||||
'chevron_right',
|
||||
'close',
|
||||
'coffee',
|
||||
'compare_arrows',
|
||||
'concierge',
|
||||
'connected_tv',
|
||||
'content_copy',
|
||||
'contract',
|
||||
'countertops',
|
||||
'credit_card',
|
||||
'credit_card_heart',
|
||||
'deck',
|
||||
'delete',
|
||||
'desk',
|
||||
'device_thermostat',
|
||||
'diamond',
|
||||
'dining',
|
||||
'directions',
|
||||
'downhill_skiing',
|
||||
'download',
|
||||
'dresser',
|
||||
'edit',
|
||||
'edit_square',
|
||||
'electric_bike',
|
||||
'electric_car',
|
||||
'elevator',
|
||||
'emoji_transportation',
|
||||
'error',
|
||||
'error_circle_rounded',
|
||||
'exercise',
|
||||
'family_restroom',
|
||||
'fastfood',
|
||||
'favorite',
|
||||
'fax',
|
||||
'featured_seasonal_and_gifts',
|
||||
'filter',
|
||||
'filter_alt',
|
||||
'floor_lamp',
|
||||
'garage',
|
||||
'globe',
|
||||
'groups',
|
||||
'health_and_beauty',
|
||||
'heat',
|
||||
'hiking',
|
||||
'home',
|
||||
'hot_tub',
|
||||
'imagesmode',
|
||||
'info',
|
||||
'iron',
|
||||
'kayaking',
|
||||
'kettle',
|
||||
'keyboard_arrow_down',
|
||||
'keyboard_arrow_up',
|
||||
'laundry',
|
||||
'link',
|
||||
'liquor',
|
||||
'local_bar',
|
||||
'local_cafe',
|
||||
'local_convenience_store',
|
||||
'local_laundry_service',
|
||||
'local_parking',
|
||||
'location_city',
|
||||
'location_on',
|
||||
'lock',
|
||||
'luggage',
|
||||
'mail',
|
||||
'map',
|
||||
'meeting_room',
|
||||
'mode_fan',
|
||||
'museum',
|
||||
'nature',
|
||||
'nightlife',
|
||||
'open_in_new',
|
||||
'pan_zoom',
|
||||
'pedal_bike',
|
||||
'person',
|
||||
'pets',
|
||||
'phone',
|
||||
'pool',
|
||||
'refresh',
|
||||
'remove',
|
||||
'restaurant',
|
||||
'room_service',
|
||||
'sauna',
|
||||
'search',
|
||||
'sell',
|
||||
'shopping_bag',
|
||||
'skateboarding',
|
||||
'smoke_free',
|
||||
'smoking_rooms',
|
||||
'spa',
|
||||
'sports_esports',
|
||||
'sports_golf',
|
||||
'sports_tennis',
|
||||
'star',
|
||||
'straighten',
|
||||
'styler',
|
||||
'swipe',
|
||||
'sync_saved_locally',
|
||||
'theater_comedy',
|
||||
'train',
|
||||
'travel',
|
||||
'tv_remote',
|
||||
'upload',
|
||||
'visibility',
|
||||
'visibility_off',
|
||||
'warning',
|
||||
'water_full',
|
||||
'wifi',
|
||||
];
|
||||
|
||||
function createHash(value) {
|
||||
const stringified = stringify(value);
|
||||
const hash = crypto.createHash('sha256');
|
||||
hash.update(stringified);
|
||||
return hash.digest('hex');
|
||||
}
|
||||
|
||||
const hash = createHash(icons).substring(0, 8);
|
||||
|
||||
async function fetchIconUrl(url) {
|
||||
const response = await fetch(url, {
|
||||
headers: {
|
||||
Accept:
|
||||
'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7',
|
||||
'User-Agent':
|
||||
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36',
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
console.error(`Unable to fetch woff2 for ${url}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const text = await response.text();
|
||||
|
||||
const isWoff2 = /format\('woff2'\)/.test(text);
|
||||
if (!isWoff2) {
|
||||
console.error(`Unable to identify woff2 font in response`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const srcUrl = text.match(/src: url\(([^)]+)\)/);
|
||||
|
||||
if (srcUrl && srcUrl[1]) {
|
||||
return srcUrl[1];
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
async function download(url, destFolder) {
|
||||
const dest = resolve(join(destFolder, `/rounded-${hash}.woff2`));
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error(`Unable to fetch ${url}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (!response.body) {
|
||||
console.error(`Bad response from ${url}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const fileStream = createWriteStream(dest);
|
||||
|
||||
// @ts-expect-error: type mismatch
|
||||
const readableNodeStream = Readable.fromWeb(response.body);
|
||||
|
||||
await pipeline(readableNodeStream, fileStream);
|
||||
} catch (error) {
|
||||
console.error(`Error downloading file from ${url}:`, error);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
async function cleanFontDirs(folderPath) {
|
||||
await rm(DESIGN_SYSTEM_FONT_DIR, { recursive: true, force: true });
|
||||
await mkdir(DESIGN_SYSTEM_FONT_DIR, { recursive: true });
|
||||
|
||||
await rm(WEB_FONT_DIR, { recursive: true, force: true });
|
||||
await mkdir(WEB_FONT_DIR, { recursive: true });
|
||||
}
|
||||
|
||||
async function updateFontCSS() {
|
||||
const file = './packages/design-system/lib/fonts.css';
|
||||
|
||||
const css = await readFile(file, {
|
||||
encoding: 'utf-8',
|
||||
});
|
||||
|
||||
await writeFile(
|
||||
file,
|
||||
css.replace(
|
||||
/url\(\/_static\/fonts\/material-symbols\/rounded[^)]+\)/,
|
||||
`url(/_static/fonts/material-symbols/rounded-${hash}.woff2)`
|
||||
),
|
||||
{
|
||||
encoding: 'utf-8',
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const fontUrl = `${FONT_BASE_URL}&icon_names=${icons.join(',')}&display=block`;
|
||||
|
||||
const iconUrl = await fetchIconUrl(fontUrl);
|
||||
|
||||
if (iconUrl) {
|
||||
await cleanFontDirs();
|
||||
|
||||
await download(iconUrl, DESIGN_SYSTEM_FONT_DIR);
|
||||
await download(iconUrl, WEB_FONT_DIR);
|
||||
|
||||
await updateFontCSS();
|
||||
|
||||
console.log('Successfully updated icons!');
|
||||
process.exit(0);
|
||||
} else {
|
||||
console.error(
|
||||
`Unable to find the icon font src URL in CSS response from Google Fonts at ${fontUrl}`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
main();
|
||||
Reference in New Issue
Block a user