Use svg logo instead of png for better quality

[Tyrrrz]

Currently, the logo looks very blurry because it's a resized PNG image:

SVG should look better when resized. Converted using a tool, so it's not very optimized.

Note: haven't tested it locally. Is there a way to deploy this on staging?

[bruno-garcia]

Thanks @Tyrrrz.. Since this is something the eyes can see, I'll defer to @joaopgrassi

[codecov[bot]]

Codecov Report

Merging #146 (b4233e7) into main (1b9b14c) will not change coverage. The diff coverage is n/a.

@@           Coverage Diff           @@
##             main     #146   +/-   ##
=======================================
  Coverage   90.97%   90.97%           
=======================================
  Files          28       28           
  Lines         432      432           
  Branches       32       32           
=======================================
  Hits          393      393           
  Misses         29       29           
  Partials       10       10           

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 1b9b14c...b4233e7. Read the comment docs.

[Tyrrrz]

Updated: running ng serve failed with:

An unhandled exception occurred: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.context: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
   -> The base directory (absolute path!) for resolving the `entry` option. If `output.pathinfo` is set, the included pathinfo is shortened to this directory.
 - configuration.module.rules[12].include should be one of these:
   RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
   -> One or multiple rule conditions
   Details:
    * configuration.module.rules[10].include[0]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\bulma\\css\\bulma.min.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[10].include[1]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\ngx-toastr\\toastr.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[10].include[2]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\font-awesome\\css\\font-awesome.min.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[10].include[3]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\src\\colors.scss" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[10].include[4]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\src\\styles.scss" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[10].include[0]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\bulma\\css\\bulma.min.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[10].include[1]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\ngx-toastr\\toastr.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[10].include[2]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\font-awesome\\css\\font-awesome.min.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[10].include[3]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\src\\colors.scss" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[10].include[4]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\src\\styles.scss" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[11].include[0]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\bulma\\css\\bulma.min.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[11].include[1]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\ngx-toastr\\toastr.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[11].include[2]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\font-awesome\\css\\font-awesome.min.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[11].include[3]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\src\\colors.scss" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[11].include[4]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\src\\styles.scss" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[11].include[0]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\bulma\\css\\bulma.min.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[11].include[1]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\ngx-toastr\\toastr.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[11].include[2]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\font-awesome\\css\\font-awesome.min.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[11].include[3]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\src\\colors.scss" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[11].include[4]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\src\\styles.scss" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[12].include[0]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\bulma\\css\\bulma.min.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[12].include[1]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\ngx-toastr\\toastr.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[12].include[2]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\font-awesome\\css\\font-awesome.min.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[12].include[3]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\src\\colors.scss" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[12].include[4]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\src\\styles.scss" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[12].include[0]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\bulma\\css\\bulma.min.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[12].include[1]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\ngx-toastr\\toastr.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[12].include[2]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\node_modules\\font-awesome\\css\\font-awesome.min.css" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[12].include[3]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\src\\colors.scss" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
    * configuration.module.rules[12].include[4]: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\src\\styles.scss" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
 - configuration.output.path: The provided value "f:\\Projects\\Softdev\\!Contrib\\nuget-trends\\src\\NuGetTrends.Web\\Portal\\dist" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
   -> The output directory as **absolute path** (required).
See "C:\Users\Tyrrr\AppData\Local\Temp\ng-8Hljr6\angular-errors.log" for further details.

[joaopgrassi]

Hum strange no idea what is that error. As the CI build works. Did you restore the pages using yarn or npm? We use yarn, so that might be it?

About the logo, thanks. The logo initially came from a freelancer I hired from Fiverr, but we had help of another contributor in the past that got us into the version that is today.

I looked locally and although it's better, there is some rough edges: SVG:

Wheres the older is at least smooth (I agree it's blurry as hell..) PNG

So not sure what is best. My OCD got triggered by the rough edges almost immediately :sweat_smile:

[Tyrrrz]

Actually, another option would probably be just to pre-resize the png file with a better resize algorithm.

For example this is the image resized to width=450, a lot less blurry than when it's resized at runtime

[joaopgrassi]

Cool, if that improves it then I'm good with it :). If you want to push this new resized one then we can see how it looks.

[Tyrrrz]

Pushed an update

[joaopgrassi]

Ok I took a look, seems a bit better? Maybe my eye sight is just bad lol

[Tyrrrz]

Ok I took a look, seems a bit better? Maybe my eye sight is just bad lol

I don't know why, but in your screenshot neither of them look blurry. Here's how the current version looks for me:

You can see in my screenshot it's noticeably more blurry than in yours for some reason.

Hm, maybe Firefox is just better at resizing images?

[bruno-garcia]

I'm glad the commits were not wip:

:) Thanks for contributing @Tyrrrz

[joaopgrassi]

Oops..

[Tyrrrz]

I'm glad the commits were not wip:

I promise to fix this next time ;)

[Tyrrrz]

Damn it does look awful on Chrome, my gosh! Sorry, I'm used to Firefox didn't even consider this case. It looks amazing now! Thanks a lot!

Never considered Chrome to be so bad at resizing images :D