Allow entire roles to be marked as lowlights.

Squashed commit of the following:

commit 4c7c9775512e87c5d20aaf6a220640aa54720b5f
Author: Mari <mstaib.git@reya.zone>
Date:   Wed Feb 5 09:55:39 2020 -0500

    Update experience filtering to allow hiding entire roles

commit bfcf650fdd57aa22f60cdc0b83f395c91494c32a
Author: Mari <mstaib.git@reya.zone>
Date:   Wed Feb 5 09:54:00 2020 -0500

    Simplify highlighting CSS/JS now that inner containers don't exist

commit 4cf7bac2915776021b0ac16aa1661910869e8160
Author: Mari <mstaib.git@reya.zone>
Date:   Wed Feb 5 09:14:53 2020 -0500

    Add identifyExperienceHighlights filter for filtering role descriptions

.eleventy.js

@@ -147,6 +147,34 @@ module.exports = function(eleventyConfig) {
   }
   eleventyConfig.addFilter("identifyHighlightsRecursive", identifyHighlightsRecursive);
 
+  function identifyExperienceHighlights(roleList, filter) {
+    const expandedRoleList = roleList.map(function(role) {
+      const children = role.achievements
+        ? role.achievements.slice()
+        : [];
+      const fullDescription = role.description || role.shortDescription;
+      const shortDescription = role.description && role.shortDescription;
+      const descriptionObject = {
+        full: fullDescription,
+        short: shortDescription,
+        highlight: false
+      };
+      children.push(descriptionObject);
+      return inheritAndAdd(role, {
+        description: descriptionObject,
+        shortDescription: null,
+        _children: children
+      });
+    });
+    const highlightedRoleList = identifyHighlightsRecursive(expandedRoleList, filter, "_children");
+    highlightedRoleList.forEach(function(role) {
+      role.description = role._children[role._children.length - 1];
+      role.achievements = role._children.slice(0, role._children.length - 1);
+    });
+    return highlightedRoleList;
+  }
+  eleventyConfig.addFilter("identifyExperienceHighlights", identifyExperienceHighlights);
+
   // Checks if there are any items with a truthy highlight property in itemList.
   function hasHighlights(itemList) {
     if (!Array.isArray(itemList)) {

_includes/assets/css/main.css

@@ -372,62 +372,30 @@ header rt {
 }
 
 /*
- * .highlight-container: marker for an element which can have its children
+ * #highlight-container: marker for the element whose children can be shown or
- * shown or hidden. Should never be nested more than two deep (#page and one
+ * hidden.
- * more element between #page and any elements affected by this) - could be
- * modified to support such a thing, but no need yet
  *
  * .highlight: a highlight-only view of some element, typically a shorter
  * version of a full-length text containing only the highlights
- * .show-all: button to make the current highlight container show its
+ * .show-all: button to make the highlight container show its contained
- * contained lowlights and hide its highlights
+ * lowlights and hide its highlights
  *
- * elements with these classes are visible only when neither #page nor their
+ * elements with these classes are visible only when #highlight-container is not
- * surrounding container is showing all, thus hidden if either #page or their
+ * showing all, thus hidden if #highlight-container is showing all.
- * surrounding container is showing all:
- *     visible = not(#page.showing-all or surrounding-container.showing-all)
- *     visible = not(#page.showing-all) and not(surrounding-container.showing-all)
- *     hidden = not visible
- *     hidden = not(not(#page.showing-all or surrounding-container.showing-all))
- *     hidden = #page.showing-all or surrounding-container.showing-all
- *
- * As #page is itself a highlight container which surrounds everything, this
- * is simplified to just ".highlight-container.showing-all".
  *
  * .lowlight: an element or view of an element which will likely be
  * uninteresting to whoever the current highlighted version is for
- *
+ * .show-highlights: button to make the highlight container hide its
- * elements with this class are visible only when either #page or their
- * surrounding container is showing all, thus hidden if both #page and their
- * surrounding container are _not_ showing all:
- *     visible = #page.showing-all or surrounding-container.showing-all
- *     hidden = not visible
- *     hidden = not(#page.showing-all or surrounding-container.showing-all)
- *     hidden = not(#page.showing-all) and not(surrounding-container.showing-all)
- *
- * .show-highlights: button to make the current highlight container hide its
  * contained lowlights and show its highlights
  *
- * elements with this class are visible only when their surrounding container
+ * elements with these classes are visible only when #highlight-container is
- * and _not_ #page is showing all. This is because when #page is showing all,
+ * showing all, thus hidden if #highlight-container is _not_ showing all.
- * the .show-highlights for individual sections have no effect. Thus they are
- * hidden if the page is showing all or if the surrounding container is not
- * showing all:
- *     visible = not(#page.showing-all) and surrouding-container.showing-all
- *     hidden = not visible
- *     hidden = not(not(#page.showing-all) and surrounding-container.showing-all)
- *     hidden = #page.showing-all or not(surrounding-container.showing-all)
  *
- * Since the buttons are not inside an inner container, we add an alternative
- * for the buttons which only consults whether #page is not showing all.
  */
-.highlight-container.showing-all .highlight,
+#highlight-container.showing-all .highlight,
-.highlight-container.showing-all .show-all,
+#highlight-container.showing-all .show-all,
-#page.highlight-container:not(.showing-all) .highlight-container:not(.showing-all) .lowlight,
+#highlight-container:not(.showing-all) .lowlight,
-#page.highlight-container:not(.showing-all) header .buttons .lowlight,
+#highlight-container:not(.showing-all) .show-highlights {
-#page.highlight-container:not(.showing-all) header .buttons .show-highlights,
-#page.highlight-container:not(.showing-all) .highlight-container:not(.showing-all) .show-highlights,
-#page.highlight-container.showing-all .highlight-container .show-highlights {
   display: none;
 }
 
@@ -442,6 +410,6 @@ header rt {
   opacity: 1.0;
 }
 
-.highlight-container.showing-all .highlight-icon {
+#highlight-container.showing-all .highlight-icon {
   display: none;
 }

_includes/assets/css/screen.css

@@ -81,23 +81,6 @@
     background-image: linear-gradient(to right, transparent 0%, rgba(0, 100, 200, 0.1) 20%, rgba(0, 100, 200, 0.2) 30%, rgba(0, 100, 200, 0.2) 70%, rgba(0, 100, 200, 0.1) 80%, transparent 100%);
   }
 
