-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
130 lines (120 loc) · 6.11 KB
/
Copy pathindex.html
File metadata and controls
130 lines (120 loc) · 6.11 KB
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
---
layout: null
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>{{ site.title }}</title>
<meta name="description" content="{{ site.description }}">
<meta property="og:type" content="website">
<meta property="og:site_name" content="{{ site.title }}">
<meta property="og:title" content="{{ site.title }}">
<meta property="og:description" content="{{ site.description }}">
<meta property="og:url" content="{{ site.url }}">
<meta property="og:image" content="{{ site.url }}/assets/img/social-preview.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ site.title }}">
<meta name="twitter:description" content="{{ site.description }}">
<meta name="twitter:image" content="{{ site.url }}/assets/img/social-preview.png">
<link rel="canonical" href="{{ site.url }}">
<link rel="stylesheet" href="/assets/css/style.css">
<script>
const stored = localStorage.getItem("theme");
const lightmode = window.matchMedia("(prefers-color-scheme: light)");
const prefersLight = lightmode.matches;
if (stored === "light" || (!stored && prefersLight)) document.documentElement.classList.add("light");
lightmode.addEventListener("change", (e) => {
if (!localStorage.getItem("theme")) {
document.documentElement.classList.toggle("light", e.matches);
}
});
</script>
</head>
<body>
<header id="site-header">
<span class="site-name">webcompat.dev</span>
<span class="site-tagline">The many tools that describe what is available on the web</span>
<nav class="site-nav">
<a href="/tools/">List All</a>
<button id="theme-toggle" aria-label="Switch to light mode">
<svg id="icon-sun" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
<circle cx="12" cy="12" r="5"/><line x1="12" y1="2" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="22"/>
<line x1="2" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="22" y2="12"/>
<line x1="4.93" y1="4.93" x2="6.34" y2="6.34"/><line x1="17.66" y1="17.66" x2="19.07" y2="19.07"/>
<line x1="4.93" y1="19.07" x2="6.34" y2="17.66"/><line x1="17.66" y1="6.34" x2="19.07" y2="4.93"/>
</svg>
<svg id="icon-moon" width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
</svg>
</button>
</nav>
</header>
<svg id="map" role="img" aria-labelledby="graph-title graph-desc">
<title id="graph-title">Web Compatibility Tooling</title>
<desc id="graph-desc">
Force-directed graph of {{ site.data.graph.nodes | size }} tools and data sources.
Tab to focus nodes, arrow keys to move to connected nodes, Enter to open details.
</desc>
</svg>
<aside id="tool-panel" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="panel-title">
<button id="panel-close" aria-label="Close panel">✕</button>
<div id="panel-content">
<h2 id="panel-title"></h2>
<p id="panel-meta"></p>
<a id="panel-edit" class="panel-edit-link" target="_blank" rel="noopener noreferrer" href="#">Edit on GitHub</a>
<div id="panel-body"></div>
</div>
</aside>
<!-- Text alternative for screen readers -->
<section class="sr-only" aria-label="Graph structure as list">
<h2>Nodes and connections</h2>
<ul>
{% for node in site.data.graph.nodes %}
<li>
<strong>{{ node.label }}</strong>
{% for group in site.data.graph.groups %}{% if group.members contains node.id %} ({{ group.label }}){% endif %}{% endfor %}
{% assign outgoing = site.data.graph.edges | where: "source", node.id %}
{% if outgoing.size > 0 %} — connects to:
{% for edge in outgoing %}{% assign tgt = site.data.graph.nodes | where: "id", edge.target | first %}{{ tgt.label }}{% unless forloop.last %}, {% endunless %}{% endfor %}
{% endif %}
</li>
{% endfor %}
</ul>
</section>
<footer id="site-footer">
<a href="https://github.com/NiklasMerz/webcompat" target="_blank" rel="noopener noreferrer">
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.604-3.369-1.342-3.369-1.342-.454-1.154-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
</svg>
GitHub
</a>
</footer>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
const graphData = {
nodes: {{ site.data.graph.nodes | jsonify }},
edges: {{ site.data.graph.edges | jsonify }},
groups: {{ site.data.graph.groups | jsonify }}
};
window.toolData = {
{% for tool in site.tools %}
{{ tool.node_id | jsonify }}: {
name: {{ tool.title | jsonify }},
link: {{ tool.link | jsonify }},
maintainer: {{ tool.maintainer | jsonify }},
logo: {{ tool.logo | jsonify }},
logo_bg: {{ tool.logo_bg | default: "#ffffff" | jsonify }},
content: {{ tool.content | jsonify }},
edit_url: {{ site.edit_base_url | append: tool.path | jsonify }}
}{% unless forloop.last %},{% endunless %}
{% endfor %}
};
</script>
<script src="/assets/js/map.js"></script>
</body>
</html>