Adds template to generate glicons map for web components

gitkraken · May 16, 2024 · eccae9a · eccae9a
1 parent 7c6fb52
commit eccae9a
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 51 deletions.
diff --git a/.fantasticonrc.js b/.fantasticonrc.js
@@ -12,11 +12,12 @@ const config = {
 	fontTypes: ['woff2'],
 	normalize: true,
 	// @ts-ignore
-	assetTypes: ['html', 'scss', 'css', 'json'],
+	assetTypes: ['html', 'scss', 'css', 'json', 'sass'],
 	templates: {
 		html: './images/icons/template/icons-contribution.hbs',
 		scss: './images/icons/template/styles.hbs',
 		css: './images/icons/template/css-properties.hbs',
+		sass: './images/icons/template/icon-map.hbs',
 	},
 	formatOptions: {
 		json: {
@@ -29,6 +30,7 @@ const config = {
 		css: './dist/glicons-properties.scss',
 		html: './dist/icons-contribution.json',
 		json: './images/icons/template/mapping.json',
+		sass: './dist/glicons.ts',
 	},
 };
 

diff --git a/images/icons/template/icon-map.hbs b/images/icons/template/icon-map.hbs
@@ -0,0 +1,20 @@
+/*
+
+Must be placed at the end of body in the HTML file of any webview that needs it (because of CSP)
+
+<style nonce="#{cspNonce}">
+	@font-face {
+		font-family: '{{ name }}';
+		font-display: block;
+		src: {{{ fontSrc }}};
+	}
+</style>
+*/
+
+export const gliconsFontFamily = '{{ name }}';
+
+export const gliconsMap = Object.freeze({
+{{#each codepoints}}
+	'gl-{{ @key }}': '\\\{{ codepoint this }}',
+{{/each}}
+});
diff --git a/scripts/applyIconsContribution.mjs b/scripts/applyIconsContribution.mjs
@@ -10,6 +10,8 @@ const scssPromises = Promise.all([
 	fs.promises.readFile('./src/webviews/apps/shared/glicons.scss', 'utf8'),
 	fs.promises.readFile('./dist/glicons-properties.scss', 'utf8'),
 	fs.promises.readFile('./src/webviews/apps/shared/glicons-properties.scss', 'utf8'),
+	fs.promises.readFile('./dist/glicons.ts', 'utf8'),
+	fs.promises.readFile('./src/webviews/apps/shared/components/glicons.ts', 'utf8'),
 ]);
 
 let pending = [];
@@ -26,7 +28,7 @@ if (JSON.stringify(packageJSON.contributes.icons) !== JSON.stringify(icons.icons
 }
 
 // Update the scss file
-const [newScss, scss, newPropertiesScss, propertiesScss] = await scssPromises;
+const [newScss, scss, newPropertiesScss, propertiesScss, newMapTs, mapTs] = await scssPromises;
 
 if (scss !== newScss) {
 	pending.push(fs.promises.writeFile('./src/webviews/apps/shared/glicons.scss', newScss));
@@ -36,9 +38,14 @@ if (propertiesScss !== newPropertiesScss) {
 	pending.push(fs.promises.writeFile('./src/webviews/apps/shared/glicons-properties.scss', newPropertiesScss));
 }
 
+if (mapTs !== newMapTs) {
+	pending.push(fs.promises.writeFile('./src/webviews/apps/shared/components/glicons.ts', newMapTs));
+}
+
 pending.push(
 	fs.promises.rm('./dist/icons-contribution.json'),
 	fs.promises.rm('./dist/glicons.scss'),
 	fs.promises.rm('./dist/glicons-properties.scss'),
+	fs.promises.rm('./dist/glicons.ts'),
 );
 await Promise.allSettled(pending);
diff --git a/src/webviews/apps/shared/components/code-icon.ts b/src/webviews/apps/shared/components/code-icon.ts
@@ -1,8 +1,8 @@
 import { css, LitElement, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { gliconsMap } from './glicons';
 
-const iconMap = Object.freeze({
-	// codicons
+const codiconsMap = Object.freeze({
 	add: '\\ea60',
 	plus: '\\ea60',
 	'gist-new': '\\ea60',
@@ -573,50 +573,6 @@ const iconMap = Object.freeze({
 	percentage: '\\ec33',
 	'sort-percentage': '\\ec33',
 	'git-fetch': '\\f101',
-	// glicons
-	'gl-commit-horizontal': '\\f101',
-	'gl-graph': '\\f102',
-	'gl-next-commit': '\\f103',
-	'gl-prev-commit-menu': '\\f104',
-	'gl-prev-commit': '\\f105',
-	'gl-compare-ref-working': '\\f106',
-	'gl-branches-view': '\\f107',
-	'gl-commit-view': '\\f108',
-	'gl-commits-view': '\\f109',
-	'gl-compare-view': '\\f10a',
-	'gl-contributors-view': '\\f10b',
-	'gl-history-view': '\\f10c',
-	'gl-remotes-view': '\\f10d',
-	'gl-repositories-view': '\\f10e',
-	'gl-search-view': '\\f10f',
-	'gl-stashes-view': '\\f110',
-	'gl-tags-view': '\\f111',
-	'gl-worktrees-view': '\\f112',
-	'gl-gitlens': '\\f113',
-	'gl-stash-pop': '\\f114',
-	'gl-stash-save': '\\f115',
-	'gl-unplug': '\\f116',
-	'gl-open-revision': '\\f117',
-	'gl-switch': '\\f118',
-	'gl-expand': '\\f119',
-	'gl-list-auto': '\\f11a',
-	'gl-repo-force-push': '\\f11b',
-	'gl-pinned-filled': '\\f11c',
-	'gl-clock': '\\f11d',
-	'gl-provider-azdo': '\\f11e',
-	'gl-provider-bitbucket': '\\f11f',
-	'gl-provider-gerrit': '\\f120',
-	'gl-provider-gitea': '\\f121',
-	'gl-provider-github': '\\f122',
-	'gl-provider-gitlab': '\\f123',
-	'gl-gitlens-inspect': '\\f124',
-	'gl-workspaces-view': '\\f125',
-	'gl-cloud-patch': '\\f128',
-	'gl-cloud-patch-share': '\\f129',
-	'gl-inspect': '\\f12a',
-	'gl-repository-filled': '\\f12b',
-	'gl-code-suggestion': '\\f12d',
-	'gl-provider-jira': '\\f12e',
 });
 
 @customElement('code-icon')
@@ -646,13 +602,17 @@ export class CodeIcon extends LitElement {
 		}
 
 		${unsafeCSS(
-			Object.entries(iconMap)
-				.map(
-					([key, value]) => /*css*/ `
+			[codiconsMap, gliconsMap]
+				.map(icons =>
+					Object.entries(icons)
+						.map(
+							([key, value]) => /*css*/ `
 						:host([icon='${key}'])::before {
 							content: '${value}';
 						}
 					`,
+						)
+						.join(''),
 				)
 				.join(''),
 		)}

diff --git a/src/webviews/apps/shared/components/glicons.ts b/src/webviews/apps/shared/components/glicons.ts
@@ -0,0 +1,65 @@
+/*
+
+Must be placed at the end of body in the HTML file of any webview that needs it (because of CSP)
+
+<style nonce="#{cspNonce}">
+	@font-face {
+		font-family: 'glicons';
+		font-display: block;
+		src: url("#{root}/dist/glicons.woff2?887e981267645659b15471f86c55a40e") format("woff2");
+	}
+</style>
+*/
+
+export const gliconsFontFamily = 'glicons';
+
+export const gliconsMap = Object.freeze({
+	'gl-commit-horizontal': '\\f101',
+	'gl-graph': '\\f102',
+	'gl-next-commit': '\\f103',
+	'gl-prev-commit-menu': '\\f104',
+	'gl-prev-commit': '\\f105',
+	'gl-compare-ref-working': '\\f106',
+	'gl-branches-view': '\\f107',
+	'gl-commit-view': '\\f108',
+	'gl-commits-view': '\\f109',
+	'gl-compare-view': '\\f10a',
+	'gl-contributors-view': '\\f10b',
+	'gl-history-view': '\\f10c',
+	'gl-history': '\\f10c',
+	'gl-remotes-view': '\\f10d',
+	'gl-repositories-view': '\\f10e',
+	'gl-search-view': '\\f10f',
+	'gl-stashes-view': '\\f110',
+	'gl-stashes': '\\f110',
+	'gl-tags-view': '\\f111',
+	'gl-worktrees-view': '\\f112',
+	'gl-gitlens': '\\f113',
+	'gl-stash-pop': '\\f114',
+	'gl-stash-save': '\\f115',
+	'gl-unplug': '\\f116',
+	'gl-open-revision': '\\f117',
+	'gl-switch': '\\f118',
+	'gl-expand': '\\f119',
+	'gl-list-auto': '\\f11a',
+	'gl-repo-force-push': '\\f11b',
+	'gl-pinned-filled': '\\f11c',
+	'gl-clock': '\\f11d',
+	'gl-provider-azdo': '\\f11e',
+	'gl-provider-bitbucket': '\\f11f',
+	'gl-provider-gerrit': '\\f120',
+	'gl-provider-gitea': '\\f121',
+	'gl-provider-github': '\\f122',
+	'gl-provider-gitlab': '\\f123',
+	'gl-gitlens-inspect': '\\f124',
+	'gl-workspaces-view': '\\f125',
+	'gl-confirm-checked': '\\f126',
+	'gl-confirm-unchecked': '\\f127',
+	'gl-cloud-patch': '\\f128',
+	'gl-cloud-patch-share': '\\f129',
+	'gl-inspect': '\\f12a',
+	'gl-repository-filled': '\\f12b',
+	'gl-gitlens-filled': '\\f12c',
+	'gl-code-suggestion': '\\f12d',
+	'gl-provider-jira': '\\f12e',
+});