Skip to content

Commit 9973403

Browse files
authored
Redesign docs settings page (#187)
- Redesign docs settings page - Misc docs tweaks
1 parent 1fbdfbb commit 9973403

File tree

11 files changed

+206
-48
lines changed

11 files changed

+206
-48
lines changed

docs/src/about/code.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
</p>
88

9-
!!! note
9+
!!! abstract "Note"
1010

1111
Looking to contribute features that are not Django specific?
1212

@@ -59,7 +59,7 @@ Navigate to [`http://127.0.0.1:8000`](http://127.0.0.1:8000) to see if the tests
5959

6060
## Running the full test suite
6161

62-
!!! note
62+
!!! abstract "Note"
6363

6464
This repository uses [Nox](https://nox.thea.codes/en/stable/) to run tests. For a full test of available scripts run `nox -l`.
6565

docs/src/assets/css/admonition.css

+4-10
Original file line numberDiff line numberDiff line change
@@ -68,33 +68,27 @@ React Name: "You will learn"
6868
}
6969

7070
/*
71-
Admonition: "note"
71+
Admonition: "abstract"
7272
React Name: "Note"
7373
*/
74-
.md-typeset .admonition.note {
74+
.md-typeset .admonition.abstract {
7575
background: var(--note-bg-color);
7676
padding: 0.8rem 1.4rem;
7777
border-radius: 0.8rem;
7878
}
7979

80-
.md-typeset .note .admonition-title {
80+
.md-typeset .abstract .admonition-title {
8181
font-size: 1rem;
8282
background: transparent;
8383
padding-bottom: 0;
8484
color: rgb(68, 172, 153);
8585
}
8686

87-
.md-typeset .note .admonition-title:before {
87+
.md-typeset .abstract .admonition-title:before {
8888
font-size: 1.1rem;
8989
background: rgb(68, 172, 153);
9090
}
9191

92-
.md-typeset .note > .admonition-title:before,
93-
.md-typeset .note > summary:before {
94-
-webkit-mask-image: var(--md-admonition-icon--abstract);
95-
mask-image: var(--md-admonition-icon--abstract);
96-
}
97-
9892
/*
9993
Admonition: "warning"
10094
React Name: "Pitfall"

docs/src/assets/css/sidebar.css

+4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
--sizebar-font-size: 0.62rem;
33
}
44

5+
.md-nav__link {
6+
word-break: break-word;
7+
}
8+
59
/* Desktop Styling */
610
@media screen and (min-width: 76.1875em) {
711
/* Move the sidebar and TOC to the edge of the page */

docs/src/assets/css/table-of-contents.css

+9
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,15 @@
2929
border-radius: 10px 0 0 10px;
3030
font-weight: 400;
3131
}
32+
33+
[data-md-component="toc"]
34+
.md-nav__item
35+
.md-nav__list
36+
.md-nav__item
37+
.md-nav__link {
38+
padding-left: 1.25rem;
39+
}
40+
3241
[dir="ltr"] .md-sidebar__inner {
3342
padding: 0;
3443
}

docs/src/learn/add-reactpy-to-a-django-project.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ If you want to add some interactivity to your existing **Django project**, you d
66

77
</p>
88

9-
!!! note
9+
!!! abstract "Note"
1010

1111
These docs assumes you have already created [a **Django project**](https://docs.djangoproject.com/en/dev/intro/tutorial01/), which involves creating and installing at least one **Django app**.
1212

@@ -51,11 +51,11 @@ Add `#!python "reactpy_django"` to [`INSTALLED_APPS`](https://docs.djangoproject
5151
{% include "../../python/configure-channels-asgi-app.py" %}
5252
```
5353

54-
??? note "Configure ReactPy settings (Optional)"
54+
??? info "Configure ReactPy settings (Optional)"
5555

56-
{% include "../reference/settings.md" start="<!--intro-start-->" end="<!--intro-end-->" %}
56+
ReactPy's has additional configuration available to fit a variety of use cases.
5757

58-
{% include "../reference/settings.md" start="<!--config-table-start-->" end="<!--config-table-end-->" %}
58+
See the [ReactPy settings](../reference/settings.md) documentation to learn more.
5959

6060
## Step 3: Configure `urls.py`
6161

@@ -77,7 +77,7 @@ Register ReactPy's WebSocket using `#!python REACTPY_WEBSOCKET_ROUTE` in your [`
7777
{% include "../../python/configure-asgi.py" %}
7878
```
7979

80-
??? note "Add `#!python AuthMiddlewareStack` and `#!python SessionMiddlewareStack` (Optional)"
80+
??? info "Add `#!python AuthMiddlewareStack` and `#!python SessionMiddlewareStack` (Optional)"
8181

8282
There are many situations where you need to access the Django `#!python User` or `#!python Session` objects within ReactPy components. For example, if you want to:
8383

docs/src/learn/your-first-component.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Components are one of the core concepts of ReactPy. They are the foundation upon
66

77
</p>
88

9-
!!! note
9+
!!! abstract "Note"
1010

1111
If you have reached this point, you should have already [installed ReactPy-Django](../learn/add-reactpy-to-a-django-project.md) through the previous steps.
1212

docs/src/reference/hooks.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Prefabricated hooks can be used within your `components.py` to help simplify dev
66

77
</p>
88

9-
!!! note
9+
!!! abstract "Note"
1010

1111
Looking for standard React hooks?
1212

docs/src/reference/settings.md

+176-27
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,199 @@
22

33
<p class="intro" markdown>
44

5-
<!--intro-start-->
6-
75
These are ReactPy-Django's default settings values. You can modify these values in your **Django project's** `settings.py` to change the behavior of ReactPy.
86

9-
<!--intro-end-->
10-
117
</p>
128

13-
!!! note
9+
!!! abstract "Note"
1410

1511
The default configuration of ReactPy is suitable for the vast majority of use cases.
1612

1713
You should only consider changing settings when the necessity arises.
1814

1915
---
2016

21-
<!--config-table-start-->
22-
2317
## General Settings
2418

25-
| Setting | Default Value | Example Value(s) | Description |
26-
| --- | --- | --- | --- |
27-
| `#!python REACTPY_URL_PREFIX` | `#!python "reactpy/"` | `#!python "rp/"`, `#!python "render/reactpy/"` | The prefix used for all ReactPy WebSocket and HTTP URLs. |
28-
| `#!python REACTPY_DEFAULT_QUERY_POSTPROCESSOR` | `#!python "reactpy_django.utils.django_query_postprocessor"` | `#!python "example_project.postprocessor"`, `#!python None` | Dotted path to the default `#!python reactpy_django.hooks.use_query` postprocessor function. Postprocessor functions can be async or sync, and the function must contain a `#!python data` parameter. Set `#!python REACTPY_DEFAULT_QUERY_POSTPROCESSOR` to `#!python None` to globally disable the default postprocessor. |
29-
| `#!python REACTPY_AUTH_BACKEND` | `#!python "django.contrib.auth.backends.ModelBackend"` | `#!python "example_project.auth.MyModelBackend"` | Dotted path to the Django authentication backend to use for ReactPy components. This is only needed if:<br/> 1. You are using `#!python AuthMiddlewareStack` and...<br/> 2. You are using Django's `#!python AUTHENTICATION_BACKENDS` setting and...<br/> 3. Your Django user model does not define a `#!python backend` attribute. |
19+
---
20+
21+
### `#!python REACTPY_URL_PREFIX`
22+
23+
**Default:** `#!python "reactpy/"`
24+
25+
**Example Value(s):** `#!python "rp/"`, `#!python "render/reactpy/"`
26+
27+
The prefix used for all ReactPy WebSocket and HTTP URLs.
28+
29+
---
30+
31+
### `#!python REACTPY_DEFAULT_QUERY_POSTPROCESSOR`
32+
33+
**Default:** `#!python "reactpy_django.utils.django_query_postprocessor"`
34+
35+
**Example Value(s):** `#!python "example_project.postprocessor"`, `#!python None`
36+
37+
Dotted path to the default `#!python reactpy_django.hooks.use_query` postprocessor function.
38+
39+
Postprocessor functions can be async or sync. Here is an example of a sync postprocessor function:
40+
41+
```python linenums="0"
42+
def postprocessor(data):
43+
del data["foo"]
44+
return data
45+
```
46+
47+
Set `#!python REACTPY_DEFAULT_QUERY_POSTPROCESSOR` to `#!python None` to disable the default postprocessor.
48+
49+
---
50+
51+
### `#!python REACTPY_AUTH_BACKEND`
52+
53+
**Default:** `#!python "django.contrib.auth.backends.ModelBackend"`
54+
55+
**Example Value(s):** `#!python "example_project.auth.MyModelBackend"`
56+
57+
Dotted path to the Django authentication backend to use for ReactPy components. This is only needed if:
58+
59+
1. You are using `#!python AuthMiddlewareStack` and...
60+
2. You are using Django's `#!python AUTHENTICATION_BACKENDS` setting and...
61+
3. Your Django user model does not define a `#!python backend` attribute.
62+
63+
---
3064

3165
## Performance Settings
3266

33-
| Setting | Default Value | Example Value(s) | Description |
34-
| --- | --- | --- | --- |
35-
| `#!python REACTPY_DATABASE` | `#!python "default"` | `#!python "my-reactpy-database"` | Multiprocessing-safe database used to store ReactPy session data. If configuring `#!python REACTPY_DATABASE`, it is mandatory to enable our database router like such:<br/>`#!python DATABASE_ROUTERS = ["reactpy_django.database.Router", ...]` |
36-
| `#!python REACTPY_CACHE` | `#!python "default"` | `#!python "my-reactpy-cache"` | Cache used for ReactPy JavaScript modules. We recommend installing [`redis`](https://redis.io/) or [`python-diskcache`](https://grantjenks.com/docs/diskcache/tutorial.html#djangocache). |
37-
| `#!python REACTPY_BACKHAUL_THREAD` | `#!python False` | `#!python True` | Configures whether ReactPy components are rendered in a dedicated thread. This allows the web server to process traffic during ReactPy rendering. Vastly improves throughput with web servers such as [`hypercorn`](https://pgjones.gitlab.io/hypercorn/) and [`uvicorn`](https://www.uvicorn.org/). |
38-
| `#!python REACTPY_DEFAULT_HOSTS` | `#!python None` | `#!python ["localhost:8000", "localhost:8001", "localhost:8002/subdir"]` | The default host(s) that can render your ReactPy components. ReactPy will use these hosts in a round-robin fashion, allowing for easy distributed computing. You can use the `#!python host` argument in your [template tag](../reference/template-tag.md#component) as a manual override. |
39-
| `#!python REACTPY_PRERENDER` | `#!python False` | `#!python True` | Configures whether to pre-render your components, which enables SEO compatibility and increases perceived responsiveness. You can use the `#!python prerender` argument in your [template tag](../reference/template-tag.md#component) as a manual override. During pre-rendering, there are some key differences in behavior:<br/> 1. Only the component's first render is pre-rendered.<br/> 2. All `#!python connection` related hooks use HTTP.<br/> 3. `#!python html.script` is executed during both pre-render and render.<br/> 4. Component is non-interactive until a WebSocket connection is formed. |
67+
---
68+
69+
### `#!python REACTPY_DATABASE`
70+
71+
**Default:** `#!python "default"`
72+
73+
**Example Value(s):** `#!python "my-reactpy-database"`
74+
75+
Multiprocessing-safe database used by ReactPy, typically for session data.
76+
77+
If configuring this value, it is mandatory to enable our database router like such:
78+
79+
```python linenums="0"
80+
DATABASE_ROUTERS = ["reactpy_django.database.Router", ...]
81+
```
82+
83+
---
84+
85+
### `#!python REACTPY_CACHE`
86+
87+
**Default:** `#!python "default"`
88+
89+
**Example Value(s):** `#!python "my-reactpy-cache"`
90+
91+
Cache used by ReactPy, typically for file operations.
92+
93+
We recommend configuring [`redis`](https://docs.djangoproject.com/en/dev/topics/cache/#redis), [`python-diskcache`](https://grantjenks.com/docs/diskcache/tutorial.html#djangocache), or [`LocMemCache`](https://docs.djangoproject.com/en/dev/topics/cache/#local-memory-caching).
94+
95+
---
96+
97+
### `#!python REACTPY_BACKHAUL_THREAD`
98+
99+
**Default:** `#!python False`
100+
101+
**Example Value(s):** `#!python True`
102+
103+
Configures whether ReactPy components are rendered in a dedicated thread.
104+
105+
This setting allows the web server to process other traffic during ReactPy rendering. Vastly improves throughput with web servers such as [`hypercorn`](https://pgjones.gitlab.io/hypercorn/) and [`uvicorn`](https://www.uvicorn.org/).
106+
107+
---
108+
109+
### `#!python REACTPY_DEFAULT_HOSTS`
110+
111+
**Default:** `#!python None`
112+
113+
**Example Value(s):** `#!python ["localhost:8000", "localhost:8001", "localhost:8002/subdir"]`
114+
115+
The default host(s) that can render your ReactPy components.
116+
117+
ReactPy will use these hosts in a round-robin fashion, allowing for easy distributed computing.
118+
119+
You can use the `#!python host` argument in your [template tag](../reference/template-tag.md#component) to manually override this default.
120+
121+
---
122+
123+
### `#!python REACTPY_PRERENDER`
124+
125+
**Default:** `#!python False`
126+
127+
**Example Value(s):** `#!python True`
128+
129+
Configures whether to pre-render your components, which enables SEO compatibility and reduces perceived latency.
130+
131+
During pre-rendering, there are some key differences in behavior:
132+
133+
1. Only the component's first render is pre-rendered.
134+
2. All `#!python connection` related hooks use HTTP.
135+
3. `#!python html.script` elements are executed twice (pre-render and post-render).
136+
4. The component will be non-interactive until a WebSocket connection is formed.
137+
138+
You can use the `#!python prerender` argument in your [template tag](../reference/template-tag.md#component) to manually override this default.
139+
140+
---
40141

41142
## Stability Settings
42143

43-
| Setting | Default Value | Example Value(s) | Description |
44-
| --- | --- | --- | --- |
45-
| `#!python REACTPY_RECONNECT_INTERVAL` | `#!python 750` | `#!python 100`, `#!python 2500`, `#!python 6000` | Milliseconds between client reconnection attempts. |
46-
| `#!python REACTPY_RECONNECT_BACKOFF_MULTIPLIER` | `#!python 1.25` | `#!python 1`, `#!python 1.5`, `#!python 3` | On each reconnection attempt, the `#!python REACTPY_RECONNECT_INTERVAL` will be multiplied by this value to increase the time between attempts. You can keep time between each reconnection the same by setting this to `#!python 1`. |
47-
| `#!python REACTPY_RECONNECT_MAX_INTERVAL` | `#!python 60000` | `#!python 10000`, `#!python 25000`, `#!python 900000` | Maximum milliseconds between client reconnection attempts. This allows setting an upper bound on how high `#!python REACTPY_RECONNECT_BACKOFF_MULTIPLIER` can increase the time between reconnection attempts. |
48-
| `#!python REACTPY_RECONNECT_MAX_RETRIES` | `#!python 150` | `#!python 0`, `#!python 5`, `#!python 300` | Maximum number of reconnection attempts before the client gives up. |
49-
| `#!python REACTPY_SESSION_MAX_AGE` | `#!python 259200` | `#!python 0`, `#!python 60`, `#!python 96000` | Maximum seconds to store ReactPy component sessions. This includes data such as `#!python *args` and `#!python **kwargs` passed into your component template tag. Use `#!python 0` to not store any session data. |
144+
---
145+
146+
### `#!python REACTPY_RECONNECT_INTERVAL`
147+
148+
**Default:** `#!python 750`
149+
150+
**Example Value(s):** `#!python 100`, `#!python 2500`, `#!python 6000`
151+
152+
Milliseconds between client reconnection attempts.
153+
154+
---
155+
156+
### `#!python REACTPY_RECONNECT_BACKOFF_MULTIPLIER`
157+
158+
**Default:** `#!python 1.25`
159+
160+
**Example Value(s):** `#!python 1`, `#!python 1.5`, `#!python 3`
161+
162+
On each reconnection attempt, the `#!python REACTPY_RECONNECT_INTERVAL` will be multiplied by this value to increase the time between attempts.
163+
164+
You can keep time between each reconnection the same by setting this to `#!python 1`.
165+
166+
---
167+
168+
### `#!python REACTPY_RECONNECT_MAX_INTERVAL`
169+
170+
**Default:** `#!python 60000`
171+
172+
**Example Value(s):** `#!python 10000`, `#!python 25000`, `#!python 900000`
173+
174+
Maximum milliseconds between client reconnection attempts.
175+
176+
This allows setting an upper bound on how high `#!python REACTPY_RECONNECT_BACKOFF_MULTIPLIER` can increase the time between reconnection attempts.
177+
178+
---
179+
180+
### `#!python REACTPY_RECONNECT_MAX_RETRIES`
181+
182+
**Default:** `#!python 150`
183+
184+
**Example Value(s):** `#!python 0`, `#!python 5`, `#!python 300`
185+
186+
Maximum number of reconnection attempts before the client gives up.
187+
188+
---
189+
190+
### `#!python REACTPY_SESSION_MAX_AGE`
191+
192+
**Default:** `#!python 259200`
193+
194+
**Example Value(s):** `#!python 0`, `#!python 60`, `#!python 96000`
195+
196+
Maximum seconds to store ReactPy component sessions.
197+
198+
ReactPy sessions include data such as `#!python *args` and `#!python **kwargs` passed into your `#!jinja {% component %}` template tag.
50199

51-
<!--config-table-end-->
200+
Use `#!python 0` to not store any session data.

docs/src/reference/template-tag.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ This template tag can be used to insert any number of ReactPy components onto yo
2727
| `#!python class` | `#!python str | None` | The HTML class to apply to the top-level component div. | `#!python None` |
2828
| `#!python key` | `#!python Any` | Force the component's root node to use a [specific key value](https://reactpy.dev/docs/guides/creating-interfaces/rendering-data/index.html#organizing-items-with-keys). Using `#!python key` within a template tag is effectively useless. | `#!python None` |
2929
| `#!python host` | `#!python str | None` | The host to use for the ReactPy connections. If unset, the host will be automatically configured.<br/>Example values include: `localhost:8000`, `example.com`, `example.com/subdir` | `#!python None` |
30-
| `#!python prerender` | `#!python str` | If `#!python "True"`, the component will pre-rendered, which enables SEO compatibility and increases perceived responsiveness. | `#!python "False"` |
30+
| `#!python prerender` | `#!python str` | If `#!python "True"`, the component will pre-rendered, which enables SEO compatibility and reduces perceived latency. | `#!python "False"` |
3131
| `#!python **kwargs` | `#!python Any` | The keyword arguments to provide to the component. | N/A |
3232

3333
<font size="4">**Returns**</font>

mkdocs.yml

+2
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ theme:
4646
- search.highlight
4747
icon:
4848
repo: fontawesome/brands/github
49+
admonition:
50+
note: fontawesome/solid/note-sticky
4951
logo: https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg
5052
favicon: https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg
5153

src/reactpy_django/templatetags/reactpy.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ def component(
5454
the host will be automatically configured. \
5555
Example values include: `localhost:8000`, `example.com`, `example.com/subdir`
5656
prerender: Configures whether to pre-render this component, which \
57-
enables SEO compatibility and increases perceived responsiveness.
57+
enables SEO compatibility and reduces perceived latency.
5858
**kwargs: The keyword arguments to provide to the component.
5959
6060
Example ::

0 commit comments

Comments
 (0)