-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (91 loc) · 2.55 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevRel Owners to Blink Components</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, sans-serif;
font-weight: 300;
}
#list {
margin: 0;
padding: 0;
}
.list_heading {
padding: 8px 0;
display: flex;
text-transform: uppercase;
}
#list .list_item {
display: flex;
padding: 4px 0;
}
.bold {
font-weight: 600;
}
.component_name,
.component_email,
.list_heading .heading,
.devrel_owner {
width: 340px;
}
</style>
<script src="bower_components/webcomponentsjs/webcomponents-loader.js" async></script>
<!--<link rel="import" href="bower_components/polymer/polymer.html" async>-->
<link rel="import" href="bower_components/polymer/lib/elements/dom-bind.html" async>
<link rel="import" href="bower_components/polymer/lib/elements/dom-repeat.html" async>
</head>
<body>
<dom-bind>
<template>
<ul id="list">
<li class="list_heading">
<span class="heading">Component</span>
<span class="heading">Mailing list</span>
<span class="heading">DevRel Owner</span>
</li>
<dom-repeat items="[[components]]" as="component">
<template>
<li class="list_item">
<span class="component_name bold">[[component.name]]</span>
<span class="component_email">[[component.list]]</span>
<span class="devrel_owner">???</span>
</li>
</template>
</dom-repeat>
</ul>
</template>
</dom-bind>
<script>
'use strict';
const ENDPOINT = 'https://storage.googleapis.com/chromium-owners/component_map.json';
const app = document.querySelector('dom-bind');
const listEl = document.querySelector('.list_items');
/**
* @param {string} url
*/
async function fetchMappingFile(url) {
const resp = await fetch(url);
if (!resp.ok) {
throw new Error(`${resp.status} response from ${url}`);
}
const json = await resp.json();
return json;
}
fetchMappingFile(ENDPOINT).then(json => {
const components = json['component-to-team'];
app.components = Object.entries(components).map(([name, list]) => ({name, list}));
// for (const [component, mailingList] of Object.entries(components)) {
// // const span = li.appendChild(document.createElement('span'));
// // span.textContent = component;
// // span.classList.add('component_name');
// // const span2 = li.appendChild(document.createElement('span'));
// // span2.textContent = mailingList;
// // span2.classList.add('component_email');
// }
});
</script>
</body>
</html>