@goil/badge - npm Package Compare versions

Comparing version

1.0.1

1.0.2

+1

-1

package.json

		{
		"name": "@goil/badge",
		"version": "1.0.1",
		"version": "1.0.2",
		"description": "Lightweight 'Made with Goil' badge for static sites, React and Next.js",
		@@ -5,0 +5,0 @@ "type": "module",

+14

-115

README.md

		# @goil/badge

		Lightweight "Made with Goil" badge widget. Drops into any HTML page, React, or Next.js project.
		Lightweight "Made with Goil" badge widget. Works in any HTML page, React or Next.js.

		- ~1.9 kB gzipped (IIFE script) — zero dependencies at runtime
		- Shadow DOM for full style isolation — won't conflict with host site CSS
		- Auto-detects color scheme (`prefers-color-scheme`) and browser language
		- Catalan / Spanish / English translations
		- Subtle glare hover animation
		## Install

		<p align="center">
		<img src="https://raw.githubusercontent.com/goil-app/web-widgets-badge/main/screenshots/variants.png" alt="Goil Badge variants — auto / dark / light" width="640">
		</p>

		<p align="center">
		<img src="https://raw.githubusercontent.com/goil-app/web-widgets-badge/main/screenshots/languages.png" alt="Translations — auto / en / ca / es" width="640">
		</p>

		## Usage

		### HTML / static site

		```html
		<script src="https://goil-composer.s3.eu-west-3.amazonaws.com/badge/latest/goil-badge.iife.min.js"></script>
		```bash
		npm i @goil/badge
		```

		With config (set before the script tag):
		## Quick start

		```html
		<script>
		window.GoilBadgeConfig = {
		variant: 'auto', // 'dark' \| 'light' \| 'auto' (default: 'auto')
		lang: 'auto', // 'en' \| 'es' \| 'ca' \| 'auto' (default: 'auto')
		position: 'bottom-right', // 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'
		zIndex: 9999,
		};
		</script>
		<script src="https://goil-composer.s3.eu-west-3.amazonaws.com/badge/latest/goil-badge.iife.min.js"></script>
		```
		React / Next.js:

		<p align="center">
		<img src="https://raw.githubusercontent.com/goil-app/web-widgets-badge/main/screenshots/iife.png" alt="Badge injected as fixed bottom-right on a static page" width="640">
		</p>

		### React / Next.js

		```bash
		npm i @goil/badge
		```

		```tsx
		import { GoilBadge } from '@goil/badge/react'

		export default function Layout({ children }: { children: React.ReactNode }) {
		return (
		<>
		{children}
		<GoilBadge variant="auto" lang="auto" />
		</>
		)
		export default function Layout() {
		return <GoilBadge variant="auto" lang="auto" />
		}
		```

		The React component renders inline. Wrap it in your own positioned container if you need it fixed.
		HTML / static site:

		### Vanilla JS (npm)

		```ts
		import { createGoilBadge } from '@goil/badge'

		const { element, destroy } = createGoilBadge({ variant: 'auto', lang: 'auto' })
		document.body.appendChild(element)

		// later
		destroy()
		```html
		<script src="https://goil-composer.s3.eu-west-3.amazonaws.com/badge/latest/goil-badge.iife.min.js"></script>
		```
		@@ -82,63 +33,11 @@
		interface GoilBadgeOptions {
		variant?: 'dark' \| 'light' \| 'auto' // default: 'auto'
		lang?: 'en' \| 'es' \| 'ca' \| 'auto' // default: 'auto'
		variant?: 'dark' \| 'light' \| 'auto' // default: 'auto' — follows prefers-color-scheme
		lang?: 'en' \| 'es' \| 'ca' \| 'auto' // default: 'auto' — reads navigator.language
		}
		```

		\| Option \| Behaviour \|
		\| --- \| --- \|
		\| `variant` \| Background. `auto` follows `prefers-color-scheme` and updates live. \|
		\| `lang` \| Caption language. `auto` reads `navigator.language` (falls back to `en`). \|
		Full documentation, integration patterns, screenshots and release process live in [`DOCS.md`](https://github.com/goil-app/web-widgets-badge/blob/main/DOCS.md) in the repository.

		## CDN URLs

		Pin a specific version:

		```html
		<script src="https://goil-composer.s3.eu-west-3.amazonaws.com/badge/v1.0.0/goil-badge.iife.min.js"></script>
		```

		Always-latest (5 min cache):

		```html
		<script src="https://goil-composer.s3.eu-west-3.amazonaws.com/badge/latest/goil-badge.iife.min.js"></script>
		```

		## Development

		```bash
		pnpm install
		pnpm dev # Vite dev server with live-reloading demo
		pnpm build # Builds dist/ — ESM + CJS + IIFE + .d.ts
		pnpm typecheck # tsc --noEmit
		```

		Project layout:

		```
		src/
		core.ts — Vanilla createGoilBadge() — single source of truth, uses Shadow DOM
		react.tsx — React wrapper (mounts the vanilla badge via useEffect)
		script.ts — IIFE entry — auto-mounts with window.GoilBadgeConfig
		index.ts — npm main entry (vanilla)
		demo/
		index.html — Vite dev preview
		main.ts
		```

		## Releases

		Versioning, CHANGELOG and publishing are automated via [Changesets](https://github.com/changesets/changesets) and GitHub Actions.

		```bash
		# after making your change
		pnpm changeset # describe the change + pick patch/minor/major
		git commit -am "feat: ..."
		git push # open PR, merge to main
		```

		When the PR is merged to `main`, a bot opens a "chore: version packages" PR that bumps the version and regenerates `CHANGELOG.md`. Merging that PR triggers CI which publishes `@goil/badge` to npm via OIDC (with provenance) and uploads the IIFE bundle to S3 at both `badge/v<version>/` and `badge/latest/`.

		## License

		MIT © Goil

@goil/badge - npm Package Compare versions

Worsened metrics