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 linter check that fails for nondescript link labels #2128

Merged
merged 4 commits into from
Dec 2, 2022
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
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"canvaskit-wasm": "^0.37.0",
"chroma-js": "^2.4.2",
"dedent-js": "^1.0.1",
"domhandler": "^4.3.1",
"eslint": "^8.21.0",
"eslint-plugin-astro": "^0.14.0",
"fast-glob": "^3.2.11",
Expand Down
2 changes: 2 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

38 changes: 38 additions & 0 deletions scripts/lib/linkcheck/checks/good-link-label.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { DomUtils } from 'htmlparser2';
import kleur from 'kleur';
import { dedentMd } from '../../output.mjs';
import { CheckBase, CheckHtmlPageContext } from '../base/check';
import { IssueType } from '../base/issue';

/** List of labels that are insufficiently descriptive for a link. */
const blocklist = new Set(['read more', 'click here', 'here', 'more']);

export class GoodLabels extends CheckBase {
private static readonly BadLabel = new IssueType({
title: 'link(s) with vague or nondescript labels',
prefix: kleur.gray(`[${kleur.yellow().bold('lbl')}]`),
sortOrder: 1000,
});

checkHtmlPage(context: CheckHtmlPageContext) {
// Skip all checks if the current page is a language fallback page
// to avoid reporting duplicates for all missing translations
if (context.page.isLanguageFallback) return;

context.page.anchors.forEach((anchor) => {
const linkLabel = DomUtils.innerText(anchor)
.replace(/[\n\s\t]+/g, ' ')
.trim();

if (!blocklist.has(linkLabel.toLowerCase())) return;

context.report({
type: GoodLabels.BadLabel,
linkHref: anchor.attribs.href,
annotationText: dedentMd`Found link label “${linkLabel}”.
Please use descriptive accessible text for labels instead
of short undescriptive labels like “here” or “read more”.`,
});
});
}
}
2 changes: 2 additions & 0 deletions scripts/lint-linkcheck.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { LinkCheckerOptions, LinkCheckerState } from './lib/linkcheck/base/base';
import { CanonicalUrl } from './lib/linkcheck/checks/canonical-url';
import { GoodLabels } from './lib/linkcheck/checks/good-link-label';
import { RelativeUrl } from './lib/linkcheck/checks/relative-url';
import { SameLanguage } from './lib/linkcheck/checks/same-language';
import { TargetExists } from './lib/linkcheck/checks/target-exists';
Expand Down Expand Up @@ -76,6 +77,7 @@ const linkChecker = new LinkChecker({
ignoreMissingCanonicalUrl: ['/lighthouse/'],
}),
new RelativeUrl(),
new GoodLabels(),
],
autofix: process.argv.includes('--autofix') || Boolean(process.env.npm_config_autofix),
});
Expand Down
4 changes: 2 additions & 2 deletions src/pages/en/guides/deploy/buddy.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Buddy itself will not host your site. Instead, it helps you manage the build pro

## How to deploy

1. Create a **Buddy** account [here](https://buddy.works/sign-up).
1. [Create a **Buddy** account](https://buddy.works/sign-up).
2. Create a new project and connect it with a git repository (GitHub, GitLab, BitBucket, any private Git Repository or you can use Buddy Git Hosting).
3. Add a new pipeline.
4. In the newly created pipeline add a **[Node.js](https://buddy.works/actions/node-js)** action.
Expand All @@ -24,5 +24,5 @@ Buddy itself will not host your site. Instead, it helps you manage the build pro
npm run build
```

6. Add a deployment action — there are many to choose from, you can browse them [here](https://buddy.works/actions). Although their settings can differ, remember to set the **Source path** to `dist`.
6. Add a deployment action — there are many to choose from, you can browse them in [Buddy’s actions catalog](https://buddy.works/actions). Although their settings can differ, remember to set the **Source path** to `dist`.
7. Press the **Run** button.