Individual bio pages

_includes/components/team-member-card.html

@@ -1,13 +1,24 @@
-<div class="col-12 tablet:grid-col-4 project-cards">
-  <div class="team-member-card">
-    <img id="{{ member.image_id }}" alt="Image of {{member.name}}" src="{{ site.baseurl }}{{ member.image_path }}" />
-    <h4 class="team-member-heading">{{ member.name }}</h4>
-    <h4 class="team-member-heading">{{ member.job_title }}</h4>
-    {% if member.portfolio %}
-      <h4>Project Status: {{member.portfolio}}</h4>
-    {% endif %}
-    <div class="member-card-content">
-      {{ member.blurb }}
+<div class="col-12 tablet:grid-col-4 team-member-cards">
+  <a class="member-link" href="{{ site.baseurl }}{{ member.permalink }}">
+    <div class="team-member-card">
+      <img id="{{ member.image_id }}" alt="Image of {{member.name}}" src="{{ site.baseurl }}{{ member.image_path }}" />
+      <h4 class="team-member-heading member-name">{{ member.name }}</h4>
+      {% if member.cohort_year %}
+      <h4 class="team-member-heading member-title">{{ member.job_title }} - {{ member.cohort_year }}</h4>
+      {% else %}
+      <h4 class="team-member-heading member-title">{{ member.job_title }}</h4>
+      {% endif %}
+      <div class="bio-content">
+        {{ member.description }}
+      </div>
+      <ul class="skills-container usa-list--unstyled">
+        {% assign skillsets = member.skillsets | split: "," %}
+        {% for skill in skillsets %}
+          <li class="skills-tag">
+            <span class="skill-text {{ skill | slugify }}">{{ skill }}</span>
+          </li>
+        {% endfor %}
+      </ul>
     </div>
-  </div>
+  </a>
 </div>

_layouts/team-member.html

@@ -1,19 +1,43 @@
 ---
 layout: default
 ---
-<section class="story">
+<section class="team-member">
   <article class="grid-container">
     <div class="grid-row grid-gap-lg news-row">
-      <div class="news-content-container">
-        <header>
-          <div class="breadcrumb">Team Bios</div>
-          <h1>{{ member.name }}</h1>
-        </header>
-        <div class="bios-content">
-          {{ member.content }}
+      <div class="grid-row">
+        <div class="profile-description-container tablet:grid-col-10 desktop:grid-col-6">
+          <header>
+            <div class="breadcrumb">
+              <a href="{{ site.baseurl }}/team">Team Members</a>
+            </div>
+            <h1 class="member-name">{{ page.name }}</h1>
+            {% if page.cohort_year %}
+              <h2 class="member-title">{{ page.job_title }} - {{ page.cohort_year }} Cohort</h2>
+            {% else %}
+              <h2 class="member-title">{{ page.job_title }}</h2>
+            {% endif %}
+          </header>
+          <div class="bio-content">
+            {{ page.blurb }}
+          </div>
         </div>
+        <img class="profile-img tablet:grid-col-auto tablet:margin-left-9 desktop:grid-col-3 desktop:margin-left-2" id="{{ page.image_id }}" alt="Image of {{page.name}}" src="{{ site.baseurl }}{{ page.image_path }}" />
+        <!-- {% if page.portfolio %}
+          {% assign projects = page.portfolio | split: "," %}
+          <h3 class="project-header">Current Projects:</h3>
+          <div class="project-container">
+            <ul class="skills-container">
+              {% for project in projects %}
+                <li>
+                  <span class="">{{ project }}</span>
+                </li>
+              {% endfor %}
+            </ul>
+          </div>
+        {% endif %} -->
       </div>
     </div>
+    <p class="contact-info">To get in touch with {{ page.name | split: " " | first }}, please send a message to <a class="usa-link long-link" href="mailto:[email protected]">[email protected]</a>.</p>
   </article>
 </section>
 <section class="more-news">

airtable.js

@@ -11,7 +11,7 @@ marked.use({
     gfm: true,
 })
 
-const base = new Airtable({apiKey: process.env.AIRTABLE_ACCESS_TOKEN}).base(process.env.AIRTABLE_BASE_ID);
+const websiteContentBase = new Airtable({apiKey: process.env.AIRTABLE_ACCESS_TOKEN}).base(process.env.AIRTABLE_BASE_ID);
 
 const xdContent = {};
 const cacheFilePath = './airtable-cache.json';
