Merge branch 'main' of https://github.com/bitdefender/www-websites in…

…to DEX-21186

.eslintignore

@@ -4,4 +4,5 @@ _src/scripts/vendor
 _src/vendor
 _src/plugins
 _src/scripts/libs/**
+_src/scripts/utils/bot-prevention.js
 tools

.gitignore

@@ -9,3 +9,5 @@ helix-importer-ui
 
 .vscode/*
 tools/sitemap/node_modules/*
+
+.env

_src/blocks/blog-news/blog-news.css

@@ -0,0 +1,73 @@
+.blog-news {
+    max-width: 1330px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.blog-news h2 {
+    font-size: 2rem;
+    margin-bottom: 10px;
+}
+
+.blog-news .blog-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    justify-content: center;
+    gap: 30px;
+}
+
+.blog-news .blog-card {
+    text-align: center;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+}
+
+.blog-news .blog-card img {
+    object-fit: cover;
+    background-color: #FFD6D6;
+    border-radius: 20px;
+}
+
+.blog-news .blog-card p {
+    font-size: 1.2rem;
+    margin: 0;
+    margin-bottom: 24px;
+    font-weight: bold;
+    color: #000;
+}
+
+.blog-news .blog-card a {
+    text-decoration: none;
+    color:#006EFF;
+    font-weight: bold;
+}
+
+.blog-news .blog-card a:hover {
+    text-decoration: underline;
+}
+
+.blog-news .blog-card .blog-card-content {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    text-align: left;
+}
+
+@media (min-width: 1440px){
+    .blog-news .blog-grid{
+        grid-template-columns: repeat(3, 1fr)
+    }
+
+    .blog-news .blog-card img {
+        width: 420px;
+        height: 308px;
+        object-fit: cover;
+        background-color: #FFD6D6;
+        border-radius: 20px;
+    }
+
+}
+

_src/blocks/blog-news/blog-news.js

@@ -0,0 +1,50 @@
+import { matchHeights } from '../../scripts/utils/utils.js';
+
+async function renderBlogGrid(block, endpoint, articlesNumber) {
+  const blogGrid = block.querySelector('.blog-grid');
+  try {
+    const response = await fetch(endpoint);
+    const rssText = await response.text();
+
+    const data = new window.DOMParser().parseFromString(rssText, 'text/xml');
+    const items = data.querySelectorAll('item');
+    let currentCount = 0;
+    items.forEach((item) => {
+      // eslint-disable-next-line no-plusplus
+      currentCount++;
+      if (currentCount > articlesNumber) return;
+      const link = item.querySelector('link').textContent;
+
+      const title = item.querySelector('title').textContent;
+      const media = item.querySelector('content');
+      const image = media.getAttribute('url');
+
+      // Create a blog card
+      const blogCard = document.createElement('a');
+      blogCard.setAttribute('href', link);
+      blogCard.classList.add('blog-card');
+
+      blogCard.innerHTML = `
+          <img src="${image}" alt="${title}">
+          <div class="blog-card-content">
+              <p>${title}</p>
+              <a href="${link}">Find out more</a>
+          </div>
+      `;
+
+      blogGrid.appendChild(blogCard);
+    });
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }
+}
+
+export default function decorate(block) {
+  const { endpoint, articlesNumber } = block.closest('.section').dataset;
+  const blogGrid = document.createElement('div');
+  block.appendChild(blogGrid);
+  blogGrid.classList.add('blog-grid');
+  renderBlogGrid(block, endpoint, articlesNumber);
+  matchHeights(block, 'p');
+}