Merge pull request #2540 from exadel-inc/tech/site-utils

refactor(site): introduce missing common utilities and enhancements from presentation branch
exadel-inc · Jul 26, 2024 · 0872df0 · 0872df0
2 parents 9c488b3 + 9c0745d
commit 0872df0
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 45 deletions.
diff --git a/site/11ty/sort.filter.js b/site/11ty/sort.filter.js
@@ -12,6 +12,9 @@ module.exports = (config) => {
   /** Order metadata comparer */
   const orderComparer = (a, b) => (a.data.order ?? 0) - (b.data.order ?? 0);
 
+  /** Page path comparer */
+  const pathComparer = (a, b) => (a.inputPath || '').localeCompare(b.inputPath || '');
+
   /** Abstract string comparer */
   const stringComparer = (field) => (a, b) => {
     const aField = a.data[field] || '';
@@ -28,6 +31,8 @@ module.exports = (config) => {
         return metaDateComparer;
       case 'order':
         return orderComparer;
+      case 'path':
+        return pathComparer;
       default:
         return stringComparer(field);
     }

diff --git a/site/11ty/tree.filter.js b/site/11ty/tree.filter.js
@@ -0,0 +1,26 @@
+const findParent = (list, parent) => {
+  if (!parent) return null;
+  return list.find((item) => item.fileSlug === parent || item.data.id === parent || item.data.title === parent);
+};
+
+/** Group items into a tree structure using given property */
+function treeBuilder(items) {
+  const root = [];
+  items.forEach((item, index) => {
+    item.children = [];
+    item.data.index = index;
+  });
+  items.forEach((item) => {
+    const parent = findParent(items, item.data.parent);
+    if (parent) {
+      parent.children.push(item);
+    } else {
+      root.push(item);
+    }
+  });
+  return root;
+}
+
+module.exports = (config) => {
+  config.addFilter('tree', treeBuilder);
+};
diff --git a/site/src/collection-grid/collection-grid.less b/site/src/collection-grid/collection-grid.less
@@ -18,6 +18,7 @@
       color 0.25s ease-in-out,
       border-color 0.25s ease-in-out;
 
+    color: inherit;
     &:hover {
       text-decoration: none;
     }
@@ -38,10 +39,13 @@
     min-height: 60px;
     font-size: 1.2rem;
     font-weight: 600;
-    color: black;
+    color: inherit;
     padding: 5px 15px;
     transition: color 0.25s ease-in-out;
   }
+  &-compact &-title {
+    min-height: 50px;
+  }
 
   &-item.draft &-box {
     opacity: 0.3;
@@ -70,6 +74,12 @@
       max-height: 160px;
     }
   }
+  &-compact &-svg {
+    min-height: 180px;
+    svg {
+      max-height: 140px;
+    }
+  }
 
   &-alt {
     text-align: center;
@@ -91,11 +101,16 @@
   }
 
   &-column {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @media @md-xl {
+    &-column&-compact {
+      grid-template-columns: repeat(4, 1fr);
+    }
   }
 
   &-column &-item {
-    background-color: white;
+    background-color: transparent;
     border-radius: 0.75rem;
     border: 1px solid #c8d6f0;
     max-width: 100%;
@@ -142,4 +157,9 @@
   .arrows-icon.right {
     transform: rotate(-45deg);
   }
+
+  &-bg-white &-item {
+    color: black;
+    background-color: white;
+  }
 }
diff --git a/site/src/common/flex.less b/site/src/common/flex.less
@@ -34,6 +34,9 @@
   &-around {
     justify-content: space-around !important;
   }
+  &-center {
+    justify-content: center !important;
+  }
 }
 
 .align-items {

diff --git a/site/src/common/helpers.less b/site/src/common/helpers.less
@@ -22,6 +22,16 @@
       display: none !important;
     }
   }