-  section .highlight-container .show-all, section .highlight-container .show-highlights {
-    margin-top: 0.25rem;
-    display: block;
-    width: 100%;
-    font-size: 0.7rem;
-    height: 1.5rem;
-    transition: margin-top 0.25s step-start, height 0.25s step-start, opacity 0.25s ease 0.1s, transform 0.25s ease 0.1s;
-  }
-
-  section .highlight-container:not(:hover) .show-all:not(:focus), section .highlight-container:not(:hover) .show-highlights:not(:focus) {
-    margin-top: 0;
-    height: 0;
-    opacity: 0;
-    transform: scaleY(0);
-    transition: margin-top 0.25s step-end, height 0.25s step-end, opacity 0.25s ease, transform 0.25s ease;
-  }
-
   .lowlight:not(.lowlight-no-gradient) {
     background-image: linear-gradient(to left top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0.1) 50%, transparent 90%);
   }

_includes/assets/js/main.js

@@ -1,29 +1,11 @@
 (function(window, document) {
-  function findClosestParentMatching(child, selector) {
-    if (!child) {
-      return null;
-    } else if (child.matches(selector)) {
-      return child;
-    } else {
-      return findClosestParentMatching(child.parentElement, selector);
-    }
-  }
-
   function showAll(button) {
-    parent = findClosestParentMatching(button, ".highlight-container");
+    parent = document.getElementById('highlight-container');
-    if (!parent) {
-      return;
-    }
-
     parent.classList.add("showing-all");
   }
 
   function showHighlights(button) {
-    parent = findClosestParentMatching(button, ".highlight-container");
+    parent = document.getElementById('highlight-container');
-    if (!parent) {
-      return;
-    }
-
     parent.classList.remove("showing-all");
   }
 

_includes/components/resume/award-section.njk

@@ -3,7 +3,6 @@
 {% set awardsFilter = filter.awards if filter and filter.awards else "all" %}
 {% set awardsFiltered = awards.awards | identifyHighlights(awardsFilter) %}
 
-<div class="highlight-container">
 <div class="section-header">
   <h2>Awards</h2>
   {% if awardsFiltered | hasLowlights %}
@@ -15,4 +14,3 @@
     {% include "components/resume/award.njk" %}
   {% endfor %}
 </ul>
-</div>

_includes/components/resume/contact-section.njk

@@ -3,7 +3,6 @@
 {% set contactFilter = filter.contact if filter and filter.contact else "all" %}
 {% set contactsFiltered = contact.methods | identifyHighlights(contactFilter) %}
 
-<div class="highlight-container">
 <div class="section-header">
   <h2>Contact</h2>
   {% if contactsFiltered | hasLowlights %}
@@ -15,4 +14,3 @@
     {% include "components/resume/contact.njk" %}
   {% endfor %}
 </ul>
-</div>

_includes/components/resume/education-section.njk

@@ -3,7 +3,6 @@
 {% set educationFilter = filter.education if filter and filter.education else "all" %}
 {% set educationFiltered = education.programs | identifyHighlights(educationFilter) %}
 
-<div class="highlight-container">
 <div class="section-header">
   <h2>Education</h2>
   {% if educationFiltered | hasLowlights %}
@@ -15,4 +14,3 @@
     {% include "components/resume/education.njk" %}
   {% endfor %}
 </ul>
-</div>

_includes/components/resume/experience-role.njk

@@ -1,13 +1,14 @@
 {# uses loop variable role #}
+{% set hasShortDescription = role.highlight and (not role.description.highlight) and role.description.short %}
 
-<article class="role highlight-container{% if not role.highlight %} minimized{% endif %}">
+<article class="role {% if not role.highlight %} lowlight{% endif %}{% if role.highlight and not role.description.highlight %} minimized{% endif %}">
   <div class="header">
     {% if role.image %}<img src="/img/{{ role.image }}" class="icon" aria-hidden="true" />{% endif %}
     <div class="firstline">
       <h3 class="name">
         {{ role.name }}&nbsp;
       </h3>
-      {% if ((not role.highlight) and role.shortDescription) or role.achievements | hasLowlights %}
+      {% if role.highlight and (hasShortDescription or role.achievements | hasLowlights) %}
         {% include "components/resume/highlight-icon.njk" %}
       {% endif %}
     </div>
@@ -20,20 +21,20 @@
       </span>
     </span>
   </div>
-  {% if role.description %}
+  {% if role.description.full %}
-    <div class="description{% if (not role.highlight) and role.shortDescription %} lowlight{% endif %}">
+    <div class="description{% if hasShortDescription %} lowlight{% endif %}">
-      {{ role.description | md | safe }}
+      {{ role.description.full | md | safe }}
     </div>
   {% endif %}
-  {% if (not role.highlight) and role.shortDescription %}
+  {% if hasShortDescription %}
     <div class="description highlight">
-      {{ role.shortDescription | md | safe }}
+      {{ role.description.short | md | safe }}
     </div>
   {% endif %}
   {% if role.achievements %}
     <ul class="achievements">
       {% for achievement in role.achievements %}
-        <li{% if not achievement.highlight %} class="lowlight"{% endif %}>{{achievement.description | md | safe }}</li>
+        <li{% if role.highlight and not achievement.highlight %} class="lowlight"{% endif %}>{{achievement.description | md | safe }}</li>
       {% endfor %}
     </ul>
   {% endif %}

_includes/components/resume/experience-section.njk

@@ -1,10 +1,13 @@
 {# uses page variable filter.experience #}
 {# uses data store experience.roles #}
 {% set experienceFilter = filter.experience if filter and filter.experience else "all" %}
-{% set experienceRolesFiltered = experience.roles | identifyHighlightsRecursive(experienceFilter, "achievements") %}
+{% set experienceRolesFiltered = experience.roles | identifyExperienceHighlights(experienceFilter) %}
 
 <div class="section-header">
   <h2>Experience</h2>
+  {% if experienceRolesFiltered | hasLowlights %}
+    {% include "components/resume/highlight-icon.njk" %}
+  {% endif %}
 </div>
 <div class="roles">
   {% for role in experienceRolesFiltered %}

_includes/components/resume/skill-section.njk

@@ -3,7 +3,6 @@
 {% set skillFilter = filter.skills if filter and filter.skills else "all" %}
 {% set skillCategoriesFiltered = skills.categories | identifyHighlightsRecursive(skillFilter, "skills") %}
 
-<div class="highlight-container">
 <div class="section-header">
   <h2>Skills</h2>
   {% if skillCategoriesFiltered | hasLowlightsRecursive("skills") %}
@@ -13,4 +12,3 @@
 {% for category in skillCategoriesFiltered %}
   {% include "components/resume/skill-subcategory.njk" %}
 {% endfor %}
-</div>

_includes/layouts/base.njk

@@ -2,7 +2,7 @@
 <html lang="en">
 	{% include "components/head.njk" %}
 	<body>
-		<main id="page" class="highlight-container">
+		<main>
 			{{ layoutContent | safe }}
 		</main>
 		<footer>

_includes/layouts/resume.njk

@@ -2,7 +2,7 @@
 layout: layouts/base.njk
 ---
 
-<div id="resume">
+<div id="highlight-container">
   <header>
     {% include "components/resume/header.njk" %}
   </header>

index.md

@@ -11,9 +11,10 @@ filter:
       - "-python"
     languages: all
   experience:
-    "-all": false
+    "all": false
     "bazel-configurability":
       - other
+    "-wallet-testing": false
   awards:
     - perfy
 ---