Implement dynamic generation of aboutus headers

fronteers · Oct 25, 2024 · abcf4d1 · abcf4d1
1 parent 6db2f6e
commit abcf4d1
Show file tree

Hide file tree

Showing 14 changed files with 86 additions and 31 deletions.
diff --git a/src/_components/paired/aboutushero/aboutushero.js b/src/_components/paired/aboutushero/aboutushero.js
@@ -1,13 +1,19 @@
-const { shield } = require("../../shortcodes/shield/shield");
+const { shield, generateShield } = require("../../shortcodes/shield/shield");
 
 const DEFAULTS_FOR_SHIELD = ["triangular", "thunder", "lilac", "purple"];
-exports.aboutushero = (text, title, shieldOptions = []) => {
-  const [style, shape, primary, secondary] = shieldOptions.concat(
-    DEFAULTS_FOR_SHIELD.slice(shieldOptions.length, DEFAULTS_FOR_SHIELD.length)
-  );
-  const heroShield = shield(style, shape, primary, secondary);
+exports.aboutushero = (text, title, shieldText = null) => {
+  const heroShield =
+    shieldText == null
+      ? shield(...DEFAULTS_FOR_SHIELD)
+      : generateShield(
+          shieldText,
+          {},
+          {
+            color: ["red"],
+          }
+        );
 
-    return `<section class="hero-wrapper outer-wrapper">
+  return `<section class="hero-wrapper outer-wrapper">
 <div class="about-us-hero">
 ${heroShield}
 <div class="about-us-hero-graphic">

diff --git a/src/_components/shortcodes/pagehero/pagehero.js b/src/_components/shortcodes/pagehero/pagehero.js
@@ -1,21 +1,29 @@
 // Used for hero on home, activities, blog
 
-const { shield } = require("../shield/shield");
+const { generateShield } = require("../shield/shield");
 
-const heroShield = shield("triangular", "thunder", "lilac", "purple");
-
-exports.pagehero = (heroStyle, herotitle, herotext, heroImage) => `
+exports.pagehero = (
+  heroStyle,
+  herotitle,
+  herotext,
+  heroImage,
+  shieldText = heroStyle
+) => `
 <section class="hero-wrapper outer-wrapper outer-wrapper--${heroStyle}">
   <div class="hero hero--${heroStyle}">
-    ${heroStyle == 'aboutus' ? heroShield : ''}
-    ${heroStyle == 'activities' ? heroImage : ''}
-    ${heroStyle == 'blog' ? heroImage : ''}
- 
+    ${heroStyle == "aboutus" ? generateShield(shieldText) : ""}
+    ${heroStyle == "activities" ? heroImage : ""}
+    ${heroStyle == "blog" ? heroImage : ""}
+
     <div class="hero-graphic">
       <div class="hero-content">
-        ${heroStyle == 'members-single' ? `<img src="${heroImage}" class="member-graphic">` : ''}
-        ${herotitle != '' ? `<h2>${herotitle}</h2>` : ''}
-        ${herotext != '' ? `<p>${herotext}</p>` : ''}
+        ${
+          heroStyle == "members-single"
+            ? `<img src="${heroImage}" class="member-graphic">`
+            : ""
+        }
+        ${herotitle != "" ? `<h2>${herotitle}</h2>` : ""}
+        ${herotext != "" ? `<p>${herotext}</p>` : ""}
       </div>
     </div>
   </div>

diff --git a/src/_components/shortcodes/shield/shield.js b/src/_components/shortcodes/shield/shield.js
@@ -111,7 +111,7 @@ function interpretColor(color) {
  * To avoid similarity of similar names (e.g. Erin and Erik), this function computes a hash of the
  * string and uses that to determine the shield properties.
  */
-function generateShield(term, overrides = {}) {
+function generateShield(term, overrides = {}, excludes = {}) {
   if (term == "") {
     return getShield(SHAPES[0], PATTERNS[2], "#0000007F", "#FFFFFF7F");
   }
@@ -120,7 +120,11 @@ function generateShield(term, overrides = {}) {
     createHash("md5")
       .update(String(overrides.term || term))
       .digest("hex"),
-    [PATTERNS, SHAPES, COLOR_SETS]
+    [
+      reject(PATTERNS, excludes.pattern),
+      reject(SHAPES, excludes.shapes),
+      reject(COLOR_SETS, excludes.color),
+    ]
   );
 
   return getShield(
@@ -131,6 +135,18 @@ function generateShield(term, overrides = {}) {
   );
 }
 
+function reject(values, excludes) {
+  if (!excludes) {
+    return values;
+  }
+
+  return values.filter((value) =>
+    Array.isArray(value)
+      ? value.every((inner) => !excludes.includes(inner))
+      : !excludes.includes(value)
+  );
+}
+
 module.exports = {
   shield: getShield,
   generateShield,

diff --git a/src/_includes/layouts/page.liquid b/src/_includes/layouts/page.liquid
@@ -4,7 +4,7 @@
 
     <main id="main" class="{% if useHero %}styledheader{% endif %}">
         {% if useHero == 'aboutushero' %}
-            {%- aboutushero title -%}
+            {%- aboutushero title shield -%}
                 {{ heroSlogan }}
             {%- endaboutushero -%}
         {% endif %}

diff --git a/src/en/conference/conference.json b/src/en/conference/conference.json
@@ -1,4 +1,5 @@
 {
   "layout": "page.liquid",
-  "useHero": "aboutushero"
+  "useHero": "aboutushero",
+  "shield": "conference"
 }
diff --git a/src/en/jobs/jobs.json b/src/en/jobs/jobs.json
@@ -1,5 +1,6 @@
 {
   "layout": "jobs-single.liquid",
   "tags": "jobs",
-  "useHero": "aboutushero"
+  "useHero": "aboutushero",
+  "shield": "jobs"
 }
diff --git a/src/en/join-us/join-us.json b/src/en/join-us/join-us.json
@@ -1,4 +1,5 @@
 {
   "layout": "page.liquid",
-  "useHero": "aboutushero"
+  "useHero": "aboutushero",
+  "shield": "join-us"
 }
diff --git a/src/en/members/members.json b/src/en/members/members.json
@@ -2,5 +2,6 @@
   "layout": "members-single.liquid",
   "permalink": "/{{ page.filePathStem }}/index.html",
   "tags": "members",
-  "useHero": "aboutushero"
+  "useHero": "aboutushero",
+  "shield": "members"
 }
diff --git a/src/en/organisation/organisation.json b/src/en/organisation/organisation.json
@@ -1,4 +1,5 @@
 {
   "layout": "page.liquid",
-  "useHero": "aboutushero"
+  "useHero": "aboutushero",
+  "shield": "about"
 }
diff --git a/src/nl/congres/congres.json b/src/nl/congres/congres.json
@@ -1,4 +1,5 @@
 {
   "layout": "page.liquid",
-  "useHero": "aboutushero"
+  "useHero": "aboutushero",
+  "shield": "conference"
 }
diff --git a/src/nl/kitchensink.md b/src/nl/kitchensink.md
@@ -231,6 +231,22 @@ tempor incididunt ut labore et dolore magna aliqua.
 Test Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 {% endaboutushero %}
 
+You can change the shield by providing another argument:
+
+<!-- {% raw %} -->
+
+```liquid
+{% aboutushero "We are a proud union", "Dave" %}
+Test Lorem ipsum dolor sit amet, [...]
+{% endaboutushero %}
+```
+
+<!-- {% endraw %} -->
+
+{% aboutushero "We are a proud union", "Dave" %}
+Test Lorem ipsum dolor sit amet, [...]
+{% endaboutushero %}
+
 ## Quote
 
 <!-- {% raw %} -->
@@ -280,7 +296,7 @@ planet.
 
 <!-- {% endraw %} -->
 
-{% memberquote "Anneke Sinnema" "Frontender" "/assets/member-avatars/anneke-sinnema.png" "annekesinnema" %}
+{% memberquote "Anneke Sinnema" "Frontender" "/assets/images/member-avatars/anneke-sinnema.png" "annekesinnema" %}
 To all users of technology who are willing to take a chance, make a choice, and try a new way of doing things so that we can nurture and enjoy a happy, healthy planet.
 {% endmemberquote %}
 

diff --git a/src/nl/vereniging/vereniging.json b/src/nl/vereniging/vereniging.json
@@ -1,4 +1,5 @@
 {
   "layout": "page.liquid",
-  "useHero": "aboutushero"
+  "useHero": "aboutushero",
+  "shield": "about"
 }
diff --git a/src/nl/werk-en-freelance/werk-en-freelance.json b/src/nl/werk-en-freelance/werk-en-freelance.json
@@ -1,5 +1,6 @@
 {
   "layout": "jobs-single.liquid",
   "tags": "jobs",
-  "useHero": "aboutushero"
+  "useHero": "aboutushero",
+  "shield": "jobs"
 }
diff --git a/src/nl/word-lid/word-lid.json b/src/nl/word-lid/word-lid.json
@@ -1,4 +1,5 @@
 {
   "layout": "page.liquid",
-  "useHero": "aboutushero"
+  "useHero": "aboutushero",
+  "shield": "join-us"
 }