alihan/pyscript-python-html
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2022-05-01 19:47:48 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Russell Keith-Magee
2022-04-01 14:20:14 +08:00
parent 03da071a63
commit 2966002e44
4 changed files with 58 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -1 +1,3 @@
# pyscript
# pyscript
To demonstrate pyscript, see [the pyscript folder](pyscriptjs/README.md).

42
pyscriptjs/README.md
View File

@@ -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.

22
pyscriptjs/public/index.html
View File

@@ -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>

3
pyscriptjs/tailwind.config.js
View File

@@ -16,6 +16,9 @@ module.exports = {
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
container: {
center: true
}
},
variants: {
extend: {},