Add Algolia search; replace vendor libraries with CDN; add GTM tag to…

… settings/env

etc/dev.env.dist

@@ -19,3 +19,11 @@ AWS_S3_ACCESS_KEY_ID=
 AWS_S3_REGION_NAME=
 AWS_S3_SECRET_ACCESS_KEY=
 AWS_STORAGE_BUCKET_NAME=
+
+# Agolia search
+ALGOLIA_APPLICATION_ID=
+ALGOLIA_API_KEY=
+ALGOLIA_SEARCH_KEY=
+
+# Google GTM Tag
+GOOGLE_GTM_TAG=

reportdb/core/context_managers.py

@@ -0,0 +1,17 @@
+from typing import Any
+
+from django.conf import settings
+from django.http import HttpRequest
+
+
+def google_tag_manager(_: HttpRequest) -> dict[str, Any]:
+    """Add the Google Tag Manager ID to the context."""
+    return {"GOOGLE_GTM_TAG": settings.GOOGLE_GTM_TAG}
+
+
+def algolia_search_key(_: HttpRequest) -> dict[str, Any]:
+    """Add the Algolia search key to the context."""
+    return {
+        "ALGOLIA_APPLICATION_ID": settings.ALGOLIA_APPLICATION_ID,
+        "ALGOLIA_SEARCH_KEY": settings.ALGOLIA_SEARCH_KEY,
+    }

reportdb/db/context_managers.py

@@ -1,7 +1,11 @@
+from typing import Any
+
+from django.http import HttpRequest
+
 from db.models import Incident
 
 
-def task_count(request):
+def task_count(request: HttpRequest) -> dict[str, Any]:
     """Add pending task counts to the context for use in the sidebar."""
     context = {}
 

reportdb/db/index.py

@@ -0,0 +1,29 @@
+from algoliasearch_django import AlgoliaIndex
+from algoliasearch_django.decorators import register
+
+from .models import Incident
+
+
+@register(Incident)
+class IncidentIndex(AlgoliaIndex):
+    fields = (
+        "date",
+        "cave",
+        "get_state_display",
+        "county",
+        "get_country_display",
+        "incident_report",
+        "incident_analysis",
+        "incident_summary",
+    )
+
+    settings = {
+        "searchableAttributes": [
+            "cave",
+            "get_state_display",
+            "county",
+            "get_country_display",
+            "incident_report",
+            "incident_analysis",
+        ],
+    }

reportdb/db/templates/search.html

@@ -0,0 +1,49 @@
+{% extends "base.html" %}
+
+{% block main_content_class %}smaller-container{% endblock %}
+
+{% block header_scripts %}
+  <!--suppress JSUnresolvedReference -->
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js" integrity="sha256-1QNshz86RqXe/qsCBldsUu13eAX6n/O98uubKQs87UI=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js" integrity="sha256-TW7D3X/i/W+RUgEeDppEnFT2ixv5lzplKH0c58D92dY=" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/satellite-min.css" integrity="sha256-p/rGN4RGy6EDumyxF9t7LKxWGg6/MZfGhJM/asKkqvA=" crossorigin="anonymous">
+{% endblock %}
+
+{% block content %}
+  <h1 class="page-header">Search</h1>
+
+  <div class="mt-4 ais-InstantSearch">
+    <div id="searchbox"></div>
+    <div id="hits"></div>
+    <div id="pagination"></div>
+  </div>
+
+  <script type="text/javascript">
+    const searchClient = algoliasearch('{{ ALGOLIA_APPLICATION_ID }}', '{{ ALGOLIA_SEARCH_KEY }}');
+
+    const search = instantsearch({
+      indexName: 'Incident',
+      searchClient,
+    });
+
+    search.addWidgets([
+      instantsearch.widgets.searchBox({
+        container: '#searchbox',
+      }),
+
+      instantsearch.widgets.hits({
+        container: '#hits',
+        templates: {
+          item: (hit, { html, components }) => html`
+            <div>
+              <h1>${components.Highlight({hit, attribute: "cave"})}</h1>
+              <p>${components.Highlight({hit, attribute: "incident_summary"})}</p>
+            </div>
+          `,
+        },
+      })
+    ]);
+
+    search.start();
+  </script>
+{% endblock %}

reportdb/db/urls.py

@@ -8,6 +8,7 @@
     path("", views.Index.as_view(), name="index"),
     path("about/", views.About.as_view(), name="about"),
     path("help/", views.Help.as_view(), name="help"),
+    path("search/", views.Search.as_view(), name="search"),
     path("pub/<int:publication_id>/", views.PublicationDetail.as_view(), name="publication_detail"),  # noqa: E501
     path("list/<query>/", views.IncidentList.as_view(), name="incident_list"),  # noqa: E501
     path("i/<int:pk>/", views.IncidentDetail.as_view(), name="incident_detail"),

reportdb/db/views.py

@@ -654,3 +654,7 @@ class IncidentRedirect(View):
     def get(self, request, *args, **kwargs):
         path = self.kwargs["path"]
         return redirect(f"/i/{path}/")
+
+
+class Search(TemplateView):
+    template_name = "search.html"

reportdb/reportdb/settings.py

@@ -42,6 +42,7 @@
     "debug_toolbar",
     "django_htmx",
     "active_link",
+    "algoliasearch_django",
     "django.contrib.admin",
     "django.contrib.auth",
     "django.contrib.contenttypes",
@@ -78,6 +79,8 @@
                 "django.template.context_processors.request",
                 "django.contrib.auth.context_processors.auth",
                 "django.contrib.messages.context_processors.messages",
+                "core.context_managers.google_tag_manager",
+                "core.context_managers.algolia_search_key",
                 "db.context_managers.task_count",
             ],
         },
@@ -210,3 +213,18 @@
     "10.0.2.2",
     "192.168.65.1",
 ]
+
+
+# Agolia search
+ALGOLIA_APPLICATION_ID = os.environ.get("ALGOLIA_APPLICATION_ID", "")
+ALGOLIA_SEARCH_KEY = os.environ.get("ALGOLIA_SEARCH_KEY", "")
+ALGOLIA_API_KEY = os.environ.get("ALGOLIA_API_KEY", "")
+
+ALGOLIA = {
+    "APPLICATION_ID": ALGOLIA_APPLICATION_ID,
+    "API_KEY": ALGOLIA_API_KEY,
+}
+
+
+# Google Tag Manager
+GOOGLE_GTM_TAG = os.environ.get("GOOGLE_GTM_TAG", "")