docs: Syntax highlighting for mkdocs (#984)

* feat:forward context processors variables in context in ISOLATED mode

	provide context_processors_data property to Component to access those variables in Component

* refactor: internalize RequestContext and pass HttpRequest internally

* docs: document HttpRequest and context processors

* docs: use djc_py code blocks for component definitions

---------

Co-authored-by: Lilian Durey <dureylilian@gmail.com>
This commit is contained in:
Juro Oravec 2025-02-20 11:47:14 +01:00 committed by GitHub
parent 1f7e28db22
commit 314ec77d3d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 142 additions and 76 deletions

View file

@ -105,7 +105,7 @@ For live examples, see the [Community examples](../../overview/community.md#comm
It's also a good idea to have a common prefix for your components, so they can be easily distinguished from users' components. In the example below, we use the prefix `my_` / `My`.
```py
```djc_py
from typing import Dict, NotRequired, Optional, Tuple, TypedDict
from django_components import Component, SlotFunc, register, types

View file

@ -106,7 +106,7 @@ Then navigate to these URLs:
### 1. Define document HTML
```py title="[root]/components/demo.py"
```djc_py title="[root]/components/demo.py"
from django_components import Component, types
# HTML into which a fragment will be loaded using HTMX
@ -141,7 +141,7 @@ class MyPage(Component):
### 2. Define fragment HTML
```py title="[root]/components/demo.py"
```djc_py title="[root]/components/demo.py"
class Frag(Component):
def get(self, request):
return self.render_to_response(
@ -184,7 +184,7 @@ urlpatterns = [
### 1. Define document HTML
```py title="[root]/components/demo.py"
```djc_py title="[root]/components/demo.py"
from django_components import Component, types
# HTML into which a fragment will be loaded using AlpineJS
@ -225,7 +225,7 @@ class MyPage(Component):
### 2. Define fragment HTML
```py title="[root]/components/demo.py"
```djc_py title="[root]/components/demo.py"
class Frag(Component):
def get(self, request):
# IMPORTANT: Don't forget `type="fragment"`
@ -281,7 +281,7 @@ urlpatterns = [
### 1. Define document HTML
```py title="[root]/components/demo.py"
```djc_py title="[root]/components/demo.py"
from django_components import Component, types
# HTML into which a fragment will be loaded using JS
@ -321,7 +321,7 @@ class MyPage(Component):
### 2. Define fragment HTML
```py title="[root]/components/demo.py"
```djc_py title="[root]/components/demo.py"
class Frag(Component):
def get(self, request):
return self.render_to_response(

View file

@ -107,7 +107,7 @@ have all the keys that were passed to the `provide` tag.
## Full example
```py
```djc_py
@register("child")
class ChildComponent(Component):
template = """

View file

@ -27,7 +27,7 @@ the locations by inserting following Django template tags:
So if you have a component with JS and CSS:
```python
```djc_py
from django_components import Component, types
class MyButton(Component):

View file

@ -85,9 +85,9 @@ This has two modes:
Consider this example:
```python
```djc_py
class Outer(Component):
template = \"\"\"
template = """
<div>
{% component "inner" %}
{% fill "content" %}
@ -95,7 +95,7 @@ This has two modes:
{% endfill %}
{% endcomponent %}
</div>
\"\"\"
"""
```
- `"django"` - `my_var` has access to data from `get_context_data()` of both `Inner` and `Outer`.
@ -108,7 +108,7 @@ This has two modes:
Given this template:
```python
```djc_py
@register("root_comp")
class RootComp(Component):
template = """
@ -148,7 +148,7 @@ all the data defined in the outer layers, like the `{% with %}` tag.
Given this template:
```python
```djc_py
class RootComp(Component):
template = """
{% with cheese="feta" %}

View file

@ -19,7 +19,7 @@ Components can now be used as views:
Here's an example of a calendar component defined as a view:
```python
```djc_py
# In a file called [project root]/components/calendar.py
from django_components import Component, ComponentView, register

View file

@ -9,7 +9,7 @@ Components can be rendered outside of Django templates, calling them as regular
The component class defines `render` and `render_to_response` class methods. These methods accept positional args, kwargs, and slots, offering the same flexibility as the `{% component %}` tag:
```py
```djc_py
class SimpleComponent(Component):
template = """
{% load component_tags %}

View file

@ -28,7 +28,7 @@ HTML / JS / CSS with a component:
However, you can freely mix these for different languages:
```py
```djc_py
class MyTable(Component):
template: types.django_html = """
<div class="welcome">

View file

@ -256,7 +256,7 @@ Then:
## Full example for `html_attrs`
```py
```djc_py
@register("my_comp")
class MyComp(Component):
template: t.django_html = """

View file

@ -78,7 +78,7 @@ rendered = template.render(RequestContext(request, {}))
The data from context processors is automatically available within the component's template.
```python
```djc_py
class MyComponent(Component):
template = """
<div>

View file

@ -9,7 +9,7 @@ For example, here's the calendar component from
the [Getting started](../../getting_started/your_first_component.md) tutorial,
defined in a single file:
```python title="[project root]/components/calendar.py"
```djc_py title="[project root]/components/calendar.py"
from django_components import Component, register, types
@register("calendar")

View file

@ -469,7 +469,7 @@ _Added in version 0.76_:
Consider a component with slot(s). This component may do some processing on the inputs, and then use the processed variable in the slot's default template:
```py
```djc_py
@register("my_comp")
class MyComp(Component):
template = """
@ -498,7 +498,7 @@ Using scoped slots consists of two steps:
To pass the data to the `slot` tag, simply pass them as keyword attributes (`key=value`):
```py
```djc_py
@register("my_comp")
class MyComp(Component):
template = """
@ -649,14 +649,14 @@ So it's possible to define a `name` key on a dictionary, and then spread that on
You can dynamically pass all slots to a child component. This is similar to
[passing all slots in Vue](https://vue-land.github.io/faq/forwarding-slots#passing-all-slots):
```py
```djc_py
class MyTable(Component):
def get_context_data(self, *args, **kwargs):
return {
"slots": self.input.slots,
}
template: """
template = """
<div>
{% component "child" %}
{% for slot_name in slots %}

View file

@ -25,7 +25,7 @@ inheritance follows these rules:
For example:
```python
```djc_py
class BaseCard(Component):
template = """
<div class="card">
@ -37,7 +37,7 @@ class BaseCard(Component):
border: 1px solid gray;
}
"""
js = "console.log('Base card loaded');"
js = """console.log('Base card loaded');"""
# This class overrides parent's template, but inherits CSS and JS
class SpecialCard(BaseCard):
@ -94,7 +94,7 @@ All other attributes and methods (including the [`Component.View`](../../referen
For example:
```python
```djc_py
class BaseForm(Component):
template = """
<form>

View file

@ -202,7 +202,7 @@ of HTML attributes (usually called `attrs`) to pass to the underlying template.
In such cases, we may want to define some HTML attributes statically, and other dynamically.
But for that, we need to define this dictionary on Python side:
```py
```djc_py
@register("my_comp")
class MyComp(Component):
template = """
@ -229,7 +229,7 @@ as component kwargs, so we can keep all the relevant information in the template
we prefix the key with the name of the dict and `:`. So key `class` of input `attrs` becomes
`attrs:class`. And our example becomes:
```py
```djc_py
@register("my_comp")
class MyComp(Component):
template = """