diff --git a/docs/examples/.nav.yml b/docs/examples/.nav.yml index 48a9a524..1514751a 100644 --- a/docs/examples/.nav.yml +++ b/docs/examples/.nav.yml @@ -1,5 +1,3 @@ # `.nav.yml` is provided by https://lukasgeiter.github.io/mkdocs-awesome-nav nav: - Examples: overview.md - - icons - - HTMX: htmx diff --git a/docs/examples/htmx/.nav.yml b/docs/examples/htmx/.nav.yml deleted file mode 100644 index d71e0bf4..00000000 --- a/docs/examples/htmx/.nav.yml +++ /dev/null @@ -1,3 +0,0 @@ -# `.nav.yml` is provided by https://lukasgeiter.github.io/mkdocs-awesome-nav -nav: - - django-htmx-components: django-htmx-components.md diff --git a/docs/examples/htmx/django-htmx-components.md b/docs/examples/htmx/django-htmx-components.md deleted file mode 100644 index 6eaac997..00000000 --- a/docs/examples/htmx/django-htmx-components.md +++ /dev/null @@ -1,32 +0,0 @@ -[`django-htmx-components`](https://github.com/iwanalabs/django-htmx-components) is a set of components for use with [htmx](https://htmx.org/). - -They are meant to be copy-pasted into your project and customized to your needs. - -They're designed to be as simple as possible, so you can easily understand how they work and modify them to your needs. They have very little styling, for the same reason. - -## Installation - -1. Install [Django](https://www.djangoproject.com/) and [htmx](https://htmx.org/). -2. Install and set up [django-components](https://github.com/EmilStenstrom/django-components) -3. Create a `urls.py` file in `components/` and add the following code: - ```python - from django.urls import path - urlpatterns = [] - ``` - Then import this file in your project's `urls.py` file: - ```python - from django.urls import path, include - urlpatterns = [ - path('components/', include('components.urls')), - ] - ``` - This step simplifies adding URL patterns for your components and keeps them separate from your project's URL patterns. Then, adding a single-file component to your `components/urls.py` file is as easy as: - ```python - from django.urls import path - from components.mycomponent import MyComponent - urlpatterns = [ - path('mycomponent/', MyComponent.as_view()), - ] - ``` - It will handle requests to `/components/mycomponent/` and render the component. -4. Copy-paste the components you want to use into your `components/` folder. Add them to your `components/urls.py` file as described above. diff --git a/docs/examples/icons/.nav.yml b/docs/examples/icons/.nav.yml deleted file mode 100644 index 3296ea53..00000000 --- a/docs/examples/icons/.nav.yml +++ /dev/null @@ -1,3 +0,0 @@ -# `.nav.yml` is provided by https://lukasgeiter.github.io/mkdocs-awesome-nav -nav: - - djc-heroicons: djc-heroicons.md diff --git a/docs/examples/icons/djc-heroicons.md b/docs/examples/icons/djc-heroicons.md deleted file mode 100644 index 460ba3e2..00000000 --- a/docs/examples/icons/djc-heroicons.md +++ /dev/null @@ -1,66 +0,0 @@ -```sh -pip install djc-heroicons -``` - -[djc-heroicons](https://pypi.org/project/djc-heroicons/) adds an `Icon` component that renders an `` element with the icons from [HeroIcons.com](https://heroicons.com). This icon is accessible in Django templates as `{% component "icon" %}`. - -Use the `name` kwarg to specify the icon name: - -```django -
- Items: - -
-``` - -By default the component renders the `"outline"` variant. To render the `"solid"` variant of the icon, set kwarg `variant` to `"solid"`: - -```django -{% component "icon" name="academic-cap" variant="solid" / %} -``` - -Common changes like color, size, or stroke width can all be set directly on the component: - -```django -{% component "icon" - name="academic-cap" - size=48 - color="red" - stroke_width=1.2 -/ %} -``` - -If you need to pass attributes to the `` element, you can use the `attrs` kwarg, which accepts a dictionary: - -```django -{% component "icon" - name="academic-cap" - attrs:id="my-svg" - attrs:class="p-4 mb-3" - attrs:data-id="test-123" -/ %} -``` - -## Usage in Python - -All of the above is possible also from within Python, by importing `Icon`: - -```py -from djc_heroicons import Icon - -content = Icon.render( - kwargs={ - "name": "academic-cap", - "variant": "solid", - "size": 48, - "attrs": { - "id": "my-svg", - "class": "p-4 mb-3", - }, - }, -) -``` diff --git a/docs/examples/overview.md b/docs/examples/overview.md index b7705bd3..a7ded4fa 100644 --- a/docs/examples/overview.md +++ b/docs/examples/overview.md @@ -7,8 +7,8 @@ If you have components that would be useful to others, open a pull request to ad ### Icons -- [djc-heroicons](./icons/djc-heroicons.md) +- [djc-heroicons](https://pypi.org/project/djc-heroicons/) - Icons from HeroIcons.com for django-components. ### HTMX -- [django-htmx-components](./htmx/django-htmx-components.md) +- [`django-htmx-components`](https://github.com/iwanalabs/django-htmx-components) - A set of components for use with [htmx](https://htmx.org/).