From acdbed30753bb7a3328c11d548adbc54b95611ff Mon Sep 17 00:00:00 2001 From: Thomas Bui Date: Thu, 10 Dec 2020 23:55:16 -0800 Subject: [PATCH 1/7] Refactored peek and build scripts --- .../scripts/build_assets/SeleniumRunner.py | 23 +++--- .github/scripts/build_assets/util.py | 33 +++++++++ .github/scripts/icomoon_build.py | 42 +++++++++++ .github/scripts/icomoon_peek.py | 48 +++---------- .github/scripts/icomoon_upload.py | 71 ------------------- .github/workflows/build_icons.yml | 5 +- .github/workflows/peek_icons.yml | 5 +- package.json | 4 +- 8 files changed, 102 insertions(+), 129 deletions(-) create mode 100644 .github/scripts/build_assets/util.py create mode 100644 .github/scripts/icomoon_build.py delete mode 100644 .github/scripts/icomoon_upload.py diff --git a/.github/scripts/build_assets/SeleniumRunner.py b/.github/scripts/build_assets/SeleniumRunner.py index 4c659a2b3..da5091aea 100644 --- a/.github/scripts/build_assets/SeleniumRunner.py +++ b/.github/scripts/build_assets/SeleniumRunner.py @@ -75,14 +75,12 @@ def set_options(self, download_path: str, geckodriver_path: str, self.driver = WebDriver(options=options, executable_path=geckodriver_path) self.driver.get(self.ICOMOON_URL) assert "IcoMoon App" in self.driver.title - # wait until the whole web page is loaded by testing the hamburger input - hamburger_input = WebDriverWait(self.driver, SeleniumRunner.LONG_WAIT_IN_SEC).until( - ec.element_to_be_clickable((By.CSS_SELECTOR, - "button.btn5.lh-def.transparent i.icon-menu")) + WebDriverWait(self.driver, self.LONG_WAIT_IN_SEC).until( + ec.element_to_be_clickable((By.XPATH, "(//i[@class='icon-menu'])[2]")) ) - hamburger_input.click() print("Accessed icomoon.io") + def upload_icomoon(self, icomoon_json_path: str): """ @@ -92,11 +90,16 @@ def upload_icomoon(self, icomoon_json_path: str): """ print("Uploading icomoon.json file...") try: + self.click_hamburger_input() + # find the file input and enter the file path - import_btn = WebDriverWait(self.driver, SeleniumRunner.LONG_WAIT_IN_SEC).until( - ec.element_to_be_clickable((By.CSS_SELECTOR, "div#file input")) - ) + import_btn = self.driver.find_element(By.XPATH, "(//li[@class='file'])[1]//input") import_btn.send_keys(icomoon_json_path) + except SeleniumTimeoutException as e: + print(e.stacktrace) + print("Selenium timed out. Couldn't find import button.") + self.close() + raise e except Exception as e: self.close() raise e @@ -159,8 +162,8 @@ def click_hamburger_input(self): :return: None. """ try: - hamburger_input = self.driver.find_element_by_css_selector( - "button.btn5.lh-def.transparent i.icon-menu" + hamburger_input = self.driver.find_element_by_xpath( + "(//i[@class='icon-menu'])[2]" ) menu_appear_callback = ec.element_to_be_clickable( diff --git a/.github/scripts/build_assets/util.py b/.github/scripts/build_assets/util.py new file mode 100644 index 000000000..1c31e7771 --- /dev/null +++ b/.github/scripts/build_assets/util.py @@ -0,0 +1,33 @@ +from pathlib import Path +from argparse import ArgumentParser +from build_assets.PathResolverAction import PathResolverAction + +def get_commandline_args(): + parser = ArgumentParser(description="Upload svgs to Icomoon to create icon files.") + + parser.add_argument("--headless", + help="Whether to run the browser in headless/no UI mode", + action="store_true") + + parser.add_argument("geckodriver_path", + help="The path to the firefox executable file", + action=PathResolverAction) + + parser.add_argument("icomoon_json_path", + help="The path to the icomoon.json aka the selection.json created by Icomoon", + action=PathResolverAction) + + parser.add_argument("devicon_json_path", + help="The path to the devicon.json", + action=PathResolverAction) + + parser.add_argument("icons_folder_path", + help="The path to the icons folder", + action=PathResolverAction) + + parser.add_argument("download_path", + help="The path where you'd like to download the Icomoon files to", + action=PathResolverAction) + + + return parser.parse_args() \ No newline at end of file diff --git a/.github/scripts/icomoon_build.py b/.github/scripts/icomoon_build.py new file mode 100644 index 000000000..6b3eb352b --- /dev/null +++ b/.github/scripts/icomoon_build.py @@ -0,0 +1,42 @@ +from pathlib import Path +from selenium.common.exceptions import TimeoutException + +# pycharm complains that build_assets is an unresolved ref +# don't worry about it, the script still runs +from build_assets.SeleniumRunner import SeleniumRunner +from build_assets import filehandler, util + + +def main(): + args = util.get_commandline_args() + new_icons = filehandler.find_new_icons(args.devicon_json_path, args.icomoon_json_path) + if len(new_icons) == 0: + print("No files need to be uploaded. Ending script...") + return + + # print list of new icons + print("List of new icons:", *new_icons, sep = "\n") + + runner = None + try: + runner = SeleniumRunner(args.download_path, + args.geckodriver_path, args.headless) + runner.upload_icomoon(args.icomoon_json_path) + svgs = filehandler.get_svgs_paths(new_icons, args.icons_folder_path) + runner.upload_svgs(svgs) + + zip_name = "devicon-v1.0.zip" + zip_path = Path(args.download_path, zip_name) + runner.download_icomoon_fonts(zip_path) + filehandler.extract_files(str(zip_path), args.download_path) + filehandler.rename_extracted_files(args.download_path) + print("Task completed.") + except TimeoutException as e: + print(e) + print(e.stacktrace) + finally: + runner.close() + + +if __name__ == "__main__": + main() diff --git a/.github/scripts/icomoon_peek.py b/.github/scripts/icomoon_peek.py index d2dea0077..6fd55f59c 100644 --- a/.github/scripts/icomoon_peek.py +++ b/.github/scripts/icomoon_peek.py @@ -1,61 +1,31 @@ -from pathlib import Path -from argparse import ArgumentParser from selenium.common.exceptions import TimeoutException # pycharm complains that build_assets is an unresolved ref # don't worry about it, the script still runs from build_assets.SeleniumRunner import SeleniumRunner -from build_assets import filehandler -from build_assets.PathResolverAction import PathResolverAction +from build_assets import filehandler, util def main(): - parser = ArgumentParser(description="Upload svgs to Icomoon to create icon files.") - - parser.add_argument("--headless", - help="Whether to run the browser in headless/no UI mode", - action="store_true") - - parser.add_argument("geckodriver_path", - help="The path to the firefox executable file", - action=PathResolverAction) - - parser.add_argument("icomoon_json_path", - help="The path to the icomoon.json aka the selection.json created by Icomoon", - action=PathResolverAction) - - parser.add_argument("devicon_json_path", - help="The path to the devicon.json", - action=PathResolverAction) - - parser.add_argument("icons_folder_path", - help="The path to the icons folder", - action=PathResolverAction) - - parser.add_argument("download_path", - help="The path where you'd like to download the Icomoon files to", - action=PathResolverAction) - - args = parser.parse_args() - + args = util.get_commandline_args() new_icons = filehandler.find_new_icons(args.devicon_json_path, args.icomoon_json_path) if len(new_icons) == 0: - print("No files need to be peek. Ending script...") + print("No files need to be uploaded. Ending script...") return - # print list of new icons, separated by comma - print("List of new icons:") - print(*new_icons, sep = "\n") + # print list of new icons + print("List of new icons:", *new_icons, sep = "\n") + + runner = None try: - runner = SeleniumRunner(args.download_path, - args.geckodriver_path, args.headless) + runner = SeleniumRunner(args.download_path, args.geckodriver_path, args.headless) svgs = filehandler.get_svgs_paths(new_icons, args.icons_folder_path) runner.upload_svgs(svgs) - runner.close() print("Task completed.") except TimeoutException as e: print(e) print(e.stacktrace) + finally: runner.close() diff --git a/.github/scripts/icomoon_upload.py b/.github/scripts/icomoon_upload.py deleted file mode 100644 index 68e49ab47..000000000 --- a/.github/scripts/icomoon_upload.py +++ /dev/null @@ -1,71 +0,0 @@ -from pathlib import Path -from argparse import ArgumentParser -from selenium.common.exceptions import TimeoutException - -# pycharm complains that build_assets is an unresolved ref -# don't worry about it, the script still runs -from build_assets.SeleniumRunner import SeleniumRunner -from build_assets import filehandler -from build_assets.PathResolverAction import PathResolverAction - - -def main(): - parser = ArgumentParser(description="Upload svgs to Icomoon to create icon files.") - - parser.add_argument("--headless", - help="Whether to run the browser in headless/no UI mode", - action="store_true") - - parser.add_argument("geckodriver_path", - help="The path to the firefox executable file", - action=PathResolverAction) - - parser.add_argument("icomoon_json_path", - help="The path to the icomoon.json aka the selection.json created by Icomoon", - action=PathResolverAction) - - parser.add_argument("devicon_json_path", - help="The path to the devicon.json", - action=PathResolverAction) - - parser.add_argument("icons_folder_path", - help="The path to the icons folder", - action=PathResolverAction) - - parser.add_argument("download_path", - help="The path where you'd like to download the Icomoon files to", - action=PathResolverAction) - - args = parser.parse_args() - - new_icons = filehandler.find_new_icons(args.devicon_json_path, args.icomoon_json_path) - if len(new_icons) == 0: - print("No files need to be uploaded. Ending script...") - return - - # print list of new icons, separated by comma - print("List of new icons:") - print(*new_icons, sep = "\n") - try: - runner = SeleniumRunner(args.download_path, - args.geckodriver_path, args.headless) - runner.upload_icomoon(args.icomoon_json_path) - svgs = filehandler.get_svgs_paths(new_icons, args.icons_folder_path) - runner.upload_svgs(svgs) - - - zip_name = "devicon-v1.0.zip" - zip_path = Path(args.download_path, zip_name) - runner.download_icomoon_fonts(zip_path) - filehandler.extract_files(str(zip_path), args.download_path) - filehandler.rename_extracted_files(args.download_path) - runner.close() - print("Task completed.") - except TimeoutException as e: - print(e) - print(e.stacktrace) - runner.close() - - -if __name__ == "__main__": - main() diff --git a/.github/workflows/build_icons.yml b/.github/workflows/build_icons.yml index 2719cce70..05fb197d3 100644 --- a/.github/workflows/build_icons.yml +++ b/.github/workflows/build_icons.yml @@ -19,10 +19,7 @@ jobs: pip install -r ./.github/scripts/requirements.txt npm install - name: Run icomoon_upload.py - run: > - python ./.github/scripts/icomoon_upload.py - ./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe - ./icomoon.json ./devicon.json ./icons ./ --headless + run: npm run build - name: Upload geckodriver.log for debugging purposes uses: actions/upload-artifact@v2 if: ${{failure()}} diff --git a/.github/workflows/peek_icons.yml b/.github/workflows/peek_icons.yml index 9f9af8573..93d105220 100644 --- a/.github/workflows/peek_icons.yml +++ b/.github/workflows/peek_icons.yml @@ -22,10 +22,7 @@ jobs: pip install -r ./.github/scripts/requirements.txt npm install - name: Run icomoon_peek.py - run: > - python ./.github/scripts/icomoon_peek.py - ./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe - ./icomoon.json ./devicon.json ./icons ./ --headless + run: npm run peek - name: Upload geckodriver.log for debugging purposes uses: actions/upload-artifact@v2 if: ${{failure()}} diff --git a/package.json b/package.json index 01b2b98fe..602e5c48e 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,9 @@ "description": "Programming related icons collection", "main": "devicon.min.css", "scripts": { - "build-css": "gulp updateCss && gulp clean" + "build-css": "gulp updateCss && gulp clean", + "build": "python ./.github/scripts/icomoon_build.py ./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe ./icomoon.json ./devicon.json ./icons ./ --headless", + "peek": "python ./.github/scripts/icomoon_peek.py ./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe ./icomoon.json ./devicon.json ./icons ./ --headless" }, "repository": { "type": "git", From f10869aebf56a01532fbf4e7e3dfa71660f954e8 Mon Sep 17 00:00:00 2001 From: Thomas Bui Date: Fri, 11 Dec 2020 00:06:32 -0800 Subject: [PATCH 2/7] Updated CONTRIBUTING.md --- .github/workflows/build_icons.yml | 2 +- .github/workflows/peek_icons.yml | 3 +-- CONTRIBUTING.md | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/.github/workflows/build_icons.yml b/.github/workflows/build_icons.yml index 05fb197d3..be62e03de 100644 --- a/.github/workflows/build_icons.yml +++ b/.github/workflows/build_icons.yml @@ -32,7 +32,7 @@ jobs: with: name: new_icons path: ./new_icons.png - - name: Running npm task for building devicon.min.css + - name: Build devicon.min.css if: ${{ success() }} run: npm run build-css - name: Create Pull Request diff --git a/.github/workflows/peek_icons.yml b/.github/workflows/peek_icons.yml index 93d105220..5bc2953a4 100644 --- a/.github/workflows/peek_icons.yml +++ b/.github/workflows/peek_icons.yml @@ -16,11 +16,10 @@ jobs: uses: actions/setup-python@v2 with: python-version: 3.8 - - name: Install dependencies (python, pip, npm) + - name: Install dependencies (python, pip) run: | python -m pip install --upgrade pip pip install -r ./.github/scripts/requirements.txt - npm install - name: Run icomoon_peek.py run: npm run peek - name: Upload geckodriver.log for debugging purposes diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 99b60aab9..48cb6fb64 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -117,7 +117,7 @@ Some icons are really simple (like the Apple one), so the original version can b
  1. If you have "html5-original", the version string would be "original"
  2. If you have "react-line-wordmark", the version string would be "line-wordmark"
    3. -
  3. See Icon Formats and Naming Conventions for more details
    4. +
  4. See Icon Formats and Naming Conventions for more details
From 22643eb948bd6f5944e73a7a827683496d996c75 Mon Sep 17 00:00:00 2001 From: Thomas Bui Date: Fri, 11 Dec 2020 00:15:49 -0800 Subject: [PATCH 3/7] Fixed issue with alias and color in devicon.json --- CONTRIBUTING.md | 14 +++++++------- devicon.json | 8 +++----- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 48cb6fb64..643772306 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -62,9 +62,9 @@ Some icons are really simple (like the Apple one), so the original version can b
  • The plain and line versions (with or without wordmark) need to stay as simple as possible. They must have only one color and the paths are united before exporting to svg.
  • Optimize/compress your SVGs. You can use a service like compressor or SVG Editor.
    • -
  • The icon's strokes and texts must be fills. We use Icomoon to make our icon, which has its requirements
    • -
  • Each .svg file contains one version of an icon in a 0 0 128 128 viewbox
    • -
  • The naming convention for the svg file is the following: (icon name)-(original|plain|line)-(wordmark)
    • +
  • The icon's strokes and texts must be fills. We use Icomoon to make our icon, which has its requirements.
    • +
  • Each .svg file contains one version of an icon in a 0 0 128 128 viewbox.
    • +
  • The naming convention for the svg file is the following: (icon name)-(original|plain|line)(-wordmark?).
    • @@ -87,7 +87,7 @@ Some icons are really simple (like the Apple one), so the original version can b 
       
     {
-        "name": string, // the official name of the technology. Must be lower case, no space or use the dash '-' character.
+        "name": string, // the official name of the technology. Must be lower case, no space and don't have the dash '-' character.
         "tags": string[], // list of tags relating to the technology for search purpose
         "versions": {
             "svg": VersionString[], // list the svgs that you have 
@@ -115,6 +115,7 @@ Some icons are really simple (like the Apple one), so the original version can b
   Here is what VersionString means:
 
    
 
      
+  
    1.  It's the version part of an `svg` file's name
      2. 
   
    2.  If you have "html5-original", the version string would be "original" 
      3. 
   
    3.  If you have "react-line-wordmark", the version string would be "line-wordmark" 
      4. 
   
    4.  See Icon Formats and Naming Conventions for more details 
      5. 
@@ -126,7 +127,7 @@ Some icons are really simple (like the Apple one), so the original version can b
 As an example, let's assume you have created the svgs for Amazon Web Services and Redhat logos.
 
      
 
      For the Amazon Web Services svgs, you have the following versions: "original", "original-wordmark", "plain-wordmark". However, the "original" version is simple enough to be a "plain" version as well. Note that we are not using the acronym AWS.
      
-
      For the Redhat svg, you have the "original", "original-wordmark", "plain", "plain-wordmark" versions. 
      
+
      For the Redhat svg, you have the "original", "original-wordmark", "plain", and "plain-wordmark" versions. 
      
 
        
   
      1. 
     Put the svgs for each logo that you have into its own folders in /icons
@@ -201,12 +202,11 @@ As an example, let's assume you have created the svgs for Amazon Web Services an
       
      2. Note: again, don't do this in the same commits. We want to have each logo in its own PR so don't create two folders in the same commit
        3. 
     
   
-  
      3. Create a separated pull request (PR) for each icon (no matter how many variations).
+  
      4. Create a separate pull request (PR) for each icon (no matter how many variations).
     
          
       
        • This means you would have to create two PRs
          • 
       
        • For Amazon Web Services, the branch name would be icons/amazonwebservices. 
          • 
       
        • For Redhat, the branch name would be icons/redhat. 
          • 
-      
        •  
          • 
     
        
   
        5. 
   
      5. 
diff --git a/devicon.json b/devicon.json
index 71d05136c..a20801b99 100644
--- a/devicon.json
+++ b/devicon.json
@@ -523,15 +523,12 @@
                 "line-wordmark"
             ],
             "font": [
-                "line"
+                "line",
+                "line-wordmark"
             ]
         },
         "color": "#000000",
         "aliases": [
-            {
-                "base": "original",
-                "alias": "original-wordmark"
-            },
             {
                 "base": "line",
                 "alias": "plain"
@@ -2257,6 +2254,7 @@
                 "original"
             ]
         },
+        "color": "#764abc",
         "aliases": [
             {
                 "base": "original",

From 7add5debcd0fa99a8da4f3228c581537cce62eac Mon Sep 17 00:00:00 2001
From: Thomas Bui 
Date: Fri, 11 Dec 2020 13:09:56 -0800
Subject: [PATCH 4/7] Updated rules in CONTRIBUTING.md

---
 CONTRIBUTING.md | 87 +++++++++++++++++++++++++------------------------
 1 file changed, 44 insertions(+), 43 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 643772306..3739a6653 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -51,7 +51,7 @@ The plain and line versions (with or without wordmark) are designe
 The original version are only available in svg format, so they do not need to be as simple and can contain numerous colors.
 
        
 
        
-Some icons are really simple (like the Apple one), so the original version can be used as the plain version and as the icon font. In this case, you'll only need to make only one of the version (either "original" or "plain"). You can then add an alias in the devicon.json so they can be found with either the "original" or "plain" naming convention.
+Some icons are really simple (like the Apple one), so the original version can be used as the plain version and as the icon font. In this case, you'll only need to make only one of the version (either "original" or "plain"). You can then add an alias in the devicon.json so they can be found with either the "original" or "plain" naming convention. Note that this only applies to font icon versions only, not the SVG versions. SVG versions don't need aliases.
 
        
 
 
        
@@ -94,11 +94,21 @@ Some icons are really simple (like the Apple one), so the original version can b
             "font": VersionString[] // list the fonts acceptable versions that you have
         },
         "color": string, // the main color of the logo. Only track 1 color
-        "aliases": AliasObj[] // keeps track of the aliases
+        "aliases": AliasObj[] // keeps track of the aliases for the font versions ONLY
     }
    +

    + Here is what VersionString means: +

    +
      +
    1. It's the version part of an `svg` file's name
      2. +
    2. If you have "html5-original", the version string would be "original"
      3. +
    3. If you have "react-line-wordmark", the version string would be "line-wordmark"
      4. +
    4. See naming conventions section for more details
      5. +
    +

    Here is the AliasObj interface:

    @@ -110,24 +120,14 @@ Some icons are really simple (like the Apple one), so the original version can b } - -

    - Here is what VersionString means: -

    -
      -
    1. It's the version part of an `svg` file's name
      2. -
    2. If you have "html5-original", the version string would be "original"
      3. -
    3. If you have "react-line-wordmark", the version string would be "line-wordmark"
      4. -
    4. See Icon Formats and Naming Conventions for more details
      5. -
    -
    +

    Example

    -As an example, let's assume you have created the svgs for Amazon Web Services and Redhat logos. +As an example, let's assume you have created the svgs for Redhat and Amazon Web Services logos.

    -

    For the Amazon Web Services svgs, you have the following versions: "original", "original-wordmark", "plain-wordmark". However, the "original" version is simple enough to be a "plain" version as well. Note that we are not using the acronym AWS.

    For the Redhat svg, you have the "original", "original-wordmark", "plain", and "plain-wordmark" versions.

    +

    For the Amazon Web Services svgs, you have the following versions: "original", "original-wordmark", "plain-wordmark". The "original" version is simple enough to be a "plain" version as well. Note that we are not using the acronym AWS.

    1. Put the svgs for each logo that you have into its own folders in /icons @@ -139,63 +139,64 @@ As an example, let's assume you have created the svgs for Amazon Web Services an
    2. Update the devicon.json to include the icon (or variations)
        -
      • For the amazonwebservices, you would do this +
      • For the redhat, you would do this 
                   
             {
-              "name": "amazonwebservices", 
+              "name": "redhat",
               "tags": [
-                "cloud",
-                "hosting",
-                "server"
+                "server",
+                "linux"
               ],
               "versions": {
                 "svg": [ // here are the versions that are available in svgs
                   "original",
                   "original-wordmark",
+                  "plain",
                   "plain-wordmark"
                 ],
                 "font": [ // here are the versions that will be used to create icons
-                  "original", // original is simple enough to be used as plain
-                  "plain-wordmark",
-                  // note that the alias "plain" is not listed here. It must be listed in the `aliases` attribute
+                  "plain",
+                  "plain-wordmark"
                 ]
               },
-              "color": "#F7A80D", // note the '#' character
-              "aliases": [
-                {
-                    "base": "original", // here is the base version aka the one that we will upload to Icomoon
-                    "alias": "plain" // this is its alias. Our script will create a reference so we can search using "original" or "plain"
-                }
-              ]
-            }
+              "color": "#e93442", // note the '#' character
+              "aliases": [] // no aliases in this case
+            },
        • -
      • For the redhat, you would do this +
      • For the amazonwebservices, you would do this 
                   
             {
-              "name": "redhat",
+              "name": "amazonwebservices", 
               "tags": [
-                "server",
-                "linux"
+                "cloud",
+                "hosting",
+                "server"
               ],
               "versions": {
-                "svg": [
+                "svg": [ // here are the versions that are available in svgs
                   "original",
                   "original-wordmark",
-                  "plain",
                   "plain-wordmark"
                 ],
-                "font": [
-                  "plain",
-                  "plain-wordmark"
+                "font": [ // here are the versions that will be used to create icons
+                  "original", // "original" is simple enough to be used as the plain icon so we'll add "plain" to the aliases below
+                  "plain-wordmark",
+                  // note that the alias "plain" is not listed here. It must be listed in the `aliases` attribute
                 ]
               },
-              "color": "#e93442",
-              "aliases": [] // no aliases
-            },
+              "color": "#F7A80D", // note the '#' character
+              "aliases": [
+                {
+                    "base": "original", // here is the base version that we will upload to Icomoon
+                    "alias": "plain" // this is its alias. Our script will create a reference so users can search using "original" or "plain" for this icon
+                    // note that you don't provide aliases for the svg version. If "original" is not a font version (i.e can't be made into a font), there's no need to provide it with a plain alias
+                }
+              ]
+            }
        • From e3054325e0b30e17dcac73d8634272b21456ed67 Mon Sep 17 00:00:00 2001 From: Thomas Bui <43018778+Thomas-Boi@users.noreply.github.com> Date: Fri, 11 Dec 2020 16:56:26 -0800 Subject: [PATCH 5/7] Update .github/workflows/build_icons.yml Co-authored-by: Clemens Bastian <8781699+amacado@users.noreply.github.com> --- .github/workflows/build_icons.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/build_icons.yml b/.github/workflows/build_icons.yml index be62e03de..33a764e67 100644 --- a/.github/workflows/build_icons.yml +++ b/.github/workflows/build_icons.yml @@ -18,7 +18,7 @@ jobs: python -m pip install --upgrade pip pip install -r ./.github/scripts/requirements.txt npm install - - name: Run icomoon_upload.py + - name: Executing build and create fonts via icomoon run: npm run build - name: Upload geckodriver.log for debugging purposes uses: actions/upload-artifact@v2 From 460cdf5bd8e05c4822da5a68c1f183a881c1067c Mon Sep 17 00:00:00 2001 From: Thomas Bui <43018778+Thomas-Boi@users.noreply.github.com> Date: Fri, 11 Dec 2020 16:57:57 -0800 Subject: [PATCH 6/7] Revert "Fix a couple issues found in the build script" --- .../scripts/build_assets/SeleniumRunner.py | 23 ++--- .github/scripts/build_assets/util.py | 33 ------- .github/scripts/icomoon_build.py | 42 -------- .github/scripts/icomoon_peek.py | 48 +++++++-- .github/scripts/icomoon_upload.py | 71 +++++++++++++ .github/workflows/build_icons.yml | 9 +- .github/workflows/peek_icons.yml | 8 +- CONTRIBUTING.md | 99 +++++++++---------- devicon.json | 8 +- package.json | 4 +- 10 files changed, 187 insertions(+), 158 deletions(-) delete mode 100644 .github/scripts/build_assets/util.py delete mode 100644 .github/scripts/icomoon_build.py create mode 100644 .github/scripts/icomoon_upload.py diff --git a/.github/scripts/build_assets/SeleniumRunner.py b/.github/scripts/build_assets/SeleniumRunner.py index da5091aea..4c659a2b3 100644 --- a/.github/scripts/build_assets/SeleniumRunner.py +++ b/.github/scripts/build_assets/SeleniumRunner.py @@ -75,12 +75,14 @@ def set_options(self, download_path: str, geckodriver_path: str, self.driver = WebDriver(options=options, executable_path=geckodriver_path) self.driver.get(self.ICOMOON_URL) assert "IcoMoon App" in self.driver.title + # wait until the whole web page is loaded by testing the hamburger input - WebDriverWait(self.driver, self.LONG_WAIT_IN_SEC).until( - ec.element_to_be_clickable((By.XPATH, "(//i[@class='icon-menu'])[2]")) + hamburger_input = WebDriverWait(self.driver, SeleniumRunner.LONG_WAIT_IN_SEC).until( + ec.element_to_be_clickable((By.CSS_SELECTOR, + "button.btn5.lh-def.transparent i.icon-menu")) ) + hamburger_input.click() print("Accessed icomoon.io") - def upload_icomoon(self, icomoon_json_path: str): """ @@ -90,16 +92,11 @@ def upload_icomoon(self, icomoon_json_path: str): """ print("Uploading icomoon.json file...") try: - self.click_hamburger_input() - # find the file input and enter the file path - import_btn = self.driver.find_element(By.XPATH, "(//li[@class='file'])[1]//input") + import_btn = WebDriverWait(self.driver, SeleniumRunner.LONG_WAIT_IN_SEC).until( + ec.element_to_be_clickable((By.CSS_SELECTOR, "div#file input")) + ) import_btn.send_keys(icomoon_json_path) - except SeleniumTimeoutException as e: - print(e.stacktrace) - print("Selenium timed out. Couldn't find import button.") - self.close() - raise e except Exception as e: self.close() raise e @@ -162,8 +159,8 @@ def click_hamburger_input(self): :return: None. """ try: - hamburger_input = self.driver.find_element_by_xpath( - "(//i[@class='icon-menu'])[2]" + hamburger_input = self.driver.find_element_by_css_selector( + "button.btn5.lh-def.transparent i.icon-menu" ) menu_appear_callback = ec.element_to_be_clickable( diff --git a/.github/scripts/build_assets/util.py b/.github/scripts/build_assets/util.py deleted file mode 100644 index 1c31e7771..000000000 --- a/.github/scripts/build_assets/util.py +++ /dev/null @@ -1,33 +0,0 @@ -from pathlib import Path -from argparse import ArgumentParser -from build_assets.PathResolverAction import PathResolverAction - -def get_commandline_args(): - parser = ArgumentParser(description="Upload svgs to Icomoon to create icon files.") - - parser.add_argument("--headless", - help="Whether to run the browser in headless/no UI mode", - action="store_true") - - parser.add_argument("geckodriver_path", - help="The path to the firefox executable file", - action=PathResolverAction) - - parser.add_argument("icomoon_json_path", - help="The path to the icomoon.json aka the selection.json created by Icomoon", - action=PathResolverAction) - - parser.add_argument("devicon_json_path", - help="The path to the devicon.json", - action=PathResolverAction) - - parser.add_argument("icons_folder_path", - help="The path to the icons folder", - action=PathResolverAction) - - parser.add_argument("download_path", - help="The path where you'd like to download the Icomoon files to", - action=PathResolverAction) - - - return parser.parse_args() \ No newline at end of file diff --git a/.github/scripts/icomoon_build.py b/.github/scripts/icomoon_build.py deleted file mode 100644 index 6b3eb352b..000000000 --- a/.github/scripts/icomoon_build.py +++ /dev/null @@ -1,42 +0,0 @@ -from pathlib import Path -from selenium.common.exceptions import TimeoutException - -# pycharm complains that build_assets is an unresolved ref -# don't worry about it, the script still runs -from build_assets.SeleniumRunner import SeleniumRunner -from build_assets import filehandler, util - - -def main(): - args = util.get_commandline_args() - new_icons = filehandler.find_new_icons(args.devicon_json_path, args.icomoon_json_path) - if len(new_icons) == 0: - print("No files need to be uploaded. Ending script...") - return - - # print list of new icons - print("List of new icons:", *new_icons, sep = "\n") - - runner = None - try: - runner = SeleniumRunner(args.download_path, - args.geckodriver_path, args.headless) - runner.upload_icomoon(args.icomoon_json_path) - svgs = filehandler.get_svgs_paths(new_icons, args.icons_folder_path) - runner.upload_svgs(svgs) - - zip_name = "devicon-v1.0.zip" - zip_path = Path(args.download_path, zip_name) - runner.download_icomoon_fonts(zip_path) - filehandler.extract_files(str(zip_path), args.download_path) - filehandler.rename_extracted_files(args.download_path) - print("Task completed.") - except TimeoutException as e: - print(e) - print(e.stacktrace) - finally: - runner.close() - - -if __name__ == "__main__": - main() diff --git a/.github/scripts/icomoon_peek.py b/.github/scripts/icomoon_peek.py index 6fd55f59c..d2dea0077 100644 --- a/.github/scripts/icomoon_peek.py +++ b/.github/scripts/icomoon_peek.py @@ -1,31 +1,61 @@ +from pathlib import Path +from argparse import ArgumentParser from selenium.common.exceptions import TimeoutException # pycharm complains that build_assets is an unresolved ref # don't worry about it, the script still runs from build_assets.SeleniumRunner import SeleniumRunner -from build_assets import filehandler, util +from build_assets import filehandler +from build_assets.PathResolverAction import PathResolverAction def main(): - args = util.get_commandline_args() + parser = ArgumentParser(description="Upload svgs to Icomoon to create icon files.") + + parser.add_argument("--headless", + help="Whether to run the browser in headless/no UI mode", + action="store_true") + + parser.add_argument("geckodriver_path", + help="The path to the firefox executable file", + action=PathResolverAction) + + parser.add_argument("icomoon_json_path", + help="The path to the icomoon.json aka the selection.json created by Icomoon", + action=PathResolverAction) + + parser.add_argument("devicon_json_path", + help="The path to the devicon.json", + action=PathResolverAction) + + parser.add_argument("icons_folder_path", + help="The path to the icons folder", + action=PathResolverAction) + + parser.add_argument("download_path", + help="The path where you'd like to download the Icomoon files to", + action=PathResolverAction) + + args = parser.parse_args() + new_icons = filehandler.find_new_icons(args.devicon_json_path, args.icomoon_json_path) if len(new_icons) == 0: - print("No files need to be uploaded. Ending script...") + print("No files need to be peek. Ending script...") return - # print list of new icons - print("List of new icons:", *new_icons, sep = "\n") - - runner = None + # print list of new icons, separated by comma + print("List of new icons:") + print(*new_icons, sep = "\n") try: - runner = SeleniumRunner(args.download_path, args.geckodriver_path, args.headless) + runner = SeleniumRunner(args.download_path, + args.geckodriver_path, args.headless) svgs = filehandler.get_svgs_paths(new_icons, args.icons_folder_path) runner.upload_svgs(svgs) + runner.close() print("Task completed.") except TimeoutException as e: print(e) print(e.stacktrace) - finally: runner.close() diff --git a/.github/scripts/icomoon_upload.py b/.github/scripts/icomoon_upload.py new file mode 100644 index 000000000..68e49ab47 --- /dev/null +++ b/.github/scripts/icomoon_upload.py @@ -0,0 +1,71 @@ +from pathlib import Path +from argparse import ArgumentParser +from selenium.common.exceptions import TimeoutException + +# pycharm complains that build_assets is an unresolved ref +# don't worry about it, the script still runs +from build_assets.SeleniumRunner import SeleniumRunner +from build_assets import filehandler +from build_assets.PathResolverAction import PathResolverAction + + +def main(): + parser = ArgumentParser(description="Upload svgs to Icomoon to create icon files.") + + parser.add_argument("--headless", + help="Whether to run the browser in headless/no UI mode", + action="store_true") + + parser.add_argument("geckodriver_path", + help="The path to the firefox executable file", + action=PathResolverAction) + + parser.add_argument("icomoon_json_path", + help="The path to the icomoon.json aka the selection.json created by Icomoon", + action=PathResolverAction) + + parser.add_argument("devicon_json_path", + help="The path to the devicon.json", + action=PathResolverAction) + + parser.add_argument("icons_folder_path", + help="The path to the icons folder", + action=PathResolverAction) + + parser.add_argument("download_path", + help="The path where you'd like to download the Icomoon files to", + action=PathResolverAction) + + args = parser.parse_args() + + new_icons = filehandler.find_new_icons(args.devicon_json_path, args.icomoon_json_path) + if len(new_icons) == 0: + print("No files need to be uploaded. Ending script...") + return + + # print list of new icons, separated by comma + print("List of new icons:") + print(*new_icons, sep = "\n") + try: + runner = SeleniumRunner(args.download_path, + args.geckodriver_path, args.headless) + runner.upload_icomoon(args.icomoon_json_path) + svgs = filehandler.get_svgs_paths(new_icons, args.icons_folder_path) + runner.upload_svgs(svgs) + + + zip_name = "devicon-v1.0.zip" + zip_path = Path(args.download_path, zip_name) + runner.download_icomoon_fonts(zip_path) + filehandler.extract_files(str(zip_path), args.download_path) + filehandler.rename_extracted_files(args.download_path) + runner.close() + print("Task completed.") + except TimeoutException as e: + print(e) + print(e.stacktrace) + runner.close() + + +if __name__ == "__main__": + main() diff --git a/.github/workflows/build_icons.yml b/.github/workflows/build_icons.yml index 33a764e67..2719cce70 100644 --- a/.github/workflows/build_icons.yml +++ b/.github/workflows/build_icons.yml @@ -18,8 +18,11 @@ jobs: python -m pip install --upgrade pip pip install -r ./.github/scripts/requirements.txt npm install - - name: Executing build and create fonts via icomoon - run: npm run build + - name: Run icomoon_upload.py + run: > + python ./.github/scripts/icomoon_upload.py + ./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe + ./icomoon.json ./devicon.json ./icons ./ --headless - name: Upload geckodriver.log for debugging purposes uses: actions/upload-artifact@v2 if: ${{failure()}} @@ -32,7 +35,7 @@ jobs: with: name: new_icons path: ./new_icons.png - - name: Build devicon.min.css + - name: Running npm task for building devicon.min.css if: ${{ success() }} run: npm run build-css - name: Create Pull Request diff --git a/.github/workflows/peek_icons.yml b/.github/workflows/peek_icons.yml index 5bc2953a4..9f9af8573 100644 --- a/.github/workflows/peek_icons.yml +++ b/.github/workflows/peek_icons.yml @@ -16,12 +16,16 @@ jobs: uses: actions/setup-python@v2 with: python-version: 3.8 - - name: Install dependencies (python, pip) + - name: Install dependencies (python, pip, npm) run: | python -m pip install --upgrade pip pip install -r ./.github/scripts/requirements.txt + npm install - name: Run icomoon_peek.py - run: npm run peek + run: > + python ./.github/scripts/icomoon_peek.py + ./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe + ./icomoon.json ./devicon.json ./icons ./ --headless - name: Upload geckodriver.log for debugging purposes uses: actions/upload-artifact@v2 if: ${{failure()}} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3739a6653..99b60aab9 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -51,7 +51,7 @@ The plain and line versions (with or without wordmark) are designe The original version are only available in svg format, so they do not need to be as simple and can contain numerous colors.

        -Some icons are really simple (like the Apple one), so the original version can be used as the plain version and as the icon font. In this case, you'll only need to make only one of the version (either "original" or "plain"). You can then add an alias in the devicon.json so they can be found with either the "original" or "plain" naming convention. Note that this only applies to font icon versions only, not the SVG versions. SVG versions don't need aliases. +Some icons are really simple (like the Apple one), so the original version can be used as the plain version and as the icon font. In this case, you'll only need to make only one of the version (either "original" or "plain"). You can then add an alias in the devicon.json so they can be found with either the "original" or "plain" naming convention.

        @@ -62,9 +62,9 @@ Some icons are really simple (like the Apple one), so the original version can b
      • The plain and line versions (with or without wordmark) need to stay as simple as possible. They must have only one color and the paths are united before exporting to svg.
      • Optimize/compress your SVGs. You can use a service like compressor or SVG Editor.
        • -
      • The icon's strokes and texts must be fills. We use Icomoon to make our icon, which has its requirements.
        • -
      • Each .svg file contains one version of an icon in a 0 0 128 128 viewbox.
        • -
      • The naming convention for the svg file is the following: (icon name)-(original|plain|line)(-wordmark?).
        • +
      • The icon's strokes and texts must be fills. We use Icomoon to make our icon, which has its requirements
        • +
      • Each .svg file contains one version of an icon in a 0 0 128 128 viewbox
        • +
      • The naming convention for the svg file is the following: (icon name)-(original|plain|line)-(wordmark)
      @@ -87,28 +87,18 @@ Some icons are really simple (like the Apple one), so the original version can b 
         
     {
-        "name": string, // the official name of the technology. Must be lower case, no space and don't have the dash '-' character.
+        "name": string, // the official name of the technology. Must be lower case, no space or use the dash '-' character.
         "tags": string[], // list of tags relating to the technology for search purpose
         "versions": {
             "svg": VersionString[], // list the svgs that you have 
             "font": VersionString[] // list the fonts acceptable versions that you have
         },
         "color": string, // the main color of the logo. Only track 1 color
-        "aliases": AliasObj[] // keeps track of the aliases for the font versions ONLY
+        "aliases": AliasObj[] // keeps track of the aliases
     }
      -

      - Here is what VersionString means: -

      -
        -
      1. It's the version part of an `svg` file's name
        2. -
      2. If you have "html5-original", the version string would be "original"
        3. -
      3. If you have "react-line-wordmark", the version string would be "line-wordmark"
        4. -
      4. See naming conventions section for more details
        5. -
      -

      Here is the AliasObj interface:

      @@ -120,14 +110,23 @@ Some icons are really simple (like the Apple one), so the original version can b } -
      +

      + Here is what VersionString means: +

      +
        +
      1. If you have "html5-original", the version string would be "original"
        2. +
      2. If you have "react-line-wordmark", the version string would be "line-wordmark"
        3. +
      3. See Icon Formats and Naming Conventions for more details
        4. +
      + +

      Example

      -As an example, let's assume you have created the svgs for Redhat and Amazon Web Services logos. +As an example, let's assume you have created the svgs for Amazon Web Services and Redhat logos.

      -

      For the Redhat svg, you have the "original", "original-wordmark", "plain", and "plain-wordmark" versions.

      -

      For the Amazon Web Services svgs, you have the following versions: "original", "original-wordmark", "plain-wordmark". The "original" version is simple enough to be a "plain" version as well. Note that we are not using the acronym AWS.

      +

      For the Amazon Web Services svgs, you have the following versions: "original", "original-wordmark", "plain-wordmark". However, the "original" version is simple enough to be a "plain" version as well. Note that we are not using the acronym AWS.

      +

      For the Redhat svg, you have the "original", "original-wordmark", "plain", "plain-wordmark" versions.

      1. Put the svgs for each logo that you have into its own folders in /icons @@ -139,75 +138,75 @@ As an example, let's assume you have created the svgs for Redhat and Amazon Web
      2. Update the devicon.json to include the icon (or variations)
          -
        • For the redhat, you would do this +
        • For the amazonwebservices, you would do this 
                     
             {
-              "name": "redhat",
+              "name": "amazonwebservices", 
               "tags": [
-                "server",
-                "linux"
+                "cloud",
+                "hosting",
+                "server"
               ],
               "versions": {
                 "svg": [ // here are the versions that are available in svgs
                   "original",
                   "original-wordmark",
-                  "plain",
                   "plain-wordmark"
                 ],
                 "font": [ // here are the versions that will be used to create icons
-                  "plain",
-                  "plain-wordmark"
+                  "original", // original is simple enough to be used as plain
+                  "plain-wordmark",
+                  // note that the alias "plain" is not listed here. It must be listed in the `aliases` attribute
                 ]
               },
-              "color": "#e93442", // note the '#' character
-              "aliases": [] // no aliases in this case
-            },
+              "color": "#F7A80D", // note the '#' character
+              "aliases": [
+                {
+                    "base": "original", // here is the base version aka the one that we will upload to Icomoon
+                    "alias": "plain" // this is its alias. Our script will create a reference so we can search using "original" or "plain"
+                }
+              ]
+            }
          • -
        • For the amazonwebservices, you would do this +
        • For the redhat, you would do this 
                     
             {
-              "name": "amazonwebservices", 
+              "name": "redhat",
               "tags": [
-                "cloud",
-                "hosting",
-                "server"
+                "server",
+                "linux"
               ],
               "versions": {
-                "svg": [ // here are the versions that are available in svgs
+                "svg": [
                   "original",
                   "original-wordmark",
+                  "plain",
                   "plain-wordmark"
                 ],
-                "font": [ // here are the versions that will be used to create icons
-                  "original", // "original" is simple enough to be used as the plain icon so we'll add "plain" to the aliases below
-                  "plain-wordmark",
-                  // note that the alias "plain" is not listed here. It must be listed in the `aliases` attribute
+                "font": [
+                  "plain",
+                  "plain-wordmark"
                 ]
               },
-              "color": "#F7A80D", // note the '#' character
-              "aliases": [
-                {
-                    "base": "original", // here is the base version that we will upload to Icomoon
-                    "alias": "plain" // this is its alias. Our script will create a reference so users can search using "original" or "plain" for this icon
-                    // note that you don't provide aliases for the svg version. If "original" is not a font version (i.e can't be made into a font), there's no need to provide it with a plain alias
-                }
-              ]
-            }
+              "color": "#e93442",
+              "aliases": [] // no aliases
+            },
        • Note: again, don't do this in the same commits. We want to have each logo in its own PR so don't create two folders in the same commit
        3. -
      3. Create a separate pull request (PR) for each icon (no matter how many variations). +
      4. Create a separated pull request (PR) for each icon (no matter how many variations).
        • This means you would have to create two PRs
        • For Amazon Web Services, the branch name would be icons/amazonwebservices.
        • For Redhat, the branch name would be icons/redhat.
          • +
      5. diff --git a/devicon.json b/devicon.json index a20801b99..71d05136c 100644 --- a/devicon.json +++ b/devicon.json @@ -523,12 +523,15 @@ "line-wordmark" ], "font": [ - "line", - "line-wordmark" + "line" ] }, "color": "#000000", "aliases": [ + { + "base": "original", + "alias": "original-wordmark" + }, { "base": "line", "alias": "plain" @@ -2254,7 +2257,6 @@ "original" ] }, - "color": "#764abc", "aliases": [ { "base": "original", diff --git a/package.json b/package.json index 602e5c48e..01b2b98fe 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,7 @@ "description": "Programming related icons collection", "main": "devicon.min.css", "scripts": { - "build-css": "gulp updateCss && gulp clean", - "build": "python ./.github/scripts/icomoon_build.py ./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe ./icomoon.json ./devicon.json ./icons ./ --headless", - "peek": "python ./.github/scripts/icomoon_peek.py ./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe ./icomoon.json ./devicon.json ./icons ./ --headless" + "build-css": "gulp updateCss && gulp clean" }, "repository": { "type": "git", From 7bf127d4989337ab3f69c4e0cbfd910698f21ee7 Mon Sep 17 00:00:00 2001 From: Clemens Bastian <8781699+amacado@users.noreply.github.com> Date: Sat, 12 Dec 2020 04:41:25 +0100 Subject: [PATCH 7/7] Revert "Revert "Fix a couple issues found in the build script"" --- .../scripts/build_assets/SeleniumRunner.py | 23 +++-- .github/scripts/build_assets/util.py | 33 +++++++ .github/scripts/icomoon_build.py | 42 ++++++++ .github/scripts/icomoon_peek.py | 48 ++------- .github/scripts/icomoon_upload.py | 71 ------------- .github/workflows/build_icons.yml | 9 +- .github/workflows/peek_icons.yml | 8 +- CONTRIBUTING.md | 99 ++++++++++--------- devicon.json | 8 +- package.json | 4 +- 10 files changed, 158 insertions(+), 187 deletions(-) create mode 100644 .github/scripts/build_assets/util.py create mode 100644 .github/scripts/icomoon_build.py delete mode 100644 .github/scripts/icomoon_upload.py diff --git a/.github/scripts/build_assets/SeleniumRunner.py b/.github/scripts/build_assets/SeleniumRunner.py index 4c659a2b3..da5091aea 100644 --- a/.github/scripts/build_assets/SeleniumRunner.py +++ b/.github/scripts/build_assets/SeleniumRunner.py @@ -75,14 +75,12 @@ def set_options(self, download_path: str, geckodriver_path: str, self.driver = WebDriver(options=options, executable_path=geckodriver_path) self.driver.get(self.ICOMOON_URL) assert "IcoMoon App" in self.driver.title - # wait until the whole web page is loaded by testing the hamburger input - hamburger_input = WebDriverWait(self.driver, SeleniumRunner.LONG_WAIT_IN_SEC).until( - ec.element_to_be_clickable((By.CSS_SELECTOR, - "button.btn5.lh-def.transparent i.icon-menu")) + WebDriverWait(self.driver, self.LONG_WAIT_IN_SEC).until( + ec.element_to_be_clickable((By.XPATH, "(//i[@class='icon-menu'])[2]")) ) - hamburger_input.click() print("Accessed icomoon.io") + def upload_icomoon(self, icomoon_json_path: str): """ @@ -92,11 +90,16 @@ def upload_icomoon(self, icomoon_json_path: str): """ print("Uploading icomoon.json file...") try: + self.click_hamburger_input() + # find the file input and enter the file path - import_btn = WebDriverWait(self.driver, SeleniumRunner.LONG_WAIT_IN_SEC).until( - ec.element_to_be_clickable((By.CSS_SELECTOR, "div#file input")) - ) + import_btn = self.driver.find_element(By.XPATH, "(//li[@class='file'])[1]//input") import_btn.send_keys(icomoon_json_path) + except SeleniumTimeoutException as e: + print(e.stacktrace) + print("Selenium timed out. Couldn't find import button.") + self.close() + raise e except Exception as e: self.close() raise e @@ -159,8 +162,8 @@ def click_hamburger_input(self): :return: None. """ try: - hamburger_input = self.driver.find_element_by_css_selector( - "button.btn5.lh-def.transparent i.icon-menu" + hamburger_input = self.driver.find_element_by_xpath( + "(//i[@class='icon-menu'])[2]" ) menu_appear_callback = ec.element_to_be_clickable( diff --git a/.github/scripts/build_assets/util.py b/.github/scripts/build_assets/util.py new file mode 100644 index 000000000..1c31e7771 --- /dev/null +++ b/.github/scripts/build_assets/util.py @@ -0,0 +1,33 @@ +from pathlib import Path +from argparse import ArgumentParser +from build_assets.PathResolverAction import PathResolverAction + +def get_commandline_args(): + parser = ArgumentParser(description="Upload svgs to Icomoon to create icon files.") + + parser.add_argument("--headless", + help="Whether to run the browser in headless/no UI mode", + action="store_true") + + parser.add_argument("geckodriver_path", + help="The path to the firefox executable file", + action=PathResolverAction) + + parser.add_argument("icomoon_json_path", + help="The path to the icomoon.json aka the selection.json created by Icomoon", + action=PathResolverAction) + + parser.add_argument("devicon_json_path", + help="The path to the devicon.json", + action=PathResolverAction) + + parser.add_argument("icons_folder_path", + help="The path to the icons folder", + action=PathResolverAction) + + parser.add_argument("download_path", + help="The path where you'd like to download the Icomoon files to", + action=PathResolverAction) + + + return parser.parse_args() \ No newline at end of file diff --git a/.github/scripts/icomoon_build.py b/.github/scripts/icomoon_build.py new file mode 100644 index 000000000..6b3eb352b --- /dev/null +++ b/.github/scripts/icomoon_build.py @@ -0,0 +1,42 @@ +from pathlib import Path +from selenium.common.exceptions import TimeoutException + +# pycharm complains that build_assets is an unresolved ref +# don't worry about it, the script still runs +from build_assets.SeleniumRunner import SeleniumRunner +from build_assets import filehandler, util + + +def main(): + args = util.get_commandline_args() + new_icons = filehandler.find_new_icons(args.devicon_json_path, args.icomoon_json_path) + if len(new_icons) == 0: + print("No files need to be uploaded. Ending script...") + return + + # print list of new icons + print("List of new icons:", *new_icons, sep = "\n") + + runner = None + try: + runner = SeleniumRunner(args.download_path, + args.geckodriver_path, args.headless) + runner.upload_icomoon(args.icomoon_json_path) + svgs = filehandler.get_svgs_paths(new_icons, args.icons_folder_path) + runner.upload_svgs(svgs) + + zip_name = "devicon-v1.0.zip" + zip_path = Path(args.download_path, zip_name) + runner.download_icomoon_fonts(zip_path) + filehandler.extract_files(str(zip_path), args.download_path) + filehandler.rename_extracted_files(args.download_path) + print("Task completed.") + except TimeoutException as e: + print(e) + print(e.stacktrace) + finally: + runner.close() + + +if __name__ == "__main__": + main() diff --git a/.github/scripts/icomoon_peek.py b/.github/scripts/icomoon_peek.py index d2dea0077..6fd55f59c 100644 --- a/.github/scripts/icomoon_peek.py +++ b/.github/scripts/icomoon_peek.py @@ -1,61 +1,31 @@ -from pathlib import Path -from argparse import ArgumentParser from selenium.common.exceptions import TimeoutException # pycharm complains that build_assets is an unresolved ref # don't worry about it, the script still runs from build_assets.SeleniumRunner import SeleniumRunner -from build_assets import filehandler -from build_assets.PathResolverAction import PathResolverAction +from build_assets import filehandler, util def main(): - parser = ArgumentParser(description="Upload svgs to Icomoon to create icon files.") - - parser.add_argument("--headless", - help="Whether to run the browser in headless/no UI mode", - action="store_true") - - parser.add_argument("geckodriver_path", - help="The path to the firefox executable file", - action=PathResolverAction) - - parser.add_argument("icomoon_json_path", - help="The path to the icomoon.json aka the selection.json created by Icomoon", - action=PathResolverAction) - - parser.add_argument("devicon_json_path", - help="The path to the devicon.json", - action=PathResolverAction) - - parser.add_argument("icons_folder_path", - help="The path to the icons folder", - action=PathResolverAction) - - parser.add_argument("download_path", - help="The path where you'd like to download the Icomoon files to", - action=PathResolverAction) - - args = parser.parse_args() - + args = util.get_commandline_args() new_icons = filehandler.find_new_icons(args.devicon_json_path, args.icomoon_json_path) if len(new_icons) == 0: - print("No files need to be peek. Ending script...") + print("No files need to be uploaded. Ending script...") return - # print list of new icons, separated by comma - print("List of new icons:") - print(*new_icons, sep = "\n") + # print list of new icons + print("List of new icons:", *new_icons, sep = "\n") + + runner = None try: - runner = SeleniumRunner(args.download_path, - args.geckodriver_path, args.headless) + runner = SeleniumRunner(args.download_path, args.geckodriver_path, args.headless) svgs = filehandler.get_svgs_paths(new_icons, args.icons_folder_path) runner.upload_svgs(svgs) - runner.close() print("Task completed.") except TimeoutException as e: print(e) print(e.stacktrace) + finally: runner.close() diff --git a/.github/scripts/icomoon_upload.py b/.github/scripts/icomoon_upload.py deleted file mode 100644 index 68e49ab47..000000000 --- a/.github/scripts/icomoon_upload.py +++ /dev/null @@ -1,71 +0,0 @@ -from pathlib import Path -from argparse import ArgumentParser -from selenium.common.exceptions import TimeoutException - -# pycharm complains that build_assets is an unresolved ref -# don't worry about it, the script still runs -from build_assets.SeleniumRunner import SeleniumRunner -from build_assets import filehandler -from build_assets.PathResolverAction import PathResolverAction - - -def main(): - parser = ArgumentParser(description="Upload svgs to Icomoon to create icon files.") - - parser.add_argument("--headless", - help="Whether to run the browser in headless/no UI mode", - action="store_true") - - parser.add_argument("geckodriver_path", - help="The path to the firefox executable file", - action=PathResolverAction) - - parser.add_argument("icomoon_json_path", - help="The path to the icomoon.json aka the selection.json created by Icomoon", - action=PathResolverAction) - - parser.add_argument("devicon_json_path", - help="The path to the devicon.json", - action=PathResolverAction) - - parser.add_argument("icons_folder_path", - help="The path to the icons folder", - action=PathResolverAction) - - parser.add_argument("download_path", - help="The path where you'd like to download the Icomoon files to", - action=PathResolverAction) - - args = parser.parse_args() - - new_icons = filehandler.find_new_icons(args.devicon_json_path, args.icomoon_json_path) - if len(new_icons) == 0: - print("No files need to be uploaded. Ending script...") - return - - # print list of new icons, separated by comma - print("List of new icons:") - print(*new_icons, sep = "\n") - try: - runner = SeleniumRunner(args.download_path, - args.geckodriver_path, args.headless) - runner.upload_icomoon(args.icomoon_json_path) - svgs = filehandler.get_svgs_paths(new_icons, args.icons_folder_path) - runner.upload_svgs(svgs) - - - zip_name = "devicon-v1.0.zip" - zip_path = Path(args.download_path, zip_name) - runner.download_icomoon_fonts(zip_path) - filehandler.extract_files(str(zip_path), args.download_path) - filehandler.rename_extracted_files(args.download_path) - runner.close() - print("Task completed.") - except TimeoutException as e: - print(e) - print(e.stacktrace) - runner.close() - - -if __name__ == "__main__": - main() diff --git a/.github/workflows/build_icons.yml b/.github/workflows/build_icons.yml index 2719cce70..33a764e67 100644 --- a/.github/workflows/build_icons.yml +++ b/.github/workflows/build_icons.yml @@ -18,11 +18,8 @@ jobs: python -m pip install --upgrade pip pip install -r ./.github/scripts/requirements.txt npm install - - name: Run icomoon_upload.py - run: > - python ./.github/scripts/icomoon_upload.py - ./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe - ./icomoon.json ./devicon.json ./icons ./ --headless + - name: Executing build and create fonts via icomoon + run: npm run build - name: Upload geckodriver.log for debugging purposes uses: actions/upload-artifact@v2 if: ${{failure()}} @@ -35,7 +32,7 @@ jobs: with: name: new_icons path: ./new_icons.png - - name: Running npm task for building devicon.min.css + - name: Build devicon.min.css if: ${{ success() }} run: npm run build-css - name: Create Pull Request diff --git a/.github/workflows/peek_icons.yml b/.github/workflows/peek_icons.yml index 9f9af8573..5bc2953a4 100644 --- a/.github/workflows/peek_icons.yml +++ b/.github/workflows/peek_icons.yml @@ -16,16 +16,12 @@ jobs: uses: actions/setup-python@v2 with: python-version: 3.8 - - name: Install dependencies (python, pip, npm) + - name: Install dependencies (python, pip) run: | python -m pip install --upgrade pip pip install -r ./.github/scripts/requirements.txt - npm install - name: Run icomoon_peek.py - run: > - python ./.github/scripts/icomoon_peek.py - ./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe - ./icomoon.json ./devicon.json ./icons ./ --headless + run: npm run peek - name: Upload geckodriver.log for debugging purposes uses: actions/upload-artifact@v2 if: ${{failure()}} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 99b60aab9..3739a6653 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -51,7 +51,7 @@ The plain and line versions (with or without wordmark) are designe The original version are only available in svg format, so they do not need to be as simple and can contain numerous colors.

        -Some icons are really simple (like the Apple one), so the original version can be used as the plain version and as the icon font. In this case, you'll only need to make only one of the version (either "original" or "plain"). You can then add an alias in the devicon.json so they can be found with either the "original" or "plain" naming convention. +Some icons are really simple (like the Apple one), so the original version can be used as the plain version and as the icon font. In this case, you'll only need to make only one of the version (either "original" or "plain"). You can then add an alias in the devicon.json so they can be found with either the "original" or "plain" naming convention. Note that this only applies to font icon versions only, not the SVG versions. SVG versions don't need aliases.

        @@ -62,9 +62,9 @@ Some icons are really simple (like the Apple one), so the original version can b
      6. The plain and line versions (with or without wordmark) need to stay as simple as possible. They must have only one color and the paths are united before exporting to svg.
      7. Optimize/compress your SVGs. You can use a service like compressor or SVG Editor.
        8. -
      8. The icon's strokes and texts must be fills. We use Icomoon to make our icon, which has its requirements
        9. -
      9. Each .svg file contains one version of an icon in a 0 0 128 128 viewbox
        10. -
      10. The naming convention for the svg file is the following: (icon name)-(original|plain|line)-(wordmark)
        11. +
      11. The icon's strokes and texts must be fills. We use Icomoon to make our icon, which has its requirements.
        12. +
      12. Each .svg file contains one version of an icon in a 0 0 128 128 viewbox.
        13. +
      13. The naming convention for the svg file is the following: (icon name)-(original|plain|line)(-wordmark?).
        14. @@ -87,18 +87,28 @@ Some icons are really simple (like the Apple one), so the original version can b 
           
     {
-        "name": string, // the official name of the technology. Must be lower case, no space or use the dash '-' character.
+        "name": string, // the official name of the technology. Must be lower case, no space and don't have the dash '-' character.
         "tags": string[], // list of tags relating to the technology for search purpose
         "versions": {
             "svg": VersionString[], // list the svgs that you have 
             "font": VersionString[] // list the fonts acceptable versions that you have
         },
         "color": string, // the main color of the logo. Only track 1 color
-        "aliases": AliasObj[] // keeps track of the aliases
+        "aliases": AliasObj[] // keeps track of the aliases for the font versions ONLY
     }
        +

        + Here is what VersionString means: +

        +
          +
        1. It's the version part of an `svg` file's name
          2. +
        2. If you have "html5-original", the version string would be "original"
          3. +
        3. If you have "react-line-wordmark", the version string would be "line-wordmark"
          4. +
        4. See naming conventions section for more details
          5. +
        +

        Here is the AliasObj interface:

        @@ -110,23 +120,14 @@ Some icons are really simple (like the Apple one), so the original version can b } - -

        - Here is what VersionString means: -

        -
          -
        1. If you have "html5-original", the version string would be "original"
          2. -
        2. If you have "react-line-wordmark", the version string would be "line-wordmark"
          3. -
        3. See Icon Formats and Naming Conventions for more details
          4. -
        -
        +

        Example

        -As an example, let's assume you have created the svgs for Amazon Web Services and Redhat logos. +As an example, let's assume you have created the svgs for Redhat and Amazon Web Services logos.

        -

        For the Amazon Web Services svgs, you have the following versions: "original", "original-wordmark", "plain-wordmark". However, the "original" version is simple enough to be a "plain" version as well. Note that we are not using the acronym AWS.

        -

        For the Redhat svg, you have the "original", "original-wordmark", "plain", "plain-wordmark" versions.

        +

        For the Redhat svg, you have the "original", "original-wordmark", "plain", and "plain-wordmark" versions.

        +

        For the Amazon Web Services svgs, you have the following versions: "original", "original-wordmark", "plain-wordmark". The "original" version is simple enough to be a "plain" version as well. Note that we are not using the acronym AWS.

        1. Put the svgs for each logo that you have into its own folders in /icons @@ -138,75 +139,75 @@ As an example, let's assume you have created the svgs for Amazon Web Services an
        2. Update the devicon.json to include the icon (or variations)
            -
          • For the amazonwebservices, you would do this +
          • For the redhat, you would do this 
                       
             {
-              "name": "amazonwebservices", 
+              "name": "redhat",
               "tags": [
-                "cloud",
-                "hosting",
-                "server"
+                "server",
+                "linux"
               ],
               "versions": {
                 "svg": [ // here are the versions that are available in svgs
                   "original",
                   "original-wordmark",
+                  "plain",
                   "plain-wordmark"
                 ],
                 "font": [ // here are the versions that will be used to create icons
-                  "original", // original is simple enough to be used as plain
-                  "plain-wordmark",
-                  // note that the alias "plain" is not listed here. It must be listed in the `aliases` attribute
+                  "plain",
+                  "plain-wordmark"
                 ]
               },
-              "color": "#F7A80D", // note the '#' character
-              "aliases": [
-                {
-                    "base": "original", // here is the base version aka the one that we will upload to Icomoon
-                    "alias": "plain" // this is its alias. Our script will create a reference so we can search using "original" or "plain"
-                }
-              ]
-            }
+              "color": "#e93442", // note the '#' character
+              "aliases": [] // no aliases in this case
+            },
            • -
          • For the redhat, you would do this +
          • For the amazonwebservices, you would do this 
                       
             {
-              "name": "redhat",
+              "name": "amazonwebservices", 
               "tags": [
-                "server",
-                "linux"
+                "cloud",
+                "hosting",
+                "server"
               ],
               "versions": {
-                "svg": [
+                "svg": [ // here are the versions that are available in svgs
                   "original",
                   "original-wordmark",
-                  "plain",
                   "plain-wordmark"
                 ],
-                "font": [
-                  "plain",
-                  "plain-wordmark"
+                "font": [ // here are the versions that will be used to create icons
+                  "original", // "original" is simple enough to be used as the plain icon so we'll add "plain" to the aliases below
+                  "plain-wordmark",
+                  // note that the alias "plain" is not listed here. It must be listed in the `aliases` attribute
                 ]
               },
-              "color": "#e93442",
-              "aliases": [] // no aliases
-            },
+              "color": "#F7A80D", // note the '#' character
+              "aliases": [
+                {
+                    "base": "original", // here is the base version that we will upload to Icomoon
+                    "alias": "plain" // this is its alias. Our script will create a reference so users can search using "original" or "plain" for this icon
+                    // note that you don't provide aliases for the svg version. If "original" is not a font version (i.e can't be made into a font), there's no need to provide it with a plain alias
+                }
+              ]
+            }
          • Note: again, don't do this in the same commits. We want to have each logo in its own PR so don't create two folders in the same commit
          3. -
        3. Create a separated pull request (PR) for each icon (no matter how many variations). +
        4. Create a separate pull request (PR) for each icon (no matter how many variations).
          • This means you would have to create two PRs
          • For Amazon Web Services, the branch name would be icons/amazonwebservices.
          • For Redhat, the branch name would be icons/redhat.
            • -
        5. diff --git a/devicon.json b/devicon.json index 71d05136c..a20801b99 100644 --- a/devicon.json +++ b/devicon.json @@ -523,15 +523,12 @@ "line-wordmark" ], "font": [ - "line" + "line", + "line-wordmark" ] }, "color": "#000000", "aliases": [ - { - "base": "original", - "alias": "original-wordmark" - }, { "base": "line", "alias": "plain" @@ -2257,6 +2254,7 @@ "original" ] }, + "color": "#764abc", "aliases": [ { "base": "original", diff --git a/package.json b/package.json index 01b2b98fe..602e5c48e 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,9 @@ "description": "Programming related icons collection", "main": "devicon.min.css", "scripts": { - "build-css": "gulp updateCss && gulp clean" + "build-css": "gulp updateCss && gulp clean", + "build": "python ./.github/scripts/icomoon_build.py ./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe ./icomoon.json ./devicon.json ./icons ./ --headless", + "peek": "python ./.github/scripts/icomoon_peek.py ./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe ./icomoon.json ./devicon.json ./icons ./ --headless" }, "repository": { "type": "git",