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

GitHubRepository

GitHub repository web component

DevtoUser

dev.to user profile web component

DevtoPost

dev.to post web component

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>