bloom-works / guides-template

Placeholder repo for work on Bloom Guides
https://bloom-guides-template.netlify.app/
MIT License
2 stars 0 forks source link

Add Nunjucks Linter #47

Closed LynnHerrick9 closed 1 year ago

LynnHerrick9 commented 1 year ago

This changes is related to the Setup Guides task. It adds linting functionality for nunjucks files. The linter can be run at any point during development. It is also added to the workflow process (from PR click checks tab in top-middle of screen, click Pull Request on left side of screen, click pr_checks on left-side or middle of screen, click Run Linter in middle of screen). Prior to this change the run linter option in PR Check was a print statement as a placeholder. The image below shows a screenshot of the workflow with djlint running and passing during the PR check of this current PR.

Screenshot 2023-07-04 at 2 22 40 PM

To make it more consumable for review, I will split up all the linter work into PRs associated to each linter and language. This review will include all changes for djlint and nunjucks code.

What was changed

How to check change

  1. Checkout branch and build project
  2. Verify all changes reported by linter did not disrupt the project by running npm run serve
  3. Verify there are no existing linter errors by using the path on PR above to see if pr checks passed for linter
  4. Verify there are no existing linter errors by manually running the linter in the code. Navigate to the base of the repo and run sh ./ci/linter.sh. Below image shows an example of what the command line will look like when there are no errors. Screenshot 2023-07-04 at 2 01 29 PM
  5. Verify linter is working and/or check any style fixes I made in other files. For this you will use the same command as above and choose any of the files that have changed and reverse any changes made. I have give two examples below, but feel free to check any of the changes using the same process.

Example 1: In the below screenshot, I have removed the whitespace wrapping the variable {{post.data.description}}. Note the linter now reports an error for T001 with the message Variables should be wrapped in whitespace. Screenshot 2023-07-04 at 2 07 08 PM

Example 2: In the below screenshot, I have removed the opening tag. Note the linter now reports an error for H025 with the message Tag seems to be an orphan. Screenshot 2023-07-04 at 2 14 20 PM

Notes

I have included the stdout used to make all nunjucks related changes for easier reviewing:

_includes/layouts/css.njk ─────────────────────────────────────────────────────────────────────────────── H025 2:0 Tag seems to be an orphan. H025 3:0 Tag seems to be an orphan.

_includes/layouts/footer.njk ─────────────────────────────────────────────────────────────────────────────── H006 36:10 Img tag should have height and width attributes. <img src="/img/bloom H006 41:10 Img tag should have height and width attributes. <img src="/img/sba.p

_includes/layouts/head.njk ─────────────────────────────────────────────────────────────────────────────── H025 2:0 Tag seems to be an orphan. <html lang="{{metada T001 2:12 Variables should be wrapped in a whitespace. {{metadata.language} H025 3:0 Tag seems to be an orphan.

_includes/layouts/post.njk ─────────────────────────────────────────────────────────────────────────────── T001 5:13 Variables should be wrapped in a whitespace. {{page.url}}

_includes/layouts/seo.njk ─────────────────────────────────────────────────────────────────────────────── T001 1:47 Variables should be wrapped in a whitespace. {{metadata.googlesit

_includes/postslist.njk ─────────────────────────────────────────────────────────────────────────────── T001 13:29 Variables should be wrapped in a whitespace. {{post.data.descript

Linted 22 files, found 10 errors.

netlify[bot] commented 1 year ago

Deploy Preview for bloom-guides-template ready!

Name Link
Latest commit 4bd88004ce239b0a62987124d3c8a5b49fc905b4
Latest deploy log https://app.netlify.com/sites/bloom-guides-template/deploys/64a8787018eb53000802e786
Deploy Preview https://deploy-preview-47--bloom-guides-template.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.