-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (126 loc) · 5.27 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
148
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bluesky DID Resolver</title>
<style>
html,
body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
.wrapper {
min-height: 100%;
margin-bottom: -60px; /* Height of the footer */
}
.footer {
height: 60px;
background-color: #f5f5f5;
padding: 20px;
position: absolute;
bottom: 0;
width: 100%;
color:#2c2c2c;
}
#result {
margin-top: 1rem;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2>Bluesky DID Resolver</h2>
<div class="alert alert-info">
<strong>How to: input a bsky username (without the @) to resolve its DID.</strong> <br>
<strong>Comment utiliser: tape ton nom d'utilisateur Bluesky (sans le @)</strong>
</div>
<form id="resolverForm">
<input type="text" class="form-control" id="usernameInput" placeholder="Enter Bluesky username">
<button class="btn btn-info" type="submit">Resolve DID</button>
</form>
<br>
<hr>
<div id="result"></div>
<br>
<hr>
<h2>Bluesky Post URI Resolver</h2>
<div class="alert alert-info">
<strong>How to: input the full URL of a bsky post to resolve its URI and use as Single Post within skyfeed.app </strong> <br>
<strong>Comment faire: colle un lien direct vers un de tes posts sur bluesky pour en connaître le URI et l'utiliser comme Single Post dans skyfeed.app</strong>
</div>
<form id="postResolverForm">
<input type="text" class="form-control" id="postIDInput" placeholder="Enter Post URL">
<button class="btn btn-info" type="submit">Resolve Post URI</button>
</form>
<br>
<hr>
<div id="postResult"></div>
<br>
</div>
<script>
// Code for DID Resolver
const form = document.getElementById('resolverForm');
const resultDiv = document.getElementById('result');
form.onsubmit = async (e) => {
e.preventDefault();
const username = document.getElementById('usernameInput').value;
const url = `https://bsky.social/xrpc/com.atproto.identity.resolveHandle?handle=${encodeURIComponent(username)}`;
const response = await fetch(url);
if(response.ok) {
const data = await response.json();
resultDiv.innerHTML = `DID: ${data.did}`;
} else {
resultDiv.innerHTML = 'Error retrieving DID. Please check the username and try again.';
}
};
// Code for Post URI Resolver
const postForm = document.getElementById('postResolverForm');
const postResultDiv = document.getElementById('postResult');
postForm.onsubmit = async (e) => {
e.preventDefault();
const postURL = document.getElementById('postIDInput').value;
// Parse the URL to extract the username and post ID
const urlParts = postURL.split("/");
if(urlParts.length < 6) {
postResultDiv.innerHTML = 'Invalid URL format. Please check the input and try again.';
return;
}
const postUsername = urlParts[4];
const postID = urlParts[6];
// First fetch the DID for the user handle
const didUrl = `https://bsky.social/xrpc/com.atproto.identity.resolveHandle?handle=${encodeURIComponent(postUsername)}`;
const didResponse = await fetch(didUrl);
if(didResponse.ok) {
const didData = await didResponse.json();
const userDID = didData.did;
// Now fetch the URI for the specific post using the DID
const postUrl = `https://bsky.social/xrpc/com.atproto.repo.getRecord?repo=${encodeURIComponent(userDID)}&collection=app.bsky.feed.post&rkey=${encodeURIComponent(postID)}`;
const postResponse = await fetch(postUrl);
if(postResponse.ok) {
const formattedURI = `at://${userDID}/app.bsky.feed.post/${postID}`;
postResultDiv.innerHTML = `URI: ${formattedURI}`;
} else {
postResultDiv.innerHTML = 'Error retrieving Post URI. Please check the inputs and try again.';
}
} else {
postResultDiv.innerHTML = 'Error retrieving DID. Please check the username and try again.';
}
};
</script>
<footer class="footer">
<div class="container">
<p>Made with care by <a href="https://blog.rmendes.net">@rMendes.net</a></p>
</div>
</footer>
</body>
</html>