Add ESLint rule to catch broken internal links#157
Add ESLint rule to catch broken internal links#157allgandalf wants to merge 7 commits intoPecanProject:masterfrom
Conversation
Add a no-bad-internal-links ESLint rule that flags JSX href/to attributes with relative paths, .html extensions, missing trailing slashes, or whitespace in URLs. Includes a GitHub Actions workflow to run lint on every PR and push to master. Closes PecanProject#156
8f2c6d2 to
ac4dcb6
Compare
- Fix leading whitespace in URLs in news.js - Fix relative link gsoc.html -> /gsoc/ in news.js - Add trailing slash to /site/pecanworkflow/pecan_news/* links in news.js - Add trailing slash to /en-US/docs/Glossary in all documentation pages - Add trailing slash to /documentation/latest in index.js - Regenerate package-lock.json to include new devDependencies
The build workflow (publish-docs.yml) uses npm ci, so the lint workflow should match to keep CI consistent.
Lockfile includes eslint dependency tree and minor transitive dep updates from npm resolution.
|
🚀 Preview Ready! |
| run: npm ci | ||
|
|
||
| - name: Lint | ||
| run: npm run lint |
There was a problem hiding this comment.
Instead of creating a new file for linting check for CI, can we keep this in the existing publish-docs.yaml? Basically, just add a new step npm run lint before npm run build. Ideally, it should run before npm run build. wdyt?
There was a problem hiding this comment.
I have no personal preference here, but i think it's better to have different CI flows for checks (it's what i have been doing in different codebases) but if you insist i can surely put it in existing yml file , let me know
| * - Internal links must start with '/' | ||
| * - Internal links must not use .html extension | ||
| * - Internal links must end with '/' |
There was a problem hiding this comment.
Are there technical reasons for all of these? I'm OK with requiring no extensions, but I like relative links and I think of a trailing slash as an indicator this page has children (eg gsoc/ reads to me as a landing page that implies the existence of gsoc/ideas and gsoc/contributor_guidance) rather than something that should be appended everywhere.
Description of Changes
Closes #156
Adds ESLint with a custom
no-bad-internal-linksrule to prevent the class of bugs fixed in #155 (broken internal links in JSX). The rule flagshrefandtoattributes where:href=" https://...")/(e.g.href="gsoc.html"→href="/gsoc/").htmlextensions — Docusaurus uses clean URLs/Also adds a GitHub Actions lint workflow that runs on every PR and push to master.
All 46 existing violations across the codebase have been fixed in this PR.
Removes
yarn.lockand standardizes the project on npm, consistent with all CI workflows (publish-docs.ymlandlint.ymlboth usenpm ci).Files added:
eslint-rules/no-bad-internal-links.js— the custom ESLint rule.eslintrc.js— ESLint config.eslintignore— ignores build artifacts.github/workflows/lint.yml— CI workflowFiles modified:
package.json— addedlintscript,eslintandeslint-plugin-reactdevDependenciespackage-lock.json— updated lockfile with eslint dependenciessrc/pages/index.js— fixed missing trailing slashsrc/pages/news.js— fixed relative link, whitespace in URLs, missing trailing slashessrc/pages/documentation/*.js— fixed missing trailing slash on 12 filesFiles removed:
yarn.lock— project standardized on npmI have tested my changes on both desktop and mobile views.
Screenshots are attached below for desktop and mobile layouts.
Screenshots
N/A — tooling and link-fix change only, no UI modifications.
How to Test
npm installnpm run lint— should pass with 0 errors