People modal improvements (#57)

* Index - Improve people modal - Refactor modal ID logic

Replace creating unique model HTML ID's based of peoples names and just
use the index loop. This adds support for any characters in people
names.

* Index - Add pronouns support in people modal

team/template.yaml

@@ -4,6 +4,7 @@
   role: YOUR JOB TITLE
   organizations:
     - name: YOUR EMPLOYER
+  pronouns: pronouns
   bio: >
     A FEW SENTENCES ABOUT YOU, MULTIPLE LINES ARE FINE
   expertise:
@@ -21,4 +22,3 @@
     # From https://escience.washington.edu/using-data-science/hackweeks/planning/hackweek-roles
     - ROLE 1
     - ROLE 2
-

{{ cookiecutter.repo_directory }}/index.html

@@ -375,7 +375,7 @@ <h3 class="section-heading text-center mb-3">Meet the team</h3>
         {%- if cookiecutter.team['people'] %}
         <div class="row">
             {%- for person in cookiecutter.team['people'] %}
-            {%- set modal_name = person['title']|lower|replace(' ', '_')|replace('.', '') %}
+            {%- set modal_name = 'person-{}'.format(loop.index) %}
             {%- set modal_key = '{}-modal'.format(modal_name) %}
             <div class="col-6 col-lg-3 mb-4">
                 <div class="card rounded-0">
@@ -452,6 +452,11 @@ <h5 class="card-title mb-2">{{ person['title'] }}</h5>
                                             <h2 class="name mb-2">
                                                 {{person['title']}}
                                             </h2>
+                                            {%- if 'pronouns' in person %}
+                                            <div class="meta">
+                                                ({{ person['pronouns'] }})
+                                            </div>
+                                            {%- endif %}
                                             <div class="meta">
                                                 {{ person['role'] }}
                                             </div>