Jelajahi Sumber

Add headless userbar setup

Sage Abdullah 4 bulan lalu
induk
melakukan
03bd5bc327

+ 12 - 0
bakerydemo/base/wagtail_hooks.py

@@ -35,6 +35,18 @@ def register_icons(icons):
 class CustomAccessibilityItem(AccessibilityItem):
     axe_run_only = None
 
+    def get_axe_spec(self, request):
+        spec = super().get_axe_spec(request)
+        spec["allowedOrigins"] = [
+            "<unsafe_all_origins>",
+            # Can also use specific origins like the following, but a browser
+            # warning will be shown in the console because Axe tries each origin
+            # in every layer.
+            # "http://localhost:3000",
+            # "http://127.0.0.1:8000",
+        ]
+        return spec
+
 
 @hooks.register("construct_wagtail_userbar")
 def replace_userbar_accessibility_item(request, items, page):

+ 21 - 0
bakerydemo/headless.py

@@ -1,4 +1,9 @@
+from django.views.generic import TemplateView
+from wagtail.admin.userbar import (
+    Userbar,
+)
 from wagtail_headless_preview.models import HeadlessMixin
+from wagtail_headless_preview.settings import headless_preview_settings
 
 
 class CustomHeadlessMixin(HeadlessMixin):
@@ -11,3 +16,19 @@ class CustomHeadlessMixin(HeadlessMixin):
         if getattr(request, "is_preview", False):
             return f"{root_url}/api/draft"
         return root_url
+
+
+class UserbarView(TemplateView):
+    template_name = Userbar.template_name
+    http_method_names = ["get"]
+
+    def dispatch(self, request, *args, **kwargs):
+        response = super().dispatch(request, *args, **kwargs)
+        client_url = headless_preview_settings.CLIENT_URLS["default"]
+        response["Access-Control-Allow-Origin"] = client_url
+        return response
+
+    def get_context_data(self, **kwargs):
+        return Userbar(object=None, position="bottom-left").get_context_data(
+            super().get_context_data(request=self.request, **kwargs)
+        )

+ 20 - 0
bakerydemo/templates/wagtail_headless_preview/preview.html

@@ -0,0 +1,20 @@
+{% load wagtailuserbar %}
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <style>
+            body, html {
+                margin: 0; padding: 0; height: 100%; overflow: hidden;
+            }
+        </style>
+    </head>
+    <body>
+        <iframe id="preview-iframe" title="Headless preview" src="{{ preview_url }}" width="100%" height="100%" style="border: none;"></iframe>
+        {% comment %}
+            Include the wagtail userbar so we can run Axe in the intermediate
+            iframe, but hide it so it's invisible.
+        {% endcomment %}
+        <div hidden>{% wagtailuserbar %}</div>
+    </body>
+</html>

+ 2 - 0
bakerydemo/urls.py

@@ -8,6 +8,7 @@ from wagtail.contrib.sitemaps.views import sitemap
 from wagtail.documents import urls as wagtaildocs_urls
 from wagtail.images.views.serve import ServeView
 
+from bakerydemo.headless import UserbarView
 from bakerydemo.search import views as search_views
 
 from .api import api_router
@@ -15,6 +16,7 @@ from .api import api_router
 urlpatterns = [
     path("django-admin/", admin.site.urls),
     path("admin/", include(wagtailadmin_urls)),
+    path("userbar/", UserbarView.as_view(), name="userbar"),
     path("documents/", include(wagtaildocs_urls)),
     re_path(
         r"^images/([^/]*)/(\d*)/([^/]*)/[^/]*$",