8000 Improve and reorder the demo page by antocuni · Pull Request #58 · pyscript/pyscript · GitHub
[go: up one dir, main page]
Skip to content

Improve and reorder the demo page #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 28, 2022
Merged

Improve and reorder the demo page #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ad118ee
Refactor the demo page
antocuni Apr 28, 2022
1d64381
add MIME rendering examples
antocuni Apr 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion pyscriptjs/examples/simple_script.html → pyscriptjs/examples/hello_world.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

<title>Simple script</title>
<title>PyScript Hello World</title>

<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="../build/pyscript.css" />
Expand Down
79 changes: 52 additions & 27 deletions pyscriptjs/examples/index.html
View file
Open in desktop
6546
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,66 @@

<body class="container font-mono">

<h1 class="text-3xl font-bold">PyScript demos</h1>
<h1 class="text-4xl font-bold">PyScript demos</h1>

<br>
<h2 class="text-3xl font-bold">Basic examples</h2>
<hr/>

<h2 class="text-2xl font-bold text-blue-600"><a href="./hello_world.html" target=”_blank”>Hello world</a></h2>
<p>A static demo of the <code>&lt;py-script&gt;</code> tag</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./simple_clock.html" target=”_blank”>Simple clock</a></h2>
<p>A dynamic demo of the <code>&lt;py-script&gt;</code> tag</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./repl.html" target=”_blank”>REPL</a></h2>
<p>A Python REPL (Read Eval Print Loop). </p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./repl2.html" target=”_blank”>REPL2</a></h2>
<p>A Python REPL (Read Eval Print Loop) with slightly better formatting.</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./todo.html" target=”_blank”>TODO App</a></h2>
<p>Demo showing how would a Simple TODO App would look like in PyScript</code> tag</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./todo-pylist.html" target=”_blank”>PyScript Native TODO App</a></h2>
<p>Demo showing how would a Simple TODO App would look like only using PyScript native elements</code> tag</p>

<br>
<h2 class="text-3xl font-bold">MIME Rendering</h2>
<hr/>

<h2 class="text-2xl font-bold text-blue-600"><a href="./matplotlib.html" target=”_blank”>Matplotlib</a></h2>
<p>Demonstrates rendering matplotlib figure as output of the py-script tag</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./altair.html" target=”_blank”>Altair</a></h2>
<p>Demonstrates rendering altair plot as output of the py-script tag</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./folium.html" target=”_blank”>Folium</a></h2>
<p>Demonstrates rendering Folium map as output of the py-script tag</p>

<br>
<h2 class="text-3xl font-bold">JS Interaction</h2>
<hr/>

<h2 class="text-2xl font-bold text-blue-600"><a href="./d3.html" target=”_blank”>Simple d3 visualization</a></h2>
<p>Minimal d3 demo demonstrating how to create a visualization</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./webgl/raycaster/index.html" target=”_blank”>Webgl Icosahedron Example</a></h2>
<p>Demo showing how a Simple Webgl scene would work in PyScript</code> tag</p>


<br>
<h2 class="text-3xl font-bold">Visualizations & Dashboards</h2>
<hr/>
<h2 class="text-2xl font-bold text-blue-600"><a href="./bokeh.html" target=”_blank”>Simple Static Bokeh Plot</a></h2>
<p>Minimal Bokeh demo demonstrating how to create a simple bokeh plot from code</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./bokeh_interactive.html" target=”_blank”>Bokeh Interactive</a></h2>
<p>Interactive demo using a Bokeh slider widget to dynamically change a value in the page

WARNING: This examples takes a little longer to load. So be patient :)
</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./bokeh.html" target=”_blank”>Simple Static Bokeh Plot</a></h2>
<p>Minimal Bokeh demo demonstrating how to create a simple bokeh plot from code</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./panel_kmeans.html" target=”_blank”>KMeans Demo in Panel</a></h2>
<p>Interactive KMeans Chart using Panel

Expand All @@ -45,31 +93,8 @@ <h2 class="text-2xl font-bold text-blue-600"><a href="./panel.html" target=”_b
<h2 class="text-2xl font-bold text-blue-600"><a href="./toga/freedom.html" target=”_blank”>Freedom Units!</a></h2>
<p>A Toga application (a Fahrenheit to Celsius converter), rendered as a Single Page App</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./d3.html" target=”_blank”>Simple d3 visualization</a></h2>
<p>Minimal d3 demo demonstrating how to create a visualization</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./numpy_canvas_fractals.html" target=”_blank”>Fractals with NumPy and canvas</a></h2>
<p>Visualization of Mandelbrot and Julia sets with NumPy and HTML5 canvas</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./repl.html" target=”_blank”>REPL</a></h2>
<p>A Python REPL (Read Eval Print Loop). </p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./repl2.html" target=”_blank”>REPL2</a></h2>
<p>A Python REPL (Read Eval Print Loop) with slightly better formatting.</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./simple_script.html" target=”_blank”>Simple script</a></h2>
<p>A static demo of the <code>&lt;py-script&gt;</code> tag</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./simple_script2.html" target=”_blank”>Simple script 2</a></h2>
<p>A dynamic demo of the <code>&lt;py-script&gt;</code> tag</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./todo.html" target=”_blank”>TODO App</a></h2>
<p>Demo showing how would a Simple TODO App would look like in PyScript</code> tag</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./todo-pylist.html" target=”_blank”>PyScript Native TODO App</a></h2>
<p>Demo showing how would a Simple TODO App would look like only using PyScript native elements</code> tag</p>

<h2 class="text-2xl font-bold text-blue-600"><a href="./webgl/raycaster/index.html" target=”_blank”>Webgl Icosahedron Example</a></h2>
<p>Demo showing how a Simple Webgl scene would work in PyScript</code> tag</p>
</body>
</html>
0 pyscriptjs/examples/simple_script2.html → pyscriptjs/examples/simple_clock.html
View file
Open in desktop
File renamed without changes.
0