Storybook 链接失效

一个 Storybook 插件,用于检查 Storybook Markdown 文件中的所有超链接,以确定它们是有效还是失效。

在 Github 上查看

Storybook 死链接检查器

example workflow NPM release NPM Downloads

一个轻量级的 Storybook 插件,用于验证 Storybook 故事中失效链接,其中链接是使用 @storybook/addon-links 包创建的。

亮点

  • 支持 node v8.x 及以上版本
  • 验证故事中的所有锚点/内部链接(例如:#my-link)
  • 验证故事中的所有外部链接(例如:https://my-link.com
  • 验证故事中的所有 Storybook 链接插件(例如:LinkTo kind='*')

安装

npm i --save-dev storybook-deadlink-checker

yarn add --dev storybook-deadlink-checker

使用指南

:warning: 目前仅支持 CLI 使用,暂不支持编程方式使用

$ npx storybook-deadlink-checker [dir] [storybook-url] [fileIgnorePattern] [onlyFail]

Options:
  --version                   Show version number                       [boolean]
  --file, --file              file path                                 [string]
  --dir, --directory          directory path                            [string]
  --url, --storybook-url      storybook live or local build url         [string]
  --ignore, --ignore-pattern  ignore pattern                            [string]
  --onlyFail, --only-fail     only show failed links  [boolean] [default: false]
  --help                      Show help                                [boolean]

检查 md 和 mdx 文件中使用的锚点和外部链接

$ npx storybook-deadlink-checker --dir="./path/to/folder"

检查 Storybook 链接以及锚点和外部链接

原理非常简单。爬虫在 Storybook 故事中查找所有 <LinkTo kind='*'/>[Link](?path=/docs/*)<a href="?path=/docs/*">Link</a> 标签,并检查这些链接在托管/本地 Storybook 构建中是否有效。

要验证 Storybook 链接,您需要提供一个 Storybook URL。您可以使用在线构建的 URL 或本地构建的 URL。

对于本地构建的 URL,您可以使用以下命令

$ npx build-storybook -o ./local-storybook-build-folder

// then validate the links
$ npx storybook-deadlink-checker --dir="./path/to/folder" --url="file:///${PWD}/local-storybook-build-folder"

对于在线构建的 URL,您可以使用以下命令

$ npx start-storybook -p 9009 --no-manager-cache -s public
$ npx storybook-deadlink-checker --dir="./path/to/folder" --url="https://127.0.0.1:9009"

仅显示失效链接

$ npx storybook-deadlink-checker --dir="./path/to/folder" --url="https://127.0.0.1:9009" --onlyFail

忽略特殊链接

$ npx storybook-deadlink-checker --dir="./path/to/folder" --url="https://127.0.0.1:9009" --ignore="url-pattern-1,url-pattern-2..."

告诉我您的问题

您可以在 此处 提出任何问题

贡献

欢迎任何 Pull Request。

在您离开之前

如果它对您有用,请给一个 Star! :star