feat: write a contributing guide to help users to add their own icon alone

This commit is contained in:
Cyril Hue 2024-08-12 13:49:10 +02:00
parent ab06a0371a
commit bc14adcaf1
24 changed files with 346 additions and 1635 deletions

22
CONTRIBUTING.md Normal file
View File

@ -0,0 +1,22 @@
# How adding a new set icon
## Prerequisites
You need to have a icomoon account: https://icomoon.io/app/
For future steps, i recommande to import actual set of keyrune's icons in icomoon.
![import](./contributing/images/import-icon-btn.png)
A model asking for "The glyphs in your SVG font were loaded.
Use this font's metrics and metadata when exporting fonts?" will appear, click on "Yes".
![modal-import](./contributing/images/import-icon-modal.png)
🎉 Success, you have now all the keyrune's icons in your icomoon project. That will be useful for the next steps when we need to generate the font.
## Summary
1. [Update fonts and svg with the new icon](./contributing/UpdateFonts.md)
2. [Update codebase to handle the new icon](./contributing/UpdateCodebase.md)
3. [Generate associated css](./contributing/GenerateCss.md)
4. [Update the documentation](./contributing/UpdateDocumentation.md)

View File

@ -0,0 +1,22 @@
# Generate CSS
> exemple with the set icon of the set "Fondation" (FDN)
## Steps
Generate the CSS file with the following command:
```bash
npm run lessmin & sassmin
```
or for debug purpose you can run
```bash
npm run less & sass
```
2 files will be generated in the `css` folder: `keyrune.css` and `keyrune.min.css`.
![generate-css](./images/generate-css.png)
Yaay 🎉 you have generate the CSS file! Now you can use the new icon in the website. Follow the [Usage inside README.md](../README.md#usage)

View File

@ -0,0 +1,27 @@
# Update Codebase
> exemple with the set icon of the set "Fondation" (FDN)
## Prerequisites
You need to have `lessc` and `sass` installed on your computer.
## Steps
1. Open the `sass/_variables.scss` file in the repository.
2. Add the new set icon in the `@keyrune-icons` list. (You can see that i add the short code `fdn` and the unicode character `1f31f`)
```diff
+ ("Foundations", "fdn", "\1f31f"),
```
3. Open the `less/icons.less` file in the repository.
4. Add the new set icon in the `@keyrune-icons` list. (You can see that i add the short code `fdn` and the unicode character `1f31f`)
```diff
+ .@{ss-prefix}-fdn:before { content: "\1f31f"; } // Foundation
```
Yaay 🎉 you have update the codebase now everything is ready only one steps to use the new icon
---
**Go to the next step: [Generate CSS](./GenerateCss.md)**
---

View File

@ -0,0 +1 @@
# Update existing documentation

View File

@ -0,0 +1,54 @@
# Update Fonts
> exemple with the set icon of the set "Fondation" (FDN)
## Steps
1. Search for the icon you want to add (from scryfall.com: https://svgs.scryfall.io/sets/fdn.svg) and download it (inspect DOM and copy/paste in a blank file). Save it in a temporary folder in your desktop.
2. On icomoon, click on the "Import Icons" button. Select the previously downloaded icon. It will be added in a "Untilited Set".
![import-icon](./images/import-icon.png)
3. Now you need to select all the icons you want to add in the font + the new one. On top right of each section you can find a menu with "Select all" and "Deselect all".
![select-all](./images/select-all.png)
4. On the bottom of the page, you can check that you have the right number of icons selected. (Actual number + 1, the new one)
![check-number](./images/check-number.png)
5. You can now click on the "Generate Font" button. You will be redirect to a page whith all setting for each icon.
![generate-font](./images/generate-font.png)
6. Find your new icon and click on the "smiley" button to search for a unicode character and select it.
![icon-settings](./images/icon-settings.png)
🚧 Be sure to select a character that is not already used in the font.🚧
You can check how your icon will be displayed in the font by clicking on the "Get code </>" button.
![preview-icon](./images/preview-icon.png)
> If you have info about how to determine wich character is free, please add it in this doc here. 🙏
> What I do is when i have selected my unicode character, i search in all the codebase if it's already used. If not, i use it.
7. You can now donwload the font by clicking on the "Download" button. You get a zip file with all the files needed.
![download-font](./images/download-font.png)
8. Unzip the file and copy the `fonts` folder in the keyrune `fonts` folder. Normally you will have the `keyrune.eot`, `keyrune.svg`, `keyrune.ttf`, `keyrune.woff` files.
![fonts-folder](./images/fonts-folder.png)
Yaay 🎉 you have update the keyrune font! And have your new icon available.
---
**Go to the next step: [Update codebase to handle the new icon](./UpdateCodebase.md)**
---
## Extra steps
One files is missing inside the generated fonts, it's the `keyrune.woff2`. To get it you need to convert the `keyrune.woff` with online tools like [Cloudconvert](https://cloudconvert.com/woff-to-woff2)

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 348 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 928 KiB

After

Width:  |  Height:  |  Size: 930 KiB

Binary file not shown.

Binary file not shown.

View File

@ -178,6 +178,7 @@
.@{ss-prefix}-otj:before { content: "\e9cc"; } // Outlaws of Thunder Junction
.@{ss-prefix}-blb:before { content: "\e9cd"; } // Bloomburrow
.@{ss-prefix}-dsk:before { content: "\1f305"; } // Duskmourn: House of Horror
.@{ss-prefix}-fdn:before { content: "\1f31f"; } // Foundation
/**
* Command Zone */

View File

@ -246,7 +246,7 @@ $keyrune_sets: (
("Outlaws of Thunder Junction", "otj", "\e9cc"),
("Bloomburrow", "blb", "\e9cd"),
("Duskmourn: House of Horror", "dsk", "\1f305"),
//
("Foundations", "fdn", "\1f31f")
// Command zone
("Vanguard", "van", "\e655"),
("Planechase 2009", "hop", "\e656"),