docs(gh-pages): newsline section

pages/11ty/date.filter.js

@@ -0,0 +1,8 @@
+module.exports = (config) => {
+  const date = (timestamp) => {
+    const date = new Date(timestamp);
+    return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
+  };
+
+  config.addFilter('date', date);
+};

pages/11ty/markdown.shortcut.js

@@ -37,6 +37,38 @@ class MDRenderer {
     }
   }
 
+  static async renderTruncate(content, maxLength = 250) {
+    try {
+      const {body} = new JSDOM(content).window.document;
+
+      let limitReached = false;
+      let index = 0;
+
+      const nodeHandler = (node) => {
+        if (limitReached) {
+          node.remove();
+          return;
+        }
+
+        const childNodes = Array.from(node.childNodes);
+        if (childNodes.length) {
+          childNodes.forEach((childNode) => nodeHandler(childNode));
+        } else {
+          index += node.textContent.length;
+          if (index < maxLength) return;
+          limitReached = true;
+          node.textContent += `${node.textContent.slice(0, -(index - maxLength))}... `;
+          node.parentNode.insertAdjacentHTML('beforeend', `<p class="news-content-cta">Read more</p>`);
+        }
+      };
+
+      nodeHandler(body);
+      return MDRenderer.renderContent(body);
+    } catch (e) {
+      return `Rendering error: ${e}`;
+    }
+  }
+
   /** Read file and render markdown */
   static async parseFile(filePath) {
     const absolutePath = path.resolve(__dirname, '../../', filePath);
@@ -74,6 +106,8 @@ class MDRenderer {
 }
 
 module.exports = (config) => {
+  console.log(config)
   config.addNunjucksAsyncShortcode('mdRender', MDRenderer.render);
+  config.addNunjucksAsyncShortcode('mdRenderTruncate', MDRenderer.renderTruncate);
 };
 module.exports.MDRenderer = MDRenderer;

pages/src/landing/blogs/blogs.less

@@ -1,50 +1,94 @@
 @import (reference) "../../common/variables.less";
 
-.blogs {
+.newsline {
   position: relative;
-  margin-bottom: 2rem;
+  margin: 5rem auto;
 
   &-item {
     display: flex;
     flex: 1 0 0px;
     align-items: center;
-    padding: 30px 45px;
     list-style: none;
-    @media @sm-xl {
-      display: block;
+  }
+
+  &-content {
+    width: 100%;
+    padding: 10px 45px;
+    color: white;
+    background-size: 0% 100%;
+    transition: color .2s ease-in, background-size 1.5s, background-color 1.5s;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 1px;
+      height: 100%;
+      border-left: 3px solid @nav-dark-fg;
+      transition: border-color .2s ease-in-out;
     }
-    @media @sm {
-      min-width: 300px;
-      max-width: 350px;
+
+    &-cta {
+      display: inline-block;
+      color: @nav-dark-hover;
+      font-weight: bold;
+
+      opacity: 0;
+      transition: opacity .2s ease-in;
     }
-    @media @md-lg {
-      min-width: 340px;
-      max-width: 500px;
+
+    &-date {
+      font-size: .7em;
     }
-    @media @xl {
-      min-width: 400px;
-      max-width: 500px;
+
+    &-name {
+      padding-bottom: 5px;
+      font-size: 1.5rem;
     }
-  }
 
-  &-container {
-    margin: 0 -45px;
-    padding-bottom: 35px;
+    &-text {
+      font-size: 1rem;
 
-    @media @sm-xl {
-      padding-bottom: 50px;
-      display: flex;
-      flex-wrap: wrap;
+      h1, .h1 {
+        font-size: 1.6rem;
+      }
+      h2, .h2 {
+        font-size: 1.4rem;
+        margin-bottom: 1rem;
+      }
+      h3, .h3 {
+        font-size: 1.3rem;
+      }
+      h4, .h4 {
+        font-size: 1.2rem;
+      }
+      h5, .h5 {
+        font-size: 1.1rem;
+      }
     }
-  }
 
-  &-content-name {
-    margin-bottom: 20px;
-    font-size: 1.5rem;
-  }
+    &:hover {
+      color: @nav-dark-hover;
+      text-decoration: none;
+
+      background-color: rgba(@nav-dark-selected, .1);
+      background-image: linear-gradient(to right, #fff0 0%, #fff0 50%, #fff3 100%);
+      background-size: 200% 100%; 
+      background-repeat: no-repeat;
 
-  &-content-text {
-    margin-bottom: 20px;
-    font-size: 1rem;
+      &::before {
+        border-color: @nav-dark-accent;
+      }
+
+      .newsline-content {
+        &-cta {
+          opacity: 1;
+        }
+
+        &-text {
+          color: @nav-dark-accent;
+        }
+      }
+    }
   }
 }

pages/views/_includes/landing/newsline.njk

@@ -0,0 +1,22 @@
+{% set releasedNews = collections.news | released %}
+{% if releasedNews.length %}
+  <div class="newsline container">
+    <h2>{{ landing.news.title }}</h2>
+    <esl-animate target="::next::child" group></esl-animate>
+    <ul class="newsline-container">
+      {% for item in releasedNews | reverse | limit(3) %}
+        <li class="esl-animate-slide-down newsline-item">
+          <a class="newsline-content" href="{{ item.data.link or (item.url | url) }}">
+            <h4 class="newsline-content-name">{{ item.data.emoji }}{{ item.data.name }}</h4>
+            {% if item.data.date %}
+              <p class="newsline-content-date">{{ item.date | date }}</p>
+            {% endif %}
+            <div class="newsline-content-text">
+              {% mdRenderTruncate item.templateContent %}
+            </div>
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+{% endif %}

pages/views/blogs/ESL v4.0.0.md

@@ -2,8 +2,9 @@
 layout: content
 name: ESL v4.0.0
 title: ESL v4.0.0
-tags: [blogs, draft]
+tags: [blogs, news, draft]
 date: 2022-10-01
+emoji: ⚡️
 containerCls: container markdown-container
 ---
 

pages/views/index.11tydata.yml

@@ -53,10 +53,11 @@ landing:
           Our UI component library doesn't introduce any additional restrictions — only benefits, as it offers
           utilities and framework-agnostic web components that work with any tech stack.
 
-  blogs:
-    title: Articles
+  news:
+    title: Articles & Blogs
     cta:
-      text: Read More
+      text: Read more
+
   support:
     title: Browser Support
     text:

pages/views/index.njk

@@ -7,4 +7,4 @@ layout: landing
 {#{% include 'landing/overview.njk/'%}#}
 {% include 'landing/browser-support.njk/'%}
 {% include 'landing/promo-banner.njk/'%}
-{% include 'landing/blogs.njk/'%}
+{% include 'landing/newsline.njk/'%}