Migrating the website to Angular 15, with optional redesign

[risbi0]

I think the website is due for an upgrade of its framework. Devicon is made in AngularJS which is discontinued in December 2021. While it doesn't really pose any risk, migrating to a modern, updated framework makes it more approachable to potential contributors.

Angular is a suitable choice since it's basically the successor to AngularJS (and I wanted to learn about it since I hadn't experienced it). With that I made two websites that can replace the current one. One is purely a migration to Angular 15, and the other has a complete redesign with some added stuff.

---

Proposal 1: Migration to Angular 15 (current design retained)

Source code
Website

By design and like most modern frontend frameworks, the new features offer better dev experience and code maintenance compared to the old framework, which includes Typescript, Sass, testing, and component separation. Additional tools I added are for linting and formatting, which is ESLint and Prettier. I used an ESLint config from Airbnb since it's really popular and recommended by many.

Aside from a few headers not being bold, the website is practically the same. Also this is based on the master branch I cloned a few days ago. I later realized there's a develop branch but was too lazy to change it since I'm already working on the 2nd proposal. I made 2 proposals since I really had full liberty on the 2nd one since I basically built it from scratch. This proposal is my low offer on at the least getting it migrated to Angular 15.

---

Proposal 2: Migration to Angular 15 (complete redesign)

Source code
Website

Other than the tools mentioned above, I used Tailwind CSS as the CSS framework since that's my go-to, with daisyUI for pre-made components and theme management.

The themes don't follow the green palette of the Devicon icon but it's easily reconfigurable. I did use the main font in the current website, Damion, on the main title as an homage to the old one.

This website has all the functionalities of the current one and also resolves some Issues:

• Dark/light mode [FEATURE REQUEST] Dark Mode for devicon website #1698
• Stats [FEATURE REQUEST] Show number of Icons on the website #1218
• Utilizing tags in search [FEATURE REQUEST] Using the tag system in devicon.json #988

Additionally, icon names displayed are its full name, and are sorted alphabetically. I ran the favicon into realfavicongenerator since I think the logos are too many. The mobile experience is also better as the layout adjusts well in mobile, though not really the place to be for frontend dev, it's a nice addition.

I also notice the use of "font" as one of the icon versions aside from svg. They are actually font in the sense that it is inserted in the content attribute as an entity, but for front end developers who mostly use it in websites, they might get confused thinking how a font became an icon (maybe that's just me). It's better to make it more generalized and I renamed it to "CSS" instead. That's my take.

Issues

Since I made the settings as concise as possible (separating wordmark and colored variants as toggles), the site displays an icon's details under the assumption that each version has a wordmark version, and if not disable the toggle. For example, "plain" has its wordmark version which would be prepended by the same name, which would be "plain-wordmark". This runs fine for everything but a few icons. Some only has "plain" and "original-wordmark" as its versions. The issue is inconsistent naming which I asked briefly in #1703 . I did do an ugly workaround of explicitly setting the wordmark version to specific icons, but I wish the naming is more consistent. I think this is impossible since it would break any icons used by anyone, but I just letting this out here.

Another issue is the version and icons are manually set. This is because I had to put each of the icons' full names for the display, which I would also propose to be put on officially if this was accepted

---

If either proposals are accepted I plan to apply as maintainer, where I focus on the development/maintaining of the website. Even when it's not accepted, I still learned a lot about Angular while creating these websites, and still that's a plus for me.

[Snailedlt]

Wow! This is awesome! 💯
@lunatic-fox @Panquesito7 take a look!

Upgrading the website has been something we've wanted to do for a while, but never gotten around to fully completing.

I must say, I love the new design! Getting rid of that ugly green background does wonders, and I much prefer this over the old design! The way you implemented filtering by tags is awesome too, and done exactly how I would do it myself 😁

There are, like you said, a few issues. So let me come with some suggested solutions :)

1. Inconsistent naming causes issues with wordmark icons
   i. This should fix itself eventually, when we fix the icons with improper naming conventions. That might take a while though, since it would require us to make breaking changes, which means it should be a part of a major release. So we should try to fix it before that.
   ii. I haven't looked at the code yet, so depending on how it's implemented this may be easy or a bit of work. I think this can be solved by having a state for the toggle button, and automatically choosing whether to toggle it or not based on if a wordmark icon is available for said version. For example if there is a plain-wordmark version, and no plain version, then the toggle button should automatically be toggled whenever plain is chosen.

2. It's a bit hard to see if a switch/button is toggled or not at first sight.
   i. The colors of the toggle buttons are quite similar when they are toggled, as when they are not toggled. This makes it hard to see whether or not the buttons are toggled. I think we can solve this by adding a color to the button when it's toggled. Perhaps one of the green colors from the old website would fit?

3. The website lacks color
   i. I really like the new color scheme, and cleanliness of the new design. That said, I would like to see some more color, especially colors that represent devicons. I think the best way to do this, while still maintaining a sleek design, is to add green as the accent color. Then it can be used for stuff like buttons, links, etc... Maybe it can also be used for the stats counters? I'm not aure exactly, but I think we can find out what looks good through testing :)

4. The mobile version is very scroll-intensive
   i. The mobile version looks REALLY nice! But because the mobile version of the website only has one column, it means you'll need to scroll a lot to find what you need (unless you search ofc). I think a quickfix for this could be to just up the column count to 2.

Let me know if this feedback is useful or not, and if you have any questions :)

Honestly I'm surprised by how few issues there are with the new design, so big kudos to you! Color me impressed!

[Snailedlt]

Neat!
I noticed a few more styling things, mainly to incorporate our colors more:

Can we also get the green outline for radio buttons that aren't disabled:

