feat: Add favicon to the HTML document #15671

mahozad · 2022-03-03T13:42:50Z

Prerequisites checklist

I have read the contributing guidelines.

What is the purpose of this pull request? (put an "X" next to an item)

[ ] Documentation update
[ ] Bug fix (template)
[ ] New rule (template)
[ ] Changes an existing rule (template)
[ ] Add autofix to a rule
[ ] Add a CLI option
[ ] Add something to the core
[X] Other, please explain:

Update HTML format metadata (favicon).
Use SVG as the main favicon and a fallback PNG favicon if the browser does not support SVG favicons.

I Grabbed the vector (SVG) logo from ESLint website repository.

Encoded the SVG to base64 with this tool.
Converted the vector logo to PNG with Inkscape and encoded the PNG to base64 with this tool.

Tested with Chrome, Firefox, and Edge.
Here is a demo HTML file to see the favicon in action.

I did NOT run any unit tests etc. for the project.

What changes did you make? (Give an overview)

I added a favicon to the HTML report document.

Is there anything you'd like reviewers to focus on?

No.

linux-foundation-easycla · 2022-03-03T13:42:53Z

The committers are authorized under a signed CLA.

✅ Mahdi Hosseinzadeh (48fb53c)

eslint-github-bot · 2022-03-03T13:42:55Z

Hi @mahozad!, thanks for the Pull Request

The first commit message isn't properly formatted. We ask that you update the message to match this format, as we use it to generate changelogs and automate releases.

The commit message tag wasn't recognized. Did you mean "docs", "fix", or "feat"?
There should be a space following the initial tag and colon, for example 'feat: Message'.
The first letter of the tag should be in lowercase

To Fix: You can fix this problem by running git commit --amend, editing your commit message, and then running git push -f to update this pull request.

Read more about contributing to ESLint here

mdjermanovic

Nice enhancement, thanks!

Encoded the SVG to base64 with this tool.

I left a question about this.

mdjermanovic · 2022-03-04T12:34:42Z

lib/cli-engine/formatters/html.js

