Update PyCon.net homepage for PyCon 2024 (#64)

ntoll · web-flow · commit 3586139efc57 · 2024-05-10T14:40:13.000+01:00
* 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.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -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 {
@@ -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%;
@@ -548,7 +549,7 @@ a.examples-block:hover {
     width: 0;
 }
 
-.terminal span {
+.old-terminal span {
     color: #fff;
     font-weight: bold;
 }
@@ -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%;
     }
@@ -760,4 +761,4 @@ a.examples-block:hover {
 .button.twitter:hover {
     background-color: #FDA803;
     color: #1D1D22;
-}
+}
diff --git a/index.html b/index.html
@@ -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">
@@ -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>
@@ -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>
@@ -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>
@@ -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">
@@ -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">
@@ -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>
@@ -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 -->
 
@@ -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>
diff --git a/main.py b/main.py
@@ -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...'
+)
diff --git a/mini-coi.js b/mini-coi.js
@@ -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);
