Demonstration bridge between ATproto and GraphQL. Generate schema types and interface with the ATmosphere via GraphQL queries. Includes a TypeScript server with IDE.
feat: list queries you launched server with
+79
-37
+74
-37
public/index.html
+74
-37
public/index.html
···
1
-
<!DOCTYPE html>
1
+
<!doctype html>
2
2
<html lang="en">
3
-
<body>
4
-
<h1>ATproto <=> GraphQL Demo</h1>
5
-
<p>This is an example GraphQL Server with ATproto.</p>
6
-
<ul>
3
+
<body>
4
+
<h1>ATproto <=> GraphQL Demo</h1>
5
+
<p>This is an example GraphQL Server with ATproto.</p>
6
+
<ul>
7
7
<li><a href="/graphiql">Interactive GraphQL IDE (GraphiQL)</a></li>
8
8
<li><a href="/graphql">GraphQL endpoint</a></li>
9
-
</ul>
10
-
<p>You are currently serving these procedures:</p>
11
-
<ul>
12
-
<li>TODO</li>
13
-
</ul>
14
-
</body>
15
-
<head>
16
-
<meta charset="UTF-8">
17
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
18
-
<title>Static Page</title>
19
-
<style>
20
-
body {
21
-
background-color: #121212;
22
-
color: #e0e0e0;
23
-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
24
-
margin: 0;
25
-
padding: 2rem;
26
-
line-height: 1.6;
27
-
}
28
-
h1 {
29
-
font-size: 2.5rem;
30
-
margin-bottom: 1rem;
31
-
color: #ffffff;
32
-
}
33
-
p {
34
-
font-size: 1.2rem;
35
-
}
36
-
a:visited {
37
-
color: #4aa;
38
-
}
39
-
</style>
40
-
</head>
9
+
</ul>
10
+
<p>You have imported these queries:</p>
11
+
<ul id="procedures">
12
+
<li><i>loading...</i></li>
13
+
</ul>
14
+
<script>
15
+
// Load and render lexicon list
16
+
document.addEventListener("DOMContentLoaded", function () {
17
+
const proceduresList = document.getElementById("procedures");
18
+
const loadingItem = proceduresList.querySelector("li");
19
+
20
+
fetch("/lexicons")
21
+
.then((response) => {
22
+
if (!response.ok) {
23
+
throw new Error("Network response was not ok");
24
+
}
25
+
return response.json();
26
+
})
27
+
.then((data) => {
28
+
// Clear loading message
29
+
proceduresList.innerHTML = "";
30
+
31
+
console.error(data);
32
+
33
+
// Add each lexicon as a list item
34
+
data.forEach((lexicon) => {
35
+
const listItem = document.createElement("li");
36
+
listItem.style.fontFamily = "monospace";
37
+
listItem.style.fontSize = "1.2em";
38
+
listItem.textContent = lexicon;
39
+
proceduresList.appendChild(listItem);
40
+
});
41
+
})
42
+
.catch((error) => {
43
+
console.error("Error fetching lexicons:", error);
44
+
loadingItem.textContent = "Failed to load lexicons";
45
+
});
46
+
});
47
+
</script>
48
+
</body>
49
+
<head>
50
+
<meta charset="UTF-8" />
51
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
52
+
<title>Static Page</title>
53
+
<style>
54
+
body {
55
+
background-color: #002222;
56
+
color: #e0e0e0;
57
+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
58
+
margin: 0;
59
+
padding: 2rem;
60
+
line-height: 1.6;
61
+
}
62
+
h1 {
63
+
font-size: 2.5rem;
64
+
margin-bottom: 1rem;
65
+
color: #ffffff;
66
+
}
67
+
p {
68
+
font-size: 1.2rem;
69
+
}
70
+
a {
71
+
color: #0aa;
72
+
}
73
+
a:visited {
74
+
color: #4dd;
75
+
}
76
+
</style>
77
+
</head>
41
78
</html>
+5
src/bin/server.js
+5
src/bin/server.js