DynaBadges

Dynamic Light/Dark HTML badges for regular HTML pages, MkDocs, and Material for MkDocs.

<bad>Default badge</bad>
<bad deeppink>Static deeppink</bad>
<bad @deeppink>Dynamic deeppink</bad>
<bad @deeppink @blue>Light deeppink / Dark blue</bad>
<bad gradient @deeppink @blue>Dynamic gradient</bad>

Installation

yarn add @rod2ik/dynabadges

import "@rod2ik/dynabadges";
import "@rod2ik/dynabadges/style.css";

Standalone browser/CDN files are generated in dist/:

<link rel="stylesheet" href="dist/assets/dynabadges.min.css">
<script src="dist/dynabadges.config.js"></script>
<script src="dist/dynabadges.min.js"></script>

Development

corepack enable
corepack prepare [email protected] --activate
yarn install
python -m pip install --break-system-packages -r site/requirements.txt

Start the MkDocs development server with Vite watch mode:

yarn dev

Build only the npm distribution:

yarn build

Build the distribution and documentation:

yarn build:full

Run the complete build, tests, artifact checks, and package preview:

yarn bfc

Automated publication

A semantic Git tag matching the package version triggers:

1. the complete yarn bfc verification;
2. npm publication through GitLab OIDC trusted publishing;
3. creation of the matching GitLab Release.

Example:

npm version 0.1.1 --no-git-tag-version
git add package.json yarn.lock CHANGELOG.md
git commit -m "Release v0.1.1"
git tag v0.1.1
git push origin main
git push origin v0.1.1

See PUBLISHING.md for the initial npm package creation and Trusted Publisher configuration.

Documentation

https://rod2ik.gitlab.io/dynabdges/

Repository

https://gitlab.com/rod2ik/dynabdges

License

GNU GPLv3 or later.