profile-components

0.4.1 • Public • Published

profile-components

Web components which display profile information from various websites

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>

Readme

Keywords

none

Package Sidebar

Install

npm i profile-components

Weekly Downloads

51

Version

0.4.1

License

MIT

Unpacked Size

574 kB

Total Files

88

Last publish

Collaborators

  • scottnath