reya
/
reyasume
1
0
Fork 0
Code Releases Activity

Allow entire roles to be marked as lowlights.

Browse Source 
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
experiences
Mari 4 years ago
parent 930bfcd4c5
commit 1fbed3d4b7
13 changed files with 99 additions and 141 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 28
      .eleventy.js
  2. 60
      _includes/assets/css/main.css
  3. 17
      _includes/assets/css/screen.css
  4. 22
      _includes/assets/js/main.js
  5. 22
      _includes/components/resume/award-section.njk
  6. 22
      _includes/components/resume/contact-section.njk
  7. 22
      _includes/components/resume/education-section.njk
  8. 17
      _includes/components/resume/experience-role.njk
  9. 5
      _includes/components/resume/experience-section.njk
  10. 18
      _includes/components/resume/skill-section.njk
  11. 2
      _includes/layouts/base.njk
  12. 2
      _includes/layouts/resume.njk
  13. 3
      index.md

28
.eleventy.js
Unescape View File

@ -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)) {

60
_includes/assets/css/main.css
Unescape View File

@ -372,62 +372,30 @@ header rt {
}
/*
* .highlight-container: marker for an element which can have its children
* shown or hidden. Should never be nested more than two deep (#page and one
* more element between #page and any elements affected by this) - could be
* modified to support such a thing, but no need yet
* #highlight-container: marker for the element whose children can be shown or
* hidden.
*
* .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
* contained lowlights and hide its highlights
* .show-all: button to make the highlight container show its contained
* lowlights and hide its highlights
*
* elements with these classes are visible only when neither #page nor their
* surrounding container is showing all, thus hidden if either #page or their
* 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".
* elements with these classes are visible only when #highlight-container is not
* showing all, thus hidden if #highlight-container is showing all.
*
* .lowlight: an element or view of an element which will likely be
* uninteresting to whoever the current highlighted version is for
*
* 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
* .show-highlights: button to make the highlight container hide its
* contained lowlights and show its highlights
*
* elements with this class are visible only when their surrounding container
* and _not_ #page is showing all. This is because when #page is 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)
* elements with these classes are visible only when #highlight-container is
* showing all, thus hidden if #highlight-container is _not_ 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 .show-all,
#page.highlight-container:not(.showing-all) .highlight-container:not(.showing-all) .lowlight,
#page.highlight-container:not(.showing-all) header .buttons .lowlight,
#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 {
#highlight-container.showing-all .highlight,
#highlight-container.showing-all .show-all,
#highlight-container:not(.showing-all) .lowlight,
#highlight-container:not(.showing-all) .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;
}

17
_includes/assets/css/screen.css
Unescape View File

@ -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%);
}

22
_includes/assets/js/main.js
Unescape View File

@ -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");
if (!parent) {
return;
}
parent = document.getElementById('highlight-container');
parent.classList.add("showing-all");
}
function showHighlights(button) {
parent = findClosestParentMatching(button, ".highlight-container");
if (!parent) {
return;
}
parent = document.getElementById('highlight-container');
parent.classList.remove("showing-all");
}

22
_includes/components/resume/award-section.njk
Unescape View File

@ -3,16 +3,14 @@
{% 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 %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
<ul class="awards">
{% for award in awardsFiltered %}
{% include "components/resume/award.njk" %}
{% endfor %}
</ul>
<div class="section-header">
<h2>Awards</h2>
{% if awardsFiltered | hasLowlights %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
<ul class="awards">
{% for award in awardsFiltered %}
{% include "components/resume/award.njk" %}
{% endfor %}
</ul>

22
_includes/components/resume/contact-section.njk
Unescape View File

@ -3,16 +3,14 @@
{% 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 %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
<ul class="contacts">
{% for contact in contactsFiltered %}
{% include "components/resume/contact.njk" %}
{% endfor %}
</ul>
<div class="section-header">
<h2>Contact</h2>
{% if contactsFiltered | hasLowlights %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
<ul class="contacts">
{% for contact in contactsFiltered %}
{% include "components/resume/contact.njk" %}
{% endfor %}
</ul>

22
_includes/components/resume/education-section.njk
Unescape View File

@ -3,16 +3,14 @@
{% 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 %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
<ul class="programs">
{% for program in educationFiltered %}
{% include "components/resume/education.njk" %}
{% endfor %}
</ul>
<div class="section-header">
<h2>Education</h2>
{% if educationFiltered | hasLowlights %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
<ul class="programs">
{% for program in educationFiltered %}
{% include "components/resume/education.njk" %}
{% endfor %}
</ul>

17
_includes/components/resume/experience-role.njk
Unescape View File

@ -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 %}
<div class="description{% if (not role.highlight) and role.shortDescription %} lowlight{% endif %}">
{{ role.description | md | safe }}
{% if role.description.full %}
<div class="description{% if hasShortDescription %} lowlight{% endif %}">
{{ 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 %}

5
_includes/components/resume/experience-section.njk
Unescape View File

@ -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 %}

18
_includes/components/resume/skill-section.njk
Unescape View File

@ -3,14 +3,12 @@
{% 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") %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
{% for category in skillCategoriesFiltered %}
{% include "components/resume/skill-subcategory.njk" %}
{% endfor %}
<div class="section-header">
<h2>Skills</h2>
{% if skillCategoriesFiltered | hasLowlightsRecursive("skills") %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
{% for category in skillCategoriesFiltered %}
{% include "components/resume/skill-subcategory.njk" %}
{% endfor %}

2
_includes/layouts/base.njk
Unescape View File

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

2
_includes/layouts/resume.njk
Unescape View File

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

3
index.md
Unescape View File

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

Write Preview
Loading…
Cancel
Save