Add index files

Author: jtpio

content/anywidget.ipynb

@@ -1,52 +1,96 @@
 {
-  "metadata": {
-    "kernelspec": {
-      "name": "python",
-      "display_name": "Python (Pyodide)",
-      "language": "python"
-    },
-    "language_info": {
-      "codemirror_mode": {
-        "name": "python",
-        "version": 3
-      },
-      "file_extension": ".py",
-      "mimetype": "text/x-python",
-      "name": "python",
-      "nbconvert_exporter": "python",
-      "pygments_lexer": "ipython3",
-      "version": "3.8"
-    }
-  },
-  "nbformat_minor": 4,
-  "nbformat": 4,
   "cells": [
     {
       "cell_type": "code",
-      "source": "%pip install anywidget",
+      "execution_count": null,
       "metadata": {
         "trusted": true
       },
       "outputs": [],
-      "execution_count": null
+      "source": [
+        "%pip install anywidget"
+      ]
     },
     {
       "cell_type": "code",
-      "source": "import anywidget\nimport traitlets\n\nclass CounterWidget(anywidget.AnyWidget):\n    _esm = \"\"\"\n    function render({ model, el }) {\n      let getCount = () => model.get(\"count\");\n      let button = document.createElement(\"button\");\n      button.classList.add(\"counter-button\");\n      button.innerHTML = `count is ${getCount()}`;\n      button.addEventListener(\"click\", () => {\n        model.set(\"count\", getCount() + 1);\n        model.save_changes();\n      });\n      model.on(\"change:count\", () => {\n        button.innerHTML = `count is ${getCount()}`;\n      });\n      el.appendChild(button);\n    }\n\texport default { render };\n    \"\"\"\n    _css=\"\"\"\n    .counter-button { background-color: #ea580c; }\n    .counter-button:hover { background-color: #9a3412; }\n    \"\"\"\n    count = traitlets.Int(0).tag(sync=True)\n\ncounter = CounterWidget()\ncounter.count = 42\ncounter",
+      "execution_count": null,
       "metadata": {
         "trusted": true
       },
       "outputs": [],
-      "execution_count": null
+      "source": [
+        "import anywidget\n",
+        "import traitlets\n",
+        "\n",
+        "class CounterWidget(anywidget.AnyWidget):\n",
+        "    _esm = \"\"\"\n",
+        "    function render({ model, el }) {\n",
+        "      let getCount = () => model.get(\"count\");\n",
+        "      let button = document.createElement(\"button\");\n",
+        "      button.classList.add(\"counter-button\");\n",
+        "      button.innerHTML = `count is ${getCount()}`;\n",
+        "      button.addEventListener(\"click\", () => {\n",
+        "        model.set(\"count\", getCount() + 1);\n",
+        "        model.save_changes();\n",
+        "      });\n",
+        "      model.on(\"change:count\", () => {\n",
+        "        button.innerHTML = `count is ${getCount()}`;\n",
+        "      });\n",
+        "      el.appendChild(button);\n",
+        "    }\n",
+        "\texport default { render };\n",
+        "    \"\"\"\n",
+        "    _css=\"\"\"\n",
+        "    .counter-button { background-color: #ea580c; }\n",
+        "    .counter-button:hover { background-color: #9a3412; }\n",
+        "    \"\"\"\n",
+        "    count = traitlets.Int(0).tag(sync=True)\n",
+        "\n",
+        "counter = CounterWidget()\n",
+        "counter.count = 42\n",
+        "counter"
+      ]
     },
     {
       "cell_type": "code",
-      "source": "",
+      "execution_count": null,
       "metadata": {
         "trusted": true
       },
       "outputs": [],
-      "execution_count": null
+      "source": [
+        "from pathlib import Path\n",
+        "\n",
+        "class CounterWidget(anywidget.AnyWidget):\n",
+        "    _esm = Path('/drive/index.js')\n",
+        "    _css= Path('/drive/index.css')\n",
+        "    count = traitlets.Int(0).tag(sync=True)\n",
+        "\n",
+        "counter = CounterWidget()\n",
+        "counter.count = 42\n",
+        "counter"
+      ]
     }
-  ]
-}
+  ],
+  "metadata": {
+    "kernelspec": {
+      "display_name": "Python (Pyodide)",
+      "language": "python",
+      "name": "python"
+    },
+    "language_info": {
+      "codemirror_mode": {
+        "name": "python",
+        "version": 3
+      },
+      "file_extension": ".py",
+      "mimetype": "text/x-python",
+      "name": "python",
+      "nbconvert_exporter": "python",
+      "pygments_lexer": "ipython3",
+      "version": "3.8"
+    }
+  },
+  "nbformat": 4,
+  "nbformat_minor": 4
+}

content/index.css

@@ -0,0 +1,2 @@
+.counter-button { background-color: #ea580c; }
+.counter-button:hover { background-color: #9a3412; }

content/index.js

@@ -0,0 +1,16 @@
+function render({ model, el }) {
+  let getCount = () => model.get("count");
+  let button = document.createElement("button");
+  button.classList.add("counter-button");
+  button.innerHTML = `count is ${getCount()}`;
+  button.addEventListener("click", () => {
+    model.set("count", getCount() + 1);
+    model.save_changes();
+  });
+  model.on("change:count", () => {
+    button.innerHTML = `COUNT is ${getCount()}`;
+  });
+  el.appendChild(button);
+}
+
+export default { render };