https://github.com/jnsougata/orion
WIP: Your web framework redefined.
https://github.com/jnsougata/orion
asgi python3 server-side-rendering starlette templating webframework
Last synced: about 2 months ago
JSON representation
WIP: Your web framework redefined.
- Host: GitHub
- URL: https://github.com/jnsougata/orion
- Owner: jnsougata
- License: mit
- Created: 2024-12-25T08:57:22.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-02-07T18:47:43.000Z (3 months ago)
- Last Synced: 2025-03-16T01:14:04.915Z (2 months ago)
- Topics: asgi, python3, server-side-rendering, starlette, templating, webframework
- Language: Python
- Homepage:
- Size: 57.6 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Orion
#### Your web framework redefined.
Orion is a lightweight, high-performance, and modular web framework built on the Starlette ASGI framework. It is designed to be simple, fast, and user-friendly, with a strong focus on performance, ease of use, and modularity. Orion provides developers with the flexibility to extend and customize its functionality, making it an excellent choice for building modern and scalable web applications.
## Features
- Simple and easy to use
- Fast and lightweight
- Built on top of Starlette
- Automatic static routing
- Less boilerplate code
- Easy to extend and customize
- Built-in database support (SQLite3)
- Built-in JWT support (Coming soon)
- Built-in OAuth support (Coming soon)
## Installation
To install Orion, you can use pip:
```bash
pip install git+https://github.com/jnsougata/orion.git
```
## Quickstart
Here is a simple example of how to create a simple web application using Orion:
```python
from orion import Orion
app = Orion()
@app.on_startup()
async def startup():
print("Starting up...")
@app.on_shutdown()
async def shutdown():
print("Shutting down...")
if __name__ == '__main__':
app.run()
```
## Basic File Structure
```
.
├── main.py
├── views/
│ ├── index.html
│ ├── users/{user_id}.html
│ └── users/{user_id}/guilds/{guild_id}.html
├── public/
│ ├── style.css
│ └── script.js
└── components/
├── navbar.html
└── footer.html
```
## Creating Component
#### Path: components/footer.html
> ⚠️ Currently the CSS and JS is globally scoped.
So there is a chance of namespace collision for both CSS and JS.
To avoid this, one can use inline CSS or stick to a naming convention for CSS and JS.
In the future, it will be scoped to the component.
```html
© 2025 Orion
document.querySelector('footer').addEventListener('click', () => {
alert('You clicked the footer!');
});
```
### Path: components/counter.html
```html
#count {
font-size: 20px;
}
.counter_button {
padding: 10px 20px;
border-radius: 10px;
outline: none;
border: none;
cursor: pointer;
background-color: #007bff;
color: white;
}
#count {
font-size: 20px;
text-align: center;
}
-
0
+
let count = 0;
const countEl = document.querySelector('#count');
document.querySelector('#decrement').addEventListener('click', () => {
if (count === 0) return;
count--;
countEl.textContent = String(count);
});
document.querySelector('#increment').addEventListener('click', () => {
count++;
countEl.textContent = String(count);
});
```
### Path: components/file_uploader.html
```html
#file {
display: none;
}
#upload {
display: block;
margin: 10px auto;
}
#pseudo-input {
min-width: 500px;
min-height: 300px;
border: 2px dashed rgba(255, 255, 255, 0.07);
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
#filename {
margin: 0;
text-align: center;
background-color: transparent;
}
.action_button {
width: 200px;
padding: 10px 20px;
margin: 10px;
border-radius: 10px;
outline: none;
border: none;
cursor: pointer;
background-color: #007bff;
color: white;
}
#clear {
background-color: #dc3545;
}
#message {
visibility: hidden;
padding: 10px;
background-color: transparent;
}
No file chosen
Upload
Clear
const hiddenInput = document.querySelector('#file');
const pseudoInput = document.querySelector('#pseudo-input');
pseudoInput.addEventListener('click', () => {
hiddenInput.click();
});
hiddenInput.addEventListener('change', () => {
document.querySelector('#filename').textContent = hiddenInput.files[0].name;
});
document.querySelector('#clear').addEventListener('click', (ev) => {
ev.stopPropagation();
hiddenInput.value = '';
document.querySelector('#filename').textContent = 'No file chosen';
pseudoInput.style.borderColor = 'rgba(255, 255, 255, 0.07)';
});
document.querySelector('#upload').addEventListener('click', async () => {
if (!hiddenInput.files.length) {
alert('No file chosen');
return;
}
const formData = new FormData();
formData.append('file', hiddenInput.files[0]);
const response = await fetch('/upload', {
method: 'POST',
body: formData
});
if (response.ok) {
pseudoInput.style.borderColor = 'rgba(40,167,69,0.56)';
} else {
pseudoInput.style.borderColor = 'rgba(220,53,69,0.87)';
}
});
```
## Importing Component
#### Path: views/index.html
```html
Orion
<{./components/counter}>
<{./components/file_uploader}>
<{./components/footer}>
```
## Screenshots
