Web components which display profile information from various websites
- install via npm:
npm i profile-components - play with the components in Storybook
- See demos on stackblitz
- GitHubUser
GitHub user profile web component
- GitHubRepository
GitHub repository web component
- DevtoUser
dev.to user profile web component
- DevtoPost
dev.to post web component
GitHub user profile web component
Summary: Native web component which shows a GitHub user's profile content. Can use local data,
fetch data from the GitHub rest API, or use a combination of both.
Element: github-user
Properties
| Name | Type | Description |
|---|---|---|
| login | string |
User's GitHub login |
| avatar_url | string |
URL to user's avatar |
| name | string |
User's name |
| [fetch] | boolean |
when true, fetches user from the GitHub api |
| [username] | string |
alias for login |
| [bio] | string |
User's biography content |
| [following] | string |
number of people user is following |
| [followers] | string |
number of followers |
| [repos] | string |
JSON stringified array of repositories |
| [theme] | string |
color theme for the component |
Example
<!-- import the web component -->
<script type="module" src="https://unpkg.com/profile-components/dist/github-user.js"></script>
<!-- use the custom element -->
<github-user login="scottnath" fetch="true"></github-user>GitHub repository web component
Summary: Native web component which shows a GitHub repository's content. Can use local data,
fetch data from the GitHub rest API, or use a combination of both.
Element: github-repository
Properties
| Name | Type | Description |
|---|---|---|
| full_name | string |
repository org and name, as in scottnath/profile-components |
| [fetch] | boolean |
when true, fetches repo from the GitHub api |
| [name] | string |
repo name |
| [org] | string |
repo owner organization's login, found at <REST_RESPONSE>.organization.login |
| [description] | string |
repo description |
| [language] | string |
programming language used in repo |
| [stargazers_count] | string |
number of stars |
| [forks_count] | string |
number of forks |
| [subscribers_count] | string |
number of watchers |
| [itemprop] | string |
Itemprop content to go with a containing component's itemscope |
| [no_org] | string |
Do not include the repo owner or organization |
| [theme] | string |
color theme for the component |
Example
<!-- import the web component -->
<script type="module" src="https://unpkg.com/profile-components/dist/github-repository.js"></script>
<!-- use the custom element -->
<github-repository full_name="scottnath/profile-components" fetch="true"></github-repository>dev.to user profile web component
Summary: Native web component which shows a dev.to user's profile content.
Can use local data, or fetch data from the dev.to API, or use a combination of both.
Element: devto-user
Properties
| Name | Type | Description |
|---|---|---|
| username | string |
User's dev.to username |
| [fetch] | boolean |
when true, fetches user and posts from the Forem API |
| [name] | string |
The name of the user |
| [summary] | string |
The user's bio |
| [joined_at] | string |
The date the user joined |
| [profile_image] | string |
The URL of the user's profile image |
| [post_count] | number |
The number of posts the user has published |
| [latest_post] | string |
User's latest post content, JSON stringified |
| [popular_post] | string |
User's most popular post content, JSON stringified |
| [theme] | string |
color theme for the component |
Example
<!-- import the web component -->
<script type="module" src="https://unpkg.com/profile-components/dist/devto-user.js"></script>
<!-- use the custom element -->
<devto-user username="scottnath" fetch="true"></devto-user>dev.to post web component
Summary: Native web component which shows a dev.to (or forem.dev) post. Can use local data,
fetch data from the dev.to API, or use a combination of both.
Element: devto-post
Properties
| Name | Type | Description |
|---|---|---|
| id | number |
Post ID |
| title | string |
Post title |
| url | string |
Post URL |
| cover_image | string |
Post cover image URL |
| social_image | string |
Post social image URL |
| [fetch] | boolean |
when true, fetches post from the Forem API |
Example
<!-- import the web component -->
<script type="module" src="https://unpkg.com/profile-components/dist/devto-post.js"></script>
<!-- use the custom element -->
<devto-post id="123456" fetch="true"></devto-post>