+  @media @xs-sm {
+    &-mobile {
+      display: none !important;
+    }
+  }
+  @media @md-xl {
+    &-desktop {
+      display: none !important;
+    }
+  }
 }
 .show {
   @media @sm-xl {
@@ -144,8 +154,16 @@
 }
 
 // Text
-.text-center {
-  text-align: center !important;
+.text {
+  &-left {
+    text-align: left !important;
+  }
+  &-center {
+    text-align: center !important;
+  }
+  &-right {
+    text-align: right !important;
+  }
 }
 
 // A11ty helpers
@@ -160,3 +178,21 @@
   white-space: nowrap;
   border: 0;
 }
+
+.list-spaced {
+  > li {
+    margin-block-end: 0.5rem;
+  }
+}
+
+.icon-inline {
+  display: inline-flex;
+
+  min-width: 1em;
+  height: 1em;
+
+  &.large {
+    min-width: 2em;
+    height: 2em;
+  }
+}
diff --git a/site/static/assets/examples/animate.svg b/site/static/assets/examples/animate.svg
diff --git a/site/views/_includes/navigation/collection-grid.njk b/site/views/_includes/navigation/collection-grid.njk
@@ -0,0 +1,42 @@
+{% macro grid(collection, options = {}) %}
+  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet">
+
+  <ul class="collection-grid unstyled-list {{ 'collection-grid-column' if options.isList }} {{ options.classes or ''}}">
+    {% for item in collections[collection] | released | exclude('data.hidden') | sortBy('order', 'name') %}
+      {% set badgeAllowed = not options.noBadge %}
+      {% set isDraft = badgeAllowed and [].concat(item.data.tags).includes('draft') %}
+      {% set isBeta = badgeAllowed and [].concat(item.data.tags).includes('beta') %}
+      {% set isNew = badgeAllowed and [].concat(item.data.tags).includes('new') %}
+      <li>
+        <a class="collection-grid-item {{ 'draft' if isDraft }}"
+           href="{{ item.url | url }}">
+          <div class="collection-grid-title collection-grid-box">
+          <span>{{ item.data.name }}
+            {% if isBeta %}
+              <sup class="badge badge-sup badge-warning">beta</sup>
+            {% endif %}
+            {% if isDraft %}
+              <sup class="badge badge-sup badge-danger">draft</sup>
+            {% endif %}
+            {% if isNew %}
+              <sup class="badge badge-sup badge-success">new</sup>
+            {% endif %}
+          </span>
+          </div>
+          <hr class="collection-grid-divider" />
+          <div class="collection-grid-box collection-grid-svg">
+            {% if item.data.icon %}
+              {% include "static/assets/" + item.data.icon %}
+            {% elseif options.isList %}
+              <span class="arrows-icon right"></span>
+            {% elseif item.data.iconAlt %}
+              <div class="collection-grid-alt {{ 'collection-grid-alt-small' if item.data.iconAlt.length >= 20 }}">
+                {{ item.data.iconAlt }}
+              </div>
+            {% endif %}
+          </div>
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+{% endmacro %}
diff --git a/site/views/_layouts/collection-grid.njk b/site/views/_layouts/collection-grid.njk
@@ -3,42 +3,6 @@ layout: content
 banner:
   disabled: true
 ---
-<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet">
 
-<ul class="collection-grid unstyled-list {{ 'collection-grid-column' if list }}">
-  {% for item in collections[collection] | released | exclude('data.hidden') | sortBy('order', 'name') %}
-    {% set isDraft = [].concat(item.data.tags).includes('draft') %}
-    {% set isBeta = [].concat(item.data.tags).includes('beta') %}
-    {% set isNew = [].concat(item.data.tags).includes('new') %}
-    <li>
-      <a class="collection-grid-item {{ 'draft' if isDraft }}"
-         href="{{ item.url | url }}">
-        <div class="collection-grid-title collection-grid-box">
-          <span>{{ item.data.name }}
-            {% if isBeta %}
-              <sup class="badge badge-sup badge-warning">beta</sup>
-            {% endif %}
-            {% if isDraft %}
-              <sup class="badge badge-sup badge-danger">draft</sup>
-            {% endif %}
-            {% if isNew %}
-              <sup class="badge badge-sup badge-success">new</sup>
-            {% endif %}
-          </span>
-        </div>
-        <hr class="collection-grid-divider"/>
-        <div class="collection-grid-box collection-grid-svg">
-          {% if item.data.icon %}
-            {% include "static/assets/" + item.data.icon %}
-          {% elseif list %}
-            <span class="arrows-icon right"></span>
-          {% elseif item.data.iconAlt %}
-            <div class="collection-grid-alt {{ 'collection-grid-alt-small' if item.data.iconAlt.length >= 20 }}">
-              {{ item.data.iconAlt }}
-            </div>
-          {% endif %}
-        </div>
-      </a>
-    </li>
-  {% endfor %}
-</ul>
+{% from 'navigation/collection-grid.njk' import grid with context %}
+{{ grid(collection, {isList: list, classes: 'collection-grid-bg-white'}) }}
diff --git a/site/views/examples/carousel/siblings.sample.njk b/site/views/examples/carousel/siblings.sample.njk
@@ -9,7 +9,7 @@ tags: carousel-sample
   </button>
 
   <esl-carousel demo-options-target
-                style="padding-inline: 60px"
+                style="padding-inline: 60px; margin-inline: 0;"
                 esl-carousel-touch
                 count="2"
                 loop="true">