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

Merge branch 'main' of github.com:anaconda/pyscript

Browse Source
This commit is contained in:
Fabio Pliger
2022-04-05 09:59:49 -05:00
parent c005784dc5 a13806cdc7
commit 2b3d1eb897
4 changed files with 57 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -5,6 +5,8 @@
### tl;dr ### tl;dr
PyScript is a Pythonic alternative to Scratch, JSFiddle or other "easy to use" programming frameworks, making the web a friendly, hackable, place where anyone can author interesting and interactive applications. PyScript is a Pythonic alternative to Scratch, JSFiddle or other "easy to use" programming frameworks, making the web a friendly, hackable, place where anyone can author interesting and interactive applications.
To demonstrate pyscript, see [the pyscript folder](pyscriptjs/README.md).
### Longer Version ### Longer Version
PyScript is a meta project that aims to combine multiple open technologies to create a framework for users to use Python (and other languages) to create sophisticated applications in the browser. It highly integrate with the way the DOM works in the browser and allows users to add logic, in Python, in a way that feel natural to web as well as Python developers. PyScript is a meta project that aims to combine multiple open technologies to create a framework for users to use Python (and other languages) to create sophisticated applications in the browser. It highly integrate with the way the DOM works in the browser and allows users to add logic, in Python, in a way that feel natural to web as well as Python developers.

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 1. If you don't already have Node.js, install it. The official installer for the
npx degit munxar/svelte-template my-svelte-project LTS version of Node is available from [nodejs.org](https://nodejs.org/).
cd my-svelte-project
npm i 2. If you don't already have Rollup, install it. Rollup can be installed as a
npm run dev 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 charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <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="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="build/bundle.css" /> <link rel="stylesheet" href="build/bundle.css" />
<script defer src="build/bundle.js"></script> <script defer src="build/bundle.js"></script>
</head> </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> </html>

3
pyscriptjs/tailwind.config.js
View File

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