pyscript · MarcSkovMadsen · Jul 26, 2024 · Jul 26, 2024 · Aug 2, 2024
diff --git a/panel_editor/README.md b/panel_editor/README.md
@@ -0,0 +1,11 @@
+# Simple Panel Pyscript Editor Example
+
+This is a basic example of an editable [Panel](https://panel.holoviz.org/) application in the PyScript editor. This example is aimed for you to get up and running with Panel and the PyScript editor so you can extend it to your own needs.
+
+Please note that if you are running this example on your own server or locally, you will have to set appropriate headers or use `mini-coi` as described in [Pyscript Web Workers](https://docs.pyscript.net/latest/user-guide/workers/).
+
+For more about using Panel with Pyscript, see [Running Panel in WASM](https://panel.holoviz.org/how_to/wasm/index.html).
+
+## Libraries Used
+
+- [Panel](https://panel.holoviz.org/)
diff --git a/panel_editor/assets/css/examples.css b/panel_editor/assets/css/examples.css
@@ -0,0 +1,58 @@
+body {
+    margin: 0;
+}
+
+.pyscript {
+    margin: 0.5rem;
+}
+
+html {
+    font-family:
+        ui-sans-serif,
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        "Helvetica Neue",
+        Arial,
+        "Noto Sans",
+        sans-serif,
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+        "Noto Color Emoji";
+    line-height: 1.5;
+}
+
+nav {
+    position: sticky;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+}
+
+.logo {
+    padding-right: 10px;
+    font-size: 28px;
+    height: 30px;
+    max-width: inherit;
+}
+
+.title {
+    text-decoration: none;
+    text-decoration-line: none;
+    text-decoration-style: initial;
+    text-decoration-color: initial;
+    font-weight: 400;
+    font-size: 1.5em;
+    line-height: 2em;
+    white-space: nowrap;
+}
+
+.app-header, .app-header a {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+}
diff --git a/panel_editor/assets/favicon.png b/panel_editor/assets/favicon.png
diff --git a/panel_editor/assets/logo.png b/panel_editor/assets/logo.png
diff --git a/panel_editor/index.html b/panel_editor/index.html
@@ -0,0 +1,63 @@
+<!doctype html>
+
+<html>
+    <head>
+        <!-- Recommended meta tags -->
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+
+        <!-- PyScript CSS -->
+        <link rel="stylesheet" href="https://pyscript.net/releases/2024.8.1/core.css">
+        <!-- CSS for examples -->
+        <link rel="stylesheet" href="./assets/css/examples.css" />
+
+        <!-- This script tag bootstraps PyScript -->
+        <script type="module" src="https://pyscript.net/releases/2024.8.1/core.js"></script>
+
+        <!-- for splashscreen -->
+        <style>
+            #loading { outline: none; border: none; background: transparent }
+        </style>
+        <title>Panel Example</title>
+        <link rel="icon" type="image/png" href="./assets/favicon.png" />
+
+        <!-- bokeh scripts -->
+        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.5.0.js"></script>
+        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.5.0.min.js"></script>
+        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.5.0.min.js"></script>
+        <script type="text/javascript">
+            Bokeh.set_log_level("info");
+        </script>
+
+        <!-- panel scripts -->
+        <script defer src="https://cdn.jsdelivr.net/npm/@holoviz/[email protected]/dist/panel.min.js"></script>
+    </head>
+
+    <body>
+        <nav class="navbar" style="background-color: #000000">
+            <div class="app-header">
+                <a href="/">
+                    <img src="./assets/logo.png" class="logo" />
+                </a>
+                <a class="title" href="" style="color: #f0ab3c">Panel Pyscript Editor Example</a>
+            </div>
+        </nav>
+
+        <script type="py-editor" config="./pyscript.toml">
+            import panel as pn
+
+            pn.extension()
+
+            slider = pn.widgets.FloatSlider(start=0, end=10, name="Amplitude")
+
+
+            def callback(new):
+                return f"Amplitude is: {new}"
+
+
+            pn.Row(slider, pn.bind(callback, slider)).servable(target="simple_app")
+        </script>
+        <div id="simple_app"></div>
+    </body>
+
+</html>
diff --git a/panel_editor/pyscript.toml b/panel_editor/pyscript.toml
@@ -0,0 +1,6 @@
+name = "Simple Panel PyScript Editor Example"
+description = "A basic Panel application to be used with the PyScript editor."
+packages = [
+    "https://cdn.holoviz.org/panel/wheels/bokeh-3.5.0-py3-none-any.whl",
+    "https://cdn.holoviz.org/panel/wheels/panel-1.5.0b2-py3-none-any.whl"
+]