[docs] Email protection causing issues to documentation

[ojvribeiro]

Environment

Chrome: Version 112.0.5615.138 (Official Build) (64-bit) Operating System: Windows 10 Pro 22H2 19045.2846

Reproduction

https://unjs.io/changelogen

Describe the bug

Every section which mentions the changelogen package is hidden under a [email protected] message:

Additional context

No response

Logs

No response

[pi0]

Hi. What browser/version/extension are you using? I don't have this issue with chrome 112 on macos

[ojvribeiro]

Weird... With no change from my side, it's showing the package name just fine now.

From what I searched it has something to do with Cloudfare's Email Address Obfuscation, but I do not use any Cloudfare extension.

[ojvribeiro]

Ok, I just noticed it only happens when I navigate between routes. When I load the URL from a link or when I do a page reload the [email protected] don't show.

---

I'll put my OS info on the first post.

[ojvribeiro]

Here's what I get when I click the message:

---

JavaScript is enabled

---

uBlock Origin is disabled

[Barbapapazes]

Hello!

Thanks for your issue. This happens since we write changelogen@latest and the @ is used by Cloudflare to know if it's an email or not. When going to /changelogen, Cloudflare add a script to hide emails when HTML is injected (<script data-cfasync=\"false\" src=\"/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js\"></script>) and because we use a v-html in order to inject the content, script is executed.

Learn more https://developers.cloudflare.com/support/more-dashboard-apps/cloudflare-scrape-shield/what-is-email-address-obfuscation/

We are currently building a new website where this won't happens (normally). I'm also closing this issue since the new website is coming soon!

Take a look at the end

