Move about page content to dedicated file and add comprehensive project README

README.md

@@ -1,81 +1,155 @@
-# Introducing Pythonline
+# Pyth-on-line
 
-Pythonline is a Python interpreter that runs in your browser. It is based on the [Pyodide](https://github.com/pyodide/pyodide) project, which is a WASM build of CPython.
+> A browser-based Python development environment with hot module reloading
 
-With Pythonline, you can easily share your Python snippets with others, without the need to install Python on their local machine. You can also use it to run Python code on your phone or tablet, without the need to install any apps. Let's take the `math` module as an example:
+Pyth-on-line is a comprehensive web-based Python development platform that runs entirely in your browser using WebAssembly. Built with SvelteKit and powered by Pyodide, it provides a modern, interactive Python development experience without requiring any local installations.
 
-```python
->>> import math
->>> math.pi
-```
+## 🚀 Features
 
-If you hover over the code block above, you will see a button to run the code.
-After that, you can inspect these values by hovering over them 👇
+### Core Capabilities
 
-| Kind           | Examples                                      |
-| -------------- | --------------------------------------------- |
-| Global Names   | `_`, `__name__`, `int`, `Exception`           |
-| Literal Values | `[{}]`, `1,2`, `1+2j`, `.0`, `0b10`           |
-| Expressions    | `math.pi / 2`                                 |
-| Assignments    | `one = -(math.e ** complex(0, math.pi)).real` |
+- **Browser-based Python interpreter** - Full CPython experience running on WebAssembly via Pyodide
+- **Interactive code execution** - Run Python code with real-time output and interactive debugging
+- **Package management** - Support for pure Python packages and many popular libraries (NumPy, Pandas, SciPy, etc.)
+- **Hot Module Reloading** - Advanced reactivity system for efficient code reloading
+- **Multi-format support** - Work with Jupyter notebooks, Python scripts, and interactive sessions
 
-## Main Features
+### Development Environment
 
-You can use top-level await:
+- **Workspace management** - Organize projects with file trees and multiple editors
+- **GitHub integration** - Import and export projects directly from/to GitHub repositories
+- **Gist support** - Share code snippets via GitHub Gists
+- **Real-time collaboration** - Share interactive Python sessions with others
 
-```python
-from asyncio import sleep
+### Advanced Features
 
-for i in range(10):
-    print(i, end=" ")
-    await sleep(0.1)
-```
+- **Top-level await support** - Use async/await at the module level
+- **Web API access** - Interact with browser APIs and make HTTP requests
+- **Rich debugging** - Native Python tracebacks and error handling
+- **Package installation** - Install packages from PyPI using micropip
+
+## 🏗️ Architecture
+
+This project is structured as a monorepo containing:
+
+### Web Application (`src/`)
+
+- **SvelteKit frontend** - Modern web interface built with Svelte and TypeScript
+- **Pyodide integration** - WebAssembly Python runtime
+- **Monaco Editor** - Advanced code editing with syntax highlighting
+- **Workspace system** - File management and project organization
+
+### HMR Library (`packages/hmr/`)
+
+Hot Module Reload system for Python that provides:
+
+- **Dependency tracking** - Runtime analysis of module dependencies
+- **Selective reloading** - Only reload modules that have changed
+- **Push-pull reactivity** - Efficient update propagation
+- **CLI interface** - Command-line tool for local development
+
+## 🛠️ Development
+
+### Prerequisites
+
+- Node.js 18+ and pnpm
+- Python 3.13+ (for HMR development)
+
+### Getting Started
+
+```bash
+# Clone the repository
+git clone https://github.com/promplate/pyth-on-line.git
+cd pyth-on-line
 
-Native and informative traceback:
+# Install dependencies
+pnpm install
 
-```python
-def reciprocal(x: int):
-    return 1 / x
+# Start development server
+pnpm dev
 ```
 
-Try this:
+### Project Structure
 
-```python
-1 + reciprocal(0)
 ```
+├── src/                    # SvelteKit web application
+│   ├── routes/            # Page routes and API endpoints
+│   ├── lib/               # Shared components and utilities
+│   ├── content/           # Static content (about page, etc.)
+│   └── python/            # Python runtime configuration
+├── packages/
+│   └── hmr/              # Hot Module Reload library
+├── tests/                 # Python test suite
+└── static/               # Static assets
+```
+
+### Available Scripts
 
-## Basic Usage
+- `pnpm dev` - Start development server
+- `pnpm build` - Build for production
+- `pnpm preview` - Preview production build
+- `pnpm check` - Type checking with svelte-check
+- `pnpm lint` - Lint code with ESLint
 
-Pyodide supports [a large subset of the Python standard library](https://pyodide.org/en/stable/usage/wasm-constraints.html). You can use all of them here.
-It also supports all pure-python libs or [adapted hybrid libs](https://pyodide.org/en/stable/usage/packages-in-pyodide.html) such as famous scientific libraries like NumPy, Pandas, SciPy, SciKit-Learn, etc.
+## 🔧 HMR Library
 
-Furthermore, you can use global variables like `navigator` from the `window` scope by:
+The included HMR (Hot Module Reload) library provides efficient code reloading for Python development:
 
-```python
-from js import navigator
+```bash
+# Install HMR globally
+pip install hmr
 
-print(navigator.languages)
-await navigator.clipboard.readText()
+# Use instead of python command
+hmr your_script.py
+
+# Or with arguments
+hmr your_script.py --arg1 value1
 ```
 
-Let's try invoking web requests:
+### HMR Features
 
-```python
-from asyncio import gather
-from pyodide.http import pyfetch  # which is just a wrapper on the fetch in js
+- **Runtime dependency tracking** - Monitors module relationships during execution
+- **Selective reloading** - Only reloads changed modules and their dependents
+- **Preserves state** - Maintains application state across reloads where possible
+- **Virtual environment support** - Works with all Python package managers
 
-async def f(url):
-    res = await pyfetch(url, method="HEAD", cache="no-store")
-    print(res.status, res.status_text, res.headers.get("content-type"))
-    return res.ok
+## 🌐 Deployment
 
-await gather(*(f(".") for _ in range(10)))
-```
+The application is designed for easy deployment on modern web platforms:
+
+- **Netlify** - Configured with `@sveltejs/adapter-netlify`
+- **Static hosting** - Can be deployed as a static site
+- **CDN friendly** - Optimized for content delivery networks
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [contributing guidelines](./CONTRIBUTING.md) for details.
+
+### Development Workflow
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests if applicable
+5. Submit a pull request
+
+## 📄 License
+
+This project is open source and available under the [MIT License](./LICENSE).
+
+## 🙏 Acknowledgments
+
+- **[Pyodide](https://github.com/pyodide/pyodide)** - WebAssembly Python runtime
+- **[StackBlitz](https://stackblitz.com/)** - Inspiration for browser-based development
+- **[Marimo](https://github.com/marimo-team/marimo)** - Reactive notebook concepts
+- **[CodePen](https://codepen.io/)** - Interactive code sharing ideas
+
+## 📞 Support
 
-> This project is still work in progress for now, so feel free to [get in touch](https://github.com/promplate/pyth-on-line/discussions) if you have any feedback or suggestions!
+- **Discussions** - [GitHub Discussions](https://github.com/promplate/pyth-on-line/discussions)
+- **Issues** - [GitHub Issues](https://github.com/promplate/pyth-on-line/issues)
+- **Documentation** - [Project Wiki](https://github.com/promplate/pyth-on-line/wiki)
 
-## Acknowledgements
+---
 
-- This project is heavily inspired by [StackBlitz](https://stackblitz.com/), [CodePen](https://codepen.io/) and [Marimo](https://github.com/marimo-team/marimo)
-- Developers from [pyodide](https://github.com/pyodide) helped me a lot
-- There are some other similar projects like [futurecoder](https://futurecoder.io/), [JupyterLite](https://jupyterlite.github.io/demo) and [PyScript](https://pyscript.com/)
+Built with ❤️ by the Promplate team

src/content/about.md

@@ -0,0 +1,81 @@
+# Introducing Pythonline
+
+Pythonline is a Python interpreter that runs in your browser. It is based on the [Pyodide](https://github.com/pyodide/pyodide) project, which is a WASM build of CPython.
+
+With Pythonline, you can easily share your Python snippets with others, without the need to install Python on their local machine. You can also use it to run Python code on your phone or tablet, without the need to install any apps. Let's take the `math` module as an example:
+
+```python
+>>> import math
+>>> math.pi
+```
+
+If you hover over the code block above, you will see a button to run the code.
+After that, you can inspect these values by hovering over them 👇
+
+| Kind           | Examples                                      |
+| -------------- | --------------------------------------------- |
+| Global Names   | `_`, `__name__`, `int`, `Exception`           |
+| Literal Values | `[{}]`, `1,2`, `1+2j`, `.0`, `0b10`           |
+| Expressions    | `math.pi / 2`                                 |
+| Assignments    | `one = -(math.e ** complex(0, math.pi)).real` |
+
+## Main Features
+
+You can use top-level await:
+
+```python
+from asyncio import sleep
+
+for i in range(10):
+    print(i, end=" ")
+    await sleep(0.1)
+```
+
+Native and informative traceback:
+
+```python
+def reciprocal(x: int):
+    return 1 / x
+```
+
+Try this:
+
+```python
+1 + reciprocal(0)
+```
+
+## Basic Usage
+
+Pyodide supports [a large subset of the Python standard library](https://pyodide.org/en/stable/usage/wasm-constraints.html). You can use all of them here.
+It also supports all pure-python libs or [adapted hybrid libs](https://pyodide.org/en/stable/usage/packages-in-pyodide.html) such as famous scientific libraries like NumPy, Pandas, SciPy, SciKit-Learn, etc.
+
+Furthermore, you can use global variables like `navigator` from the `window` scope by:
+
+```python
+from js import navigator
+
+print(navigator.languages)
+await navigator.clipboard.readText()
+```
+
+Let's try invoking web requests:
+
+```python
+from asyncio import gather
+from pyodide.http import pyfetch  # which is just a wrapper on the fetch in js
+
+async def f(url):
+    res = await pyfetch(url, method="HEAD", cache="no-store")
+    print(res.status, res.status_text, res.headers.get("content-type"))
+    return res.ok
+
+await gather(*(f(".") for _ in range(10)))
+```
+
+> This project is still work in progress for now, so feel free to [get in touch](https://github.com/promplate/pyth-on-line/discussions) if you have any feedback or suggestions!
+
+## Acknowledgements
+
+- This project is heavily inspired by [StackBlitz](https://stackblitz.com/), [CodePen](https://codepen.io/) and [Marimo](https://github.com/marimo-team/marimo)
+- Developers from [pyodide](https://github.com/pyodide) helped me a lot
+- There are some other similar projects like [futurecoder](https://futurecoder.io/), [JupyterLite](https://jupyterlite.github.io/demo) and [PyScript](https://pyscript.com/)

src/routes/(notebook)/about/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import readme from "../../../../README.md?raw";
+  import aboutContent from "../../../content/about.md?raw";
   import Notebook from "$lib/components/notebook/Notebook.svelte";
 </script>
 
-<Notebook text={readme} />
+<Notebook text={aboutContent} />