html primitive docs

Archmonger · Archmonger · commit 577b83183e98 · 2024-06-21T20:23:50.000-07:00
diff --git a/docs/examples/html/pyscript-tag.html b/docs/examples/html/pyscript-tag.html
@@ -0,0 +1,14 @@
+{% load reactpy %}
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>ReactPy</title>
+    {% pyscript_setup %}
+</head>
+
+<body>
+    {% component "example_project.my_app.components.server_side_component.py" %}
+</body>
+
+</html>
diff --git a/docs/examples/python/pyscript-tag.py b/docs/examples/python/pyscript-tag.py
@@ -0,0 +1,15 @@
+from reactpy import component, html
+from reactpy_django.html import pyscript
+
+example_source_code = """
+import js
+
+js.console.log("Hello, World!")
+"""
+
+
+@component
+def server_side_component():
+    return html.div(
+        pyscript(example_source_code.strip()),
+    )
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
@@ -7,6 +7,7 @@ nav:
     - Reference:
           - Components: reference/components.md
           - Hooks: reference/hooks.md
+          - HTML: reference/html.md
           - URL Router: reference/router.md
           - Decorators: reference/decorators.md
           - Utilities: reference/utils.md
diff --git a/docs/src/reference/components.md b/docs/src/reference/components.md
@@ -44,13 +44,19 @@ This is an embeddable version of the [`#!jinja {% pyscript_component %}` templat
     | `#!python initial` | `#!python str | VdomDict | ComponentType` | The initial HTML that is displayed prior to the PyScript component loads. This can either be a string containing raw HTML, a `#!python reactpy.html` snippet, or a non-interactive component. | `#!python ""` |
     | `#!python root` | `#!python str` | The name of the root component function. | `#!python "root"` |
 
+<!--pyscript-setup-required-start-->
+
 ??? warning "You must call `pyscript_setup` in your Django template before using this tag!"
 
-    This component requires the use of the [`#!jinja {% pyscript_setup %}` template tag](./template-tag.md#pyscript-setup) to work correctly.
+    This requires using of the [`#!jinja {% pyscript_setup %}` template tag](./template-tag.md#pyscript-setup) to initialize PyScript on the client.
 
-    ```jinja
-    {% include "../../examples/html/pyscript-setup.html" %}
-    ```
+    === "my_template.html"
+
+        ```jinja
+        {% include "../../examples/html/pyscript-setup.html" %}
+        ```
+
+<!--pyscript-setup-required-end-->
 
 {% include-markdown "../reference/template-tag.md" start="<!--pyscript-js-exec-start-->" end="<!--pyscript-js-exec-end-->" %}
 
diff --git a/docs/src/reference/html.md b/docs/src/reference/html.md
@@ -0,0 +1,31 @@
+## Overview
+
+<p class="intro" markdown>
+
+We supply some pre-generated that HTML nodes can be used to help simplify development.
+
+</p>
+
+---
+
+## PyScript
+
+Primitive HTML tag that is leveraged by [`reactpy_django.components.pyscript_component`](./components.md#pyscript-component).
+
+This can be used as an alternative to the `#!python reactpy.html.script` tag to execute JavaScript and run client-side Python code.
+
+Additionally, this tag functions identically to any other tag contained within `#!python reactpy.html`, and can be used in the same way.
+
+=== "components.py"
+
+    ```python
+    {% include "../../examples/python/pyscript-tag.py" %}
+    ```
+
+=== "my_template.html"
+
+    ```jinja
+    {% include "../../examples/html/pyscript-tag.html" %}
+    ```
+
+{% include-markdown "../reference/components.md" start="<!--pyscript-setup-required-start-->" end="<!--pyscript-setup-required-end-->" %}
