Switch to mkdocs material theme for documentation

.gitattributes

@@ -0,0 +1 @@
+docs/theme/src/drf-logos.fig filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1,7 +1,6 @@
 *.pyc
 *.db
 *~
-.*
 *.py.bak
 
 
@@ -14,6 +13,8 @@
 /env/
 MANIFEST
 coverage.*
+.coverage
+.cache/
 
 !.github
 !.gitignore

.readthedocs.yaml

@@ -0,0 +1,19 @@
+# Read the Docs configuration file
+# See https://docs.readthedocs.io/en/stable/config-file/v2.html for details
+
+# Required
+version: 2
+
+# Set the OS, Python version, and other tools you might need
+build:
+  os: ubuntu-24.04
+  tools:
+    python: "3.13"
+  jobs:
+    install:
+      - pip install --upgrade pip
+      - pip install -e . --group docs
+
+# Build documentation with Mkdocs
+mkdocs:
+   configuration: mkdocs.yml

docs/index.md

@@ -17,7 +17,7 @@
 }
 </style>
 
-<p class="badges" height=20px>
+<div class="badges">
     <iframe src="https://ghbtns.com/github-btn.html?user=encode&amp;repo=django-rest-framework&amp;type=watch&amp;count=true" class="github-star-button" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
 
     <a href="https://github.com/encode/django-rest-framework/actions/workflows/main.yml">
@@ -27,11 +27,10 @@
     <a href="https://pypi.org/project/djangorestframework/">
         <img src="https://img.shields.io/pypi/v/djangorestframework.svg" class="status-badge">
     </a>
-</p>
+</div>
 
 ---
 
-<p>
 <h1 style="position: absolute;
     width: 1px;
     height: 1px;
@@ -41,8 +40,8 @@
     clip: rect(0,0,0,0);
     border: 0;">Django REST Framework</h1>
 
