Add some docs a links to improve the out-of-box experience.

freakboy3742 · freakboy3742 · commit 2966002e446f · 2022-04-01T14:30:15.000+08:00
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-# pyscript
+# pyscript
+
+To demonstrate pyscript, see [the pyscript folder](pyscriptjs/README.md).
diff --git a/pyscriptjs/README.md b/pyscriptjs/README.md
@@ -1,12 +1,36 @@
-# Svelte TypeScript Tailwindcss Setup
+# PyScript Demonstrator
 
-svelte template based on the default svelte/template with enabled typescript and tailwindcss support.
+A simple webapp to demonstrate the capabilities of PyScript.
 
-Related blogpost (on Svelte+TS+Tailwind): https://www.liip.ch/en/blog/svelte-typescript-tailwind-setup
+## Getting started
 
-```bash
-npx degit munxar/svelte-template my-svelte-project
-cd my-svelte-project
-npm i
-npm run dev
-```
+1. If you don't already have Node.js, install it. The official installer for the
+   LTS version of Node is available from [nodejs.org](https://nodejs.org/).
+
+2. If you don't already have Rollup, install it. Rollup can be installed as a
+   global resource using:
+
+       $ npm install --global rollup
+
+3. Install the demo apps requirements:
+
+       $ npm install
+
+4. Start the server:
+
+       $ npm run dev
+
+   This will compile the resources for the app, and start the development server.
+
+5. When the compilation completes, it will display something like:
+
+         Your application is ready~! 🚀
+
+         - Local:      http://localhost:8080
+         - Network:    Add `--host` to expose
+
+       ────────────────── LOGS ──────────────────
+
+   Once this is visible, open a browser at
+   [http://localhost:8080](http://localhost:8080). This will provide a list of
+   demos that you can run.
diff --git a/pyscriptjs/public/index.html b/pyscriptjs/public/index.html
@@ -4,13 +4,29 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
 
-    <title>Svelte app</title>
+    <title>PyScript demo</title>
 
     <link rel="icon" type="image/png" href="favicon.png" />
     <link rel="stylesheet" href="build/bundle.css" />
-    
+
     <script defer src="build/bundle.js"></script>
   </head>
 
-  <body></body>
+  <body class="container">
+
+    <h1 class="text-3xl font-bold">PyScript demos</h1>
+    <hr/>
+
+    <h2 class="text-2xl font-bold text-blue-600"><a href="./simple_script.html">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">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="./repl.html">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">REPL2</a></h2>
+    <p>A Python REPL (Read Eval Print Loop) with slightly better formatting.</p>
+  </body>
 </html>
diff --git a/pyscriptjs/tailwind.config.js b/pyscriptjs/tailwind.config.js
@@ -16,6 +16,9 @@ module.exports = {
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},
+    container: {
+      center: true
+    }
   },
   variants: {
     extend: {},
