Skip to content

Commit

Permalink
Merge pull request #9 from saltcandy123/develop
Browse files Browse the repository at this point in the history
Add npm-publish automation and remove webapp
  • Loading branch information
saltcandy123 authored Nov 12, 2021
2 parents 7366c94 + 1667365 commit 9e15f7e
Show file tree
Hide file tree
Showing 28 changed files with 238 additions and 3,802 deletions.
29 changes: 29 additions & 0 deletions .github/workflows/font-image.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@

name: Font image

on:
push:
branches: [ main ]

jobs:
build-font:
name: Update font image
runs-on: ubuntu-20.04
steps:
- uses: actions/checkout@v2
- name: Install FontForge
run: sudo apt-get install fontforge python3-fontforge
- name: Build fonts
run: python3 build_font.py ${{ github.sha }}
- name: Update font image
run: bash update-fontimage.sh
- name: Push the update to GitHub
run: |
git config user.email "saltcandy123@gmail.com"
git config user.name "saltcandy123 (GitHub Actions)"
git add fontimage.png
if git commit -m 'Update font image'; then
git push origin
else
echo No change on fontimage.png
fi
43 changes: 0 additions & 43 deletions .github/workflows/github-pages.yml

This file was deleted.

67 changes: 63 additions & 4 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,29 @@ on:

