Improve Lucide loading and error recovery

portmap/core/forms.py

@@ -4,11 +4,10 @@
 
 from .models import User, UseCaseFeedback
 
-# The included RadioSelect widget wraps the input element inside of a label,
-# which makes it difficult to style the label based on the input's checked state.
-# This custom widget structures the label and input as siblings instead.
-class UnwrappedRadioSelect(forms.RadioSelect):
-    option_template_name = "forms/widgets/unwrapped_radio_option.html"
+# Renders the radio option as a Lucide icon
+class IconRadioSelect(forms.RadioSelect):
+    option_template_name = "forms/widgets/icon_radio_option.html"
+
 
 class CustomFormRenderer(TemplatesSetting):
     form_template_name = "forms/custom.html"
@@ -33,6 +32,7 @@ class Meta:
         model = User
         fields = ("first_name", "last_name")
 
+
 class QueryIndexForm(forms.Form):
     data_type_choices = (('error', 'data missing'))
     datatype = forms.ChoiceField(label="Select Type to transfer", choices=data_type_choices, required=True)
@@ -46,14 +46,16 @@ def __init__(self, data, datatypes=None):
         self.fields['datadest'].disabled = True
         self.label_suffix = ' '
 
+
 class ArticleFeedbackForm(forms.Form):
-    CHOICES = [('happy', 'Yes'),
-               ('sad', 'No')]
-    reaction = forms.ChoiceField(label="Did this article help?", widget=UnwrappedRadioSelect, choices=CHOICES)
+    CHOICES = [('happy', 'smile'),
+               ('sad', 'frown')]
+    reaction = forms.ChoiceField(label="Did this article help?", widget=IconRadioSelect, choices=CHOICES)
     explanation = forms.CharField(widget=forms.Textarea,
                                   required=False,
                                   label="What is your use case? What would make this article better?")
 
+
 class UseCaseFeedbackForm(forms.ModelForm):
     class Meta:
         model = UseCaseFeedback

static/js/article.js

@@ -1,28 +1,10 @@
-/* global lucide */
-
 (function () {
-  function lucideElement(name) {
-    const element = document.createElement('i');
-    element.setAttribute('data-lucide', name);
-    return element;
-  }
-
   document.addEventListener('DOMContentLoaded', function () {
     const happyButton =
       document.getElementById('id_reaction_0').nextElementSibling;
     const sadButton =
       document.getElementById('id_reaction_1').nextElementSibling;
 
-    // replaces "yes" string with smily face
-    happyButton.innerHTML = '';
-    happyButton.appendChild(lucideElement('smile'));
-
-    // replaces "no" with frown
-    sadButton.innerHTML = '';
-    sadButton.appendChild(lucideElement('frown'));
-
-    lucide.createIcons();
-
     const explanationText = document.getElementById('id_explanation');
     explanationText.hidden = true;
     const explanationLabel =

templates/_base.html

@@ -10,7 +10,24 @@
 <title>{% block full_title %}{% block title %}{% endblock title %} | {{ PROJECT_NAME }}{% endblock full_title %}</title>
 <meta name="description" content="Find help articles about moving your digital stuff.">
 <link rel="stylesheet" href="{% static 'css/base.css' %}">
+<script src="https://unpkg.com/lucide@latest" async id="lucide-script"></script>
 <script src="{% static 'js/htmx.min.js' %}" defer></script>
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        // The lucide script is loaded asynchronously.
+        // If it's already loaded, initialize the icons.
+        if (window.lucide) {
+            window.lucide.createIcons();
+            return;
+        }
+        // Otherwise, wait for it to finish loading and *then* initialize.
+        document.getElementById('lucide-script').addEventListener('load', () => {
+            if (window.lucide) {
+                window.lucide.createIcons();
+            }
+        });
+    });
+</script>
 {% block header %}{% endblock header %}
 <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicon-32x32.png' %}">
 <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicon-16x16.png' %}">

templates/core/article.html

@@ -1,9 +1,6 @@
 {% extends '_base.html' %}
 {% load static %}
 {% load i18n %}
-{% block header %}
-<script src="https://unpkg.com/lucide@latest"></script>
-{% endblock header %}
 {% block full_title %}{{ article.title }}{% endblock full_title %}
 {% block content %}
 <section class="page page--wide">

templates/core/article_list.html

@@ -3,7 +3,6 @@
 {% load i18n %}
 {% block full_title %}{{ PROJECT_NAME }}{% endblock full_title %}
 {% block content %}
-<script src="https://unpkg.com/lucide@latest"></script>
 <section class="page page--wide">
     {% include "includes/nav-bar.html" with route="articles" %}
     {% include "includes/messages.html" %}
@@ -26,7 +25,4 @@
     </form>
 {% endif %}
 </section>
-<script>
-    lucide.createIcons();
-</script>
 {% endblock content %}

templates/core/index.html

@@ -2,9 +2,6 @@
 {% load static %}
 {% load i18n %}
 {% block full_title %}{{ PROJECT_NAME }}{% endblock full_title %}
-{% block header %}
-<script src="https://unpkg.com/lucide@latest"></script>
-{% endblock header %}
 {% block content %}
 
 <section class="page page--wide">
@@ -93,8 +90,4 @@ <h1>
 <script defer data-domain="portmap.dtinit.org" src="https://plausible.io/js/script.js"></script>
 
 <script src="{% static 'js/query_form.js' %}"></script>
-<script>
- lucide.createIcons();
-</script>
-
 {% endblock content %}

templates/core/thankyou.html

@@ -1,9 +1,6 @@
 {% extends '_base.html' %}
 {% load static %}
 {% load i18n %}
-{% block header %}
-<script src="https://unpkg.com/lucide@latest"></script>
-{% endblock header %}
 
 {% block content %}
 <section class="page page--wide">
@@ -20,8 +17,4 @@ <h1>Thank you! <i data-lucide="heart" color="#e64e33"></i></h1>
     <li><a href="/" class="icon-link"><i data-lucide="home"></i>Home</a></li>
 </ul>
 </section>
-
-<script>
-  lucide.createIcons();
-</script>
 {% endblock content %}

templates/forms/widgets/icon_radio_option.html

@@ -0,0 +1,3 @@
+{% include "django/forms/widgets/input.html" %}
+<label{% if widget.attrs.id %} for="{{ widget.attrs.id }}"{% endif %}>
+    <i data-lucide="{{widget.label}}">{{widget.label}}</i></label>