Last active
October 18, 2020 15:04
-
-
Save trolit/a01190a909e32b7ddaa01dc8718c27ab to your computer and use it in GitHub Desktop.
Projects counter by used language in Liquid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| Snippet for making projects counter for e.g. TechFolios portfolios, http://techfolios.github.io/ | |
| Example below assumes that there is property called 'language' on each project. However if | |
| it doesn't, those projects with "nil" language will be skipped. | |
| If you want to also count those "undefined" projects, remove lines: 23-25 | |
| and modify switch construction (case/when) | |
| Projects counter uses iconify icons instead of raw languages names | |
| that can be found here: https://iconify.design/ | |
| Example can be viewed here: | |
| https://trolit.github.io/projects/ | |
| --> | |
| <div class="ui raised segment"> | |
| <div class="ui one column stackable center aligned grid"> | |
| {% assign projects = site.pages | where: "type", "project" %} | |
| {% assign languages = site.pages | where: "type", "project" | map: 'language' | uniq %} | |
| {% for language in languages %} | |
| {% if language == nil %} | |
| {% continue %} | |
| {% endif %} | |
| {% assign counter = 0 %} | |
| {% for project in projects %} | |
| {% if project.language == language %} | |
| {% assign counter = counter | plus: 1 %} | |
| {% endif %} | |
| {% endfor %} | |
| <div class="ui medium statistic"> | |
| <div class="value"> | |
| {% case language %} | |
| {% when "Java" %} | |
| <span class="iconify" data-icon="logos:java" data-inline="false" data-height="250"></span> | |
| {% when "JavaScript" %} | |
| <span class="iconify" data-icon="logos:javascript" data-inline="false"></span> | |
| {% when "Kotlin" %} | |
| <span class="iconify" data-icon="vscode-icons:file-type-kotlin" data-inline="false"></span> | |
| {% when "C#" %} | |
| <span class="iconify" data-icon="vscode-icons:file-type-csharp2" data-inline="false"></span> | |
| {% else %} | |
| I don't have icon for this :( | |
| {% endcase %} | |
| </div> | |
| <div class="label" style="margin-top: 40% !important;"> | |
| {{ counter }} | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment