Skip to content

Commit 152ce5a

Browse files
juntyrjuntyr
committed
Add git repo / gist open forms
1 parent 78231d9 commit 152ce5a

6 files changed

Lines changed: 167 additions & 4 deletions

File tree

‎docs/css/nice-forms.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/lab/index.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ If you are familiar with [JupyterLab](https://jupyter.org/), you should feel rig
77
While Pyodide already supports an extensive list of scientific Python packages, which we have contributed to, this laboratory comes with additional packages that are commonly used in the weather and climate science community, including (but not limited to) `metpy`, `cfgrib`, `earthkit`, and `xeofs`.
88

99

10+
## Quickly Getting Started
11+
12+
- Open an existing [git repository][open-a-git-repository-in-the-online-laboratory] in the online lab
13+
- Open an existing [gist][open-a-gist-in-the-online-laboratory] in the online lab
14+
1015
## Getting Started
1116

1217
To get started, go to [lab.climet.eu](https://lab.climet.eu), wait for the JupyterLab to load, and click the blue `+` button in the top left to open a new launcher and create a new Python notebook from there. After the Python kernel has initialised, you can execute Python code in the cells of the notebook.

‎docs/lab/urls/gist.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# Open a gist in the Online Laboratory
2+
3+
<div class="nice-form-group">
4+
<label>Online Laboratory version</label>
5+
<select id="lab-version" required>
6+
<option value="latest">Latest: v0.2.1</option>
7+
<optgroup label="v0.2">
8+
<option value="v0.2">v0.2: v0.2.1</option>
9+
<option value="v0.2.1">v0.2.1</option>
10+
<option value="v0.2.1">v0.2.0</option>
11+
</optgroup>
12+
<optgroup label="v0.1">
13+
<option value="v0.1">v0.1: v0.1.0</option>
14+
<option value="v0.1.0">v0.1.0</option>
15+
</optgroup>
16+
</select>
17+
<br/><br/>
18+
<label>Gist host</label>
19+
<select id="gist-host" required>
20+
<option value="github">GitHub Gist</option>
21+
</select>
22+
<br/><br/>
23+
<label>Gist owner (organisation / user) name</label>
24+
<input id="gist-org" type="text" required />
25+
<br/><br/>
26+
<label>Gist ID</label>
27+
<input id="gist-id" type="text" required />
28+
<br/><br/>
29+
<label>File to open</label>
30+
<input id="gist-path" type="text" required />
31+
<br/><br/>
32+
<label>Online Laboratory URL: <a id="gist-url" target="_blank"></a></label>
33+
<label>Preview (using Jupyter nbviewer):</label>
34+
<iframe id="gist-preview" src="https://nbviewer.org/404.html" style="width: 100%; height: auto; aspect-ratio: 16 / 9;"></iframe>
35+
</div>
36+
37+
<script>
38+
const lab_version = document.getElementById("lab-version");
39+
const gist_host = document.getElementById("gist-host");
40+
const gist_org = document.getElementById("gist-org");
41+
const gist_id = document.getElementById("gist-id");
42+
const gist_path = document.getElementById("gist-path");
43+
const gist_url = document.getElementById("gist-url");
44+
const gist_preview = document.getElementById("gist-preview");
45+
46+
function updateGistUrl() {
47+
if (gist_org.value && gist_id.value && gist_path.value) {
48+
gist_url.href = `https://lab.climet.eu/${lab_version.value}/gist/${gist_host.value}/${gist_org.value}/${gist_id.value}/${gist_path.value}`;
49+
gist_url.style = "";
50+
} else {
51+
gist_url.style = "color: grey;";
52+
}
53+
54+
gist_url.innerText = `https://lab.climet.eu/${lab_version.value}/gist/${gist_host.value}/${gist_org.value || "<org>"}/${gist_id.value || "<id>"}/${gist_path.value || "<filepath>"}`;
55+
56+
if (gist_org.value && gist_id.value) {
57+
gist_preview.src = `https://nbviewer.org/gist/${gist_org.value}/${gist_id.value}${gist_path.value ? '/' : ''}${gist_path.value}`;
58+
}
59+
}
60+
updateGistUrl();
61+
62+
lab_version.onchange = updateGistUrl;
63+
gist_host.onchange = updateGistUrl;
64+
gist_org.onchange = updateGistUrl;
65+
gist_org.oninput = updateGistUrl;
66+
gist_id.onchange = updateGistUrl;
67+
gist_id.oninput = updateGistUrl;
68+
gist_path.onchange = updateGistUrl;
69+
gist_path.oninput = updateGistUrl;
70+
</script>

docs/lab/urls.md renamed to docs/lab/urls/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ The Online Laboratory for Climate Science and Meteorology, [lab.climet.eu](https
44
- `https://lab.climet.eu/<version>`: opens the specified version of the lab
55
- `https://lab.climet.eu/<version>/[github|gitlab]/<org>/<repo>/<branch>`: downloads the specified GitHub / GitLab repository in the specified version of the lab
66
- `https://lab.climet.eu/<version>/[github|gitlab]/<org>/<repo>/<branch>/*filepath`: downloads the specified GitHub / GitLab repository in the specified version of the lab and opens the file path
7-
- `https://lab.climet.eu/<version>gist/[github]/<org>/<gist>/*filepath`: downloads the specified GitHub gist file and opens it in the specified version of the lab
7+
- `https://lab.climet.eu/<version>/gist/[github]/<org>/<gist>/*filepath`: downloads the specified GitHub gist file and opens it in the specified version of the lab
88
- `https://lab.climet.eu/<version>/raw/[github]/<org>/<repo>/<branch>/*filepath`: downloads the specified file from a GitHub repository's branch and opens it in the specified version of the lab
99
- `https://lab.climet.eu/<version>/raw/[github-tag]/<org>/<repo>/<tag>/*filepath`: downloads the specified file from a GitHub repository's tag and opens it in the specified version of the lab
1010

‎docs/lab/urls/repo.md‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# Open a git repository in the Online Laboratory
2+
3+
<div class="nice-form-group">
4+
<label>Online Laboratory version</label>
5+
<select id="lab-version" required>
6+
<option value="latest">Latest: v0.2.1</option>
7+
<optgroup label="v0.2">
8+
<option value="v0.2">v0.2: v0.2.1</option>
9+
<option value="v0.2.1">v0.2.1</option>
10+
<option value="v0.2.1">v0.2.0</option>
11+
</optgroup>
12+
<optgroup label="v0.1">
13+
<option value="v0.1">v0.1: v0.1.0</option>
14+
<option value="v0.1.0">v0.1.0</option>
15+
</optgroup>
16+
</select>
17+
<br/><br/>
18+
<label>Git repository host</label>
19+
<select id="repo-host" required>
20+
<option value="github">GitHub repository</option>
21+
<option value="gitlab">GitLab repository</option>
22+
</select>
23+
<br/><br/>
24+
<label>Repository owner (organisation / user) name</label>
25+
<input id="repo-org" type="text" required />
26+
<br/><br/>
27+
<label>Repository name</label>
28+
<input id="repo-name" type="text" required />
29+
<br/><br/>
30+
<label>Git ref (branch, tag, or commit)</label>
31+
<input id="repo-ref" type="text" value="HEAD" required />
32+
<br/><br/>
33+
<label>File to open (optional)</label>
34+
<input id="repo-path" type="text"/>
35+
<br/><br/>
36+
<label>Online Laboratory URL: <a id="repo-url" target="_blank"></a></label>
37+
<br/><br/>
38+
<label>Preview (using Jupyter nbviewer):</label>
39+
<iframe id="repo-preview" src="https://nbviewer.org/404.html" style="width: 100%; height: auto; aspect-ratio: 16 / 9;"></iframe>
40+
</div>
41+
42+
<script>
43+
const lab_version = document.getElementById("lab-version");
44+
const repo_host = document.getElementById("repo-host");
45+
const repo_org = document.getElementById("repo-org");
46+
const repo_name = document.getElementById("repo-name");
47+
const repo_ref = document.getElementById("repo-ref");
48+
const repo_path = document.getElementById("repo-path");
49+
const repo_url = document.getElementById("repo-url");
50+
const repo_preview = document.getElementById("repo-preview");
51+
52+
function updateRepoUrl() {
53+
if (repo_org.value && repo_name.value && repo_ref.value) {
54+
repo_url.href = `https://lab.climet.eu/${lab_version.value}/${repo_host.value}/${repo_org.value}/${repo_name.value}/${repo_ref.value}${repo_path.value ? '/' : ''}${repo_path.value}`;
55+
repo_url.style = "";
56+
repo_preview.src = `https://nbviewer.org/${repo_host.value}/${repo_org.value}/${repo_name.value}/tree/${repo_ref.value}/`;
57+
} else {
58+
repo_url.style = "color: grey;";
59+
}
60+
61+
repo_url.innerText = `https://lab.climet.eu/${lab_version.value}/${repo_host.value}/${repo_org.value || "<org>"}/${repo_name.value || "<name>"}/${repo_ref.value || "<rev>"}${repo_path.value ? '/' : ''}${repo_path.value}`;
62+
63+
if (repo_org.value && repo_name.value && repo_ref.value) {
64+
if (repo_path.value) {
65+
repo_preview.src = `https://nbviewer.org/${repo_host.value}/${repo_org.value}/${repo_name.value}/blob/${repo_ref.value}/${repo_path.value}`;
66+
} else {
67+
repo_preview.src = `https://nbviewer.org/${repo_host.value}/${repo_org.value}/${repo_name.value}/tree/${repo_ref.value}/`;
68+
}
69+
}
70+
}
71+
updateRepoUrl();
72+
73+
lab_version.onchange = updateRepoUrl;
74+
repo_host.onchange = updateRepoUrl;
75+
repo_org.onchange = updateRepoUrl;
76+
repo_org.oninput = updateRepoUrl;
77+
repo_name.onchange = updateRepoUrl;
78+
repo_name.oninput = updateRepoUrl;
79+
repo_ref.onchange = updateRepoUrl;
80+
repo_ref.oninput = updateRepoUrl;
81+
repo_path.onchange = updateRepoUrl;
82+
repo_path.oninput = updateRepoUrl;
83+
</script>

‎mkdocs.yml‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ extra_javascript:
2222

2323
extra_css:
2424
- https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.css
25+
- css/nice-forms.css
2526

2627
theme:
2728
name: material
@@ -32,7 +33,7 @@ theme:
3233
palette:
3334
- scheme: default
3435
toggle:
35-
icon: material/brightness-7
36+
icon: material/brightness-7
3637
name: Switch to dark mode
3738
- scheme: slate
3839
toggle:
@@ -44,8 +45,11 @@ theme:
4445
nav:
4546
- Home: index.md
4647
- Online Laboratory:
47-
- Overview: lab/index.md
48-
- Special URLs: lab/urls.md
48+
- Overview: lab/index.md
49+
- Special URLs:
50+
- Overview: lab/urls/index.md
51+
- Open a git repo: lab/urls/repo.md
52+
- Open a gist: lab/urls/gist.md
4953
- Online Compression Laboratory: compression.md
5054

5155
plugins:

0 commit comments

Comments
 (0)