Can we make highlighted items in a select green instead of blue?

Can we make the Devicon title and stats green?
Before:

After (you might need a darker shade of green in light mode):

Perhaps we should consider having a searchable multiselect instead of a normal HTML select for tags? I know of a good svelte library, but I'm not sure if there are good alternatives in Angular.

Can we enable automatic Dark/Light mode based the device's preferred color-scheme?
If so, you can test it here:

Maybe we can make the highlighted/hovered icons green? Either the background or the icons themselves (whichever looks best)

I'm planning on updating the icons based on the develop branch. I got the devicon.json from that branch but how do I get the stylesheet?

Run the build-css script locally. Full guide here: https://github.com/devicons/devicon#build-the-font-and-export-stylesheet
Let me know if it works or not. We're working on improving the local developer experience, so any feedback helps!

[risbi0]

Can we also get the green outline for radio buttons that aren't disabled:

Done.

Can we make highlighted items in a select green instead of blue?

Styling <option> elements vary by browser and quite limited (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#styling_with_css) so basically what you see now is the default appearance, which also vary by browser. Here's how it looks in Firefox:

The only option is to create an entirely custom-made element that isn't <select>/<option> with a more complicated event handler structure, which isn't worth the effort in my opinion.

Can we make the Devicon title and stats green?

Done.

Can we enable automatic Dark/Light mode based the device's preferred color-scheme?

Done. Whenever the theme is changed through the toggle, it saves it in localStorage, but when the storage doesn't exist, like for new visitors, the theme will be based on their system theme. And when the user changes the theme through the toggle, the theme will be based on localStorage from then on.

Also note that in this case you can't test it from the DevTools. You must clear your cache (if you toggle the theme before) and change your system theme before opening the website to check if it detects it.

Maybe we can make the highlighted/hovered icons green? Either the background or the icons themselves (whichever looks best)

Done. Background color changes.

Run the build-css script locally. Full guide here: https://github.com/devicons/devicon#build-the-font-and-export-stylesheet
Let me know if it works or not. We're working on improving the local developer experience, so any feedback helps!

The instructions is a bit unclear to me but this is how I did it by step which is how I understood it:

1. Download icomoon.json, upload it in icomoon.io, generate font, download font, extract the ZIP. With the extracted contents, rename style.css to devicon.css.
2. In the develop branch, replace the contents of the fonts folder with the contents of the fonts folder from the extracted ZIP, and also replace devicon.css with a file of the same name which was the renamed from style.css in Step 1.
3. Run npm run build-css.

It displays an error, which is this (irrelevant details substituted for privacy):

> devicon@2.15.1 build-css    
> gulp updateCss && gulp clean

[HH:MM:SS] Using gulpfile <path of gulpfile.js>
[HH:MM:SS] Starting 'updateCss'...
[HH:MM:SS] Finished 'updateCss' after 49 ms
Error in plugin "sass"
Message:
    devicon-alias.scss
Error: The target selector was not found.
Use "@extend .devicon-alpinejs-original !optional" to avoid this error.
  ╷
6 │             @extend .devicon-alpinejs-original;
  │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  devicon-alias.scss 6:13  root stylesheet
[HH:MM:SS+3S] Using gulpfile <path of gulpfile.js>
[HH:MM:SS+3S] Starting 'clean'...
[HH:MM:SS+3S] Finished 'clean' after 3.62 ms

And icomoon.json isn't actually updated because its last commit is a year ago, and both master and develop branch has the same version of it. So even if the above error is resolved I think the resulting files would be the same compared to the latest release.

[Snailedlt]

The changes look awesome! Great work!
I'll take a look at the building issues when I get some more time, but in case you wanna do some digging yourself, here's a relevant PR that's ongoing: #1668

There's also a quick fix in that PR for the @extend bug. Basically just add !optional at the end, like this: https://github.com/devicons/devicon/pull/1668/files#diff-25789e3ba4c2adf4a68996260eb693a441b4a834c38b76167a120f0b51b969f7R84

[risbi0]

add !optional at the end

It worked! But when I updated the icon displays, the new icons don't show up. Here's a screenshot of it:

What I did after the build is I copied devicon.min.css and the fonts folder in the assets folder of the website, and replaced <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon/devicon.min.css" /> to <link rel="stylesheet" href="./assets/devicon.min.css">. It did display the current release icons, but not the new ones. And like I said, iconmoon.json's last commit was last year, which wouldn't have the new icons.

And from the screenshot, amazonwebservices's display icon doesn't display its non-wordmark version. That's because it doesn't have a non-wordmark version put in devicon.json, as well as in its svg property.

[Panquesito7]

I'm planning on updating the icons based on the develop branch. I got the devicon.json from that branch but how do I get the stylesheet?

I'm working on an easier way to use the stylesheet on #1668, still WIP, though (almost finished).

[Panquesito7]

The website looks just awesome! Amazing work with that, thank you so much. 🚀
I loved the new design, we could use that to change things up. The current website has been up like this for years, a new, fresh design would be awesome.

And regarding the maintainer thing, you're more than welcome to join the website team once we get to set up this completely.
Let me know if you folks need any help with anything, I'd love to help and have the new website set up soon. 🙂

[Snailedlt]

One thing I really like about this (that I think hasn't been mentioned already) is that it lets us easily separate the website and the icon pack. That will lead to less spaghetti code, less complexity (smaller codebases), and generally a better experience for contributors and maintainers since we don't have to run the long running CodeQL workflows on icon PRs.

@risbi0 Would it be okay if we forked your repo into devicons, and started working on the website together with you?

[risbi0]

Sure that would be great!

[Snailedlt]

Great! I forked the repo and invited you as an admin.
Forked repo