-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbunny_meets_whaley.html
139 lines (124 loc) · 6.26 KB
/
bunny_meets_whaley.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
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>bunny_meets_whaley.py</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🐳</text></svg>">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel='stylesheet' href='https://unpkg.com/normalize.css'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/pietroppeter/nimib/assets/atom-one-light.css'>
<style>
.nb-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.nb-small {
font-size: 0.8rem;
}
button.nb-small {
float: right;
padding: 2px;
padding-right: 5px;
padding-left: 5px;
}
section#source {
display:none
}
.nb-output {
line-height: 1.15;
}
</style>
<link
rel="stylesheet"
href="https://pyscript.net/releases/2024.1.1/core.css"
/>
<script
type="module"
src="https://pyscript.net/releases/2024.1.1/core.js"
></script>
</head>
<body>
<header>
<div class="nb-box">
<span><a href=".">🏡</a></span>
<span><code>bunny_meets_whaley.py</code></span>
<span><a href="https://github.com/nimib-land/nimib.py"><svg aria-hidden="true" width="1.2em" height="1.2em" style="vertical-align: middle;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59c.4.07.55-.17.55-.38c0-.19-.01-.82-.01-1.49c-2.01.37-2.53-.49-2.69-.94c-.09-.23-.48-.94-.82-1.13c-.28-.15-.68-.52-.01-.53c.63-.01 1.08.58 1.23.82c.72 1.21 1.87.87 2.33.66c.07-.52.28-.87.51-1.07c-1.78-.2-3.64-.89-3.64-3.95c0-.87.31-1.59.82-2.15c-.08-.2-.36-1.02.08-2.12c0 0 .67-.21 2.2.82c.64-.18 1.32-.27 2-.27c.68 0 1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82c.44 1.1.16 1.92.08 2.12c.51.56.82 1.27.82 2.15c0 3.07-1.87 3.75-3.65 3.95c.29.25.54.73.54 1.48c0 1.07-.01 1.93-.01 2.2c0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" fill="#000"></path></svg></a></span>
</div>
<hr>
</header><main>
<h2>Bunny 🐰 meets Whaley 🐳!</h2>
<p>Hello world example for pyscript with nimib.py.</p>
<button id="click-me">Click me! 🐰🐳</button><br/>
<div id="emoji-container"></div>
<p>This code adds functionality to the button (try block is a workaround):</p>
<pre><code class="nim hljs"><span class="hljs-keyword">try</span>:
<span class="hljs-keyword">from</span> js <span class="hljs-keyword">import</span> document
def handler(e):
output = document.createElement(<span class="hljs-string">"span"</span>)
output.innerHTML = <span class="hljs-string">"🐳"</span>
container = document.querySelector(<span class="hljs-string">"div#emoji-container"</span>)
container.appendChild(output)
button = document.querySelector(<span class="hljs-string">"button#click-me"</span>)
button.addEventListener(<span class="hljs-string">"click"</span>, handler)
<span class="hljs-keyword">except</span> <span class="hljs-type">ImportError</span>:
print(<span class="hljs-string">"running pyscript block not in js"</span>)
</code></pre><script type="micropython">
try:
from js import document
def handler(e):
output = document.createElement("span")
output.innerHTML = "🐳"
container = document.querySelector("div#emoji-container")
container.appendChild(output)
button = document.querySelector("button#click-me")
button.addEventListener("click", handler)
except ImportError:
print("running pyscript block not in js")
</script>
</main>
<footer>
<hr>
<div class="nb-box">
<span><span class="nb-small">made with <a href="https://pietroppeter.github.io/nimib/">nimib 🐳</a></span></span>
<span></span>
<span><button class="nb-small" id="show" onclick="toggleSourceDisplay()">Show Source</button></span>
</div>
</footer>
<section id="source">
<pre><code class="nim hljs"><span class="hljs-keyword">import</span> nimib <span class="hljs-keyword">as</span> nb
nb.init(pyscript=<span class="hljs-type">True</span>)
nb.text(<span class="hljs-string">"## Bunny 🐰 meets Whaley 🐳!"</span>)
nb.text(<span class="hljs-string">"Hello world example for pyscript with nimib.py."</span>)
nb.html(<span class="hljs-string">"<button id=</span><span class="hljs-meta">\"</span><span class="hljs-string">click-me</span><span class="hljs-meta">\"</span><span class="hljs-string">>Click me! 🐰🐳</button><br/>"</span>)
nb.html(<span class="hljs-string">"<div id=</span><span class="hljs-meta">\"</span><span class="hljs-string">emoji-container</span><span class="hljs-meta">\"</span><span class="hljs-string">></div>"</span>)
nb.text(<span class="hljs-string">"This code adds functionality to the button (try block is a workaround):"</span>)
with nb.code(pyscript=<span class="hljs-type">True</span>):
<span class="hljs-keyword">try</span>:
<span class="hljs-keyword">from</span> js <span class="hljs-keyword">import</span> document
def handler(e):
output = document.createElement(<span class="hljs-string">"span"</span>)
output.innerHTML = <span class="hljs-string">"🐳"</span>
container = document.querySelector(<span class="hljs-string">"div#emoji-container"</span>)
container.appendChild(output)
button = document.querySelector(<span class="hljs-string">"button#click-me"</span>)
button.addEventListener(<span class="hljs-string">"click"</span>, handler)
<span class="hljs-keyword">except</span> <span class="hljs-type">ImportError</span>:
print(<span class="hljs-string">"running pyscript block not in js"</span>)
nb.save()
</code></pre>
</section><script>
function toggleSourceDisplay() {
var btn = document.getElementById("show")
var source = document.getElementById("source");
if (btn.innerHTML=="Show Source") {
btn.innerHTML = "Hide Source";
source.style.display = "block";
} else {
btn.innerHTML = "Show Source";
source.style.display = "none";
}
}
</script></body>
</html>