Skip to content

Commit

Permalink
Feat: add tonic ui icon builder (#4)
Browse files Browse the repository at this point in the history
* feat: add TMIcon build workflow

* fix

* fix

* fxi

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fic

* fix

* fix

* fix

* fix

* fix

* fix

* fix

---------

Co-authored-by: Joshua Tai <[email protected]>
  • Loading branch information
joshuatai and darrytai authored May 21, 2024
1 parent 9407c7d commit 97573f8
Show file tree
Hide file tree
Showing 5 changed files with 842 additions and 10 deletions.
63 changes: 63 additions & 0 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
name: Build TMIcons

on:
push:
branches:
- dev

jobs:
update-file:
runs-on: ubuntu-latest

steps:
- name: Set up Node.js 20
uses: actions/setup-node@v3

- name: Checkout repository
uses: actions/checkout@v2

- name: Download font files
run: |
ls
css_url="https://i.icomoon.io/public/a8317e20c1/TMIcons/style.css"
css_file="style.css"
dist_dir="dist/fonts"
curl -o $css_file $css_url
font_urls=$(grep -oP 'url\(\K[^)]+' style.css | sort -u)
for url in $font_urls; do
clean_url=$(echo $url | sed 's/[?#].*//')
filename=$(basename "$clean_url")
full_url=$(echo $url | sed "s/'//g" | sed 's/"//g')
curl -o "$dist_dir/$filename" $full_url
done
rm $css_file
echo "Font files downloaded successfully."
- name: Build SVG files
run: |
node ./script/buildSVGIcons.js
echo "SVG files built successfully."
- name: Build Tonic UI icons data
run: |
npm i
node ./script/build-icon-files.js
# - name: Configure Git
# run: |
# git config --global user.name 'HIE UX Service'
# git config --global user.email '[email protected]'

# - name: Add changes
# run: git add test.txt

# - name: Commit changes
# run: git commit -m "Add test.txt with dynamic content"

# - name: Push changes
# env:
# GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
# run: git push origin dev
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,11 @@
"@trendmicro/babel-config": "^1.0.0-alpha",
"cross-env": "^7.0.3",
"del-cli": "^3.0.1",
"ejs": "^3.1.5",
"lodash.sortby": "^4.7.0",
"rollup": "^2.35.1"
},
"dependencies": {
"ejs": "^3.1.10",
"lodash": "^4.17.21"
}
}
18 changes: 9 additions & 9 deletions script/build-icon-files.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@ const svgPathEnd = '"></path>';
const dataFromSvgFile = {};
const dataParsedFromApi = {};
const svgFolder = path.resolve(__dirname, '../dist/svg');
const preferencesDataPath = path.resolve(__dirname, '../data/Preferences.json');
const IconsDataPath = path.resolve(__dirname, '../data/Icons.json');

const preferences = require('../data/Preferences.json');
const iconsData = require('../data/Icons.json');
const iconsetsData = require('../data/Iconsets.json');
const outputIndexPath = path.resolve(__dirname, '../src/icons/index.js');
const outputIconsFolder = path.resolve(__dirname, '../src/icons');
const outputIconsetsPath = path.resolve(__dirname, '../src/iconsets/index.js');
Expand Down Expand Up @@ -54,17 +56,15 @@ fs.readdirSync(svgFolder).forEach(file => {
dataFromSvgFile[file.split('.svg')[0].toLowerCase()] = { paths, viewBox };
});

// console.log(dataFromSvgFile);
if (count > 0) {
console.log('Incorrect viewBox count', count);
}

const reference = fs.readFileSync(preferencesDataPath, 'utf-8');
const referenceData = JSON.parse(reference);
const _majorVersion = referenceData.fontPref.metadata.majorVersion;
const _minorVersion = referenceData.fontPref.metadata.minorVersion;
const _majorVersion = preferences.fontPref.metadata.majorVersion;
const _minorVersion = preferences.fontPref.metadata.minorVersion;


const icons = fs.readFileSync(IconsDataPath, 'utf-8');
const iconsData = JSON.parse(icons);
dataParsedFromApi.icons = iconsData
.sort(function(a, b) {
var nameA = a.name.toLowerCase() // ignore upper and lowercase
Expand Down Expand Up @@ -129,7 +129,7 @@ dataParsedFromApi.icons = iconsData
}

{ // iconsets
const iconsets = _sortBy(require('../data/Iconsets.json'), ['id']);
const iconsets = _sortBy(iconsetsData, ['id']);
const ejsTemplate = [
'// AUTO-GENERATED FILE. DO NOT MODIFY.',
'',
Expand Down
50 changes: 50 additions & 0 deletions script/buildSVGIcons.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
const fs = require("fs");
const path = require("path");
const svgGen = require('./svgGenerator');
const preferences = require("../data/Preferences.json");
const icons = require("../data/Icons.json");
const svgTpl = fs.readFileSync(
path.join(__dirname, "..", "templates", "svg.tpl"),
"utf8"
);
const targetDir = path.join(__dirname, '..', 'dist', 'svg');
const defaultColor = `rgb(${preferences.imagePref.color
.toString(16)
.match(/\w\w/gi)
.map((color) => parseInt(color, 16))
.join(",")})`;
const viewBox = preferences.fontPref.metrics.emSize;
const files = fs.readdirSync(targetDir);
files.forEach(file => {
const filePath = path.join(targetDir, file);
if (fs.lstatSync(filePath).isFile()) {
fs.unlinkSync(filePath);
}
});

icons.sort(function (a, b) {
if (a.name > b.name) return 1;
if (a.name < b.name) return -1;
return 0;
});

icons.forEach((icon) => {
const targetPath = path.join(targetDir, `${icon.name}.svg`);
icon.width = icon.height = icon.grid;
icon.svgPath = svgGen(icon.paths);
const scale = icon.height / viewBox;
icon.scaledPath = icon.svgPath.scale(scale);
icon.scaledPathData = icon.scaledPath.getPathData(true);

let svgContent = svgTpl.replace(/_viewBox/gi, icon.grid);
let paths = [];
svgContent = svgContent.replace(/_title/gi, icon.name);
icon.paths.forEach((path, pathIndex) => {
let attr = Object.assign({ fill: defaultColor }, icon.attrs[pathIndex]);
let genAttrs = [];
Object.keys(attr).forEach((key) => genAttrs.push(`${key}="${attr[key]}"`));
paths.push(`<path ${genAttrs.join(' ')} d="${icon.scaledPathData[pathIndex]}"></path>`);
});
svgContent = svgContent.replace('<!--paths-->', paths.join('\n '));
fs.writeFileSync(targetPath, svgContent);
});
Loading

0 comments on commit 97573f8

Please sign in to comment.