Skip to content

Commit d31c670

Browse files
davidardavidar
committed
Override index.html
1 parent 08a5297 commit d31c670

File tree

3 files changed

+242
-3
lines changed

3 files changed

+242
-3
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,7 @@ jobs:
2525
python -m pip install -r requirements.txt
2626
- name: Build the JupyterLite site
2727
run: |
28-
cp README.md content
2928
make
30-
jupyter lite build --contents content --output-dir dist
3129
- name: Upload artifact
3230
uses: actions/upload-pages-artifact@v3
3331
with:

‎Makefile‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
all: pypi/Mathics3-7.0.1.dev0-py3-none-any.whl pypi/pymathics_graph-7.0.1.dev0-py3-none-any.whl pypi/Mathics3_notebook_frontends-0.1.0-py3-none-any.whl
2+
jupyter lite build --contents content --output-dir dist
3+
cp -f index.html dist/index.html
24

35
pypi/Mathics3-7.0.1.dev0-py3-none-any.whl:
46
cd pypi && wget https://github.com/Mathics3/mathics-omnibus/releases/download/8.0.0.rc1/Mathics3-7.0.1.dev0-py3-none-any.whl
@@ -11,4 +13,4 @@ pypi/Mathics3_notebook_frontends-0.1.0-py3-none-any.whl:
1113
cp -f Mathics3-notebook-frontends/dist/Mathics3_notebook_frontends-0.1.0-py3-none-any.whl $@
1214

1315
serve: all
14-
jupyter lite serve --contents content
16+
cd dist && python3 -m http.server

