feat: Add fuzzy search and tag filtering

README.md

@@ -4,13 +4,14 @@ Based on [ai-deadlines](https://aideadlin.es) by @abshkdz
 
 ## Is my entry in scope?
 
-This page is meant to host academic conference or workshop deadlines.  
+This page is meant to host academic conference or workshop deadlines.
 
 To check if an entry is a good fit for this page, in general, I would check for the following:
-* Is there a "Call For Papers"? Is there a link for submissions? Are there formatting guidelines (page limits, style guide) etc?
-* Is security, privacy, or cryptography mentioned in the list of topics?
-* Is there a review process? Does the website name a general chair, program chair, or program committee?
-* If accepted, will the paper be published in a proceedings?
+
+- Is there a "Call For Papers"? Is there a link for submissions? Are there formatting guidelines (page limits, style guide) etc?
+- Is security, privacy, or cryptography mentioned in the list of topics?
+- Is there a review process? Does the website name a general chair, program chair, or program committee?
+- If accepted, will the paper be published in a proceedings?
 
 If "Yes" to all of the above, then the conference or workshop is likely a good fit.
 Examples where conferences were **not** a good fit are [FTC's PrivacyCon](https://www.ftc.gov/news-events/events/2024/03/privacycon-2024)
@@ -20,10 +21,10 @@ Once PrivacyCon or RWC begin publishing proceedings, they'd become fit for inclu
 
 ## Adding/updating a conference
 
-* Read the data format description below. **Note that the timezone format sign is inverted** (e.g., UTC+7 is written as `Etc/GMT-7`). It's [not a bug][0]. I hate this format too. I'd be happy to move to a different timezone JavaScript library that uses a friendlier format, but I don't have time for that.
-* Update `_data/conferences.yml`. You can do that on GitHub or locally after forking the repo.
-* Please check if an entry for a prior year's offering exists; if so, please update the prior entry, rather than adding a new one. 
-* Send a pull request
+- Read the data format description below. **Note that the timezone format sign is inverted** (e.g., UTC+7 is written as `Etc/GMT-7`). It's [not a bug][0]. I hate this format too. I'd be happy to move to a different timezone JavaScript library that uses a friendlier format, but I don't have time for that.
+- Update `_data/conferences.yml`. You can do that on GitHub or locally after forking the repo.
+- Please check if an entry for a prior year's offering exists; if so, please update the prior entry, rather than adding a new one.
+- Send a pull request
 
 ### Conference entry record
 
@@ -35,7 +36,7 @@ Example record:
   year: 2018
   link: http://www.ieee-security.org/TC/EuroSP2018/
   dblp: https://dblp.org/db/conf/eurosp/index.html
-  deadline: ["2017-08-15 23:59"]  # must be a list
+  deadline: ["2017-08-15 23:59"] # must be a list
   date: April 24-26
   place: London, UK
   tags: [SEC, PRIV]
@@ -44,7 +45,7 @@ Example record:
 Descriptions of the fields:
 
 | Field name    | Description                                                                             |
-|---------------|-----------------------------------------------------------------------------------------|
+| ------------- | --------------------------------------------------------------------------------------- |
 | `name`\*      | Short conference name, without year                                                     |
 | `year`\*      | Year the conference is happening                                                        |
 | `description` | Description, or long name                                                               |
@@ -59,41 +60,41 @@ Descriptions of the fields:
 
 Fields marked with asterisk (\*) are required.
 
-
 ### Deadline format
 
-The *deadline* field can contain:
+The _deadline_ field can contain:
 
 1. The simplest option: a date and time in ISO format. Example: `["2017-08-19 23:59"]` (Note that you need to wrap even a single deadline in a list).
 2. If a deadline is rolling, you can use a template date, just substitute the
    year with `%y` and the year before the conference with `%Y`. Example:
    `["%y-01-15 23:59"]` means there is a deadline on the 15th January in the
    same year as the conference.
-2. A list of (1) or (2). Example of two rolling deadlines, with one in the end
+3. A list of (1) or (2). Example of two rolling deadlines, with one in the end
    of October in the year prior to the conference year, and the second in the
    end of February in the same year as the conference:
-  ```
-  - "%Y-10-31 23:59"
-  - "%y-02-28 23:59"
-  ```
+
+```
+- "%Y-10-31 23:59"
+- "%y-02-28 23:59"
+```
 
 On the page, all deadlines are displayed in viewer's local time (that's a feature).
 
-*Note:* If the deadline hour is `{h}:00`, it will be automatically translated into `{h-1}:59:59` to avoid pain and confusion when it happens to be midnight in local time.
+_Note:_ If the deadline hour is `{h}:00`, it will be automatically translated into `{h-1}:59:59` to avoid pain and confusion when it happens to be midnight in local time.
 
 ### Timezones
 
 The timezone is specified in [tz format][1]. Unlike abbreviations (e.g. EST), these are un-ambiguous. Here are tz codes for some common timezones:
 
-| Common name                   | tz                                                                 |
-|-------------------------------|--------------------------------------------------------------------|
-| UTC                           | `Etc/UTC`                                                          |
-| America Pacific Time          | `America/Los_Angeles`                                              |
-| Pacific Standard Time (UTC-8) | `Etc/GMT+8` (Yes, the sign is inverted for some weird reason)      |
-| America Eastern Time          | `America/New_York`                                                 |
-| Eastern Standard Time (UTC-5) | `Etc/GMT+5`                                                        |
-| American Samoa Time (UTC-11)  | `Pacific/Samoa` or `Etc/GMT+11`. This timezone does not use DST.   |
-| Aleutian Islands              | `America/Adak`                                                     |
+| Common name                   | tz                                                               |
+| ----------------------------- | ---------------------------------------------------------------- |
+| UTC                           | `Etc/UTC`                                                        |
+| America Pacific Time          | `America/Los_Angeles`                                            |
+| Pacific Standard Time (UTC-8) | `Etc/GMT+8` (Yes, the sign is inverted for some weird reason)    |
+| America Eastern Time          | `America/New_York`                                               |
+| Eastern Standard Time (UTC-5) | `Etc/GMT+5`                                                      |
+| American Samoa Time (UTC-11)  | `Pacific/Samoa` or `Etc/GMT+11`. This timezone does not use DST. |
+| Aleutian Islands              | `America/Adak`                                                   |
 
 [0]: https://momentjs.com/timezone/docs/#/zone-object/offset/
 [1]: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
@@ -102,3 +103,6 @@ The timezone is specified in [tz format][1]. Unlike abbreviations (e.g. EST), th
 [4]: #deadline-format
 [5]: #timezones
 
+### Search Functionality
+
+A new search feature has been implemented, allowing users to quickly find conferences. This feature leverages the `fuse.js` library for fuzzy-matching, enabling searches by conference name, description, and other relevant details. To ensure the integrity and security of the client-side script, Subresource Integrity (SRI) attributes have been added to the `fuse.js` CDN link.

index.html

@@ -41,6 +41,13 @@ <h1>
           </div>
         </div>
         <hr>
+        <div class="row">
+          <div class="col-xs-12">
+            <div class="form-group">
+              <input type="text" id="search-input" class="form-control" placeholder="Search for conferences by name, description, etc.">
+            </div>
+          </div>
+        </div>
         <div class="row">
           <div class="col-xs-12">
             <!-- <div class="well"> -->
@@ -114,6 +121,7 @@ <h2><a href="{{conf.link}}">{{conf.name}} {{conf.year}}</a></h2>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.34/moment-timezone-with-data-10-year-range.min.js" integrity="sha512-d11VXfxQMn+sZuIgzHITdIuInr4cVRGV/uLiSI643WH/J+p4gPFYSHXRMR2v+w4Rn2TSyzJjsZjc0M7+Qd+UXw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/store.js/2.0.12/store.legacy.min.js" integrity="sha512-3yZTInL4yLU1ajnca35KTk6YE4RPHJU2y+jbhHAykE9OzMHpc2BIJghNsbkBNacIJWLLUmUkLEGPDDWrFY2zzw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2" integrity="sha384-zPE55eyESN+FxCWGEnlNxGyAPJud6IZ6TtJmXb56OFRGhxZPN4akj9rjA3gw5Qqa" crossorigin="anonymous"></script>
     <script src="{{ site.baseurl}}/static/js/main.js" async></script>
     {% if site.ga_id %}
     {% include analytics.html %}

static/js/main.js

@@ -3,6 +3,29 @@
 $(function() {
   deadlineByConf = {};
 
+  var all_confs_data = [];
+  {% for conf in site.data.conferences %}
+  {% assign num_deadlines = conf.deadline.size %}
+  {% assign range_end = conf.deadline.size | minus: 1 %}
+  {% for i in (0..range_end) %}
+  {% assign conf_id = conf.name | append: conf.year | append: '-' | append: i | slugify %}
+  all_confs_data.push({
+    id: '{{ conf_id }}',
+    name: {{ conf.name | jsonify }},
+    description: {{ conf.description | strip_html | strip_newlines | jsonify }},
+    tags: {{ conf.tags | jsonify }},
+    year: '{{ conf.year }}',
+    place: {{ conf.place | jsonify }}
+  });
+  {% endfor %}
+  {% endfor %}
+
+  var fuse = new Fuse(all_confs_data, {
+    keys: ['name', 'description', 'year', 'place'],
+    includeScore: true,
+    threshold: 0.4
+  });
+
   {% for conf in site.data.conferences %}
   // {{ conf.name }} {{ conf.year }}
   {% if conf.deadline[0] == "TBA" %}
@@ -113,21 +136,50 @@ $(function() {
   store.set('{{ site.domain }}', tags);
 
   function update_conf_list() {
+    var query = $('#search-input').val().toLowerCase();
+
+    var searched_confs = [];
+    if (query.length > 0) {
+        var results = fuse.search(query);
+        searched_confs = results.map(function(result) {
+            return result.item.id;
+        });
+    } else {
+        searched_confs = all_confs_data.map(function(conf) {
+            return conf.id;
+        });
+    }
+
     confs.each(function(i, conf) {
       var conf = $(conf);
       var show = false;
-      var set_tags = [];
+
+      if (searched_confs.indexOf(conf.attr('id')) === -1) {
+          conf.hide();
+          return;
+      }
+
+      // Tag filtering (OR logic)
+      var selected_tags = [];
       for (var i = 0; i < all_tags.length; i++) {
-        // if tag has been selected by user, check if the conference has it
         if(toggle_status[all_tags[i]]) {
-          set_tags.push(conf.hasClass(all_tags[i]));
+          selected_tags.push(all_tags[i]);
+        }
+      }
+
+      var tag_match = false;
+      if (selected_tags.length === 0) {
+        tag_match = true;
+      } else {
+        for (var i = 0; i < selected_tags.length; i++) {
+          if (conf.hasClass(selected_tags[i])) {
+            tag_match = true;
+            break;
+          }
         }
       }
-      let empty_or_all_true = arr => arr.every(Boolean);
-      // show a conference if it has all user-selected tags
-      // if no tag is set (= array is empty), show all entries
-      show = empty_or_all_true(set_tags);
-      if (show) {
+
+      if (tag_match) {
         conf.show();
       } else {
         conf.hide()
@@ -136,6 +188,8 @@ $(function() {
   }
   update_conf_list();
 
+  $('#search-input').on('input', update_conf_list);
+
   // Event handler on checkbox change
   $('form :checkbox').change(function(e) {
     var checked = $(this).is(':checked');
@@ -155,3 +209,4 @@ $(function() {
     update_conf_list();
   });
 });
+