Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add HTML Linter #998

Merged
merged 1 commit into from
Jul 12, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions .github/linters/.htmlhintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"alt-require": true,
"attr-lowercase": ["viewBox"],
"attr-value-double-quotes": true,
"attr-value-not-empty": false,
"attr-no-duplication": true,
"attr-unsafe-chars": true,
"doctype-first": false,
"doctype-html5": true,
"empyty-tag-self-close": true,
"id-unique": false,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we not want to enforce ID uniqueness?

Copy link
Member Author

@tunetheweb tunetheweb Jul 12, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, ideally but can't due to reuse in some templates as per my PR description above.

For example the previous-chapter id here:

{% if chapter_lang_exists(lang, year, prev_chapter['slug']) %}
<a id="previous-chapter" title="{{ self.previous() }}" href="/{{lang}}/{{year}}/{{prev_chapter['slug']}}">
<span class="arrow" aria-hidden="true">&#8963;</span>
<span class="chapter-no">
{{ self.chapter() }} {{ prev_chapter['chapter'] }}
</span>
<span class="chapter-title">
{{ localizedChapterTitles[prev_chapter['title']] if localizedChapterTitles[prev_chapter['title']]|length else prev_chapter['title'] }}
</span>
</a>
{% else %}
<a id="previous-chapter" title="{{ self.previous() }}" href="/en/{{year}}/{{prev_chapter['slug']}}">
<span class="arrow" aria-hidden="true">&#8963;</span>
<span class="chapter-no">
{{ self.chapter() }} {{ prev_chapter['chapter'] }}
</span>
<span class="chapter-title">
{{ localizedChapterTitles[prev_chapter['title']] if localizedChapterTitles[prev_chapter['title']]|length else prev_chapter['title'] }}
</span>
<span class="not-translated">
({{ self.translation_not_available() }})
</span>
</a>
{% endif %}

Only one of these ends up in the template as it is surround in {% if ... %}/{% else %}/{% endif %} Jinja2 constructs but HTMLHint doesn't know that.

And also loads of instances in ebook template which is generated.

Would be a bit of refactoring to prevent this, and not 100% sure we should to be honest. Could make the Jinja2 code more complex to write and read.

Ideally it would be nice if HTMLHint allowed us to ignore certain ids but it currently doesn't.

I say we go with what we have at present, as still loads of benefits to the other checks. We could then look to enforce it later, or look at linting the actual HTML produced in the end as discussed above.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, you are right, in conditional templates it is very possible and only a smart template linter can detect the branch in place. We can enforce this if and when we decide to lint the generated HTML later, so I will approve this PR.

Ideally, we would have added a comment next to this rule, explaining why we chose what we did, but unfortunately JSON does not support comments (unless we are using JSON5)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've seen some linters support a comment disabling certain rules for specific lines of code. Does this linter have a feature like that so we can enable the unique ID rule but turn it off in cases where the IDs are conditionally added?

Copy link
Member Author

@tunetheweb tunetheweb Jul 12, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’ve configured it where possible. Note I allow viewBox to be an exception to the rule that attributes must be all lowercase a few lines above.

However this rule doesn’t allow any configuration but on or off. Kind of makes sense to be honest. It’s not HTML but a temp laying language that is the reason we want to turn this off.

Still. I was pleasantly surprised how few rules I had to turn off so think there’s still a lot of value in this. We’ll look at linting output HTML as part of a nightly build as think we can run other stuff (e.g. Lighthouse, test that every page returns a 200... etc.). I’ve broken the sitemap on previous releases when changing python so think that would be a good test script to be able to run offline on demand (e.g. when doing a release) and nightly on main.

"id-class-value": true,
"head-script-disabled": false,
"href-abs-or-rel": false,
"id-class-ad-disabled": true,
"inline-style-disabled": true,
"inline-script-disabled": true,
"space-tab-mixed-disabled": "space",
"spec-char-escape": false,
"src-not-empty": true,
"style-disabled": false,
"tag-pair": true,
"tagname-lowercase": true,
"title-require": true
}
3 changes: 2 additions & 1 deletion .github/workflows/linter.yml
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ jobs:
- name: Checkout Code
uses: actions/checkout@v2
- name: Lint Code Base
uses: docker://github/super-linter:v2.2.0
uses: docker://github/super-linter:v3.3.0
env:
VALIDATE_ALL_CODEBASE: false
DEFAULT_BRANCH: main
Expand All @@ -38,3 +38,4 @@ jobs:
VALIDATE_JAVASCRIPT_ES: true
VALIDATE_CSS: true
VALIDATE_MD: true
VALIDATE_HTML: true