@@ -39,6 +39,8 @@ function pageTemplate(it) {
    <head>
        <meta charset="UTF-8">
        <title>ESLint Report</title>
+        <link rel="icon" type="image/png" sizes="any" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAHaAAAB2gGFomX7AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABD1JREFUWMPFl11sk2UUx3/nbYtjxS1MF7MLMTECMgSTtSSyrQkLhAj7UBPnDSEGoxegGzMwojhXVpmTAA5iYpSoMQa8GBhFOrMFk03buei6yRAlcmOM0SEmU9d90b19jxcM1o5+sGnsc/e+z/l6ztf/HFFVMnns6QieeOCHBePGsHM+wrOtvLG2C4WRVDSSygNV7sCjlspxwDnPB44aols/DXk+mbMBmx/6OseITF1CuOtfevkPh2Uu+/jbdX8lujSScRlT5r7/QDlAfsRmfzmpnkQ/H3H13gf6bBrBn1uqK8WylgEnU8eZmk1repbfchJG1TyKyIKEwuBHFd3lD3naY3O1siiwXsVoBV2VgM1ht/QQUJk2ByqKghsQziYQ8ifKgexIXmuyzC4r67Y7R+xPAfuB/Nn3Cpva+0s7khpQVtZtd4bt51BWxtBYAiciprG7c7D4SixzU9PYalDL6110Ifb/w8W9eY7JqFeFHbO8fPGyLHwwFHJNJTSgwtVTB9oaw9BlQ+tO93vOxypoaQnfEYlI43SeCHDC4TDq9+51/h5fxr33q0ZfV9g04wat9Q943rjJgCp3952W2i8Bi6eDvdsfKj0cK/DYMRyXL4/sUJUmIHd2zYMezsvLaamp4WpcWN3BXSiHpuMwbGbZlnZ8tXY4rgosy+G7oRwQ0cAsd28YGgqfU5UjCZQDLALxDg+Hv/P5Rqvj4hwrS8izXzWb4spwc1GgENFnkpWRzxeuB+ssUHgLdb9UVdt8vpGdKQpze7n7y1U3DBChNRUuqOo9c+0+qpKKxyZqtAIYla7gY4JszAAQri93BSsMRZoyBcUC+w3Q3AyOA4sNhAOZ0q7Iq0b2vUNvK5zPgP+/H8+Zetdoa6uOikhdGurxebwvJY8Iz3V1rTMNAH+opEuQj5KTT/qA1yC+wyUjBm12OidaUtCcPNNX2h0Hx2JG69VulANZAJZJwfU7rzd/FHixuXniTdM0m4GtSQT7bTartqEh9yfImUEzkwKZmTwmo5a5JwkYBfcDL01/RkR5y8iWhtPBknB8ZxwtU9UjwOrrKCeizzc25nTGg1F/turEHoU9wMLpDvWKf8DTmNCAKnd/tqUTF4ElMXJ+A5rWDJS+41WsGWzALhJ+ErBWrLj9g+pqojHxlXJX8HGUg0BsR/x1yhxf3jm4cSzpQFLp6tmi6PEE7g1ZhtZ91ufpSZUAFa6gC+UoQslNaSmypT1U8mHKiUgEKS8KfgF4EpYunFI16tsHin+OG0LcgQK7yj7g6cSzpva2D3hKVNG0Y3mVO1BkqfSlmJrHBQ4uvM12gJHc6ETW8HZVfMRmXvyxxNC1Z/o839zyXlDuCr4nsC11J+MXueaVJWn6yPv+/pJtc9oLTNN4AeTvNGByd3rlhE2x9s5pLwDoHCy+grDzWmOZ95lUtLYj5Bma126Y8eX0/zj/ADxGyViSg4BXAAAAAElFTkSuQmCC">
+        <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,%3Csvg viewBox='0 0 294.825 258.982' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%238080F2' d='M97.021,99.016l48.432-27.962c1.212-0.7,2.706-0.7,3.918,0l48.433,27.962 c1.211,0.7,1.959,1.993,1.959,3.393v55.924c0,1.399-0.748,2.693-1.959,3.394l-48.433,27.962c-1.212,0.7-2.706,0.7-3.918,0 l-48.432-27.962c-1.212-0.7-1.959-1.994-1.959-3.394v-55.924C95.063,101.009,95.81,99.716,97.021,99.016'/%3E%3Cpath fill='%234B32C3' d='M273.336,124.488L215.469,23.816c-2.102-3.64-5.985-6.325-10.188-6.325H89.545 c-4.204,0-8.088,2.685-10.19,6.325l-57.867,100.45c-2.102,3.641-2.102,8.236,0,11.877l57.867,99.847 c2.102,3.64,5.986,5.501,10.19,5.501h115.735c4.203,0,8.087-1.805,10.188-5.446l57.867-100.01 C275.439,132.396,275.439,128.128,273.336,124.488 M225.419,172.898c0,1.48-0.891,2.849-2.174,3.59l-73.71,42.527 c-1.282,0.74-2.888,0.74-4.17,0l-73.767-42.527c-1.282-0.741-2.179-2.109-2.179-3.59V87.843c0-1.481,0.884-2.849,2.167-3.59 l73.707-42.527c1.282-0.741,2.886-0.741,4.168,0l73.772,42.527c1.283,0.741,2.186,2.109,2.186,3.59V172.898z'/%3E%3C/svg%3E%0A">


This is actually URL encoding (not base64), just without encoding spaces?

@mdjermanovic Yes I made a mistake. The PNG is base-64 and the SVG is, I think, URL-encoded (angle brackets and a few others).

https://validator.w3.org/ reports those spaces as Error:

Error: Bad value for attribute href on element link: Illegal character in scheme data: space is not allowed.

I'm guessing that URL-encoder for SVG https://yoksel.github.io/url-encoder/ knows that most browsers allow those spaces so it doesn't encode them to save on size.

Maybe we could try another URL encoder or base64 and see if it would produce a fully valid HTML while not adding too many bytes?

Converted the SVG to base64 with JavaScript:

let element = document.getElementById("svg"); const string = new XMLSerializer().serializeToString(element); const base64 = window.btoa(string);

eslint-github-bot · 2022-03-04T21:28:23Z

Hi @mahozad!, thanks for the Pull Request

The pull request title isn't properly formatted. We ask that you update the message to match this format, as we use it to generate changelogs and automate releases.

The commit message tag wasn't recognized. Did you mean "docs", "fix", or "feat"?
There should be a space following the initial tag and colon, for example 'feat: Message'.
The first letter of the tag should be in lowercase

To Fix: You can fix this problem by clicking 'Edit' next to the pull request title at the top of this page.

Read more about contributing to ESLint here

mdjermanovic

LGTM, thanks!

I'll leave this open for a few days in case someone else wants to review it before merging.

nzakas

Nice addition. Thanks!

mahozad · 2022-03-09T05:23:23Z

Thank you for merging it.

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [eslint](https://eslint.org) ([source](https://github.com/eslint/eslint)) | devDependencies | minor | [`8.10.0` -> `8.11.0`](https://renovatebot.com/diffs/npm/eslint/8.10.0/8.11.0) | --- ### Release Notes <details> <summary>eslint/eslint</summary> ### [`v8.11.0`](https://github.com/eslint/eslint/releases/v8.11.0) [Compare Source](eslint/eslint@v8.10.0...v8.11.0) #### Features - [`800bd25`](eslint/eslint@800bd25) feat: add `destructuredArrayIgnorePattern` option in `no-unused-vars` ([#15649](eslint/eslint#15649)) (Nitin Kumar) - [`8933fe7`](eslint/eslint@8933fe7) feat: Catch `undefined` and `Boolean()` in no-constant-condition ([#15613](eslint/eslint#15613)) (Jordan Eldredge) - [`f90fd9d`](eslint/eslint@f90fd9d) feat: Add ESLint favicon to the HTML report document ([#15671](eslint/eslint#15671)) (Mahdi Hosseinzadeh) - [`57b8a57`](eslint/eslint@57b8a57) feat: `valid-typeof` always ban `undefined` ([#15635](eslint/eslint#15635)) (Zzzen) #### Bug Fixes - [`6814922`](eslint/eslint@6814922) fix: escaping for square brackets in ignore patterns ([#15666](eslint/eslint#15666)) (Milos Djermanovic) - [`c178ce7`](eslint/eslint@c178ce7) fix: extend the autofix range in comma-dangle to ensure the last element ([#15669](eslint/eslint#15669)) (Milos Djermanovic) #### Documentation - [`c481cec`](eslint/eslint@c481cec) docs: add fast-eslint-8 to atom integrations (userguide) ([#15695](eslint/eslint#15695)) (db developer) - [`d2255db`](eslint/eslint@d2255db) docs: Add clarification about `eslint-enable` ([#15680](eslint/eslint#15680)) (dosisod) - [`8b9433c`](eslint/eslint@8b9433c) docs: add object pattern to first section of computed-property-spacing ([#15679](eslint/eslint#15679)) (Milos Djermanovic) - [`de800c3`](eslint/eslint@de800c3) docs: link to minimatch docs added. ([#15688](eslint/eslint#15688)) (Gaurav Tewari) - [`8f675b1`](eslint/eslint@8f675b1) docs: sort-imports add single named import example ([#15675](eslint/eslint#15675)) (Arye Eidelman) #### Chores - [`385c9ad`](eslint/eslint@385c9ad) chore: rm trailing space in docs ([#15689](eslint/eslint#15689)) (唯然) </details> --- ### Configuration 📅 **Schedule**: At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, click this checkbox. --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate). Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1217 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>

…15671)" This reverts commit c699108.

eslint-github-bot bot added the triage An ESLint team member will look at this issue soon label Mar 3, 2022

eslint-github-bot bot added the bug ESLint is working incorrectly label Mar 3, 2022

nzakas added accepted There is consensus among the team that this change meets the criteria for inclusion enhancement This change enhances an existing feature of ESLint and removed bug ESLint is working incorrectly triage An ESLint team member will look at this issue soon labels Mar 4, 2022

eslint-github-bot bot added the bug ESLint is working incorrectly label Mar 4, 2022

mdjermanovic reviewed Mar 4, 2022

View reviewed changes

nzakas changed the title ~~Add favicon to the HTML document~~ feat: Add favicon to the HTML document Mar 5, 2022

eslint-github-bot bot added the feature This change adds a new feature to ESLint label Mar 5, 2022

feat: Add ESLint favicon to the HTML report document

4bc67b9

mdjermanovic approved these changes Mar 5, 2022

View reviewed changes

nzakas approved these changes Mar 9, 2022

View reviewed changes

nzakas merged commit f90fd9d into eslint:main Mar 9, 2022

sync-by-unito bot mentioned this pull request Mar 30, 2022

build(deps-dev): bump eslint from 7.32.0 to 8.12.0 numbersprotocol/capture-lite#1446

Closed

sync-by-unito bot mentioned this pull request May 1, 2022

build(deps-dev): bump eslint from 7.32.0 to 8.14.0 numbersprotocol/capture-lite#1569

Closed

srijan-deepsource pushed a commit to DeepSourceCorp/eslint that referenced this pull request May 30, 2022

feat: Add ESLint favicon to the HTML report document (eslint#15671)

c699108

srijan-deepsource added a commit to DeepSourceCorp/eslint that referenced this pull request May 30, 2022

Revert "feat: Add ESLint favicon to the HTML report document (eslint#…

e48b170

…15671)" This reverts commit c699108.

eslint-github-bot bot locked and limited conversation to collaborators Sep 6, 2022

eslint-github-bot bot added the archived due to age This issue has been archived; please open a new issue for any further discussion label Sep 6, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add favicon to the HTML document #15671

feat: Add favicon to the HTML document #15671

mahozad commented Mar 3, 2022 •

edited

Loading

linux-foundation-easycla bot commented Mar 3, 2022 •

edited

Loading

eslint-github-bot bot commented Mar 3, 2022

mdjermanovic left a comment

mdjermanovic Mar 4, 2022

mahozad Mar 4, 2022 •

edited

Loading

mdjermanovic Mar 4, 2022

mahozad Mar 4, 2022

eslint-github-bot bot commented Mar 4, 2022

mdjermanovic left a comment

nzakas left a comment

mahozad commented Mar 9, 2022

feat: Add favicon to the HTML document #15671

feat: Add favicon to the HTML document #15671

Conversation

mahozad commented Mar 3, 2022 • edited Loading

Prerequisites checklist

What is the purpose of this pull request? (put an "X" next to an item)

What changes did you make? (Give an overview)

Is there anything you'd like reviewers to focus on?

linux-foundation-easycla bot commented Mar 3, 2022 • edited Loading

eslint-github-bot bot commented Mar 3, 2022

mdjermanovic left a comment

Choose a reason for hiding this comment

mdjermanovic Mar 4, 2022

Choose a reason for hiding this comment

mahozad Mar 4, 2022 • edited Loading

Choose a reason for hiding this comment

mdjermanovic Mar 4, 2022

Choose a reason for hiding this comment

mahozad Mar 4, 2022

Choose a reason for hiding this comment

eslint-github-bot bot commented Mar 4, 2022

mdjermanovic left a comment

Choose a reason for hiding this comment

nzakas left a comment

Choose a reason for hiding this comment

mahozad commented Mar 9, 2022

mahozad commented Mar 3, 2022 •

edited

Loading

linux-foundation-easycla bot commented Mar 3, 2022 •

edited

Loading

mahozad Mar 4, 2022 •

edited

Loading