https://github.com/angrybayblade/ph7
💧 Python native HTML rendering
https://github.com/angrybayblade/ph7
css django flask html js template-engine web
Last synced: about 1 year ago
JSON representation
💧 Python native HTML rendering
- Host: GitHub
- URL: https://github.com/angrybayblade/ph7
- Owner: angrybayblade
- Created: 2024-02-03T04:56:06.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-22T03:28:48.000Z (over 1 year ago)
- Last Synced: 2025-03-19T01:46:28.316Z (over 1 year ago)
- Topics: css, django, flask, html, js, template-engine, web
- Language: Python
- Homepage: https://angrybayblade.github.io/ph7/
- Size: 2.93 MB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
💧 PH7
Python native HTML templates
## Why PH7?
* Native to python
* More code modularity
* Easy to write reusable components
* Out of the box editor support
* Syntax highlighting
* Code navvigation tools
* Auto-completion
* Type safety using MyPy
## Install
```
pip3 install ph7
```
## Quickstart
Write your first block of markup
```python
from ph7.html import body, div, html
template = html(
body(
div(
"Hello, World!",
)
)
)
print(template)
```
```html
Hello, World!
```
Or write a CSS class
```python
from ph7.css import CSSObject
class flex_center(CSSObject):
"""Flex center"""
display = "flex"
align_items = "center"
justify_content = "center"
print(flex_center())
```
```css
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
```
Or use python function as JavaScript function
```python
from ph7.js import as_js, console, document, fetch
async def fetchDog():
response = await fetch(
"https://dog.ceo/api/breeds/image/random",
{"method": "GET"},
)
if response.status != 200:
response_body = await response.text()
console.log(f"Error fetching dog; {response_body}")
return
data = await response.json()
document.getElementById("image").src = data.message
print(as_js(fetchDog))
```
```js
async function fetchDog() {
let response = await fetch('https://dog.ceo/api/breeds/image/random', {
'method': 'GET'
});
if (response.status != 200) {
let response_body = await response.text();
console.log('Error fetching dog; ' + response_body);
return;
};
let data = await response.json();
document.getElementById('image').src = data.message;
};
```
PH7 is still in beta-development. It will be production ready with following enhancements
- [ ] Remove performance bottlenecks
- [ ] Unit testing support
Further improvements
- [ ] Typed context for type safety
Links:
* [Documentation](http://ph7.angrybayblade.me)
* [Changelog](https://github.com/angrybayblade/ph7/blob/main/docs/CHANGELOG)
* [Issue Tracker](https://github.com/angrybayblade/ph7/issues)