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>