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 Markdown linting #3346

Closed

Conversation

DerekNonGeneric
Copy link
Contributor

@DerekNonGeneric DerekNonGeneric commented Jan 7, 2020

This PR adds the capability to lint the Markdown files in this project. It would be a feature of the infrastructure used to build the site and should not cause noticeable side effects to the rendered pages.

I hope to bring this to ampproject/wg-outreach#51 for discussion.

A few items I'd like to discuss:

  • Should this be performed during a prepush hook?
  • Should this be performed by the CI?
  • Is the Node.js preset acceptable?
  • Are there other rules that should be added?
  • Total conformance vs incremental adoption?

@matthiasrohmer
Copy link
Collaborator

matthiasrohmer commented Jan 7, 2020

Thanks, @DerekNonGeneric! Can you quickly summarise what effect running this would have on the current set of documents? That would also help deciding between total conformance vs incremental adoption 😉

If we then adopt this change then I think it should run as part of all other checks both in a commit hook as well as during prebuild phase.

Will remark-validate-links make our custom logic in GrowReferenceChecker.js obsolete?

Something that actually is a real problem besides style is the following: we have some custom Markdown tags. [filter format="websites"] for example, see Formatting Guides & Tutorials for all of them. What happens once in a while is that those tags are malformed and are missing a quote sign for example: [filter format="websites]. This breaks the build which is bad and also difficult to debug. On top errors like this are happening in the ampproject/amphtml repo and would not be catched by a precommit hook in our repository here... so ideas to solve this would be welcome 😁One would be to add the same checks for all markdown documents over at ampproject/amphtml for example.

@sebastianbenz
Copy link
Collaborator

+1 to Matthias's comments.

Another thing: we should use the same markdown formatting setup as ampproject/amphtml (I think they use prettier for this).

@DerekNonGeneric
Copy link
Contributor Author

DerekNonGeneric commented Jan 11, 2020

/to @matthiasrohmer

Can you quickly summarise what effect running this would have on the current set of documents?

Running this on the current set of documents would have them conform to all of the rules specified in the Node.js preset including any additional ones that we desire.

Will remark-validate-links make our custom logic in GrowReferenceChecker.js obsolete?

I don't think so. Actually, GrowReferenceChecker.js should be preferred as it also checks links in the form of g.doc. Good point, I will remove it.

[...] so ideas to solve this would be welcome [...]

Still thinking about this one. It seems like a Jinja validator should be in order.

/to @sebastianbenz

[...] we should use the same markdown formatting setup as ampproject/amphtml (I think they use prettier for this).

Correct, Prettier was used to auto-format all of the documents. Prettier uses the same parser as this linter under the hood (remark). I would just need to see where all of the defaults are defined so we can check for that. This may mean using a different preset.

@DerekNonGeneric
Copy link
Contributor Author

DerekNonGeneric commented Jan 20, 2020

@sebastianbenz, in the previous meeting it was suggested that this repo should use the same mechanism as the amphtml repo when linting the Markdown.

This would mean bringing the prettify gulp task into this repo.

There is a slight issue with this. This gulp task depends on quite a bit of infrastructure in that repository.

Rather than bringing in all of this for a single gulp task, I'd like to propose an idea that I think would be preferable: create a new package in the amp-toolbox monorepo to take care of the markdown linting for both repos. This would prevent duplication of all of this infrastructure and would guarantee that the same rules are being used for both.

Does this sound like something you would like to see happen?

There are a few ways this package could exist:

Another idea:

More info: I spoke to the maintainer of remark to see what his suggestion was, and he recommended using .remarkrc over the more involved approach that Node.js is taking. He noted that the reason why they do this is so as not to depend on npm for anything. I am impartial to his recommendation (just wanted to put it out there).

I've cc'ed Raghu since this would involve coordination between all three repos and maybe other ideas exist that I haven't thought of.

/cc @rsimha

@sebastianbenz
Copy link
Collaborator

TBH, I wouldn't overthink it for now. Porting the gulp task sounds like the easiest way to get started. I just remembered that I already looked into this, but never had the time to finish...

Anyway, you can find my version of the prettify gulp task here: https://gist.github.com/sebastianbenz/4b4b5132893aac53831c813df0202857

@rsimha
Copy link
Collaborator

rsimha commented Jan 21, 2020

Hi everyone. Glad to see that the amp.dev repo is interested in linting markdown files.

Porting the gulp task sounds like the easiest way to get started.

I agree with this statement. Trying to move common infra to a separate repo will introduce a layer of complexity to maintaining amphtml that I think we can avoid right now. (Having said that, I'm certainly open to having the same conversation in future if / when there's significantly more infrastructure that needs to be shared across multiple repos.)

This gulp task depends on quite a bit of infrastructure in that repository.

I took a look at the list of internal dependencies of prettify.js and I think you can get around all of them.

// Used only for executing a child process. You can directly use `child_process`
// from `node`.
const {exec} = require('../common/exec');

// `getFilesToCheck` is a small function you can copy. `logOnSameLine` is a helper
// util used only during local runs. You can ignore it and just use `log`.
const {getFilesToCheck, logOnSameLine} = require('../common/utils');

// This is a `node_modules` dependency.
const {green, cyan, red, yellow} = require('ansi-colors');

// This is purely for logging. You can replace `isTravisBuild` with a check for
// `process.env.TRAVIS`
const {isTravisBuild} = require('../common/travis');

// This is used to run `yarn` before tests are executed. You can ignore this for
// your Travis runs.
const {maybeUpdatePackages} = require('./update-packages');

// This can simply be `**/*.md`.
const {prettifyGlobs} = require('../test-configs/config');

Hope this helps!

@matthiasrohmer
Copy link
Collaborator

Hey @DerekNonGeneric, can you give a quick update on this? 🙂

@DerekNonGeneric
Copy link
Contributor Author

DerekNonGeneric commented Feb 5, 2020

Sure, I am currently working on getting it to display the suggested corrections along with the errors. Almost done!

Narrator: Later that day...

  • Display the suggested corrections

@DerekNonGeneric DerekNonGeneric force-pushed the feat/lint-md branch 2 times, most recently from 75e94bf to 245baea Compare February 6, 2020 02:55
@DerekNonGeneric DerekNonGeneric marked this pull request as ready for review February 6, 2020 02:56
@DerekNonGeneric
Copy link
Contributor Author

DerekNonGeneric commented Feb 6, 2020

@sebastianbenz, the 𝓹𝓻𝓮𝓽𝓽𝓲𝓯𝔂 task is ready to go! 🎉

The build will fail until someone runs npm run fix:md / npx gulp prettify --fix and then commits the result. Would you like to do the honors?

Copy link
Collaborator

@sebastianbenz sebastianbenz left a comment

Choose a reason for hiding this comment

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

Awesome! Looks good to me!

Can you please:

  • resolve the merge conflict
  • run lint:fix and commit to this PR

Thanks!

package.json Outdated
@@ -11,8 +11,10 @@
"bootstrap": "npx gulp bootstrap",
"develop": "npx gulp develop",
"lint": "npx gulp lintAll",
"lint:md": "npx gulp prettify",
Copy link
Collaborator

Choose a reason for hiding this comment

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

we should add a filter for only markdown here. We will use prettify for js etc in the future as well.

Copy link
Contributor Author

@DerekNonGeneric DerekNonGeneric Feb 11, 2020

Choose a reason for hiding this comment

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

Unclear on the API here.

Would it be gulp prettify lint --md and gulp prettify format --md?

Copy link
Contributor Author

@DerekNonGeneric DerekNonGeneric Feb 11, 2020

Choose a reason for hiding this comment

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

lint would be the default subcommand, so it could be omitted.

Alternatively, they could both be flags (--format --md).

Also, any preference between --fix and --format?

Copy link
Collaborator

Choose a reason for hiding this comment

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

maybe simply go with lint:prettify and don't add a file format filter

@DerekNonGeneric
Copy link
Contributor Author

Merge conflict resolved. If the file format filtering proposed is intended for this PR, I'd like to implement it prior to running the fix on all files if that's okay. May need further direction on the intended API.

@DerekNonGeneric DerekNonGeneric force-pushed the feat/lint-md branch 3 times, most recently from bcb0257 to b1255e6 Compare February 13, 2020 00:42
@DerekNonGeneric
Copy link
Contributor Author

DerekNonGeneric commented Feb 13, 2020

@sebastianbenz, I think this one is good to go now.

A couple of notable items:

  • CI failure appears to be unrelated:

    npm ERR! file-uri-to-path not accessible from bindings

  • It disobeyed my exclusion glob (!.github/*.md).

    Details: These files shouldn't be autoformatted because the source is directly visible. Additionally, they use GitHub-Flavored Markdown (GFM), which operates under different rules. Most notably that newlines (carriage return) actually display a new line in the rendered output. This is concerning if max-line length is ever enforced.

WDYT?

Update: I believe I have fixed it so that it will no longer ignore my exclusion glob for this directory in the future. Any autoformatting applied to these issue templates are currently remaining. There's not max line-length for Markdown files, so the effects were minimal (I checked them out). The PR should be good for merge unless you can think of anything else.

@matthiasrohmer
Copy link
Collaborator

💭 1. Benign warning.

[2:31:43 AM] [Google Search] › ⚠  warning   Missing Google Custom Search key, site search will not be available! Environment variable AMP_DEV_CREDENTIAL_GOOGLE_CSE_API_KEY is not set.

Indeed just a warning, safe to ignore. This means that the environment will not be able to make calls to the Google Custom Search Engine which will render search unusable. Credentials are correctly configured for staging and production.

💭 2. What search?

[2:31:43 AM] [Search] › ✖  error     Invalid search params (q=undefined, page=undefined)

That's a test case for what happens when there is an invalid search request. We've improved DX here by silencing logs during test runs.

💭 3. Why no frontmatter?

[2:31:47 AM] [Markdown Documents] › ✖  error     Failed to parse frontmatter for /amp-dev/pages/content/amp-dev/documentation/components/reference/amp-test-v0.1.md contents does not contain a frontmatter block.
[2:31:47 AM] [Markdown Documents] › ⚠  warning   Auto extracting teaser text for /amp-dev/pages/content/amp-dev/documentation/components/reference/amp-test-v0.1.md
[2:31:47 AM] [Component Reference Documents] › ⚠  warning   amp-test doesn't specify any formats in its frontmatter and is force-listed for websites.
[2:31:47 AM] [Markdown Documents] › ✖  error     Failed to parse frontmatter for /amp-dev/pages/content/amp-dev/documentation/components/reference/amp-test-v0.1.md contents does not contain a frontmatter block.
[2:31:47 AM] [Markdown Documents] › ⚠  warning   Auto extracting teaser text for /amp-dev/pages/content/amp-dev/documentation/components/reference/amp-test-v0.1.md
[2:31:47 AM] [Component Reference Documents] › ⚠  warning   amp-test doesn't specify any formats in its frontmatter and is force-listed for websites.

Similar to above: we've now silenced logs during test runs. There are test cases that don't have a fully qualified frontmatter to keep the cases as narrow and simple as possible.

💭 4. Benign warning.

[2:31:48 AM] [Page Cache] › ⚠  warning   No Redis instances available. Falling back to LRU

Safe to ignore. We cache rendered pages on staging and production by storing them in Redis instances. This behaviour is simulated by using lru-cache for all environments that don't a Redis instance configured. That's a valuable warning for prod though as it would mean the instances are not available 😉

💭 5. Outstanding bug. Is there a tracking issue?

[2:31:48 AM] [Runtime Log] › ✖  error     Retrieving runtime log failed: Error: Request failed https://cdn.ampproject.org/rtv/011905140117570/log-messages.json with status 404
    at LogProvider.fetchLogs_ (/home/travis/build/ampproject/amp.dev/platform/lib/runtime-log/LogProvider.js:59:13)
    at LogProvider.get (/home/travis/build/ampproject/amp.dev/platform/lib/runtime-log/LogProvider.js:45:18)
    at LogFormatter.apply (/home/travis/build/ampproject/amp.dev/platform/lib/runtime-log/HtmlFormatter.js:37:17)
    at /home/travis/build/ampproject/amp.dev/platform/lib/routers/runtimeLog.js:44:18

Also a test case testing error behaviour. Safe to ignore. Additionally not finally implemented and/or productive.

💭 6. Looks like #3477.

[2:31:58 AM] [Reference checker] › ✖  error     No matching document found for /content/amp-dev/documentation/ads/eas.md. Needs manual fixing. (First found in /home/travis/build/ampproject/amp.dev/pages/content/amp-dev/documentation/components/reference/amp-ad-v0.1@fr.md)
[2:31:58 AM] [Reference checker] › ✖  error     No matching document found for /content/amp-dev/documentation/spec/amp-var-substitutions.md. Needs manual fixing. (First found in /home/travis/build/ampproject/amp.dev/pages/content/amp-dev/documentation/components/reference/amp-form-v0.1@id.md)
[2:31:58 AM] [Reference checker] › ✖  error     No matching document found for /content/amp-dev/documentation/spec/amp-var-substitutions.md. Needs manual fixing. (First found in /home/travis/build/ampproject/amp.dev/pages/content/amp-dev/documentation/components/reference/amp-form-v0.1@id.md)
[2:31:59 AM] [Reference checker] › ⚠  warning   anchor not found in imported document #add-batch-plugin 
 found in: /home/travis/build/ampproject/amp.dev/pages/content/amp-dev/documentation/guides-and-tutorials/contribute/integrate-your-analytics-tools.md 
 target: <internal>
[2:31:59 AM] [Reference checker] › ✖  error     More than one possible match for /content/amp-dev/documentation/guides-and-tutorials/documentation/components/reference/amp-carousel.md. Needs manual fixing. (In /home/travis/build/ampproject/amp.dev/pages/content/amp-dev/documentation/guides-and-tutorials/develop/amp_email_best_practices.md)
[2:31:59 AM] [Reference checker] › ✖  error     No matching document found for /content/amp-dev/documentation/guides-and-tutorials/documentation/components/reference/amp-animation.md. Needs manual fixing. (First found in /home/travis/build/ampproject/amp.dev/pages/content/amp-dev/documentation/guides-and-tutorials/develop/animations/introduction_to_animations.md)
[2:31:59 AM] [Reference checker] › ✖  error     No matching document found for /content/amp-dev/documentation/guides-and-tutorials/documentation/components/reference/amp-animation.md. Needs manual fixing. (First found in /home/travis/build/ampproject/amp.dev/pages/content/amp-dev/documentation/guides-and-tutorials/develop/animations/introduction_to_animations.md)
[2:31:59 AM] [Reference checker] › ⚠  warning   anchor not found in imported document #why-do-i-need-cors-for-my-own-origin- 
 found in: /home/travis/build/ampproject/amp.dev/pages/content/amp-dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests.md 
 target: <internal>

Unrelated to #3477 but indeed the problem with this PR. Looking into this now. We check internal links prior builds to make sure there aren't any references that would make Grow break.

💭 7. Benign failure summary.

[02:32:00] 'lintGrow' errored after 9.1 s
[02:32:00] Error: 6 broken links and 0 wrong anchors found
    at Pumpify.<anonymous> (/home/travis/build/ampproject/amp.dev/platform/lib/tools/growReferenceChecker.js:173:13)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
[02:32:00] 'lintAll' errored after 9.1 s
[02:32:00] The following tasks did not complete: lintNode
[02:32:00] Did you forget to signal async completion?
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! amp-dev@1.0.5 lint: `npx gulp lintAll`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the amp-dev@1.0.5 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/travis/.npm/_logs/2020-02-19T02_32_00_338Z-debug.log
npm ERR! Test failed.  See above for more details.
The command "scripts/unbuffer.sh npm test" failed and exited with 1 during .
Your build has been stopped.

The Reference checker fails and therefore the whole build/check fails 😉

@DerekNonGeneric
Copy link
Contributor Author

DerekNonGeneric commented Mar 23, 2020

@matthiasrohmer, please ping me when you think I should circle back to this.

P.S. Thanks for cleaning up the logs!

@sebastianbenz
Copy link
Collaborator

Woohoo! Thanks a lot!

@DerekNonGeneric
Copy link
Contributor Author

I will have to separate these commits out a little better. I had trouble importing all of the documents. Not all of them came in when running npm run bootstrap or even by simply running npx gulp importAll. I think the flaky GitHub downloads leads to winding up w/ documents missing — a bit of a hassle. :/ Anyways, I'll get back to this in a short while. Thank you for your patience.

@DerekNonGeneric DerekNonGeneric marked this pull request as ready for review June 25, 2020 02:45
@DerekNonGeneric
Copy link
Contributor Author

@matthiasrohmer PTAL, I think this PR still needs your approval. This would still need to be integrated into one of the tasks (lint/format) and perhaps run as part of the pre-push Husky hook. I hope this can come later though. I don't want this PR to sit for much longer.

@CLAassistant
Copy link

CLAassistant commented Oct 8, 2020

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants