docs(gh-pages): newsline section

pages/11ty/date.filter.js

@@ -0,0 +1,6 @@
+const date = (timestamp) =>
+  new Intl.DateTimeFormat('en-GB', { timeZone: 'UTC', month: 'long', day: '2-digit', year: 'numeric' }).format(new Date(timestamp));
+
+module.exports = (config) => {
+  config.addFilter('date', date);
+};

pages/11ty/hidden.filter.js

@@ -1,6 +1,6 @@
 module.exports = (config) => {
   /** Filter items by hidden marker */
-  const notHiddenFilter = (collection) => collection.filter( item => !item.data.hidden );
+  const notHiddenFilter = (collection) => (collection || []).filter( item => !item.data.hidden );
 
   config.addFilter('notHidden', notHiddenFilter);
 };

pages/11ty/released.filter.js

@@ -2,7 +2,7 @@ const {isDev} = require('./env.config');
 
 const identical = (values) => values;
 const draftsFilter = (values) => {
-  return values.filter((item) => {
+  return (values || []).filter((item) => {
     const tags = [].concat(item.data.tags);
     return !tags.includes('draft');
   });

pages/11ty/sort.filter.js

@@ -1,24 +1,31 @@
 module.exports = (config) => {
   /** Generic sort njk filter */
-  const sortFilter = (comparer) => (values) => {
-    if (!values || !Array.isArray(values)) {
+  const createSortFilter = (comparer) => (values) => {
+    if (!Array.isArray(values)) {
       console.error(`Unexpected values for sort filter: ${values}`);
       return values;
     }
     return [...values].sort(comparer);
   };
 
+  // Utils
+  const resoleDate = (item) => new Date(item.date).getTime();
+  const resoleDateStrict = (item) => item.data.date ? new Date(item.date).getTime() : Number.POSITIVE_INFINITY;
+
   /** Comparer composer */
-  const compose = (cmpA, cmpB) => (a, b) => cmpA(a, b) || cmpB(a, b);
+  const compose = (...cmps) => (a, b) => cmps.reduce((res, cmp) => res || cmp(a, b), 0);
 
   /** Name metadata comparer */
   const nameComparer = (a, b) => a.data.name.localeCompare(b.data.name);
   /** Order metadata comparer */
   const orderComparer = (a, b) => (a.data.order || 0) - (b.data.order || 0);
   /** Date metadata comparer */
-  const dateComparer = (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime();
+  const dateComparer = (a, b) => resoleDate(a) - resoleDate(b);
+  /** Date metadata comparer (will not use file creation date) */
+  const dateComparerStrict = (a, b) => resoleDateStrict(a) - resoleDateStrict(b);
 
-  config.addFilter('sortByName', sortFilter(nameComparer));
-  config.addFilter('sortByNameAndOrder', sortFilter(compose(orderComparer, nameComparer)));
-  config.addFilter('sortByDate', sortFilter(dateComparer));
+  config.addFilter('sortByName', createSortFilter(nameComparer));
+  config.addFilter('sortByNameAndOrder', createSortFilter(compose(orderComparer, nameComparer)));
+  config.addFilter('sortByDate', createSortFilter(dateComparer));
+  config.addFilter('sortByDateStrict', createSortFilter(dateComparerStrict));
 };

pages/src/landing/landing.less

@@ -2,5 +2,5 @@
 @import "./benefits/benefits.less";
 @import "./browser-support/browser-support.less";
 @import "./promo-banner/promo-banner.less";
-@import "./blogs/blogs.less";
+@import "./newsline/newsline.less";
 //@import "./overview/overview.less";

pages/src/landing/newsline/newsline.less

@@ -0,0 +1,101 @@
+@import (reference) "../../common/variables.less";
+
+.newsline {
+  position: relative;
+  margin: 0 auto 10rem;
+
+  &-list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-item {
+    position: relative;
+    list-style: none;
+  }
+
+  &-link {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+
+  &-content {
+    padding: 1.5rem 1rem 1.5rem 3rem;
+    @media @sm-xl {
+      padding: 1.5rem 5rem;
+    }
+
+    color: white;
+    border-left: 3px solid white;
+    transition: border-color .25s ease-in-out;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-image: linear-gradient(to right, fade(@nav-dark-selected, 25%), fade(@nav-dark-selected, 0%));
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity .25s ease-in-out;
+    }
+
+    & &-title {
+      font-size: 1.5rem;
+      margin-left: -1px;
+      margin-bottom: 1rem;
+    }
+    & &-emoji {
+      position: absolute;
+      transform: translateX(-100%);
+      margin-left: -.4rem;
+      @media @sm-xl {
+        margin-left: -.8rem;
+      }
+    }
+    & &-date {
+      display: block;
+      font-size: .85rem;
+      margin-top: .4rem;
+      opacity: .75;
+    }
+
+    & &-text {
+      font-size: 1rem;
+
+      a[href] {
+        position: relative;
+        z-index: 2;
+      }
+
+      // h1-h3 are not allowed in content of the newsline
+      h1, h2, h3 { display: none; }
+
+      h4, .h4 {
+        font-size: 1.2rem;
+      }
+      h5, .h5 {
+        font-size: 1.1rem;
+      }
+      p {
+        margin-bottom: .2rem;
+      }
+    }
+  }
+
+  &-item-highlighted &-content {
+    color: #fbf9a2;
+    border-color: #fbf9a2;
+  }
+
+  &-item &-link:hover + &-content {
+    border-color: @nav-dark-accent;
+    &::before { opacity: 1; }
+  }
+}

pages/views/_includes/landing/newsline.njk

@@ -0,0 +1,34 @@
+{% set releasedNews = collections.news | released | sortByDateStrict | reverse %}
+{% if releasedNews.length %}
+  <div class="newsline container">
+    <h2>{{ landing.news.title }}</h2>
+    <ul class="newsline-list">
+      {% for item in releasedNews | limit(3) %}
+        {% set isArticle = [].concat(item.data.tags).includes('blogs') %}
+        {% set isHighlighted = [].concat(item.data.tags).includes('highlight') %}
+
+        <li class="esl-animate-slide up newsline-item {{ 'newsline-item-highlighted' if isHighlighted }}"
+            esl-animate="{group: true}">
+          {% if item.data.link or isArticle %}
+            <a class="newsline-link"
+               aria-describedby="newsline-item-{{ loop.index }}"
+               href="{{ item.data.link or (item.url | url) }}"></a>
+          {% endif %}
+          <div id="newsline-item-{{ loop.index }}" class="newsline-content">
+            <h3 class="newsline-content-title"><span class="newsline-content-emoji" aria-hidden="true">{{ item.data.emoji }}</span>{{ item.data.title or item.data.name }}</h3>
+
+            {% if isArticle %}
+              <div class="newsline-content-text markdown-container">{{ item.templateContent | text | truncate(250) }}</div>
+            {% else %}
+              <div class="newsline-content-text markdown-container">{{ item.templateContent | safe }}</div>
+            {% endif %}
+
+            {% if item.data.date %}
+              <time class="newsline-content-date" datetime="{{ item.date.toISOString() }}">{{ item.date | date }}</time>
+            {% endif %}
+          </div>
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+{% endif %}

pages/views/_layouts/collection-grid.njk

@@ -4,7 +4,7 @@ layout: content
 <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] | notHidden | released | sortByNameAndOrder %}
+  {% for item in collections[collection] | released | notHidden | sortByNameAndOrder %}
     {% set isDraft = [].concat(item.data.tags).includes('draft') %}
     {% set isBeta = [].concat(item.data.tags).includes('beta') %}
     {% set isNew = [].concat(item.data.tags).includes('new') %}

pages/views/blogs/Contribution Needed - Docs.md

@@ -0,0 +1,9 @@
+---
+name: Documentation
+title: Contribute to ESL documentation
+tags: [highlight, news]
+emoji: 💙
+---
+
+Found a typo? Have an interesting usage example to share? Want to help improve our documentation?
+You are very welcome to contribute to ESL. Check out our [documentation contribution guide](../introduction/index.njk).