@@ -34,7 +34,11 @@ const checkAndCleanImages = (newData, cacheData) => {
             const cacheEquivalent = Array.from(Object.entries(cacheData))[index][1][count];
 
             // Construct our new image path from the content type and item name
-            const name = item["Name"].toLowerCase().replaceAll(' ', '-');
+            const names = item["Author(s)"];
+            let name;
+            if (names.length === 1) {
+                name = names[0].name.toLowerCase().replaceAll(' ', '-');
+            }
             const directory = `assets/img/import/${contentName.toLowerCase().replaceAll(' ', '_')}`;
 
             // Lookup the same image from our cache
@@ -69,9 +73,9 @@ const checkAndCleanImages = (newData, cacheData) => {
 // Optionally (if newer), write to our cache file with new data
 const fetchAirtablePromise = () => new Promise((resolve, reject) => {
 
-    base('xd.gov Content').select({
+    websiteContentBase('xd.gov Content').select({
         // Selecting the first 3 records in Grid view:
-        maxRecords: 20,
+        maxRecords: 50,
         view: "Grid view"
     }).eachPage((records, fetchNextPage) => {
         // This function will get called for each page of records.
@@ -93,11 +97,34 @@ const fetchAirtablePromise = () => new Promise((resolve, reject) => {
         resolve(xdContent);
 
     }, function done(err) {
-        if (err) { console.error(err); reject(error); return; }
+        if (err) { console.error(err); reject(err); return; }
     });
 
 });
 
+const findProject = (projectId) => new Promise((resolve, reject) => {
+    websiteContentBase('All Projects').find(projectId, (err, record) => {
+        if (err) { console.error(err); return; }
+        return resolve(record.fields['Project Name']);
+    });
+});
+
+const writeBioMarkdown = ({ Name, Images, Title, Description, Blurb, CohortYear, Skillsets, ProjectsList}) => {
+    return [`---`,
+        `name: ${Name}`,
+        `title: ${Name}`,
+        `permalink: /team/${dashCaseString(Name)}/`,
+        `image_id: ${Images && Images[0].id}`,
+        `image_path: ${Images && Images[0].newLocalPath}`,
+        `job_title: ${Title}`,
+        `cohort_year: ${CohortYear || ''}`,
+        `portfolio: ${ProjectsList?.join(",") || ''}`,
+        `description: ${marked.parse(Description || '')}`,
+        `blurb: ${Blurb && marked.parse(Blurb)}`,
+        `skillsets: ${Skillsets?.join(",") || ''}`,
+    `---`].join('\n');
+}
+
 const generateXdMarkdown = (content) => {
     const fullMarkdownObj = {};
 
@@ -114,8 +141,11 @@ const generateXdMarkdown = (content) => {
 
         // Loop through content types and generate unique markdown for each
         content[contentType].map(async (obj) => {
-            const { Name, Title, Images, Attachments, Blurb, Portfolio } = obj;
-            let itemMarkdown = ``
+            const { Title, Images, Attachments, Blurb, Projects } = obj;
+            const CohortYear = obj['What is your ETF cohort year?'];
+            const Skillsets = obj['What is your area of expertise?'];
+            const Description = obj['Brief Description'];
+            let itemMarkdown = ``;
 
             switch (contentType) {
                 // case 'News':
@@ -130,41 +160,44 @@ const generateXdMarkdown = (content) => {
                 //     break;
 
                 case 'Bio':
-                    if ([Name, Title, Images, Blurb].some(item => item === undefined)) return;
+                    const Name = obj['Author(s)'][0].name; // Bio should have one author
                     const directory = '/collections/_team_members';
-                    const bioMarkdownAttrs = `---
-name: ${Name}
-title: ${Name}
-permalink: /team/${dashCaseString(Name)}/
-image_id: ${Images[0].id}
-image_path: ${Images[0].newLocalPath}
-job_title: ${Title}
-blurb: ${marked.parse(Blurb)}
----`;
+                    const ProjectsList = [];
+                    const content = { Name, Images, Title, Description, Blurb, CohortYear, Skillsets, ProjectsList };
+                    let bioMarkdownAttrs = '';
+
+                    if (Skillsets !== undefined) {
+                        await Promise.all(Projects.map(async (projectId) => {
+                            const skillsetName = await findProject(projectId);
+                            content.ProjectsList.push(skillsetName);
+                        }));
+                    }
+                    bioMarkdownAttrs = writeBioMarkdown(content);
 
                     await writeMarkdownFile(directory, Name, bioMarkdownAttrs);
                     break;
 
-                // case 'Project':
-                //     if ([Name, Title, Images, Blurb, Portfolio, Attachments].some(item => item === undefined)) return;
-
-                //     itemMarkdown += `---\n layout: project\n title: ${Title} Project\n---`
-
-                //     // TODO: Create unique project file path from title and store it
-
-                //     itemMarkdown += `
-                //         \n<div>\n
-                //             <img id="${Images[0].id}" alt="Image of ${Name}" src="${Images[0].newLocalPath}" />\n
-                //             <h1>${Title}</h1>\n
-                //             <h4>Author(s): ${Name}</h4>\n
-                //             <h4>Project Status: ${Portfolio}</h4>\n
-                //             <div class="breadcrumb"></div>\n
-                //             ${marked.parse(Blurb)}\n
-                //             <p>Materials: ${Attachments}</p>
-                //         </div>\n
-                //         --End--
-                //     `;
-                //     break;
+                case 'Project':
+                    // console.log('Project', obj);
+                    // if ([Name, Title, Images, Blurb, Portfolio, Attachments].some(item => item === undefined)) return;
+
+                    // itemMarkdown += `---\n layout: project\n title: ${Title} Project\n---`
+
+                    // // TODO: Create unique project file path from title and store it
+
+                    // itemMarkdown += `
+                    //     \n<div>\n
+                    //         <img id="${Images[0].id}" alt="Image of ${Name}" src="${Images[0].newLocalPath}" />\n
+                    //         <h1>${Title}</h1>\n
+                    //         <h4>Author(s): ${Name}</h4>\n
+                    //         <h4>Project Status: ${Portfolio}</h4>\n
+                    //         <div class="breadcrumb"></div>\n
+                    //         ${marked.parse(Blurb)}\n
+                    //         <p>Materials: ${Attachments}</p>
+                    //     </div>\n
+                    //     --End--
+                    // `;
+                    break;
             }
 
             markdown += itemMarkdown;
@@ -177,7 +210,7 @@ blurb: ${marked.parse(Blurb)}
     }
 
     // Keep log for Action debugging
-    console.log(fullMarkdownObj);
+    // console.log(fullMarkdownObj);
 
     return fullMarkdownObj;
 }

assets/css/_includes/_team-member-card.scss

@@ -3,15 +3,71 @@
   border-radius: 3px;
   box-shadow: 3px 10px 13px 0px rgba(0,0,0,0.15);
   height: 100%;
-  padding-bottom: 2.5rem;
+  padding-bottom: 1rem;
   position: relative;
 
+  .member-title {
+    font-weight: normal;
+  }
+
   img {
     display: block;
     margin: auto;
     height: auto;
     width: 100%;
   }
+
+  .bio-content {
+    margin: 1rem;
+  }
+
+  .skills-container {
+    .skills-tag {
+      font-size: 0.9rem;
+      color: $color-white;
+      .skill-text {
+        padding: .5rem;
+        border-radius: 5px;
+      }
+    }
+    // color palette inspo is http://colorsafe.co/ purple palette
+    .ai-governance {
+      background-color: #9B59B6;
+    }
+    .cloud-management {
+      background-color: #7462E0;
+    }
+    .computer-vision {
+      background-color: #886288;
+    }
+    .data-science {
+      background-color: #DB0A5E;
+    }
+    .data-engineering {
+      background-color: #8859B6;
+    }
+    .privacy-enhancing-technologies {
+      background-color: #B200FD;
+    }
+    .fullstack-engineering {
+      background-color: #7659B6;
+    }
+    .human-centered-design {
+      background-color: #A74165;
+    }
+    .machine-learning {
+      background-color: #B500B5;
+    }
+    .tech-policy {
+      background-color: #5E50B5;
+    }
+    .technical-project-management {
+      background-color: #5A4586;
+    }
+    .cybersecurity {
+      background-color: #483D8B;
+    }
+  }
 }
 
 .member-card-content {

assets/css/_layouts/_all.scss

@@ -3,3 +3,4 @@
 @import "blog";
 @import "position";
 @import "project";
+@import "team-member";