Merge pull request #512 from jamstack/zl/476

Adds filters by country to User Groups on Community page.
@zachleat is crafty.

Author: Phil Hawksworth

package.json

@@ -29,6 +29,7 @@
     "dotenv": "^8.2.0",
     "fast-glob": "^3.2.4",
     "gray-matter": "^4.0.2",
+    "i18n-iso-countries": "^6.4.0",
     "js-yaml": "^3.14.0",
     "lodash": "^4.17.20",
     "luxon": "^1.25.0",
@@ -38,6 +39,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.1.10",
     "postcss-cli": "^8.3.0",
+    "placename": "^1.1.2",
     "postcss-import": "^13.0.0",
     "spdx-correct": "^3.1.1",
     "tailwindcss": "^2.0.1"

src/css/tailwind.css

@@ -318,7 +318,8 @@ details[open] .summary-swap-open {
 .filter-typeofcms--hide,
 .filter-language--hide,
 .filter-template--hide,
-.filter-license--hide {
+.filter-license--hide,
+.filter-country--hide {
   display: none !important;
 }
 /* purgecss end ignore */

src/site/_data/community.yaml

@@ -9,12 +9,13 @@
 - name: Boston
   link: https://www.meetup.com/Jamstack-Boston/
   feed: https://api.meetup.com/Jamstack-Boston/events
+  country: United States of America
 
 - name: Porto
   link: https://www.meetup.com/Jamstack-Porto/
   feed: https://api.meetup.com/Jamstack-Porto/events
 
-- name: New York city
+- name: New York City
   link: https://www.meetup.com/Jamstack-nyc/
   feed: https://api.meetup.com/Jamstack-nyc/events
 

src/site/_data/eleventyComputed.js

@@ -0,0 +1,40 @@
+const placename = require("placename");
+const lookupCountryName = require("i18n-iso-countries");
+
+async function getCountryCode(searchTerm) {
+  return new Promise(resolve => {
+    placename(searchTerm, function (err, rows) {
+      if(rows.length) {
+        resolve(rows[0].country);
+      } else {
+        resolve();
+      }
+    })
+  });
+}
+
+function getCountryName(countryCode) {
+  if(countryCode) {
+    return lookupCountryName.getName(countryCode, "en", {select: "official"});
+  }
+}
+
+module.exports = {
+  community: async function(data) {
+    let community = data.community.filter(e => true);
+    for(let meetup of community) {
+      // skip if populated in the YAML file
+      if(meetup.country) {
+        continue;
+      }
+
+      // sry for await in loop
+      let countryCode = await getCountryCode(meetup.name);
+      if(countryCode) {
+        meetup.country = getCountryName(countryCode);
+      }
+    }
+
+    return community;
+  }
+};

src/site/community.njk

@@ -70,24 +70,40 @@ layout: layouts/base.njk
 
 <section class="cards">
   <h2 class="mb-12">Find a Local User Group</h2>
-  <ul class="grid grid-cols-2 lg:grid-cols-3 gap-8">
+  <filter-container>
+    <form class="pb-4">
+      <div class="pb-2">
+        <strong class="pr-4">Filter</strong>
+        <span data-filter-results></span>
+      </div>
+      <label class="inline-flex pr-4 pb-2">
+        <span class="sr-only">Country</span>
+        <select data-filter-bind="country" class="text-black py-1 px-2 rounded-default border border-white bg-white">
+          <option selected value="">All Countries</option>
+          {%- for country in community | select("country") | flatten | unique | sort(false, false) %}
+          <option value="{{ country | lower }}">{{ country }}</option>
+          {%- endfor %}
+        </select>
+      </label>
+    </form>
+    <ul class="grid grid-cols-2 lg:grid-cols-3 gap-8">
+      {% set themes = [
+        "bg-gradient-card-sunrise hover:card-shadow-sunrise",
+        "bg-gradient-card-blue hover:card-shadow-blue-seafoam",
+        "bg-gradient-card-seafoam hover:card-shadow-seafoam",
+        "bg-gradient-card-gold hover:card-shadow-gold"]
+      %}
+      {%- for item in community | sort(false, false, 'name') %}
 
-
-    {% set themes = [
-      "bg-gradient-card-sunrise hover:card-shadow-sunrise",
-      "bg-gradient-card-blue hover:card-shadow-blue-seafoam",
-      "bg-gradient-card-seafoam hover:card-shadow-seafoam",
-      "bg-gradient-card-gold hover:card-shadow-gold"]
-    %}
-    {%- for item in community | sort(false, false, 'name') %}
-
-    {# chose a pseudorandom theme based on the city name #}
-    {% set theme =  item.name.length % 4 %}
-    <li>
-      {{ meetup.card( item.name, item.link, themes[theme] ) }}
-    </li>
-    {%- endfor %}
-  </ul>
+      {# chose a pseudorandom theme based on the city name #}
+      {% set theme =  item.name.length % 4 %}
+      <li
+      {%- if item.country %} data-filter-country="{{ item.country | lower }}"{% endif %}>
+        {{ meetup.card( item.name, item.link, themes[theme] ) }}
+      </li>
+      {%- endfor %}
+    </ul>
+  </filter-container>
 </section>
 
 <section>