Even better docs styling (+ new homepage)

CHANGELOG.md

@@ -56,7 +56,7 @@ Using the following categories, list your changes in this order:
 ### Changed
 
 -   Bumped the minimum ReactPy version to `1.0.2`.
--   Prettier websocket URLs for components that do not have sessions.
+-   Prettier WebSocket URLs for components that do not have sessions.
 -   Template tag will now only validate `args`/`kwargs` if `settings.py:DEBUG` is enabled.
 -   Bumped the minimum `@reactpy/client` version to `0.3.1`
 -   Bumped the minimum Django version to `4.2`.
@@ -79,7 +79,7 @@ Using the following categories, list your changes in this order:
 
 ### Changed
 
--   ReactPy will now provide a warning if your HTTP URLs are not on the same prefix as your websockets.
+-   ReactPy will now provide a warning if your HTTP URLs are not on the same prefix as your WebSockets.
 -   Cleaner logging output for auto-detected ReactPy root components.
 
 ### Deprecated
@@ -91,14 +91,14 @@ Using the following categories, list your changes in this order:
 
 -   Warning W007 (`REACTPY_WEBSOCKET_URL doesn't end with a slash`) has been removed. ReactPy now automatically handles slashes.
 -   Warning W008 (`REACTPY_WEBSOCKET_URL doesn't start with an alphanumeric character`) has been removed. ReactPy now automatically handles this scenario.
--   Error E009 (`channels is not in settings.py:INSTALLED_APPS`) has been removed. Newer versions of `channels` do not require installation via `INSTALLED_APPS` to receive an ASGI webserver.
+-   Error E009 (`channels is not in settings.py:INSTALLED_APPS`) has been removed. Newer versions of `channels` do not require installation via `INSTALLED_APPS` to receive an ASGI web server.
 
 ## [3.3.2] - 2023-08-13
 
 ### Added
 
--   ReactPy Websocket will now decode messages via `orjson` resulting in an ~6% overall performance improvement.
--   Built-in `asyncio` event loops are now patched via `nest_asyncio`, resulting in an ~10% overall performance improvement. This has no performance impact if you are running your webserver with `uvloop`.
+-   ReactPy WebSocket will now decode messages via `orjson` resulting in an ~6% overall performance improvement.
+-   Built-in `asyncio` event loops are now patched via `nest_asyncio`, resulting in an ~10% overall performance improvement. This has no performance impact if you are running your web server with `uvloop`.
 
 ### Fixed
 

README.md

@@ -81,8 +81,6 @@ def hello_world(recipient: str):
 
 In your **Django app**'s HTML template, you can now embed your ReactPy component using the `component` template tag. Within this tag, you will need to type in the dotted path to the component.
 
-<!--html-header-end-->
-
 Additionally, you can pass in `args` and `kwargs` into your component function. After reading the code below, pay attention to how the function definition for `hello_world` (_from the previous example_) accepts a `recipient` argument.
 
 <!--html-code-start-->

docs/includes/orm.md

@@ -1,13 +1,13 @@
 <!--orm-excp-start-->
 
-Due to Django's ORM design, database queries must be deferred using hooks. Otherwise, you will see a `SynchronousOnlyOperation` exception.
+Due to Django's ORM design, database queries must be deferred using hooks. Otherwise, you will see a `#!python SynchronousOnlyOperation` exception.
 
-These `SynchronousOnlyOperation` exceptions may be resolved in a future version of Django containing an asynchronous ORM. However, it is best practice to always perform ORM calls in the background via hooks.
+These `#!python SynchronousOnlyOperation` exceptions may be resolved in a future version of Django containing an asynchronous ORM. However, it is best practice to always perform ORM calls in the background via hooks.
 
 <!--orm-excp-end-->
 
 <!--orm-fetch-start-->
 
-By default, automatic recursive fetching of `ManyToMany` or `ForeignKey` fields is enabled within the default `QueryOptions.postprocessor`. This is needed to prevent `SynchronousOnlyOperation` exceptions when accessing these fields within your ReactPy components.
+By default, automatic recursive fetching of `#!python ManyToMany` or `#!python ForeignKey` fields is enabled within the default `#!python QueryOptions.postprocessor`. This is needed to prevent `#!python SynchronousOnlyOperation` exceptions when accessing these fields within your ReactPy components.
 
 <!--orm-fetch-end-->

docs/overrides/home-code-examples/add-interactivity-demo.html

