-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
359 lines (286 loc) · 15.8 KB
/
index.html
File metadata and controls
359 lines (286 loc) · 15.8 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- <link href="style.css" rel="stylesheet" type="text/css" /> -->
<style>
/* CSS */
body {
padding-bottom: 40px;
}
h1 {
margin: 40px 0;
}
textarea {
background-color: #EEE;
font-family: monospace;
}
input, select {
width: auto !important;
display: inline !important;
}
button {
position: relative;
top: -2px;
}
.red {
color: red;
}
.green {
color: green;
}
</style>
<title>IDE Setup</title>
</head>
<body>
<!-- HTML -->
<div class="container">
<h1 class="mb-3">HSTAT SEP IDE Setup</h1>
<p class="mb-2"><a href="https://www.youtube.com/watch?v=ycdKjljm7dM" target="_blank">Video</a><p>
<h2>Before we begin</h2>
<p>The <strong>CS50 IDE</strong> refers to the browser-based IDE implementation of Visual Studio Code (aka "VS Code") built by the CS50 team at Harvard, utilizing Github Codespaces. Full documentation <a href="https://cs50.readthedocs.io/cs50.dev/">here</a>.</p>
<br>
<h2>Step 0: Navigate to your IDE</h2>
<p><ul>
<li>Go to <a href="https://cs50.dev/" target="_blank">cs50.dev</a> and login with your Github account.</li>
<li>In the URL, you need to delete the <code>%2F12345678</code> by double-clicking on it and pressing <kbd>DELETE</kbd> or <kbd>BACKSPACE</kbd> twice (to also delete the <code>%</code>).</li>
<ul>
<li>Before: <code>
https://some-words-x5p5jq69x792vpx8.github.dev/?autoStart=true&folder=%2Fworkspaces<strong>%2F1224918</strong>&vscodeChannel=stable
</code></li>
<li>After: <code>
https://some-words-x5p5jq69x792vpx8.github.dev/?autoStart=true&folder=%2Fworkspaces&vscodeChannel=stable
</code></li>
</ul>
<li>Then press <kbd>ENTER</kbd>. This will load the correct <code>/workspaces</code> directory.</li>
</ul></p>
<div class="alert alert-success" role="alert">
<strong>IMPORTANT</strong>: you will need to do this step <strong>every</strong> time you load your IDE (or, you can bookmark this new URL)
</div>
<br><br>
<h2>Step 1: Basic Info</h2>
<p>
<input id="userName" class="form-control" placeholder="Your Name">
<input id="userEmail" class="form-control" placeholder="Your Email">
<button id="insertNameEmail" class="btn btn-primary">Insert Name & Email</button>
</p>
<textarea id="gitconfig">
git config --global user.name "X"
git config --global user.email "X"
</textarea>
<button class="btn btn-warning copy" data-clipboard-target="#gitconfig">Copy</button> <span>(then paste into your terminal and press <kbd>ENTER</kbd>)</span>
<br><br><br>
<h2>Step 2: SSH</h2>
<p><a href="https://github.com/settings/tokens/new" target="_blank">Get a token</a></p>
<ul>
<li>Note: <strong>type anything</strong></li>
<li>Expiration: <strong>doesn't matter</strong></li>
<li class="red">Check: <strong>admin:public_key</strong></li>
<li><strong class="green">Generate token</strong>, then <strong>copy it</strong> using the <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-copy" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2Zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6ZM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2Z"/>
</svg> icon</li>
<div class="alert alert-warning" role="alert">
<p class="mb-0">Note: in a few days, you will get an email with the following text.</em> <strong>You can ignore it.</strong></p>
<p class="mb-0"> <em>We noticed your personal access token (classic) "x" with admin:public_key scope will expire in 7 days</em></p>
</div>
<!-- <ul>
<li><em>Note: in a few days, you will get an email with the following text.</em> <strong>You can ignore it.</strong></li>
<blockquote class="blockquote">
<small class="mb-0 text-light bg-secondary p-1">We noticed your personal access token (classic) "x" with admin:public_key scope will expire in 7 days.</small>
</blockquote>
</ul> -->
</ul>
<p><input id="userToken" class="form-control" placeholder="Your Token">
<button id="insertToken" class="btn btn-primary">Insert Token</button></p>
<textarea id="ssh">
TOKEN=X
echo -e "\n" | ssh-keygen -t rsa -N ""
PUBKEY=`cat ~/.ssh/id_rsa.pub`
TITLE=`hostname`
RESPONSE=`curl -s -H "Authorization: token ${TOKEN}" \
-X POST --data-binary "{\"title\":\"${TITLE}\",\"key\":\"${PUBKEY}\"}" \
https://api.github.com/user/keys`
KEYID=`echo $RESPONSE \
| grep -o '\"id.*' \
| grep -o "[0-9]*" \
| grep -m 1 "[0-9]*"`
echo "Public key deployed to remote service"
echo "Host github.com" >> ~/.ssh/config
echo " Hostname ssh.github.com" >> ~/.ssh/config
echo " Port 443" >> ~/.ssh/config
echo " StrictHostKeyChecking no" >> ~/.ssh/config
ssh -T git@github.com
</textarea>
<button class="btn btn-warning copy" data-clipboard-target="#ssh">Copy</button> <span>(then paste into your terminal and press <kbd>ENTER</kbd>)</span>
<br>
<div class="alert alert-danger" role="alert">
<strong>IMPORTANT</strong>: if you do not use your IDE for a long period of time, you will receive an email warning you that your IDE will be reset if you do not log in. All you have to do is login. Failure to do so means:
<ul>
<li>You will lose all of your work (as a general habit, make sure you are frequently pushing to you repos).</li>
<li>You will have to follow the steps on this page again (and re-clone any repos you want to work on).</li>
</ul>
<!-- <p>Click here to see what this email looks like.</p> -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">
Click here to see what the email looks like.
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Example email</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="ide-deleted-warning.png" class="img-fluid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</div>
</div>
</div>
<!-- ide-deleted-warning.png -->
</div>
<br><br><br>
<h2>Step 3: Course Folder</h2>
<select id="course" class="form-select form-select-lg">
<option id="wd">wd</option>
<option id="js">js</option>
<option id="apcsa">apcsa</option>
</select>
<textarea id="repo">
DIR=/workspaces
REPO=wd
git clone git@github.com:hstatsep/$REPO.git $DIR/$REPO
rm -rf $DIR/$REPO/.git
echo "Done"
</textarea>
<button class="btn btn-warning copy" data-clipboard-target="#repo">Copy</button> <span>(then paste into your terminal and press <kbd>ENTER</kbd>)</span>
<br><br><br><br><hr><br><br><br>
<h2>Previewing</h2>
<p>Here is how to preview various file types in your IDE:</p>
<h5>Markdown</h5>
<p>Simply click the preview icon in the top-right corner of your open markdown file to preview side-by-side.</p>
<img src="open-preview.png">
<br><br>
<h5>HTML</h5>
<p>In your terminal, run <code>http-server</code> at the parent directory of the HTML file you would like to preview (this will run a temporary preview of the HTML files you are serving, and isn't meant for long-term sharing/hosting).</p>
<p>You will see something like:</p>
<code><pre>
Available on:
https://some-words-x5p5jq69x792vpx8-8080.githubpreview.dev
Hit CTRL-C to stop the server
</pre></code>
<p>Command+click (Windows: control+click) on the URL that appears. Click the HTML file you wish to preview.</p>
<p>You can edit your code (it autosaves), then just reload the preview.</p>
<p>When you are done, press CTRL+C in your terminal to stop the temporary server.</p>
<hr>
<h2>Other</h2>
<p>Just a few other things:</p>
<h5>Opening files from the terminal</h5>
<p>Simple use <code>code <file></code> (without <code><></code>) to open a file, i.e. <code>code index.html</code> to open the file in the text editor.</p>
<h5>New Terminal</h5>
<p>Did you lose your terminal? Launch a new one by pressing the menu icon in the top-left corner > <code>Terminal</code> > <code>New Terminal</code>.</p>
<h5>Resetting your codespace</h5>
<p>Did something go wrong with your codespace? Do you need to start all over? Go to <a href="https://github.com/codespaces/" target="_blank">github.com/codespaces</a>, find your codespace (owned by code50), click the 3 dots, then press Delete. Then just go to <a href="https://cs50.dev/" target="_blank">cs50.dev</a> to get a new one!</p>
<br><br>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script>
<!-- <script src="script.js"></script> -->
<script>
// JS
function text100(box) {
box.style.width = "100%";
box.style.height = box.scrollHeight + "px";
}
text100(document.querySelector('#gitconfig'))
text100(document.querySelector('#ssh'))
text100(document.querySelector('#repo'))
document.querySelectorAll('input').forEach(function(box){
box.addEventListener('click',function(){
// alert("clicked")
this.select();
})
});
// GIT CONFIG
function updateGitconfig(){
userName = document.querySelector('#userName').value;
userEmail = document.querySelector('#userEmail').value;
let raw = `git config --global user.name '${userName}'
git config --global user.email '${userEmail}'
git config --global pull.rebase false
code --uninstall-extension vsls-contrib.gitdoc > /dev/null
code --uninstall-extension cs50.cs50 > /dev/null
FILE=/workspaces/.vscode/settings.json; if ! test -d /workspaces/.vscode; then mkdir /workspaces/.vscode; fi; if test -f $FILE; then rm -rf $FILE; fi; touch $FILE; printf "{\\n\\t\\"gitdoc.enabled\\": false,\\n\\t\\"editor.wordWrap\\": true\\n}" > $FILE
if test -f ~/.bash_profile; then rm -rf ~/.bash_profile; fi
echo "function parse_git_branch {" >> ~/.bash_profile
echo " git branch --no-color 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \\(.*\\)/ (\\1)/'" >> ~/.bash_profile
echo "}" >> ~/.bash_profile
echo -n "export PS1=\\"[\\[\\e[37;44m\\]\\t\\[\\e[0m\\]] \\[\\e[92m\\]\\w\\[\\033[31m\\]\\\\" >> ~/.bash_profile
echo "\\$(parse_git_branch)\\[\\033[00m\\]\\n$ \\"" >> ~/.bash_profile
echo "" >> ~/.bash_profile
echo "TZ='America/New_York'; export TZ" >> ~/.bash_profile
echo "Done"
\n`
document.querySelector('#gitconfig').innerHTML = raw;
}
updateGitconfig();
document.querySelector('#insertNameEmail').addEventListener('click',updateGitconfig);
// SSH
function updateSsh(){
userToken = document.querySelector('#userToken').value;
let raw = `TOKEN=${userToken}
echo -e "\\n" | ssh-keygen -t rsa -N ""
PUBKEY=\`cat ~/.ssh/id_rsa.pub\`
TITLE=\`hostname\`
RESPONSE=\`curl -s -H "Authorization: token \${TOKEN}" \\
-X POST --data-binary "{\\"title\\":\\"\${TITLE}\\",\\"key\\":\\"\${PUBKEY}\\"}" \\
https://api.github.com/user/keys\`
KEYID=\`echo $RESPONSE \\
| grep -o '\\"id.*' \\
| grep -o "[0-9]*" \\
| grep -m 1 "[0-9]*"\`
echo "Public key deployed to remote service"
echo "Host github.com" >> ~/.ssh/config
echo " Hostname ssh.github.com" >> ~/.ssh/config
echo " Port 443" >> ~/.ssh/config
echo " StrictHostKeyChecking no" >> ~/.ssh/config
ssh -T git@github.com\n`
document.querySelector('#ssh').innerHTML = raw;
}
updateSsh();
document.querySelector('#insertToken').addEventListener('click',updateSsh);
function updateRepo(){
userCourse = document.querySelector('#course').value;
let raw = `DIR=/workspaces
REPO=${userCourse}
git clone git@github.com:hstatsep/$REPO.git $DIR/$REPO
rm -rf $DIR/$REPO/.git
echo "Done"\n`
document.querySelector('#repo').innerHTML = raw;
}
// REPO
document.querySelector("#course").addEventListener("change",updateRepo);
updateRepo();
// COPY
var clipboard = new Clipboard('.copy');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>
</body>
</html>