Static Badge - Svelte Shields

Props #

- badgeContent
- 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 StaticBadgePropsType extends ExtendedStyle {
  badgeContent: string;
}

Examples #

Basic usage #

badgeContent 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 { StaticBadge, type StaticBadgePropsType } from 'svelte-shields';

  const basic: StaticBadgePropsType = {
    badgeContent: 'any_text-you_like-blue'
  };

  const basic2: StaticBadgePropsType = {
    badgeContent: 'just the message-8a2be2'
  };
</script>

<div class="grid gap-4">
  <StaticBadge {...basic} />
  <StaticBadge {...basic2} />
</div>

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

  const style1: StaticBadgePropsType = {
    badgeContent: 'any_text-you_like-blue',
    style: 'flat'
  };
  const style2: StaticBadgePropsType = {
    badgeContent: 'any_text-you_like-blue',
    style: 'flat-square'
  };
  const style3: StaticBadgePropsType = {
    badgeContent: 'any_text-you_like-blue',
    style: 'for-the-badge'
  };
  const style4: StaticBadgePropsType = {
    badgeContent: 'any_text-you_like-blue',
    style: 'plastic'
  };
  const style5: StaticBadgePropsType = {
    badgeContent: 'any_text-you_like-blue',
    style: 'social'
  };
</script>

<div class="grid gap-4">
  <StaticBadge {...style1} />
  <StaticBadge {...style2} />
  <StaticBadge {...style3} />
  <StaticBadge {...style4} />
  <StaticBadge {...style5} />
</div>

Color #

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

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

  const color1: StaticBadgePropsType = {
    badgeContent: 'any_text-you_like-blue',
    color: 'green'
  };
  const color2: StaticBadgePropsType = {
    badgeContent: 'any_text-you_like-blue',
    color: '00FF00'
  };
  const color3: StaticBadgePropsType = {
    badgeContent: 'any_text-you_like-blue',
    color: 'rgb(0, 255, 0)'
  };
  const color4: StaticBadgePropsType = {
    badgeContent: 'any_text-you_like-blue',
    color: 'rgba(0, 255, 0, 1)'
  };
  const color5: StaticBadgePropsType = {
    badgeContent: 'any_text-you_like-blue',
    color: 'hsl(120, 100%, 50%)'
  };
  const color6: StaticBadgePropsType = {
    badgeContent: 'any_text-you_like-blue',
    color: 'hsla(120, 100%, 50%, 1)'
  };
</script>

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

Logo & Label #

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

  const logo_label: StaticBadgePropsType = {
    badgeContent: 'Svelte-blue',
    logo: 'svelte',
    label: 'Awesome',
    color: 'red'
  };
</script>

<StaticBadge {...logo_label} />

Link #

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

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

  const link: StaticBadgePropsType = {
    badgeContent: 'link_1-link_2-blue',
    link: ['https://codewithshin.com', 'https://github.com/shinokada']
  };
</script>

<StaticBadge {...link} />

Dynamic #

<script lang="ts">
  import type { LibType, PageData } from '$lib/types.js';
  import { svelte5_icons } from '$lib/data/icons';
  import { StaticBadge } from 'svelte-shields';
  let { data } = $props<{ data: PageData }>();
  interface VersionInfo {
    latest: string;
    previousStable: string;
  }

  interface Versions {
    [key: string]: VersionInfo;
  }

  let versions = $state<Versions>({});
  let isLoading = $state(true);

  // Handle the Promise without making the effect async
  $effect(() => {
    data.versions.then((versionData: Versions) => {
      versions = versionData;
      isLoading = false;
    });
  });

  function safeReplace(packageName: string | undefined) {
    return typeof packageName === 'string' ? packageName.replace(/-/g, '--') : '';
  }
</script>

{#snippet runesIcon({ packageName }: LibType)}
  {#if isLoading}
    <StaticBadge badgeContent="loading..." />
  {:else}
    <StaticBadge
      badgeContent={safeReplace(packageName) +
        '-' +
        (versions[packageName]?.latest || '') +
        '-blue'}
    />
    <StaticBadge
      badgeContent={safeReplace(packageName) +
        '-' +
        (versions[packageName]?.previousStable || '') +
        '-blue'}
    />
  {/if}
{/snippet}

<div class="flex flex-wrap justify-center gap-6">
  {#each svelte5_icons as { packageName }}
    {@render runesIcon({
      packageName
    })}
  {/each}
</div>

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

  const other: StaticBadgePropsType = {
    badgeContent: 'any_text-you_like-blue',
    cacheSeconds: '86400'
  };
</script>

<StaticBadge {...other} />