-<img alt="Django REST Framework" title="Logo by Jake 'Sid' Smith" src="img/logo.png" width="600px" style="display: block; margin: 0 auto 0 auto">
-</p>
+![Django REST Framework](img/logo-light.png#only-light)
+![Django REST Framework](img/logo-dark.png#only-dark)
 
 Django REST framework is a powerful and flexible toolkit for building Web APIs.
 
@@ -79,27 +78,35 @@ The following packages are optional:
 
 Install using `pip`, including any optional packages you want...
 
-    pip install djangorestframework
-    pip install markdown       # Markdown support for the browsable API.
-    pip install django-filter  # Filtering support
+```bash
+pip install djangorestframework
+pip install markdown       # Markdown support for the browsable API.
+pip install django-filter  # Filtering support
+```
 
 ...or clone the project from github.
 
-    git clone https://github.com/encode/django-rest-framework
+```bash
+git clone https://github.com/encode/django-rest-framework
+```
 
 Add `'rest_framework'` to your `INSTALLED_APPS` setting.
 
-    INSTALLED_APPS = [
-        ...
-        'rest_framework',
-    ]
+```python
+INSTALLED_APPS = [
+    # ...
+    "rest_framework",
+]
+```
 
 If you're intending to use the browsable API you'll probably also want to add REST framework's login and logout views.  Add the following to your root `urls.py` file.
 
-    urlpatterns = [
-        ...
-        path('api-auth/', include('rest_framework.urls'))
-    ]
+```python
+urlpatterns = [
+    # ...
+    path("api-auth/", include("rest_framework.urls"))
+]
+```
 
 Note that the URL path can be whatever you want.
 
@@ -111,44 +118,51 @@ We'll create a read-write API for accessing information on the users of our proj
 
 Any global settings for a REST framework API are kept in a single configuration dictionary named `REST_FRAMEWORK`.  Start off by adding the following to your `settings.py` module:
 
-    REST_FRAMEWORK = {
-        # Use Django's standard `django.contrib.auth` permissions,
-        # or allow read-only access for unauthenticated users.
-        'DEFAULT_PERMISSION_CLASSES': [
-            'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
-        ]
-    }
+```python
+REST_FRAMEWORK = {
+    # Use Django's standard `django.contrib.auth` permissions,
+    # or allow read-only access for unauthenticated users.
+    "DEFAULT_PERMISSION_CLASSES": [
+        "rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly"
+    ]
+}
+```
 
 Don't forget to make sure you've also added `rest_framework` to your `INSTALLED_APPS`.
 
 We're ready to create our API now.
 Here's our project's root `urls.py` module:
 
-    from django.urls import path, include
-    from django.contrib.auth.models import User
-    from rest_framework import routers, serializers, viewsets
-
-    # Serializers define the API representation.
-    class UserSerializer(serializers.HyperlinkedModelSerializer):
-        class Meta:
-            model = User
-            fields = ['url', 'username', 'email', 'is_staff']
-
-    # ViewSets define the view behavior.
-    class UserViewSet(viewsets.ModelViewSet):
-        queryset = User.objects.all()
-        serializer_class = UserSerializer
-
-    # Routers provide an easy way of automatically determining the URL conf.
-    router = routers.DefaultRouter()
-    router.register(r'users', UserViewSet)
-
-    # Wire up our API using automatic URL routing.
-    # Additionally, we include login URLs for the browsable API.
-    urlpatterns = [
-        path('', include(router.urls)),
-        path('api-auth/', include('rest_framework.urls', namespace='rest_framework'))
-    ]
+```python
+from django.urls import path, include
+from django.contrib.auth.models import User
+from rest_framework import routers, serializers, viewsets
+
+
+# Serializers define the API representation.
+class UserSerializer(serializers.HyperlinkedModelSerializer):
+    class Meta:
+        model = User
+        fields = ["url", "username", "email", "is_staff"]
+
+
+# ViewSets define the view behavior.
+class UserViewSet(viewsets.ModelViewSet):
+    queryset = User.objects.all()
+    serializer_class = UserSerializer
+
+
+# Routers provide an easy way of automatically determining the URL conf.
+router = routers.DefaultRouter()
+router.register(r"users", UserViewSet)
+
+# Wire up our API using automatic URL routing.
+# Additionally, we include login URLs for the browsable API.
+urlpatterns = [
+    path("", include(router.urls)),
+    path("api-auth/", include("rest_framework.urls", namespace="rest_framework")),
+]
+```
 
 You can now open the API in your browser at [http://127.0.0.1:8000/](http://127.0.0.1:8000/), and view your new 'users' API. If you use the login control in the top right corner you'll also be able to add, create and delete users from the system.
 

docs/theme/main.html

@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% block scripts %}
+    {{ super() }}
+    <script>
+        document$.subscribe(function() {
+            document.querySelectorAll('pre code').forEach(code => {
+                code.parentElement.classList.add('prettyprint', 'well');
+            });
+            prettyPrint();
+        });
+    </script>
+{% endblock %}

docs/theme/src/README.md

@@ -0,0 +1,3 @@
+# DRF logos
+
+This folder contains the source file for the DRF logos as Figma file.

docs/theme/stylesheets/extra.css

@@ -0,0 +1,82 @@
+:root  > * {
+  /* primary */
+  --md-primary-fg-color: #2c2c2c;
+  --md-primary-fg-color--light: #a8a8a8;
+  --md-primary-fg-color--dark: #181818;
+  /* accent */
+  --md-accent-fg-color: #c50d0d;
+  --md-accent-fg-color--light: #ff8f8f;
+  --md-accent-fg-color--dark: #A30000;
+
+  /* Style links */
+  --md-typeset-a-color: var(--md-typeset-color);
+}
+
+/* Dark theme customisation */
+[data-md-color-scheme="slate"]
+{
+  --md-accent-fg-color--dark: #F25757;
+}
+
+.md-header {
+  border-top: 5px solid #A30000;
+}
+
+body hr {
+  border-top: 1px dotted var(--md-accent-fg-color--dark);
+}
+
+.badges {
+  display: flex;
+  justify-content: end;
+  gap: 8px;
+}
+
+/* Cutesy quote styling */
+[dir="ltr"] .md-typeset blockquote {
+  font-family: Georgia, serif;
+  font-size: 18px;
+  font-style: italic;
+  margin: 0.25em 0;
+  padding: 0.25em 40px;
+  line-height: 1.45;
+  position: relative;
+  color: var(--md-typeset-color);
+  border-left: none;
+}
+
+[dir="ltr"] .md-typeset blockquote:before {
+  display: block;
+  content: "\201C";
+  font-size: 80px;
+  position: absolute;
+  left: -10px;
+  top: -20px;
+  color: #7a7a7a;
+}
+
+[dir="ltr"] .md-typeset blockquote p:last-child {
+  color: #999999;
+  font-size: 14px;
+  display: block;
+  margin-top: 5px;
+}
+
+.md-typeset a {
+  color: var(--md-accent-fg-color--dark);
+}
+
+/* Replacement for `body { background-attachment: fixed; }`, which
+   has performance issues when scrolling on large displays. */
+body::before {
+    content: ' ';
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: #f8f8f8;
+    background: url(../img/grid.png) repeat-x;
+    will-change: transform;
+    z-index: -1;
+}

docs_theme/css/prettify.css → docs/theme/stylesheets/prettify.css

@@ -7,11 +7,16 @@
 .typ, .atn, .dec, .var { color: teal; }
 .pln { color: #48484c; }
 
-.prettyprint {
-  padding: 8px;
-  background-color: #f7f7f9;
-  border: 1px solid #e1e1e8;
+[data-md-color-scheme="slate"]
+{
+  .com { color: #687272; }
+  .lit { color: #2481c7; }
+  .str, .atv { color: #e37e8e;; }
+  .kwd, .prettyprint .tag { color: #6e8ee1; }
+  .typ, .atn, .dec, .var { color: #05abab; }
+  .pln { color: #d3d3dc; }
 }
+
 .prettyprint.linenums {
   -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
      -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;

docs/tutorial/1-serialization.md

@@ -11,12 +11,23 @@ The tutorial is fairly in-depth, so you should probably get a cookie and a cup o
 
 ## Setting up a new environment
 
-Before we do anything else we'll create a new virtual environment, using [venv]. This will make sure our package configuration is kept nicely isolated from any other projects we're working on.
+Before we do anything else we'll create a new virtual environment called `.venv`, using [venv]. This will make sure our package configuration is kept nicely isolated from any other projects we're working on.
 
-```bash
-python3 -m venv env
-source env/bin/activate   # On Windows use `env\Scripts\activate`
-```
+=== ":fontawesome-brands-linux: Linux, :fontawesome-brands-apple: macOS"
+
+    ```bash
+    python3 -m venv .venv
+    source .venv/bin/activate
+    ```
+
+=== ":fontawesome-brands-windows: Windows"
+
+    If you use Bash for Windows
+
+    ```bash
+    python3 -m venv .venv
+    source .venv\Scripts\activate
+    ```
 
 Now that we're inside a virtual environment, we can install our package requirements.