https://github.com/thislooksfun/svelte-repo-card

A clean GitHub card embed, based on Tarptaeya/repo-card
https://github.com/thislooksfun/svelte-repo-card

Last synced: 5 months ago
JSON representation

A clean GitHub card embed, based on Tarptaeya/repo-card

• Host: GitHub
• URL: https://github.com/thislooksfun/svelte-repo-card
• Owner: thislooksfun
• License: mit
• Created: 2021-02-04T04:51:57.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-03-21T03:05:13.000Z (over 5 years ago)
• Last Synced: 2025-10-21T23:47:39.777Z (9 months ago)
• Language: TypeScript
• Homepage:
• Size: 2.32 MB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# svelte-repo-card



  

  

  

  

  





  

  

  

  



A simple GitHub repo card component based on [Tarptaeya/repo-card](https://github.com/Tarptaeya/repo-card).

## Installation

```

npm i -D svelte-repo-card

```

## Usage

```svelte

  import RepoCard from "svelte-repo-card";

```

It's that simple!

### Theming

If you want to control the appearance of the card you have three options:

1. Pass `"light"` or `"dark"` to the `theme` attribute to use the built-in light and dark themes.

```svelte

```

2. Pass a full custom object.

```svelte

  // {...}

  import type { Theme } from "svelte-repo-card";

  const theme: Theme = {

    // The color of the text.

    text: "#586069",

    // The color of the links.

    link: "#0366d6",

    // The background color.

    background: "#ffffff",

    // The border color.

    border: "#e1e4e8",

  };

```

3. Use the `--svc-*` css variables:

```css

:root {

  --svc-text-primary: #586069;

  --svc-text-link: #0366d6;

  --svc-background: #ffffff;

  --svc-border-color: #e1e4e8;

}

```

## Examples

1. ``: ![example screenshot](./docs/images/example-svelte-repo-card.png)

1. ``: ![example screenshot](./docs/images/example-swiftlysearch.png)

1. For a live demo you can check out [my website](https://thislooks.fun).