Add Usage note as Snippet header to be shown in the details popup

amd/src/snippetsdetailsmodal.js

@@ -72,6 +72,7 @@ const buildModal = async(element) => {
         goal: element.getAttribute('data-goal'),
         scope: element.getAttribute('data-scope'),
         creator: element.getAttribute('data-creator'),
+        usagenote: element.getAttribute('data-usagenote'),
     };
 
     await ModalCancel.create({

classes/snippets.php

@@ -44,7 +44,8 @@ class snippets {
         'Goal',
         'Description',
         'Scope',
-        'Creator'
+        'Creator',
+        'Usage note',
     ];
 
     /**
@@ -219,6 +220,7 @@ public static function get_snippet_meta($path, $source): stdClass|null {
         $snippet->scope = $headers['Scope'];
         $snippet->goal = $headers['Goal'];
         $snippet->creator = $headers['Creator'];
+        $snippet->usagenote = $headers['Usage note'];
         $snippet->source = $source;
         $snippet->image = $image;
 

classes/table/snippets_overview.php

@@ -241,6 +241,7 @@ public function col_actions($data) {
                     'data-scope' => $this->pick_and_build_badge('snippetsscope'.$data->scope),
                     'data-description' => $data->description,
                     'data-creator' => $data->creator,
+                    'data-usagenote' => $data->usagenote,
                     'data-image' => $data->image,
                     ],
         ];

lang/en/theme_boost_union.php

@@ -1129,6 +1129,7 @@
 $string['snippetssource'] = 'Source';
 $string['snippetssourcetheme_boost_union'] = 'Boost Union built-in';
 $string['snippetstitle'] = 'Title';
+$string['snippetsusagenote'] = 'Usage note';
 
 // Settings: Smart menus page.
 $string['smartmenus'] = 'Smart menus';

snippets/builtin/international_day_against_homophobia.scss

@@ -2,7 +2,8 @@
  * Snippet Title: Rainbow navbar for anti-homophobia day
  * Scope:         global
  * Goal:          eyecandy
- * Description:   17 May is a special day for the queer community - the International Day against Homophobia, Biphobia and Transphobia. This CSS changes the background of the primary navbar to rainbow colors to commemorate and support the special day.<br /><em>Please note: To make this CSS snippet work, you have to set the 'theme_boost_union | navbarcolor' setting to 'Dark navbar with light font color' as well.</em>
+ * Description:   17 May is a special day for the queer community - the International Day against Homophobia, Biphobia and Transphobia. This CSS changes the background of the primary navbar to rainbow colors to commemorate and support the special day.
+ * Usage note:    To make this CSS snippet work, you have to set the 'theme_boost_union | navbarcolor' setting to 'Dark navbar with light font color' as well.
  * Creator:       Nils Promer and Alexander Brehm
  *
  * @package    theme_boost_union

templates/snippetsdetailsmodal.mustache

@@ -38,6 +38,12 @@
             <img src="{{image}}" alt="{{#str}}snippetsdetailspreview, theme_boost_union{{/str}}" class="w-100 p-2 border rounded">
         </div>
     {{/image}}
+    {{#usagenote}}
+        <div class="mb-4">
+            <h6>{{#str}}snippetsusagenote, theme_boost_union{{/str}}</h6>
+            <p>{{{usagenote}}}</p>
+        </div>
+    {{/usagenote}}
     <h6>{{#str}}snippetsdetails, theme_boost_union{{/str}}</h6>
     <table class="table table-striped">
         <tbody>