JSR Version Badge - Svelte Shields

Props #

- scope
- packageName
- style
- logo
- logoColor
- logoSize
- label
- labelColor
- color
- cacheSeconds
- link
- class: classname
- ...attributes

Types #

import type { HTMLImgAttributes } from 'svelte/elements';

export type LinkType = string[] | [string, string];
export interface BaseBadgePropsType {
  style?: 'flat' | 'flat-square' | 'for-the-badge' | 'plastic' | 'social';
  logo?: string | undefined | null;
  logoColor?: string | undefined | null;
  logoSize?: string | undefined | null;
  label?: string | undefined | null;
  labelColor?: string | undefined | null;
  color?: string | undefined | null;
  cacheSeconds?: string | undefined | null;
  link?: LinkType;
  class?: string | undefined | null;
}
interface ExtendedStyle extends BaseBadgePropsType, HTMLImgAttributes {
  style?: 'flat' | 'flat-square' | 'for-the-badge' | 'plastic' | 'social';
}
export interface JsrVersionPropsType extends ExtendedStyle {
  scope: string;
  packageName: string;
}

Examples #

Basic usage #

packageName may be the name of an unscoped package like package-name or a scoped package like @author/package-name.

tag can be next, v1, v2, beta, etc.

<script lang="ts">
  import { JsrVersion } from 'svelte-shields'
  import type { JsrVersionPropsType } from 'svelte-shields';
  
  const basic: JsrVersionPropsType = {
    scope: '@hono',
    packageName: 'hono',
  }
</script>

<JsrVersion {...basic} />

Style #

Possible values: flat, flat-square, plastic, for-the-badge, social. If not specified, the default style for this badge is "flat".

<script lang="ts">
  import { JsrVersion } from 'svelte-shields'
  import type { JsrVersionPropsType } from 'svelte-shields';

  const style1: JsrVersionPropsType = {
    scope: '@hono',
    packageName: 'hono',
    style: 'flat',
  }
  const style2: JsrVersionPropsType = {
    scope: '@hono',
    packageName: 'hono',
    style: 'flat-square',
  }
  const style3: JsrVersionPropsType = {
    scope: '@hono',
    packageName: 'hono',
    style: 'for-the-badge',
  }
  const style4: JsrVersionPropsType = {
    scope: '@hono',
    packageName: 'hono',
    style: 'plastic',
  }
  const style5: JsrVersionPropsType = {
    scope: '@hono',
    packageName: 'hono',
    style: 'social',
  }
</script>

<JsrVersion {...style1} />
<JsrVersion {...style2} />
<JsrVersion {...style3} />
<JsrVersion {...style4} />
<JsrVersion {...style5} />

Color #

Background color of the right part (hex, rgb, rgba, hsl, hsla and css named colors supported).

<script lang="ts">
  import { JsrVersion } from 'svelte-shields'
  import type { JsrVersionPropsType } from 'svelte-shields';

  const color1: JsrVersionPropsType = {
    scope: '@hono',
    packageName: 'hono',
    color: 'green'
  }

  const color2: JsrVersionPropsType = {
    scope: '@hono',
    packageName: 'hono',
    color: '00FF00' 
  }

  const color3: JsrVersionPropsType = {
    scope: '@hono',
    packageName: 'hono',
    color: 'rgb(0, 255, 0)' 
  }

  const color4: JsrVersionPropsType = {
    scope: '@hono',
    packageName: 'hono',
    color: 'rgba(0, 255, 0, 1)' 
  }

  const color5: JsrVersionPropsType = {
    scope: '@hono',
    packageName: 'hono',
    color: 'hsl(120, 100%, 50%)' 
  }

  const color6: JsrVersionPropsType = {
    scope: '@hono',
    packageName: 'hono',
    color: 'hsla(120, 100%, 50%, 1)' 
  }
</script>

<JsrVersion {...color1} />
<JsrVersion {...color2} />
<JsrVersion {...color3} />
<JsrVersion {...color4} />
<JsrVersion {...color5} />
<JsrVersion {...color6} />

Logo & Label #

<script lang="ts">
  import { JsrVersion } from 'svelte-shields'
  import type { JsrVersionPropsType } from 'svelte-shields';
  
  const logo_label: JsrVersionPropsType = {
    scope: '@hono',
    packageName: 'hono',
    logo: 'hono',
    label: 'HONO'
  }
</script>

<JsrVersion {...logo_label} />

Link #

Specify what clicking on the left/right of a badge should do.

<script lang="ts">
  import { JsrVersion } from 'svelte-shields'
  import type { JsrVersionPropsType } from 'svelte-shields';

  const link: JsrVersionPropsType = {
    scope: '@hono',
    packageName: 'hono',
    label: 'HONO',
    link: ['https://jsr.io/@hono/hono', 'https://github.com/badrap/hono']
  }
</script>

<JsrVersion {...link} />

Other #

cacheSeconds is HTTP cache lifetime (rules are applied to infer a default value on a per-badge basis, any values specified below the default will be ignored).

<script lang="ts">
  import { JsrVersion } from 'svelte-shields'
  import type { JsrVersionPropsType } from 'svelte-shields';

  const other: JsrVersionPropsType = {
    scope: '@hono',
    packageName: 'hono',
    cacheSeconds: '86400',
  }
</script>

<JsrVersion {...other} />