diff --git a/README.md b/README.md
index 8d22691..e7f3903 100644
--- a/README.md
+++ b/README.md
@@ -9,8 +9,11 @@
```
pip3 install ph7
```
+
## Quickstart
+
Write your first block of markup
+
```python
from ph7.html import body, div, html
@@ -35,6 +38,72 @@ print(template)
```
+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 functions
+
+
+
+```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;
+};
+```
+
Links:
diff --git a/docs/django.md b/docs/django.md
index b236f71..86a104c 100644
--- a/docs/django.md
+++ b/docs/django.md
@@ -14,7 +14,7 @@ TEMPLATES = [
]
```
-## Write Templates
+## Templates
```bash
|_ home
@@ -60,6 +60,60 @@ def home(request):
If you name your view anything other than `template`, you can specify the view name using `module:view` format. For example if you name your view `home`, you can specify the template as `app:home`.
+
+## Forms
+
+Forms can be included directly using `form` tag.
+
+
+```python
+from django import forms
+
+from ph7.html import body, div, form, html, title
+
+
+class UserForm(forms.Form):
+ """User form class."""
+
+ name = forms.CharField(label="username")
+ email = forms.EmailField(label="email")
+ password = forms.CharField(label="password", widget=forms.PasswordInput())
+
+
+template = html(
+ title("Forms Example"),
+ body(
+ div(
+ form(
+ UserForm(),
+ ),
+ )
+ ),
+)
+```
+
+
+
+```html
+
+
+ Forms example
+
+
+
+
+
+
+
+```
+
## Stylesheets
Define your stylesheet using [`CSSObject`](/css/#cssobject) and use [`Static Context`](/css/#static-context) to include the stylesheets in your views. First let's define `templates/styles.py`
@@ -70,6 +124,10 @@ from ph7.css import CSSObject
class main(CSSObject):
+ display = "flex"
+ align_items = "center"
+ justify_content = "center"
+
height = "100vh"
width = "100vw"
@@ -108,58 +166,145 @@ template = html(
-> Note: In the final render of the stylesheet generated by static context, only the classes which have been used in a template will be included.
+This is what the rendered view looks like
+```html
+
+
+ Static Files Example
+
+
+
+
Hello, World!
+
+
+```
-## Forms
+And this is what the rendered stylesheet looks like
+
+```css
+.main {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ width: 100vw;
+ box-sizing: border-box;
+ margin: 0px;
+ padding: 0px;
+}
+```
-Forms can be included directly using `form` tag.
+> Note: In the final render of the stylesheet generated by static context, only the classes which have been used in a template will be included.
-
+## Scripts
+
+Write your scripts using the [`ph7.js`](/js) APIs.
+
+
```python
-from django import forms
+from ph7.js import alert, console, document, fetch, js_callable
-from ph7.html import body, div, form, html, title
+@js_callable
+async def fetchDog():
+ console.log("Fetching dog")
+ response = await fetch(
+ "https://dog.ceo/api/breeds/image/random",
+ {
+ "method": "GET",
+ },
+ )
+ data = await response.json()
+ console.log("Dog fetched")
+ document.getElementById("image").src = data.message
+```
-class UserForm(forms.Form):
- """User form class."""
+
- name = forms.CharField(label="username")
- email = forms.EmailField(label="email")
- password = forms.CharField(label="password", widget=forms.PasswordInput())
+Use the function in the view
+
+
+```python
+from javascript.templates.script import fetchDog
+from javascript.templates.styles import image, main
+from ph7.context import ctx
+from ph7.html import body, button, div, head, html, img
+
+ctx.static.view(__name__)
template = html(
- title("Forms Example"),
+ head(
+ ctx.static.include,
+ ),
body(
div(
- form(
- UserForm(),
+ img(
+ src="#",
+ id="image",
+ alt="Click to fetch dog",
+ class_name=image,
+ ),
+ button(
+ "Click to fetch a dog",
+ handlers={
+ "onclick": fetchDog(),
+ },
),
+ class_name=main,
)
),
)
+
+
+if __name__ == "__main__":
+ print(template.render({"_view": __name__}))
```
+This is what the rendered view looks like
+
```html
-
- Forms example
-
-
-