@goil/badge

@goil/badge

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

• ~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

Usage

HTML / static site

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

With config (set before the script tag):

<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

npm i @goil/badge

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

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

The React component renders inline. Wrap it in your own positioned container if you need it fixed.

Vanilla JS (npm)

import { createGoilBadge } from '@goil/badge'

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

// later
destroy()

API

interface GoilBadgeOptions {
  variant?: 'dark' | 'light' | 'auto' // default: 'auto'
  lang?: 'en' | 'es' | 'ca' | 'auto'   // default: 'auto'
}

Option	Behaviour
variant	Background. auto follows prefers-color-scheme and updates live.
lang	Caption language. auto reads navigator.language (falls back to en).

CDN URLs

Pin a specific version:

<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):

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

Development

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 and GitHub Actions.

# 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