Skip to content

Commit

Permalink
docs: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
Tsukina-7mochi committed Jun 9, 2024
1 parent e7245bb commit de32089
Showing 1 changed file with 20 additions and 7 deletions.
27 changes: 20 additions & 7 deletions readme.md
Original file line number Diff line number Diff line change
@@ -1,31 +1,44 @@
# GitHub Cards

[Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) implementation of cards for GitHub
repositories.
A cutting-edge library designed to enhance the presentation of GitHub repositories and user profiles on your website. With minimal setup, you can embed dynamic, beautifully designed summaries of GitHub repositories that include key details such as descriptions, stars, forks, licenses, and topics. Built on modern [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) technology, this library is both easy to use and highly customizable.

## Features

- **Comprehensive Repository Information**: Display essential details like description, stars, forks, license, language, topics and user avatar.
- **Beautiful Design**: Out-of-the-box aesthetics that enhance the visual appeal of your website.
- **Easy Integration**: Simply include a `<script>` tag and use the custom element.
- **Customization**: Use CSS variables to customize the appearance and seamlessly integrate with your website's style.
- **Performance Optimization**: Caches responses from the GitHub API to avoid rate limits and uses the Cache API and Lock API to efficiently manage requests, even across sessions.

### Feature plans

- Implemet a card for GitHub users to display user profiles with details such as follower count, repository count, and more.

## Demo

![repository card (light)](./docs/repo-card-light.png)

![repository card (dark)](./docs/repo-card-dark.png)

You can open demonstration page: https://tsukina-7mochi.github.io/github-cards/
Check out this live demo to see GitHub Repo Cards in action:

## Usage
https://tsukina-7mochi.github.io/github-cards/

You can import script from CDN `esm.sh`. Put `<script>` tag with `type="module"`:
## Usage

You can import script from CDN `esm.sh`. Add the following `<script>` tag to your HTML document to load library:

```typescript
<script type="module" async src="https://esm.sh/@tsukina-7mochi/github-cards"></script>
```

then you can use custom component on your website:
Use the `<gh-repo-card>` custom element wherever you want to display a GitHub repository card:

```html
<gh-repo-card name="Tsukina-7mochi/github-cards></gh-repo-card>
```
See more example in `docs` directory.
See `docs` directory for demonstration page implementation.
## API
Expand Down

0 comments on commit de32089

Please sign in to comment.