yet-another-github-card 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +195 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
# Yet Another Github Card - Show your developer skills in social networks
|
|
2
|
+
|
|
3
|
+
[](https://yagc.nocc.dev)
|
|
4
|
+
|
|
5
|
+
[](https://www.npm.im/yet-another-github-card)
|
|
6
|
+
[](https://www.npm.im/yet-another-github-card)
|
|
7
|
+
[](https://github.com/carlesloriente/yet-another-github-card/actions/workflows/publish-release.yml)
|
|
8
|
+
[](https://raw.githubusercontent.com/carlesloriente/yet-another-github-card/main/LICENSE)
|
|
9
|
+
[](https://socket.dev/npm/package/yet-another-github-card)
|
|
10
|
+
|
|
11
|
+
## Introduction
|
|
12
|
+
|
|
13
|
+
**Say hello to YACG 🎉**: The GitHub card for your developer portfolio
|
|
14
|
+
|
|
15
|
+
## Features
|
|
16
|
+
|
|
17
|
+
- Responsive design
|
|
18
|
+
- Dual color mode (light & dark)
|
|
19
|
+
- Customizable stats
|
|
20
|
+
- Different Theme styles
|
|
21
|
+
- Free
|
|
22
|
+
|
|
23
|
+
## Let's make this project even better for everyone. Sponsorship fuels new features! 🎉
|
|
24
|
+
|
|
25
|
+
[](https://github.com/sponsors/carlesloriente/sponsorships?sponsor=carlesloriente&preview=true&frequency=recurring&amount=5)
|
|
26
|
+
|
|
27
|
+
## Share on
|
|
28
|
+
|
|
29
|
+
[](<https://web.facebook.com/sharer.php?t=yagc: A GitHub card for your developer portfolio!&u=https://github.com/carlesloriente/yet-another-github-card>)
|
|
30
|
+
[](https://www.facebook.com/dialog/send?link=https://github.com/carlesloriente/yet-another-github-card&redirect_uri=https://github.com/carlesloriente/yet-another-github-card)
|
|
31
|
+
[](<https://twitter.com/intent/tweet?text=yagc: A GitHub card for your developer portfolio&url=https://github.com/carlesloriente/yet-another-github-card>)
|
|
32
|
+
[](<https://web.whatsapp.com/send?text=yagc:A GitHub card for your developer portfolio https://github.com/carlesloriente/yet-another-github-card>)
|
|
33
|
+
[](<https://t.me/share/url?url=https://github.com/carlesloriente/yet-another-github-card&text=A GitHub card for your developer portfolio!>)
|
|
34
|
+
[](<https://www.linkedin.com/shareArticle?title=yagc: A GitHub card for your developer portfolio!&url=https://github.com/carlesloriente/yet-another-github-card>)
|
|
35
|
+
[](https://wordpress.com/wp-admin/press-this.php?u=https://github.com/carlesloriente/yet-another-github-card)
|
|
36
|
+
[](<mailto:recipient_email?subject=yagc%3A%20A%20GitHub%20card%20for%20your%20developer%20portfolio&body=https%3A%2F%2Fgithub.com%2Fcarlesloriente%2Fyet-another-github-card>)
|
|
37
|
+
[](<https://www.reddit.com/submit?title=yagc: A GitHub card for your developer portfolio!&url=https://github.com/carlesloriente/yet-another-github-card>)
|
|
38
|
+
|
|
39
|
+
## Table of contents
|
|
40
|
+
|
|
41
|
+
- [Yet Another Github Card - Show your developer skills in social networks](#yet-another-github-card---show-your-developer-skills-in-social-networks)
|
|
42
|
+
- [Introduction](#introduction)
|
|
43
|
+
- [Features](#features)
|
|
44
|
+
- [Let's make this project even better for everyone. Sponsorship fuels new features! 🎉](#lets-make-this-project-even-better-for-everyone-sponsorship-fuels-new-features-)
|
|
45
|
+
- [Share on](#share-on)
|
|
46
|
+
- [Table of contents](#table-of-contents)
|
|
47
|
+
- [What's included](#whats-included)
|
|
48
|
+
- [Bundled dependencies](#bundled-dependencies)
|
|
49
|
+
- [Quick Start](#quick-start)
|
|
50
|
+
- [Including the card in your portfolio site](#including-the-card-in-your-portfolio-site)
|
|
51
|
+
- [Documentation](#documentation)
|
|
52
|
+
- [Using the Yet-Another-Github-Card npm package in your project](#using-the-yet-another-github-card-npm-package-in-your-project)
|
|
53
|
+
- [Github Card Data Options](#github-card-data-options)
|
|
54
|
+
- [Themes](#themes)
|
|
55
|
+
- [1. DefaultTheme](#1-defaulttheme)
|
|
56
|
+
- [2. Cloud](#2-cloud)
|
|
57
|
+
- [3. Polygon](#3-polygon)
|
|
58
|
+
- [Local Demo card](#local-demo-card)
|
|
59
|
+
- [Bugs and Issues](#bugs-and-issues)
|
|
60
|
+
- [Contributing](#contributing)
|
|
61
|
+
- [Creator](#creator)
|
|
62
|
+
- [Thanks](#thanks)
|
|
63
|
+
- [Copyright and License](#copyright-and-license)
|
|
64
|
+
|
|
65
|
+
## What's included
|
|
66
|
+
|
|
67
|
+
You'll find all the required directories and files within the download, logically grouping common assets and providing compiled and minified variations.
|
|
68
|
+
|
|
69
|
+
### Bundled dependencies
|
|
70
|
+
|
|
71
|
+
- SVG Backgrounds
|
|
72
|
+
- [A few Bootstrap 5 icons](https://icons.getbootstrap.com)
|
|
73
|
+
|
|
74
|
+
## Quick Start
|
|
75
|
+
|
|
76
|
+
### Including the card in your portfolio site
|
|
77
|
+
|
|
78
|
+
Get your HTML embed code at [yagc](https://yagc.notesoncloudcomputing.com/index.html#embedcode), fill in the form with your GitHub username and grab the result code.
|
|
79
|
+
|
|
80
|
+
## Documentation
|
|
81
|
+
|
|
82
|
+
## Using the Yet-Another-Github-Card npm package in your project
|
|
83
|
+
|
|
84
|
+
Select your favourite package manager and follow the instructions below.
|
|
85
|
+
|
|
86
|
+
- npm:
|
|
87
|
+
|
|
88
|
+
```bash
|
|
89
|
+
npm install yet-another-github-card --save
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
- Yarn:
|
|
93
|
+
|
|
94
|
+
```bash
|
|
95
|
+
yarn add yet-another-github-card
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
- Composer:
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
composer require yet-another-github-card
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
The package folder structure looks like this:
|
|
105
|
+
|
|
106
|
+
```filesystem
|
|
107
|
+
yet-another-github-card/
|
|
108
|
+
├─ src/
|
|
109
|
+
| ├─ css/
|
|
110
|
+
| ├─ images/
|
|
111
|
+
| └─ themes/
|
|
112
|
+
└─ utils/
|
|
113
|
+
└─ js/
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### Github Card Data Options
|
|
117
|
+
|
|
118
|
+
| Name | Description | Default value |
|
|
119
|
+
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------- |
|
|
120
|
+
| `data-style` | Set header background image. | `defaultTheme` |
|
|
121
|
+
| `data-user` | Your GitHub username value | `` |
|
|
122
|
+
| `data-user-stars` | Count all your obtained stars, includes; repositories and gists | `true` |
|
|
123
|
+
| `data-user-stats` | Show selected stats adding/removing JSON key:value entries. Key: name. Values: 'commits', 'contributions', 'followers', 'following', 'prs' | `[{"name": "commits"}, {"name": "prs}]` |
|
|
124
|
+
|
|
125
|
+
### Themes
|
|
126
|
+
|
|
127
|
+
At the moment, three prebuilt themes are available. Feel free to design unique cards by selecting your own colors and backgrounds!
|
|
128
|
+
|
|
129
|
+
#### 1. DefaultTheme
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
#### 2. Cloud
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
#### 3. Polygon
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
### Local Demo card
|
|
142
|
+
|
|
143
|
+
The source includes resources for building and running locally your Github Card.
|
|
144
|
+
|
|
145
|
+
If you want to see it in action, there's a demo included, complete the following steps.
|
|
146
|
+
|
|
147
|
+
Open with your code editor the file `utils/index.html`
|
|
148
|
+
|
|
149
|
+
1.- Locate the custom element `github-card`, edit `data-user` attribute with your own GitHub username.
|
|
150
|
+
|
|
151
|
+
2.- Fill with your preferred settings the attributes: `data-user-stars` and `data-user-stats`.
|
|
152
|
+
|
|
153
|
+
3.- Done, save the file and run the command:
|
|
154
|
+
|
|
155
|
+
```bash
|
|
156
|
+
npm run compile-demo
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
The folder `demo` will be created and contain all the required files.
|
|
160
|
+
|
|
161
|
+
To run it throught the bundled web server, run the command:
|
|
162
|
+
|
|
163
|
+
```bash
|
|
164
|
+
npm run server-watch
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
Additionally, if you want execute all these steps altogether, run the command:
|
|
168
|
+
|
|
169
|
+
```bash
|
|
170
|
+
npm run build-demo
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
## Bugs and Issues
|
|
174
|
+
|
|
175
|
+
Have a bug or an issue with this package? [Open a new issue](https://github.com/carlesloriente/yet-another-github-card/issues) here on GitHub!
|
|
176
|
+
|
|
177
|
+
## Contributing
|
|
178
|
+
|
|
179
|
+
New contributors are always welcome! Check out [CONTRIBUTING.md](https://github.com/carlesloriente/yet-another-github-card/blob/master/CONTRIBUTING.md) to get involved.
|
|
180
|
+
|
|
181
|
+
## Creator
|
|
182
|
+
|
|
183
|
+
**[Carles Loriente](https://www.linkedin.com/in/carles-loriente/)** is the creator and maintainer of the NOCC Bootstrap theme.
|
|
184
|
+
|
|
185
|
+
- [Linkedin](https://www.linkedin.com/in/carles-loriente)
|
|
186
|
+
- [Twitter](https://twitter.com/godarthvader)
|
|
187
|
+
- [GitHub](https://github.com/carlesloriente)
|
|
188
|
+
|
|
189
|
+
## Thanks
|
|
190
|
+
|
|
191
|
+
Thanks to you.
|
|
192
|
+
|
|
193
|
+
## Copyright and License
|
|
194
|
+
|
|
195
|
+
Copyright (c) 2025 Carles Loriente. Code released under the [MIT](https://github.com/carlesloriente/yet-another-github-card/blob/master/LICENSE) license.
|