andrey-skl/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This example uses ECMAScript 2016 features, so it will work in modern browsers only
Developing


NodeJS and NPM are required
Install http-server npm i http-server -g
Run it in example folder http-server . --cors -c-1 -p 9033
If you have Hub running over HTTPS, you need to host your widget over HTTPS as well. https://ngrok.com should help.
Open widgets playground (/dashboard/widgets-playground) and enter your devserver address.

Packing


Just archive all content as ZIP file and it is ready to upload (/widgets)


## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <!-- Default styles of dashboard widgets -->
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/hub-dashboard-addons@latest/dashboard.css">
  <!-- Include dashboard connector from CDN -->
  <script src="https://unpkg.com/hub-dashboard-addons@latest"></script>

  <style>
    .user-avatar {
      width: 64px;
      height: 64px;
    }
  </style>
</head>
<body>
    <div id="user-details">Loading...</div>

    <script src="index.js"></script>
</body>
</html>

## index.js

const USER_NAME = 'chriscoyier';

function renderUserDetails(user) {
  const container = document.getElementById('user-details');

  container.innerHTML = `
  <img src=${user.avatar_url} class="user-avatar"/>
  <h4>${user.name} aka <a href="${user.html_url}">${user.login}</a></h4>
  <div>
  <div>Followers: ${user.followers}</div>
  <div>Repos: ${user.public_repos}</div>
  `;
}

function loadAndRenderUser(userLogin) {
  return fetch(`https://api.github.com/users/${userLogin}`)
    .then(response => {
      return response.ok ? response.json() : new Error(response);
    })
    .then(user => {
      renderUserDetails(user);
      return user;
    })
    .catch(err => console.warn(err));
}

Dashboard.registerWidget(function (dashboardAPI, registerWidgetAPI) {
  loadAndRenderUser(USER_NAME)
    .then(user => dashboardAPI.setTitle(`GitHub User ${user.login}`));

  registerWidgetAPI({
    onRefresh: () => loadAndRenderUser(USER_NAME)
  });
});

## manifest.json
{
  "key": "github-user-widget",
  "version": "0.0.1",
  "name": "GitHub User Information",
  "description": "Widget shows information about github user.",
  "author": "anonymous"
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<!-- Default styles of dashboard widgets -->
	<link rel="stylesheet" type="text/css" href="https://unpkg.com/hub-dashboard-addons@latest/dashboard.css">
	<!-- Include dashboard connector from CDN -->
	<script src="https://unpkg.com/hub-dashboard-addons@latest"></script>

	<style>
	.user-avatar {
	width: 64px;
	height: 64px;
	}
	</style>
	</head>
	<body>
	<div id="user-details">Loading...</div>

	<script src="index.js"></script>
	</body>
	</html>

	const USER_NAME = 'chriscoyier';

	function renderUserDetails(user) {
	const container = document.getElementById('user-details');

	container.innerHTML = `
	<img src=${user.avatar_url} class="user-avatar"/>
	<h4>${user.name} aka <a href="${user.html_url}">${user.login}</a></h4>
	<div>
	<div>Followers: ${user.followers}</div>
	<div>Repos: ${user.public_repos}</div>
	`;
	}

	function loadAndRenderUser(userLogin) {
	return fetch(`https://api.github.com/users/${userLogin}`)
	.then(response => {
	return response.ok ? response.json() : new Error(response);
	})
	.then(user => {
	renderUserDetails(user);
	return user;
	})
	.catch(err => console.warn(err));
	}

	Dashboard.registerWidget(function (dashboardAPI, registerWidgetAPI) {
	loadAndRenderUser(USER_NAME)
	.then(user => dashboardAPI.setTitle(`GitHub User ${user.login}`));

	registerWidgetAPI({
	onRefresh: () => loadAndRenderUser(USER_NAME)
	});
	});
	{
	"key": "github-user-widget",
	"version": "0.0.1",
	"name": "GitHub User Information",
	"description": "Widget shows information about github user.",
	"author": "anonymous"
	}