-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
147 lines (125 loc) · 3.38 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Substrate Known Keys</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.container {
width: auto;
max-width: 800px;
padding: 0 15px;
}
main {
padding-bottom: 100px;
}
</style>
</head>
<body class="d-flex flex-column h-100">
<!-- Begin page content -->
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Substrate Known Keys</h1>
<p class="lead">Find the key you are looking for...</p>
<p id="date"></p>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">Search</span>
<input id="input" type="text" class="form-control" placeholder="0x...">
</div>
<pre id="output"></pre>
</div>
</main>
<footer class="footer mt-auto py-3 bg-light fixed-bottom text-center">
<div class="container">
<span class="text-muted">
Created by <a href="https://shawntabrizi.com">Shawn Tabrizi</a>
- Source on <a href="https://github.com/shawntabrizi/substrate-known-keys">GitHub</a>
</span>
</div>
</footer>
<script>
let output = document.getElementById("output");
let input = document.getElementById("input");
let date = document.getElementById("date");
input.addEventListener("input", reduce);
async function reduce() {
const file = await fetch('./known-keys.json');
const knownKeys = await file.json();
// No input, show all results.
if (input.value.length == 0) {
output.innerText = JSON.stringify(knownKeys, null, 2);
reset = false;
return
}
let subset = [];
for (key of knownKeys) {
let keyValue = key.key.toLowerCase();
let keyName = key.name.toLowerCase();
let inputValue = input.value.toLowerCase();
// match if either string starts with the other
if (
inputValue.includes(keyValue) ||
keyValue.includes(inputValue) ||
inputValue.includes(keyName) ||
keyName.includes(inputValue)
) {
subset.push(key)
}
}
if (subset.length == 0) {
output.innerText = "No matching keys found. Please update your query."
} else {
output.innerText = JSON.stringify(subset, null, 2);
}
}
reduce();
</script>
</body>
</html>