profile-components v0.4.1
profile-components
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
Components
GitHubUser
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>GitHubRepository
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>DevtoUser
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>DevtoPost
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>