@@ -0,0 +1,165 @@
+<div class="demo pop-right">
+    <div class="white-bg">
+
+        <div class="browser-navbar">
+            <div class="browser-nav-url">
+                <svg class="text-tertiary me-1 opacity-60" width="12" height="12" viewBox="0 0 44 44" fill="none"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd"
+                        d="M22 4C17.0294 4 13 8.0294 13 13V16H12.3103C10.5296 16 8.8601 16.8343 8.2855 18.5198C7.6489 20.387 7 23.4148 7 28C7 32.5852 7.6489 35.613 8.2855 37.4802C8.8601 39.1657 10.5296 40 12.3102 40H31.6897C33.4704 40 35.1399 39.1657 35.7145 37.4802C36.3511 35.613 37 32.5852 37 28C37 23.4148 36.3511 20.387 35.7145 18.5198C35.1399 16.8343 33.4704 16 31.6897 16H31V13C31 8.0294 26.9706 4 22 4ZM25 16V13C25 11.3431 23.6569 10 22 10C20.3431 10 19 11.3431 19 13V16H25Z"
+                        fill="currentColor"></path>
+                </svg>
+                example.com/videos.html
+            </div>
+        </div>
+
+        <div class="browser-viewport">
+            <div class="search-header">
+                <h1>Searchable Videos</h1>
+                <p>Type a search query below.</p>
+                <div class="search-bar">
+                    <svg width="1em" height="1em" viewBox="0 0 20 20" class="text-gray-30 w-4">
+                        <path
+                            d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+                            stroke="currentColor" fill="none" stroke-width="2" fill-rule="evenodd"
+                            stroke-linecap="round" stroke-linejoin="round"></path>
+                    </svg>
+                    <input type="text" placeholder="Search">
+                </div>
+            </div>
+
+            <h2>5 Videos</h2>
+
+            <div class="vid-row">
+                <div class="vid-thumbnail">
+                    <svg width="36" height="36" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+                            fill="rgb(123 123 123 / 50%)"></path>
+                    </svg>
+                </div>
+                <div class="vid-text">
+                    <h3>ReactPy: The Documentary</h3>
+                    <p>From web library to taco delivery service</p>
+                </div>
+                <button class="like-btn">
+                    <svg width="34" height="34" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+                            fill="black" fill-rule="evenodd" clip-rule="evenodd" onclick="t"></path>
+                    </svg>
+                </button>
+            </div>
+
+            <div class="vid-row">
+                <div class="vid-thumbnail">
+                    <svg width="36" height="36" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+                            fill="rgb(123 123 123 / 50%)"></path>
+                    </svg>
+                </div>
+                <div class="vid-text">
+                    <h3>Code using Worst Practices</h3>
+                    <p>Harriet Potter (2013)</p>
+                </div>
+                <button class="like-btn">
+                    <svg width="34" height="34" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+                            fill="black" fill-rule="evenodd" clip-rule="evenodd" onclick="t"></path>
+                    </svg>
+                </button>
+            </div>
+
+            <div class="vid-row">
+                <div class="vid-thumbnail">
+                    <svg width="36" height="36" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+                            fill="rgb(123 123 123 / 50%)"></path>
+                    </svg>
+                </div>
+                <div class="vid-text">
+                    <h3>Introducing ReactPy Foriegn</h3>
+                    <p>Tim Cooker (2015)</p>
+                </div>
+                <button class="like-btn">
+                    <svg width="34" height="34" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+                            fill="black" fill-rule="evenodd" clip-rule="evenodd" onclick="t"></path>
+                    </svg>
+                </button>
+            </div>
+
+            <div class="vid-row">
+                <div class="vid-thumbnail">
+                    <svg width="36" height="36" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+                            fill="rgb(123 123 123 / 50%)"></path>
+                    </svg>
+                </div>
+                <div class="vid-text">
+                    <h3>Introducing ReactPy Cooks</h3>
+                    <p>Soap Boat and Dinosaur Dan (2018)</p>
+                </div>
+                <button class="like-btn">
+                    <svg width="34" height="34" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+                            fill="black" fill-rule="evenodd" clip-rule="evenodd" onclick="t"></path>
+                    </svg>
+                </button>
+            </div>
+
+            <div class="vid-row">
+                <div class="vid-thumbnail">
+                    <svg width="36" height="36" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+                            fill="rgb(123 123 123 / 50%)"></path>
+                    </svg>
+                </div>
+                <div class="vid-text">
+                    <h3>Introducing Quantum Components</h3>
+                    <p>Isaac Asimov and Lauren-kun (2020)</p>
+                </div>
+                <button class="like-btn">
+                    <svg width="34" height="34" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+                            fill="black" fill-rule="evenodd" clip-rule="evenodd" onclick="t"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+
+        <script>
+            document
+                .querySelector(".search-bar input")
+                .addEventListener("keyup", function () {
+                    let titles = document.querySelectorAll(".browser-viewport .vid-text");
+                    let search = this.value.toLowerCase();
+                    let numVids = 0;
+                    for (let i = 0; i < titles.length; i++) {
+                        let title =
+                            titles[i].querySelector("h3").innerText.toLowerCase() +
+                            titles[i].querySelector("p").innerText.toLowerCase();
+                        if (search.length == 0) {
+                            titles[i].parentElement.style.display = "";
+                            numVids++;
+                        } else if (title.indexOf(search) > -1) {
+                            titles[i].parentElement.style.display = "";
+                            numVids++;
+                        } else {
+                            titles[i].parentElement.style.display = "none";
+                        }
+                    }
+                    document.querySelector(".browser-viewport h2").innerText =
+                        numVids + " Videos";
+                });
+        </script>
+    </div>
+</div>

docs/overrides/home-code-examples/add-interactivity.py

@@ -0,0 +1,30 @@
+from reactpy import component, html, use_state
+
+
+def filter_videos(videos, search_text):
+    return None
+
+
+def search_input(dictionary, value):
+    return None
+
+
+def video_list(videos, empty_heading):
+    return None
+
+
+@component
+def searchable_video_list(videos):
+    search_text, set_search_text = use_state("")
+    found_videos = filter_videos(videos, search_text)
+
+    return html._(
+        search_input(
+            {"on_change": lambda new_text: set_search_text(new_text)},
+            value=search_text,
+        ),
+        video_list(
+            videos=found_videos,
+            empty_heading=f"No matches for “{search_text}”",
+        ),
+    )

docs/overrides/home-code-examples/code-block.html

@@ -0,0 +1,7 @@
+<div class="tabbed-set tabbed-alternate {{ class }}">
+	<input checked="checked" type="radio" />
+	<div class="tabbed-labels"><label>app.py</label></div>
+	<div class="tabbed-content">
+		<img src="assets/img/{{ image }}">
+	</div>
+</div>