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 { GitHub } from 'svelte-shields'
import type { GitHubVersionPropsType } from 'svelte-shields';
const release: GitHubVersionPropsType = {
user: 'shinokada',
repo: 'tera',
}
</script>
<GitHub {...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 { GitHub } from 'svelte-shields'
import 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>
<GitHub {...release2} />
<GitHub {...release3} />
<GitHub {...release4} />
<GitHub {...release5} />
<GitHub {...release6} />
Color #
Background color of the right part (hex, rgb, rgba, hsl, hsla and css named colors supported).
<script lang="ts">
import { GitHub } from 'svelte-shields'
import 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>
<GitHub {...color1} />
<GitHub {...color2} />
<GitHub {...color3} />
<GitHub {...color4} />
<GitHub {...color5} />
<GitHub {...color6} />
Logo & Label #
<script lang="ts">
import { GitHub } from 'svelte-shields'
import type { GitHubVersionPropsType } from 'svelte-shields';
const logo_label: GitHubVersionPropsType = {
user: 'sveltejs',
repo: 'svelte',
logo: 'svelte',
label: 'SVELTE'
}
</script>
<GitHub {...logo_label} />
Link #
Specify what clicking on the left/right of a badge should do.
<script lang="ts">
import { GitHub } from 'svelte-shields'
import 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>
<GitHub {...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 { GitHub } from 'svelte-shields'
import type { GitHubVersionPropsType } from 'svelte-shields';
const otherEx: GitHubVersionPropsType = {
user: 'shinokada',
repo: 'tera',
cacheSeconds: '86400',
}
</script>
<GitHub {...otherEx} />