‎index.html‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
6+
<title>Mathics3 Live Shell</title>
7+
<style>
8+
:root {
9+
--primary-color: #16599c;
10+
--primary-light: #2171c7;
11+
--text-color: #333;
12+
--bg-color: #f5f7fa;
13+
--card-bg: #ffffff;
14+
}
15+
16+
.container,
17+
.sidebar_card,
18+
.row,
19+
#main,
20+
aside {
21+
box-sizing: border-box;
22+
}
23+
24+
body {
25+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
26+
line-height: 1.6;
27+
color: var(--text-color);
28+
background-color: var(--bg-color);
29+
margin: 0;
30+
}
31+
32+
.container {
33+
max-width: 1200px;
34+
margin: 0 auto;
35+
padding: 0 20px;
36+
}
37+
38+
header {
39+
background-color: var(--primary-color);
40+
padding: 1rem 0;
41+
margin-bottom: 2rem;
42+
}
43+
44+
header h1 a {
45+
color: white;
46+
text-decoration: none;
47+
font-size: 1.8rem;
48+
}
49+
50+
header h1 a:hover {
51+
color: #e0e0e0;
52+
}
53+
54+
.row {
55+
display: flex;
56+
gap: 2rem;
57+
margin-bottom: 2rem;
58+
}
59+
60+
#main {
61+
flex: 1;
62+
}
63+
64+
aside {
65+
width: 300px;
66+
}
67+
68+
h1, h2, h3 {
69+
color: var(--primary-color);
70+
margin-bottom: 1rem;
71+
}
72+
73+
.sidebar_card {
74+
background: var(--card-bg);
75+
border-radius: 8px;
76+
padding: 0.5rem 1.5rem;
77+
margin-bottom: 1.5rem;
78+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
79+
}
80+
81+
iframe {
82+
border: 1px solid #ddd;
83+
border-radius: 8px;
84+
margin-bottom: 1.5rem;
85+
}
86+
87+
pre {
88+
background: #f1f1f1;
89+
padding: 1rem;
90+
border-radius: 4px;
91+
overflow-x: auto;
92+
margin: 1rem 0;
93+
}
94+
95+
a {
96+
color: var(--primary-color);
97+
text-decoration: none;
98+
}
99+
100+
a:hover {
101+
color: var(--primary-light);
102+
text-decoration: underline;
103+
}
104+
105+
footer {
106+
border-top: 1px solid #ddd;
107+
padding: 2rem 0;
108+
text-align: center;
109+
color: #666;
110+
}
111+
112+
footer p {
113+
margin-bottom: 0.5rem;
114+
}
115+
116+
@media (max-width: 768px) {
117+
.row {
118+
flex-direction: column;
119+
}
120+
121+
aside {
122+
width: 100%;
123+
}
124+
}
125+
</style>
126+
<script>
127+
function getURLParameter(name) {
128+
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
129+
}
130+
131+
function statementsToCodes(statements) {
132+
var statements = statements
133+
.replace('\r\n', '\n')
134+
.replace('\r', '\n')
135+
.split(/#--[^\n]*/);
136+
var codes = [];
137+
for (const idx in statements) {
138+
statement = statements[idx].trim()
139+
if (statement) {
140+
codes.push(statement);
141+
}
142+
}
143+
return codes;
144+
}
145+
146+
document.addEventListener('DOMContentLoaded', function() {
147+
var iframe_src = "./repl/index.html?toolbar=1&kernel=python&code=%25pip%20install%20Mathics3%20Mathics3-notebook-frontends%0A%25load_ext%20mathics.frontend.jupyter";
148+
var statements = getURLParameter('evaluate');
149+
if (statements) {
150+
codes = statementsToCodes(statements);
151+
for (const idx in codes) {
152+
iframe_src += '&code=' + encodeURIComponent(codes[idx]);
153+
}
154+
}
155+
document.getElementById('live-iframe').src = iframe_src;
156+
});
157+
</script>
158+
159+
<!--
160+
# jupyter-config-data
161+
162+
The JSON in `jupyter-lite.json` is the last that will be loaded by most
163+
child `index.html` pages, and every field can be overridden.
164+
165+
See the recognized schema as described in the documentation:
166+
167+
- https://jupyterlite.rtfd.io/en/latest/reference/schema.html
168+
169+
Notes
170+
- fields that...
171+
- are relative paths values
172+
- will have the parent directory of _this_ file appended, accounting
173+
for "magic" hosts which redirect to `{:path}index.html` to `{:path}`,
174+
with or without a slash
175+
- some fields, such as `federated_extensions` will be _added together_
176+
-->
177+
<script id="jupyter-config-data" type="application/json" data-jupyter-lite-root=".">
178+
{}
179+
</script>
180+
<!--
181+
# jupyter-lite-root
182+
183+
The source of truth for relative path locations. The `.` means _this_
184+
is the root, and will redirect to the `appUrl` defined in
185+
`.jupyter-lite/#jupyter-config-data`.
186+
-->
187+
<script type="module">
188+
// await import('./config-utils.js');
189+
</script>
190+
<!-- that's it, there shouldn't be anything below here in head! -->
191+
</head>
192+
<body>
193+
<header>
194+
<div class="container">
195+
<h1><a href="index.html">Mathics3 Live Shell</a></h1>
196+
</div>
197+
</header>
198+
<div class="container">
199+
<section class="row" id="main">
200+
<div id="content">
201+
<h1>Mathics3 Live</h1>
202+
<iframe
203+
id="live-iframe"
204+
width="100%"
205+
height="500px"
206+
>
207+
</iframe>
208+
<div id="about_shell" class="sidebar_card">
209+
<h3>About this page</h3>
210+
<p>Mathics3 Live shell allows you to use Mathics3 in the browser without the need to install anything on your computer.</p>
211+
<p>The following commands are executed by default:</p>
212+
<pre>[1]: %pip install Mathics3 Mathics3-notebook-frontends
213+
%load_ext mathics.frontend.jupyter</pre>
214+
<p>Mathics3 Live shell is powered by <a href="https://jupyterlite.readthedocs.io/en/stable/">JupyterLite</a>. It can take up to 30 seconds before the shell code and libraries load completely and become available for using interactively.</p>
215+
</div>
216+
</div>
217+
<aside id="sidebar">
218+
<div id="usage" class="sidebar_card">
219+
<h3>Instructions</h3>
220+
<div class="content">
221+
<p>Press <strong>SHIFT+ENTER</strong> to run the code or use the Run button in the toolbar.</p>
222+
<p id="loading_message">Note it can take up to <strong>30 seconds</strong> before the shell finishes loading and is ready to run commands.</p>
223+
</div>
224+
</div>
225+
<div id="examples" class="sidebar_card">
226+
<h3>Example session</h3>
227+
<div class="content">
228+
<p><a href="./lab/index.html?path=mathics.ipynb">Mathics3 Demo Notebook</a></p>
229+
</div>
230+
</div>
231+
</aside>
232+
</section>
233+
<footer>
234+
<p>Copyright © 2025 Mathics3 Development Team.</p>
235+
<p>This page is open source. Fork <a href="https://github.com/Mathics3">the project on GitHub</a> to edit it.</p>
236+
</footer>
237+
</div>
238+
</body>
239+
</html>

0 commit comments

Comments
 (0)