|
1 | 1 | # Links |
2 | 2 |
|
3 | | -This subject folder contains files that support link features on docs.github.com, such as hover card, auto generated links, and updating links for different versions and languages. |
| 3 | +This module contains the tooling and components responsible for link integrity, user experience (hover previews), and maintenance across the GitHub Docs site. |
| 4 | + |
| 5 | +## Purpose & Scope |
| 6 | + |
| 7 | +The `src/links` directory manages: |
| 8 | +- **Link Validation**: Ensuring all internal and external links in the documentation are valid. |
| 9 | +- **Link Maintenance**: Automated tools to update links when pages are moved or renamed. |
| 10 | +- **User Experience**: Components like "Hover Cards" that provide context when users hover over internal links. |
| 11 | +- **Compliance**: Checking for specific link patterns (e.g., `github/github` links). |
| 12 | + |
| 13 | +## Architecture |
| 14 | + |
| 15 | +### Components |
| 16 | + |
| 17 | +- **`LinkPreviewPopover.tsx`**: A React component that renders a preview card when a user hovers over a link. It handles: |
| 18 | + - **Delay Logic**: Prevents the popover from appearing during accidental mouse-overs. |
| 19 | + - **Positioning**: Ensures the popover appears near the link without going off-screen. |
| 20 | + |
| 21 | +### Libraries (`src/links/lib`) |
| 22 | + |
| 23 | +- **`update-internal-links.ts`**: The core logic for refactoring links. It parses Markdown/Liquid, identifies links, and updates their `href` or title based on a provided map of changes. It handles: |
| 24 | + - Stripping Liquid conditionals to find the "pure" link. |
| 25 | + - Updating frontmatter links. |
| 26 | + - Handling anchors and query parameters. |
| 27 | +- **`excluded-links.ts`**: Configuration for links that should be ignored by validators (e.g., localhost links, specific example domains). |
| 28 | + |
| 29 | +### Scripts (`src/links/scripts`) |
| 30 | + |
| 31 | +- **`rendered-content-link-checker.ts`**: A comprehensive CLI tool that: |
| 32 | + - Renders content pages to HTML. |
| 33 | + - Parses the HTML to find all `<a>` and `<img>` tags. |
| 34 | + - Validates internal links (checking for 404s, broken anchors). |
| 35 | + - Validates external links (with caching and retry logic). |
| 36 | + - Reports flaws and can comment directly on GitHub Pull Requests. |
| 37 | +- **`check-github-github-links.ts`**: Ensures that we don't accidentally link to private `github/github` URLs in public documentation. |
| 38 | +- **`update-internal-links.ts`**: A CLI wrapper around the library function to perform bulk updates on the content files. |
| 39 | + |
| 40 | +## Setup & Usage |
| 41 | + |
| 42 | +### Validating Links |
| 43 | + |
| 44 | +To run the link checker locally: |
| 45 | + |
| 46 | +```bash |
| 47 | +npm run rendered-content-link-checker-cli |
| 48 | +``` |
| 49 | + |
| 50 | +Options: |
| 51 | +- `--level <all|critical|warning>`: Set the reporting level. |
| 52 | +- `--check-external-links`: Check external links (slower). |
| 53 | +- `--verbose`: Show detailed output. |
| 54 | + |
| 55 | +### Updating Links |
| 56 | + |
| 57 | +If you have moved content or changed titles and need to update references: |
| 58 | + |
| 59 | +```bash |
| 60 | +npm run update-internal-links |
| 61 | +``` |
| 62 | + |
| 63 | +This script typically relies on the state of the `content` directory to determine what needs updating. |
| 64 | + |
| 65 | +## Dependencies |
| 66 | + |
| 67 | +- **`cheerio`**: Used by the link checker to parse rendered HTML. |
| 68 | +- **`src/content-render`**: The link checker needs to render pages to see the final HTML output. |
| 69 | +- **`src/frame`**: Uses `cookies` and other utilities for request context. |
| 70 | + |
| 71 | +## Ownership |
| 72 | + |
| 73 | +- **Team**: `@github/docs-engineering` |
| 74 | + |
| 75 | +## Current State & Known Issues |
| 76 | + |
| 77 | +- **Performance**: The `rendered-content-link-checker` is resource-intensive because it renders pages. It uses concurrency limits and caching (especially for external links) to mitigate this. |
| 78 | +- **False Positives**: External link checking can be flaky due to temporary network issues or anti-bot protections on target sites. The system uses a "retry and cache" strategy to reduce noise. |
| 79 | +- **Liquid Complexity**: `update-internal-links` has to use regex and heuristics to parse Markdown mixed with Liquid, which is inherently fragile compared to a full AST parser, but necessary to preserve code formatting. |
0 commit comments