diff --git a/docs/img/drf-m-api-root.png b/docs/img/drf-m-api-root.png new file mode 100644 index 000000000..02a756287 Binary files /dev/null and b/docs/img/drf-m-api-root.png differ diff --git a/docs/img/drf-m-detail-view.png b/docs/img/drf-m-detail-view.png new file mode 100644 index 000000000..33e3515d8 Binary files /dev/null and b/docs/img/drf-m-detail-view.png differ diff --git a/docs/img/drf-m-list-view.png b/docs/img/drf-m-list-view.png new file mode 100644 index 000000000..a7771957d Binary files /dev/null and b/docs/img/drf-m-list-view.png differ diff --git a/docs/img/drf-r-api-root.png b/docs/img/drf-r-api-root.png new file mode 100644 index 000000000..5704cc350 Binary files /dev/null and b/docs/img/drf-r-api-root.png differ diff --git a/docs/img/drf-r-detail-view.png b/docs/img/drf-r-detail-view.png new file mode 100644 index 000000000..2959c7201 Binary files /dev/null and b/docs/img/drf-r-detail-view.png differ diff --git a/docs/img/drf-r-list-view.png b/docs/img/drf-r-list-view.png new file mode 100644 index 000000000..1930b5dc0 Binary files /dev/null and b/docs/img/drf-r-list-view.png differ diff --git a/docs/img/drf-rw-api-root.png b/docs/img/drf-rw-api-root.png new file mode 100644 index 000000000..15b498b9b Binary files /dev/null and b/docs/img/drf-rw-api-root.png differ diff --git a/docs/img/drf-rw-detail-view.png b/docs/img/drf-rw-detail-view.png new file mode 100644 index 000000000..6e821acda Binary files /dev/null and b/docs/img/drf-rw-detail-view.png differ diff --git a/docs/img/drf-rw-list-view.png b/docs/img/drf-rw-list-view.png new file mode 100644 index 000000000..625b5c7c9 Binary files /dev/null and b/docs/img/drf-rw-list-view.png differ diff --git a/docs/topics/browsable-api.md b/docs/topics/browsable-api.md index ef3ba2f3f..8cf530b7a 100644 --- a/docs/topics/browsable-api.md +++ b/docs/topics/browsable-api.md @@ -81,7 +81,7 @@ For more specific CSS tweaks than simply overriding the default bootstrap theme ### Third party packages for customization -You can use a third party package for customization, rather than doing it by yourself. Here is 2 packages for customizing the API: +You can use a third party package for customization, rather than doing it by yourself. Here is 3 packages for customizing the API: * [drf-restwind][drf-restwind] - a modern re-imagining of the Django REST Framework utilizes TailwindCSS and DaisyUI to provide flexible and customizable UI solutions with minimal coding effort. * [drf-redesign][drf-redesign] - A package for customizing the API using Bootstrap 5. Modern and sleek design, it comes with the support for dark mode. @@ -89,11 +89,11 @@ You can use a third party package for customization, rather than doing it by you --- -![API Root](https://github.com/user-attachments/assets/5197b47d-8bb6-426b-a62b-232cfc34198d) +![API Root][drf-rw-api-root] -![List View](https://github.com/user-attachments/assets/7665d4c8-e57a-4337-93af-4bb974a4f2d4) +![List View][drf-rw-list-view] -![Detail View](https://github.com/user-attachments/assets/76bddab0-8747-42ae-b79b-b3be7802a729) +![Detail View][drf-rw-detail-view] *Screenshots of the drf-restwind* @@ -101,16 +101,26 @@ You can use a third party package for customization, rather than doing it by you --- -![Root](https://github.com/user-attachments/assets/7b85732d-c5eb-4c6a-a867-ba9b8d39890a) +![API Root][drf-r-api-root] -![List](https://github.com/user-attachments/assets/3a6b451a-7575-416f-a67f-ff334e70e262) +![List View][drf-r-list-view] -![Detail](https://github.com/user-attachments/assets/76e6c7f3-aa33-4534-882c-ad6619fd660b) +![Detail View][drf-r-detail-view] *Screenshot of the drf-redesign* --- +![API Root][drf-m-api-root] + +![List View][drf-m-api-root] + +![Detail View][drf-m-api-root] + +*Screenshot of the drf-material* + +--- + ### Blocks All of the blocks available in the browsable API base template that can be used in your `api.html`. @@ -208,5 +218,15 @@ There are [a variety of packages for autocomplete widgets][autocomplete-packages [bcomponentsnav]: https://getbootstrap.com/2.3.2/components.html#navbar [autocomplete-packages]: https://www.djangopackages.com/grids/g/auto-complete/ [django-autocomplete-light]: https://github.com/yourlabs/django-autocomplete-light +[drf-restwind]: https://github.com/youzarsiph/drf-restwind +[drf-rw-api-root]: ../img/drf-rw-api-root.png +[drf-rw-list-view]: ../img/drf-rw-list-view.png +[drf-rw-detail-view]: ../img/drf-rw-detail-view.png [drf-redesign]: https://github.com/youzarsiph/drf-redesign +[drf-r-api-root]: ../img/drf-r-api-root.png +[drf-r-list-view]: ../img/drf-r-list-view.png +[drf-r-detail-view]: ../img/drf-r-detail-view.png [drf-material]: https://github.com/youzarsiph/drf-material +[drf-m-api-root]: ../img/drf-m-api-root.png +[drf-m-list-view]: ../img/drf-m-list-view.png +[drf-m-detail-view]: ../img/drf-m-detail-view.png