Skip to content

Commit

Permalink
Update PyCon.net homepage for PyCon 2024 (#64)
Browse files Browse the repository at this point in the history
* First pass. A real PyScript terminal, typing code, updated copy.
* Outgoing links target=_blank
* Fixed character bleeding.
* Firefox on mobile fixes.
* Minor Pythonic update.
* Check on SAB.
* Minor fixes.
  • Loading branch information
ntoll authored May 10, 2024
1 parent 91f32e1 commit 3586139
Show file tree
Hide file tree
Showing 4 changed files with 155 additions and 57 deletions.
11 changes: 6 additions & 5 deletions assets/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -457,10 +457,11 @@ a.examples-block:hover {
/* ----------------------------------
Terminal interface
-----------------------------------*/
.terminal {
.old-terminal {
box-shadow: 1px 1px 40px rgb(0 0 0 / 30%);
margin: 0 auto;
max-width: 650px;
display: none;
}

.window-buttons {
Expand Down Expand Up @@ -537,7 +538,7 @@ a.examples-block:hover {
animation: blink 500ms linear infinite alternate;
} */

.terminal p {
.old-terminal p {
font-family: 'Hack Regular', monospace;
font-size: 1em;
left: 10%;
Expand All @@ -548,7 +549,7 @@ a.examples-block:hover {
width: 0;
}

.terminal span {
.old-terminal span {
color: #fff;
font-weight: bold;
}
Expand Down Expand Up @@ -664,7 +665,7 @@ a.examples-block:hover {
Mobile layout
-----------------------------------*/
@media all and (max-width: 700px) {
.terminal p {
.old-terminal p {
font-size: .8rem;
left: 3%;
}
Expand Down Expand Up @@ -760,4 +761,4 @@ a.examples-block:hover {
.button.twitter:hover {
background-color: #FDA803;
color: #1D1D22;
}
}
134 changes: 82 additions & 52 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<script src="/mini-coi.js" scope="./"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>PyScript | Run Python in your HTML</title>
<title>PyScript is a platform for Python in the browser.</title>
<meta name="description" content="PyScript">
<meta name="author" content="Anaconda Inc.">
<meta property="og:title" content="Pyscript.net">
<meta property="og:type" content="website">
<meta property="og:description" content="Run Python code in your HTML.">
<meta property="og:description" content="PyScript is a platform for Python in the browser.">
<meta property="og:image" content="assets/images/pyscript-preview.png">

<link rel="icon" href="/assets/images/favicon.ico">
Expand All @@ -31,6 +32,8 @@
gtag('js', new Date());
gtag('config', 'G-LKETQQ110J');
</script>
<link rel="stylesheet" href="https://pyscript.net/releases/2024.5.1/core.css" />
<script type="module" src="https://pyscript.net/releases/2024.5.1/core.js"></script>
</head>

<body>
Expand All @@ -40,15 +43,23 @@
<header class="site-header">
<div class="logo">
<img src="assets/images/pyscript-sticker-black.svg">
<strong class="subhead">Run Python in Your HTML</strong>
<strong class="subhead">PyScript is a platform for Python in the browser.</strong>
</div>
</header>
<!-- end header -->

<section class="content">

<!-- begin terminal window -->
<div class="terminal">
<div id="new-terminal">
<script id="python-terminal" type="mpy" terminal worker>
import code
code.interact()
</script>
<script type="mpy" src="./main.py" async></script>
</div>

<div class="old-terminal" id="old-terminal">
<div class="menu">
<div class="window-buttons close"></div>
<div class="window-buttons minimize"></div>
Expand All @@ -64,8 +75,8 @@
</pre>

<p class="line1">&lt;html&gt;<span class="cursor1">|</span></p>
<p class="line2">&nbsp;&nbsp;&nbsp;&nbsp;...<span class="cursor2">|</span></p>
<p class="line3">&nbsp;&nbsp;&nbsp;&nbsp;&lt;py-script&gt;<span style="color: #aaa;"> <span style="color:#FFD580;">print</span>(<span style="color:#BAE67E;">'Now you can!'</span>) </span>&lt;/py-script&gt;<span class="cursor3">|</span></p>
<p class="line2">&nbsp;&nbsp;...<span class="cursor2">|</span></p>
<p class="line3">&nbsp;&nbsp;&lt;script type="py"&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #aaa;"><span style="color:#FFD580;">print</span>(<span style="color:#BAE67E;">'You can!'</span>)</span><br/>&nbsp;&nbsp;&lt;/script&gt;<span class="cursor3">|</span></p>
<p class="line4">&lt;/html&gt;<span class="cursor4">|</span></p>

<p class="line5"><span class="cursor5">|</span></p>
Expand All @@ -76,20 +87,6 @@
<!-- end terminal window -->

<div class="dialogs">
<!-- begin examples badge -->
<a href="https://pyscript.com/@examples" target="_blank" rel="noreferrer noopener" class="examples-block">
<div class="glyph">
<svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-grid">
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
</svg>
</div>
<div>
<h2>Examples</h2>
<p><span>Click here</span> for example projects</p>
</div>
</a>
<!-- end examples badge -->

<!-- begin pyscript.com badge -->
<a href="https://pyscript.com/" target="_blank" rel="noreferrer noopener" class="examples-block">
<div class="glyph">
Expand All @@ -99,28 +96,44 @@ <h2>Examples</h2>
</div>
<div>
<h2>Try it out!</h2>
<p><span>PyScript.com</span> is the easiest way to try it out, for free</p>
<p><span>PyScript.com</span> is free and easy.</p>
</div>
</a>
<!-- end pyscript.com badge -->
</div>

<!-- begin dialog content -->
<div class="dialogs">

<!-- begin documentation dropdown -->
<a href="https://pyscript.github.io/docs/latest/" target="_blank" rel="noreferrer noopener" class="dialog" tabindex="1">
<a href="https://pyscript.github.io/docs/latest/" target="_blank" rel="noreferrer noopener" class="examples-block" tabindex="1">
<div class="glyph">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M448 336v-288C448 21.49 426.5 0 400 0H96C42.98 0 0 42.98 0 96v320c0 53.02 42.98 96 96 96h320c17.67 0 32-14.33 32-31.1c0-11.72-6.607-21.52-16-27.1v-81.36C441.8 362.8 448 350.2 448 336zM143.1 128h192C344.8 128 352 135.2 352 144C352 152.8 344.8 160 336 160H143.1C135.2 160 128 152.8 128 144C128 135.2 135.2 128 143.1 128zM143.1 192h192C344.8 192 352 199.2 352 208C352 216.8 344.8 224 336 224H143.1C135.2 224 128 216.8 128 208C128 199.2 135.2 192 143.1 192zM384 448H96c-17.67 0-32-14.33-32-32c0-17.67 14.33-32 32-32h288V448z"/></svg>
</div>

<div>
<h2>Documentation</h2>
<p>Click here for PyScript documentation</p>
<p>For beginners and advanced users.</p>
</div>
</a>
<!-- end documentation dropdown -->


</div>

<!-- begin dialog content -->
<div class="dialogs">
<!-- begin examples badge -->
<a href="https://pyscript.com/@examples" target="_blank" rel="noreferrer noopener" class="dialog">
<div class="glyph">
<svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-grid">
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
</svg>
</div>
<div>
<h2>Examples</h2>
<p>See what PyScript can do.</p>
</div>
</a>
<!-- end examples badge -->


<!-- begin installation dropdown -->
<div class="dialog dropdown" tabindex="2">
<div class="glyph">
Expand All @@ -131,20 +144,14 @@ <h2>Documentation</h2>

<div>
<h2>Install</h2>
<p>Click here for instructions</p>
<p>Click here for instructions.</p>
</div>

<div class="dropdown-content">
<i class="close" tabindex="2"></i>
<div class="inner">
<p style="font-size:1.15rem;padding-bottom: 0;">Just kidding, you don't need to install anything. &#128515; </p>

<p>To use PyScript you can either <a href="https://github.com/pyscript/pyscript/archive/refs/heads/main.zip">download</a> it and follow the instructions, or add the following lines to your page.</p>
<code class="pre">
&lt;link rel="stylesheet" href="https://pyscript.net/releases/2024.1.1/core.css" /&gt;<br>
&lt;script type="module" src="https://pyscript.net/releases/2024.1.1/core.js"&gt;&lt;/script&gt;
</code>
<p>Click <a href="https://pyscript.github.io/docs/latest/beginning-pyscript/" target="_blank">here</a> for more info on how to use PyScript.</p>
<p style="font-size:1.15rem;padding-bottom: 0;">Just kidding, you don't need to install anything. ;-) </p>
<p><a href="https://docs.pyscript.net/" target="_blank">Read our docs</a> to learn how to use PyScript.</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -176,24 +183,36 @@ <h5>pyscript_dev</h5>
<div class="readme">
<h1 id="pyscript">Say Hello to PyScript</h1>

<p>
PyScript is a framework that allows users to create rich Python applications in the browser using HTML's interface and the power of <a href="https://pyodide.org/en/stable/" target="_blank">Pyodide</a>, <a href="https://webassembly.org/" target="_blank">WASM</a>, and modern web technologies. The PyScript framework provides users at every experience level with access to an expressive, easy-to-learn programming language with countless applications.</p>
<p><strong>PyScript</strong> is a platform for <a href="https://python.org" target="_blank">Python</a> in the
<a href="https://en.wikipedia.org/wiki/Web_browser" target="_blank">browser</a>.</p>

<h2>What is PyScript? Well, here are some of the core components:</h2>
<!-- new copy from Fabio -->
<p>PyScript brings together two of the most vibrant technical ecosystems on the
planet. If <a href="https://en.wikipedia.org/wiki/World_Wide_Web" target="_blank">the web</a> and Python
had a baby, you'd get PyScript.</p>

<p>At the core of PyScript is a <em>philosophy of digital empowerment</em>. The web is
the world's most ubiquitous computing platform, mature and familiar to billions
of people. Python is one of the
<a href="https://spectrum.ieee.org/the-top-programming-languages-2023" target="_blank">world's most popular programming languages</a>.</p>
<p>With PyScript, <em>Python runs anywhere there's a
browser (<u>which is everywhere</u>)</em>.</p>

<h2>PyScript is...</h2>
<ul>
<li><strong>Python in the browser:</strong> Enable drop-in content, external file hosting, and application hosting without the reliance on server-side configuration</li>
<li><strong>Python ecosystem:</strong> Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more)</li>
<li><strong>Python with JavaScript:</strong> Bi-directional communication between Python and Javascript objects and namespaces </li>
<li><strong>Environment management:</strong> Allow users to define what packages and files to include for the page code to run</li>
<li><strong>Visual application development:</strong> Use readily available curated UI components, such as buttons, containers, text boxes, and more</li>
<li><strong>Flexible framework:</strong> A flexible framework that can be leveraged to create and share new pluggable and extensible components directly in Python</li>
</ul>

<p>All that to say… PyScript is just HTML, only a bit (okay, maybe a lot) more powerful, thanks to the rich and accessible ecosystem of Python libraries. </p>

<p>In short, our mission is to bring programming for the 99%. </p>
<!-- end copy -->
<li><strong>Easy</strong>: your apps run in the browser with no complicated installation
required.</li>
<li><strong>Expressive</strong>: create apps with a powerful, popular and easy to learn
language like Python.</li>
<li><strong>Scalable</strong>: no need for expensive infrastructure ~ your code runs in
your user's browser.</li>
<li><strong>Shareable</strong>: applications are just a URL on the web. That's it!</li>
<li><strong>Universal</strong>: your code runs anywhere a browser runs... which is
<em>everywhere</em>!</li>
<li><strong>Secure</strong>: PyScript runs in the world's most battle-tested computing
platform, the browser!</li>
<li><strong>Powerful</strong>: the best of the web and Python, together at last.</li>
</ul>

</div>
<!-- end readme content -->

Expand Down Expand Up @@ -296,5 +315,16 @@ <h2>What is PyScript? Well, here are some of the core components:</h2>
heap.load("758475466");
</script>
<!-- END HEAP INTEGRATION -->
<script>
// It's a hack.
try{
var sab = new SharedArrayBuffer(4);
if(sab===undefined)throw new Error('not supported')
}
catch(e){
document.getElementById("new-terminal").style.display = "none";
document.getElementById("old-terminal").style.display = "block";
}
</script>
</body>
</html>
39 changes: 39 additions & 0 deletions main.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
"""
Well done! You've found the source.
If you're at PyCon 2024, email ntollervey <at> anaconda.com
and (subject to availability) you can have some PyScript
swag. :-)
Now go build cool stuff with PyScript.
"""
import asyncio
import random
from pyscript import document


# It's the same API as JS when using the document object!
python_terminal = document.getElementById("python-terminal")


async def type_it_in(code):
"""
Advanced AI to type code into the terminal. ;-)
"""
lines = code.split("\n")
for line in lines:
await asyncio.sleep(1)
for char in line:
wait = random.choice(
[0.05, 0.07, 0.1, 0.15, 0.2, 0.3]
)
await asyncio.sleep(wait)
python_terminal.terminal.write(char)
python_terminal.process(line.strip())


# Web scale use of advanced AI.
await type_it_in(
'print("Hello, from PyScript!")\r\n'
'# Your turn...'
)
28 changes: 28 additions & 0 deletions mini-coi.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/*! coi-serviceworker v0.1.7 - Guido Zuidhof and contributors, licensed under MIT */
/*! mini-coi - Andrea Giammarchi and contributors, licensed under MIT */
(({ document: d, navigator: { serviceWorker: s } }) => {
if (d) {
const { currentScript: c } = d;
s.register(c.src, { scope: c.getAttribute('scope') || '.' }).then(r => {
r.addEventListener('updatefound', () => location.reload());
if (r.active && !s.controller) location.reload();
});
}
else {
addEventListener('install', () => skipWaiting());
addEventListener('activate', e => e.waitUntil(clients.claim()));
addEventListener('fetch', e => {
const { request: r } = e;
if (r.cache === 'only-if-cached' && r.mode !== 'same-origin') return;
e.respondWith(fetch(r).then(r => {
const { body, status, statusText } = r;
if (!status || status > 399) return r;
const h = new Headers(r.headers);
h.set('Cross-Origin-Opener-Policy', 'same-origin');
h.set('Cross-Origin-Embedder-Policy', 'require-corp');
h.set('Cross-Origin-Resource-Policy', 'cross-origin');
return new Response(body, { status, statusText, headers: h });
}));
});
}
})(self);

0 comments on commit 3586139

Please sign in to comment.