```json { "html": "

changelogen

\n

\n\n\n

\n

Generate Beautiful Changelogs using Conventional Commits

\n

Quick Start

\n

Generate a changelog in Markdown format and display in the console:

\n

npx [email protected]

\n

Generate a changelog, bump the version in package.json and update CHANGELOG.md (without commit):

\n

npx [email protected] --bump

\n

Bump the version, update CHANGELOG.md and make a git commit and tag:

\n

npx [email protected] --release

\n

CLI Usage

\n

npx [email protected] [...args] [--dir <dir>]

\n

Arguments:

\n

\n
• \n--from: Start commit reference. When not provided, latest git tag will be used as default.
\n
• \n--to: End commit reference. When not provided, latest commit in HEAD will be used as default.
\n
• \n--dir: Path to git repository. When not provided, current working directory will be used as as default.
\n
• \n--output: Changelog file name to create or update. Defaults to CHANGELOG.md and resolved relative to dir. Use --no-output to write to console only.
\n
• \n--bump: Determine semver change and update version in package.json.
\n
• \n--release. Bumps version in package.json and creates commit and git tags using local git. You can disable commit using --no-commit and tag using --no-tag. You can enable the automatic push of the new tag and release commit to your git repository by adding --push.
\n
• \n--publish. Publishes package as a new version on npm. You will need to set authorisation tokens separately via .npmrc or environment variables.
\n
• \n--publishTag Use custom npm tag for publishing (Default is latest)
\n
• \n--nameSuffix: Adds suffix to package name (Example: --nameSuffix canary renames foo to foo-canary)
\n
• \n--versionSuffix: Adds suffix to package version. When set without value or to true, uses date + commit hash as commit
\n
• \n--canary. Shortcut to --bump --versionSuffix (--nameSuffix will be also added if arg has a string value).
\n
• \n-r: Release as specific version.
\n
• \n--major: Bump as a semver-major version
\n
• \n--minor: Bump as a semver-minor version
\n
• \n--patch: Bump as a semver-patch version
\n
• \n--premajor: Bump as a semver-premajor version, can set id with string.
\n
• \n--preminor: Bump as a semver-preminor version, can set id with string.
\n
• \n--prepatch: Bump as a semver-prepatch version, can set id with string.
\n
• \n--prerelease: Bump as a semver-prerelease version, can set id with string.
\n

\n

changelogen gh release

\n

Changelogen has built-in functionality to sync with with Github releases.

\n

In order to manually sync a release, you can use changelogen gh release. It will parse current CHANGELOG.md from current repository (local, then remote) and create or update releases.

\n

Usage:

\n

npx [email protected] gh release [all|versions...] [--dir] [--token]

\n

To enable this integration, make sure there is a valid repository field in package.json or repo is set in .changelogenrc.

\n

By default in unauthenticated mode, changelogen will open a browser link to make manual release. By providing github token, it can be automated.

\n

\n
• Using environment variables or .env, use CHANGELOGEN_TOKENS_GITHUB or GITHUB_TOKEN or GH_TOKEN\n
\n
• Using CLI args, use --token <token>\n
\n
• Using global configuration, put tokens.github=<token> inside ~/.changlogenrc\n
\n
• Using GitHub CLI token when authenticated with gh auth login\n
\n

\n

Configuration

\n

Configuration is loaded by unjs/c12 from cwd. You can use either changelog.config.json, changelog.config.{ts,js,mjs,cjs}, .changelogrc or use the changelog field in package.json.

\n

See ./src/config.ts for available options and defaults.

\n

💻 Development

\n

\n
• Clone this repository
\n
• Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
\n
• Install dependencies using pnpm install\n
\n
• Run interactive tests using pnpm dev\n
\n

\n

License

\n

Made with 💛

\n

Published under MIT License.

\n\n" "markdown": "# changelogen\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![Codecov][codecov-src]][codecov-href]\n[![License][license-src]][license-href]\n\nGenerate Beautiful Changelogs using [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)\n\n## Quick Start\n\nGenerate a changelog in Markdown format and display in the console:\n\n```sh\nnpx changelogen@latest\n```\n\nGenerate a changelog, bump the version in `package.json` and update `CHANGELOG.md` (without commit):\n\n```sh\nnpx changelogen@latest --bump\n```\n\nBump the version, update `CHANGELOG.md` and make a git commit and tag:\n\n```sh\nnpx changelogen@latest --release\n```\n\n## CLI Usage\n\n```sh\nnpx changelogen@latest [...args] [--dir ]\n```\n\n**Arguments:**\n\n- `--from`: Start commit reference. When not provided, **latest git tag** will be used as default.\n- `--to`: End commit reference. When not provided, **latest commit in HEAD** will be used as default.\n- `--dir`: Path to git repository. When not provided, **current working directory** will be used as as default.\n- `--output`: Changelog file name to create or update. Defaults to `CHANGELOG.md` and resolved relative to dir. Use `--no-output` to write to console only.\n- `--bump`: Determine semver change and update version in `package.json`.\n- `--release`. Bumps version in `package.json` and creates commit and git tags using local `git`. You can disable commit using `--no-commit` and tag using `--no-tag`. You can enable the automatic push of the new tag and release commit to your git repository by adding `--push`.\n- `--publish`. Publishes package as a new version on `npm`. You will need to set authorisation tokens separately via `.npmrc` or environment variables.\n- `--publishTag` Use custom npm tag for publishing (Default is `latest`)\n- `--nameSuffix`: Adds suffix to package name (Example: `--nameSuffix canary` renames `foo` to `foo-canary`)\n- `--versionSuffix`: Adds suffix to package version. When set without value or to `true`, uses date + commit hash as commit\n- `--canary`. Shortcut to `--bump --versionSuffix` (`--nameSuffix` will be also added if arg has a string value).\n- `-r`: Release as specific version.\n- `--major`: Bump as a semver-major version\n- `--minor`: Bump as a semver-minor version\n- `--patch`: Bump as a semver-patch version\n- `--premajor`: Bump as a semver-premajor version, can set id with string.\n- `--preminor`: Bump as a semver-preminor version, can set id with string.\n- `--prepatch`: Bump as a semver-prepatch version, can set id with string.\n- `--prerelease`: Bump as a semver-prerelease version, can set id with string.\n\n### `changelogen gh release`\n\nChangelogen has built-in functionality to sync with with Github releases.\n\nIn order to manually sync a release, you can use `changelogen gh release`. It will parse current `CHANGELOG.md` from current repository (local, then remote) and create or update releases.\n\nUsage:\n\n```sh\nnpx changelogen@latest gh release [all|versions...] [--dir] [--token]\n```\n\nTo enable this integration, make sure there is a valid `repository` field in `package.json` or `repo` is set in `.changelogenrc`.\n\nBy default in unauthenticated mode, changelogen will open a browser link to make manual release. By providing github token, it can be automated.\n\n- Using environment variables or `.env`, use `CHANGELOGEN_TOKENS_GITHUB` or `GITHUB_TOKEN` or `GH_TOKEN`\n- Using CLI args, use `--token `\n- Using global configuration, put `tokens.github=` inside `~/.changlogenrc`\n- Using [GitHub CLI](https://cli.github.com/) token when authenticated with `gh auth login`\n\n## Configuration\n\nConfiguration is loaded by [unjs/c12](https://github.com/unjs/c12) from cwd. You can use either `changelog.config.json`, `changelog.config.{ts,js,mjs,cjs}`, `.changelogrc` or use the `changelog` field in `package.json`.\n\nSee [./src/config.ts](./src/config.ts) for available options and defaults.\n\n## 💻 Development\n\n- Clone this repository\n- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable` (use `npm i -g corepack` for Node.js < 16.10)\n- Install dependencies using `pnpm install`\n- Run interactive tests using `pnpm dev`\n\n## License\n\nMade with 💛\n\nPublished under [MIT License](./LICENSE).\n\n\n\n[npm-version-src]: https://img.shields.io/npm/v/changelogen?style=flat&colorA=18181B&colorB=F0DB4F\n[npm-version-href]: https://npmjs.com/package/changelogen\n[npm-downloads-src]: https://img.shields.io/npm/dm/changelogen?style=flat&colorA=18181B&colorB=F0DB4F\n[npm-downloads-href]: https://npmjs.com/package/changelogen\n[codecov-src]: https://img.shields.io/codecov/c/gh/unjs/changelogen/main?style=flat&colorA=18181B&colorB=F0DB4F\n[codecov-href]: https://codecov.io/gh/unjs/changelogen\n[license-src]: https://img.shields.io/github/license/unjs/changelogen.svg?style=flat&colorA=18181B&colorB=F0DB4F\n[license-href]: https://github.com/unjs/changelogen/blob/main/LICENSE\n" } ```