Merges PR #241 by @Horsty80

CHANGELOG.md

@@ -8,8 +8,20 @@ All notable changes to this project will be documented in this file.
 * Support apparent "tri-layered" symbols, like SNC and CBL where there's a rarity layer, a fixed white layer, and a border. These are unlike the dual-layered symbols like AFR and MID.
 * Validate all class names to handle official set codes, MODO codes, and MTGJson/community fallbacks
 * Update this changelog for better formatting 
+* Review DSK and FDN SVG files to make sure they're single layer, and update docs if needed
 
-## Versions 
+## Versions
+
+### [3.15.0] 2024-08-21 FDN, DSK, and other fixes
+
+Major thanks to @Horsty80 for the PR and patience! Thanks to @HeliumOctahelide as well for contributions.
+
+* **Added:** Duskmourne set symbol (DSK) ([#232](https://github.com/andrewgioia/keyrune/issues/232))
+* **Added:** Foundations set symbol (FND) ([#233](https://github.com/andrewgioia/keyrune/issues/233))
+* **Added:** Map to MH2 retro frame set code ([#239](https://github.com/andrewgioia/keyrune/pull/239))
+* **Fixed:** BLB now correctly displayed, no longer showing BLC ([#234](https://github.com/andrewgioia/keyrune/issues/234))
+* **Changed:** Development dependendies in `package.json` for lessc, sass, and clean-css.
+* **Added:** New contributing guide beginnings
 
 ### [3.14.1] 2024-03-04 Fixes docs for BIG, fixes .ttf for embedding
 

CONTRIBUTING.md

@@ -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)

README.md

@@ -1,4 +1,4 @@
-# Keyrune v3.14.0
+# Keyrune v3.15.0
 
 ## The Magic: the Gathering set symbol font!
 

bower.json

@@ -1,7 +1,7 @@
 {
     "name": "keyrune",
     "homepage": "http://keyrune.andrewgioia.com",
-    "version": "3.14.1",
+    "version": "3.15.0",
     "authors": [
         "Andrew Gioia <[email protected]>"
     ],

contributing/GenerateCss.md

@@ -0,0 +1,26 @@
+# Generate CSS
+
+> Example with the set icon of the set "Foundation" (FDN)
+
+## Steps
+
+Generate the CSS files with the following commands:
+
+```bash
+npm run less && npm run lessmin
+```
+If you prefer to use the Sass source, run these instead:
+
+```bash
+npm run sass && npm run sassmin
+```
+
+2 files will be generated in the `css` folder: `keyrune.css` and `keyrune.min.css`.
+
+![generate-css](./images/generate-css.png)
+
+Yaay 🎉 you have generated the CSS files! Now you can use the new icon(s) that were added, if any. Follow the [Usage inside README.md](../README.md#usage)
+
+---
+**Go to the next step: [Update the documentation](./UpdateDocumentation.md)**
+---

contributing/UpdateCodebase.md

@@ -0,0 +1,33 @@
+# Update Codebase
+
+> Example with the set icon of the set "Foundation" (FDN)
+
+## Prerequisites
+
+You need to have `lessc` or `sass` installed on your computer.
+
+## Steps
+
+### Updating Sass source
+
+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"),
+    ```
+
+### Updating Less source
+
+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)**
+---

contributing/UpdateDocumentation.md

@@ -0,0 +1,34 @@
+# Update existing documentation
+
+After you have added a new set icon, update the codebase and generate the new `keyrune.css` file, you need to update the documentation to reflect the changes.
+
+## Steps
+
+1. Run this command
+    ```bash
+    npm run build
+    ```
+    This will copy fonts and css files to the `docs` folder.
+2. Add the new icon usage inside the `cheatsheet.html`.
+    ```diff
+    + <div class="icon">
+    ```
+    Replace `fdn` with the short code of the new icon.
+3. Add the new icon usage inside the `icons.html`.
+    ```diff
+    + <div class="icon" id="fdn" name="Foundation" data-name="Foundation" data-class="fdn" data-unicode="x1f31f" data-added="v3.14.0">
+    +    <span class="name"><i class="ss ss-fdn"></i> Foundation <em>(fdn)</em></span>
+    + </div>
+    ```
+    Replace `fdn` with the short code of the new icon.
+
+    > A data attribute with the version is present, but i don't know how it's working. If you have info about it, please add it in this doc here. 🙏
+
+You can open each html file in your browser to see the changes. Or use tools like `Live Server` in Visual Studio Code.
+Normally you can see the changes in the `./cheatsheet.html` and `./icons.html` .
+
+![cheatsheet.html](./images/cheatsheet-html.png) ![icons.html](./images/icons-html.png)
+
+Yaay! You have successfully updated the documentation. 🎉
+
+You can now commit your changes and create a pull request.

contributing/UpdateFonts.md

@@ -0,0 +1,54 @@
+# Update Fonts
+
+> Example with the set icon of the set "Foundation" (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. In 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)

docs/cheatsheet.html

@@ -159,6 +159,7 @@ <h4>Icons, CSS Class, and Unicode</h4>
                     <span class="utf"><i>&#xe689;</i> ss-dpa <code>&amp;#xe689;</code></span>
                     <span class="utf"><i>&#xe678;</i> ss-drb <code>&amp;#xe678;</code></span>
                     <span class="utf"><i>&#xe616;</i> ss-drk <code>&amp;#xe616;</code></span>
+                    <span class="utf"><i>&#xe9d7;</i> ss-dsk <code>&amp;#xe9d7;</code></span>
                     <span class="utf"><i>&#xe632;</i> ss-dst <code>&amp;#xe632;</code></span>
                     <span class="utf"><i>&#xe693;</i> ss-dtk <code>&amp;#xe693;</code></span>
                     <span class="utf"><i>&#xe92d;</i> ss-e01 <code>&amp;#xe92d;</code></span>
@@ -172,6 +173,7 @@ <h4>Icons, CSS Class, and Unicode</h4>
                     <span class="utf"><i>&#xe621;</i> ss-exo <code>&amp;#xe621;</code></span>
                     <span class="utf"><i>&#xe69a;</i> ss-exp <code>&amp;#xe69a;</code></span>
                     <span class="utf"><i>&#xe617;</i> ss-fem <code>&amp;#xe617;</code></span>
+                    <span class="utf"><i>&#xe9d8;</i> ss-fdn <code>&amp;#xe9d8;</code></span>
                     <span class="utf"><i>&#xe654;</i> ss-frf <code>&amp;#xe654;</code></span>
                     <span class="utf"><i>&#xe63c;</i> ss-fut <code>&amp;#xe63c;</code></span>
                     <span class="utf"><i>&#xe94b;</i> ss-gk1 <code>&amp;#xe94b;</code></span>