GitHub Version Badge - Svelte Shields

Props #

- user
- repo
- include_prereleases
- sort
- filter
- display_name = 'release'
- style = 'flat'
- 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 GitHubVersionPropsType extends ExtendedStyle {
  user: string;
  repo: string;
  include_prereleases?: boolean;
  sort?: 'date' | 'semver';
  filter?: string;
  display_name?: 'tag' | 'release';
}

Examples #

Basic usage #

<script lang="ts">
  import { GitHubVersion, type GitHubVersionPropsType } from 'svelte-shields';

  const release: GitHubVersionPropsType = {
    user: 'shinokada',
    repo: 'tera'
  };
</script>

<GitHubVersion {...release} />

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 { GitHubVersion, type GitHubVersionPropsType } from 'svelte-shields';

  const release2: GitHubVersionPropsType = {
    user: 'shinokada',
    repo: 'tera',
    style: 'flat'
  };

  const release3: GitHubVersionPropsType = {
    user: 'shinokada',
    repo: 'tera',
    style: 'flat-square'
  };

  const release4: GitHubVersionPropsType = {
    user: 'shinokada',
    repo: 'tera',
    style: 'for-the-badge'
  };

  const release5: GitHubVersionPropsType = {
    user: 'shinokada',
    repo: 'tera',
    style: 'plastic'
  };

  const release6: GitHubVersionPropsType = {
    user: 'shinokada',
    repo: 'tera',
    style: 'social'
  };
</script>

<div class="grid gap-4">
  <GitHubVersion {...release2} />
  <GitHubVersion {...release3} />
  <GitHubVersion {...release4} />
  <GitHubVersion {...release5} />
  <GitHubVersion {...release6} />
</div>

Color #

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

<script lang="ts">
  import { GitHubVersion, type GitHubVersionPropsType } from 'svelte-shields';

  const color1: GitHubVersionPropsType = {
    user: 'shinokada',
    repo: 'tera',
    color: 'orange'
  };

  const color2: GitHubVersionPropsType = {
    user: 'shinokada',
    repo: 'tera',
    color: 'FF7F00' // Hex (Orange)
  };

  const color3: GitHubVersionPropsType = {
    user: 'shinokada',
    repo: 'tera',
    color: 'rgb(255, 127, 0)' // RGB (Orange)
  };

  const color4: GitHubVersionPropsType = {
    user: 'shinokada',
    repo: 'tera',
    color: 'rgba(255, 127, 0, 1)' // RGBA (Orange, fully opaque)
  };

  const color5: GitHubVersionPropsType = {
    user: 'shinokada',
    repo: 'tera',
    color: 'hsl(40, 100%, 50%)' // HSL (Orange)
  };

  const color6: GitHubVersionPropsType = {
    user: 'shinokada',
    repo: 'tera',
    color: 'hsla(40, 100%, 50%, 1)' // HSLA (Orange, fully opaque)
  };
</script>

<div class="grid gap-4">
  <GitHubVersion {...color1} />
  <GitHubVersion {...color2} />
  <GitHubVersion {...color3} />
  <GitHubVersion {...color4} />
  <GitHubVersion {...color5} />
  <GitHubVersion {...color6} />
</div>

Logo & Label #

<script lang="ts">
  import { GitHubVersion, type GitHubVersionPropsType } from 'svelte-shields';

  const logo_label: GitHubVersionPropsType = {
    user: 'sveltejs',
    repo: 'svelte',
    logo: 'svelte',
    label: 'SVELTE'
  };
</script>

<GitHubVersion {...logo_label} />

Link #

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

<script lang="ts">
  import { GitHubVersion, type GitHubVersionPropsType } from 'svelte-shields';

  const linkEx: GitHubVersionPropsType = {
    user: 'shinokada',
    repo: 'tera',
    label: 'TERA',
    link: ['https://tera.codewithshin.com', 'https://github.com/shinokada/tera']
  };
</script>

<GitHubVersion {...linkEx} />

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 { GitHubVersion, type GitHubVersionPropsType } from 'svelte-shields';

  const otherEx: GitHubVersionPropsType = {
    user: 'shinokada',
    repo: 'tera',
    cacheSeconds: '86400'
  };
</script>

<GitHubVersion {...otherEx} />