jobs:
build-font:
name: Build fonts
name: Build font
runs-on: ubuntu-20.04
steps:
- uses: actions/checkout@v2
- name: Install FontForge
run: sudo apt-get install fontforge python3-fontforge
- name: Build fonts
run: python3 build_fonts.py --add-version ${GITHUB_REF#refs/tags/}
run: python3 build_font.py ${GITHUB_REF#refs/tags/v}
- name: Upload artifact
uses: actions/upload-artifact@v2
with:
name: dist
path: dist
create-release:
name: Create release
needs: build-font
runs-on: ubuntu-20.04
steps:
- name: Download artifact
uses: actions/download-artifact@v2
with:
name: dist
path: dist
- name: Create release
id: create_release
uses: actions/create-release@v1
Expand All @@ -29,7 +44,7 @@ jobs:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
upload_url: ${{ steps.create_release.outputs.upload_url }}
asset_path: font-dist/saltcandy123font.ttf
asset_path: dist/saltcandy123font.ttf
asset_name: saltcandy123font.ttf
asset_content_type: font/ttf
- name: Upload saltcandy123font.woff
Expand All @@ -38,6 +53,50 @@ jobs:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
upload_url: ${{ steps.create_release.outputs.upload_url }}
asset_path: font-dist/saltcandy123font.woff
asset_path: dist/saltcandy123font.woff
asset_name: saltcandy123font.woff
asset_content_type: font/woff
publish-to-npm-registry:
name: Publish npm package to npm registry
needs: build-font
runs-on: ubuntu-20.04
steps:
- uses: actions/setup-node@v2
with:
node-version: '14.x'
registry-url: 'https://registry.npmjs.org'
- name: Download artifact
uses: actions/download-artifact@v2
with:
name: dist
path: dist
- name: Publish package
run: |
cd dist
yarn publish
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
publish-to-github-registry:
name: Publish npm package to GitHub Packages registry
needs: build-font
runs-on: ubuntu-20.04
permissions:
contents: read
packages: write
steps:
- uses: actions/setup-node@v2
with:
node-version: '14.x'
registry-url: 'https://npm.pkg.github.com'
scope: '@saltcandy123'
- name: Download artifact
uses: actions/download-artifact@v2
with:
name: dist
path: dist
- name: Publish package
run: |
cd dist
yarn publish
env:
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
33 changes: 11 additions & 22 deletions .github/workflows/verification.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,38 +8,27 @@ on:

jobs:
build:
name: Build fonts and demo pages
# Ubuntu 20.04 or later is required for python3-fontforge
name: Build font
runs-on: ubuntu-20.04
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '14'
- name: Lint glyph SVG files
run: |
python3 utils/clean_glyphs.py glyphs/
python3 clean_glyphs.py glyphs/
git diff --numstat --exit-code
- name: Install FontForge
run: sudo apt-get install fontforge python3-fontforge
- name: Build fonts
run: python3 build_fonts.py --add-version ${{ github.sha }}
- name: Archive font-dist
uses: actions/upload-artifact@v2
with:
name: font-dist
path: font-dist
- name: Build webapp
- name: Build font
run: python3 build_font.py ${{ github.sha }}
- name: Update font image
run: |
cd webapp
yarn
yarn run lint
yarn run build
- name: Archive webapp-dist
bash update-fontimage.sh
cp fontimage.png dist/
- name: Archive dist
uses: actions/upload-artifact@v2
with:
name: webapp-dist
path: webapp-dist
path: dist
name: dist
super-linter:
name: Run Super-Linter
runs-on: ubuntu-latest
Expand All @@ -49,4 +38,4 @@ jobs:
uses: github/super-linter@v3
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
FILTER_REGEX_EXCLUDE: .*/glyphs/.*|.*/webapp/.*\.(jsx?|tsx?)
FILTER_REGEX_EXCLUDE: .*/glyphs/.*
6 changes: 1 addition & 5 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1 @@
node_modules
.next
/font-dist
/webapp-dist
yarn-error.log
/dist
23 changes: 23 additions & 0 deletions README-npm.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# saltcandy123font

This is a simple handwritten font created by @saltcandy123.

![Font image](https://raw.githubusercontent.com/saltcandy123/saltcandy123font/main/fontimage.png)

## Usage

Install the package.

```bash
# npm
npm i @saltcandy123/saltcandy123font

# yarn
yarn add @saltcandy123/saltcandy123font
```

Then, use `saltcandy123font.ttf` or `saltcandy123font.woff` in your frontend code.

```javascript
import saltcandy123font from '@saltcandy123/saltcandy123font/saltcandy123font.woff';
```
26 changes: 8 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,14 @@

This is a simple handwritten font created by @saltcandy123.

* Download font from <https://github.com/saltcandy123/saltcandy123font/releases>
* Try out demo on <https://saltcandy123.github.io/saltcandy123font/>
- Download the `ttf` file and the `woff` from [the release page](https://github.com/saltcandy123/saltcandy123font/releases).
- An npm package ([@saltcandy123/saltcandy123font](https://www.npmjs.com/package/@saltcandy123/saltcandy123font)) is also available.

![Sample image](https://saltcandy123.github.io/saltcandy123font/sample.png)
![Font image](./fontimage.png)

## How it works
## Source code

All the glyph data is stored as SVG files in [`/glyphs`](./glyphs) directory.
Each SVG file is named after the corresponding 4-digit hex Unicode.
For instance, the filename for "A" glyph should be [`u0041.svg`](./glyphs/u0041.svg) because the Unicode of "A" is 41 in hex.
See also [Unicode Character Code Charts](https://unicode.org/charts/).

A Python script [`/build_fonts.py`](./build_fonts.py) converts the SVG files to fonts in `/font-dist` directory.
It requires [FontForge](https://fontforge.org/) and [its Python library](https://fontforge.org/docs/scripting/python.html).

[`/webapp`](./webapp) is the source code directory for <https://saltcandy123.github.io/saltcandy123font/>.
`yarn && yarn build` builds static pages in `/webapp-dist` directory.
`yarn build` requires `/font-dist` directory with font files.

Releasing is handled by GitHub Actions.
By pushing a tag to this repository, GitHub Actions will automatically [create a new release](./.github/workflows/release.yml) and [update GitHub Pages](./.github/workflows/github-pages.yml).
- **`glyphs/uXXXX.svg`** defines the shape of each character. For example, [`u0041.svg`](glyphs/u0041.svg) is the image of "A".
- **[`build_font.py`](build_font.py)** is a script to convert the glyph SVG files to font files in `dist` directory. It also adds a few additional files for the npm package. The Python script requires [FontForge](https://fontforge.org/) and [its Python library](https://fontforge.org/docs/scripting/python.html).
- **[`clean_glyphs.py`](clean_glyphs.py)** is a script to clean and normalize SVG files. `--add-template` flag draws template lines on each SVG, which is useful for working on individual glyphs.
- **[`update-fontimage.sh`](update-fontimage.sh)** is a script to update [`fontimage.png`](fontimage.png) with the latest font. It's mainly for GitHub Actions to update the image automatically.
72 changes: 72 additions & 0 deletions build_font.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
#!/usr/bin/env python3

"""Build saltcandy123font from SVG files"""

import argparse
import json
import pathlib
import re
import xml.dom.minidom

import fontforge

BASE_DIR = pathlib.Path(__file__).parent


def build_saltcandy123font(*, version: str) -> fontforge.font:
font = fontforge.font()
font.fontname = "saltcandy123font"
font.fullname = font.fontname
font.familyname = font.fontname
font.copyright = "Copyright (C) saltcandy123"
font.weight = "Regular"
font.os2_weight = 400
font.version = version

for svg_path in BASE_DIR.joinpath("glyphs").iterdir():
match = re.search("^u([0-9a-f]{4}).svg$", svg_path.name)
if not match:
continue
code = int(match.group(1), 16)
glyph = font.createChar(code)
glyph.importOutlines(str(svg_path))
with xml.dom.minidom.parse(str(svg_path)) as doc:
glyph.width = int(doc.childNodes[0].getAttribute("width"))

return font


def generate_npm_package_metadata(*, version=str) -> dict:
return {
"name": "@saltcandy123/saltcandy123font",
"version": version,
"description": "A simple handwritten font created by @saltcandy123",
"repository": "https://github.com/saltcandy123/saltcandy123font",
"author": "saltcandy123",
}


def main():
parser = argparse.ArgumentParser(description=__doc__)
parser.add_argument("font_version", help="font version (e.g. 0.1.2)")
args = parser.parse_args()

dist_dir = BASE_DIR.joinpath("dist")
dist_dir.mkdir(exist_ok=True)

font = build_saltcandy123font(version=args.font_version)

for ext in ["ttf", "woff"]:
font.generate(str(dist_dir.joinpath(f"saltcandy123font.{ext}")))

package_metadata = generate_npm_package_metadata(version=args.font_version)
with open(dist_dir.joinpath("package.json"), "w") as f:
json.dump(package_metadata, f, indent=2)

with open(dist_dir.joinpath("README.md"), "w") as f:
with open(BASE_DIR.joinpath("README-npm.md")) as f_src:
f.write(f_src.read())


if __name__ == "__main__":
main()
Loading

0 comments on commit 9e15f7e

Please sign in to comment.