https://www.coreldraw.com/static/cdgs/js/blog/blog.js

1$(document).ready(function () {
2    $("#sidebar a").on('click', function (e) {
3        if (this.hash !== "") {
4            e.preventDefault();
5            var hash = this.hash;
6
7
8            $(this).parent().siblings().removeClass('active')
9            $(this).parent().addClass('active')
10
11            $('html, body').animate({
12                scrollTop: $(hash).offset().top
13            }, 600, function () {
14                window.location.hash = hash;
15            });
16        }
17    });
18
19    generateBlogs()
20});
21
22
23
24
25function generateBlogs() {
26
27    const insideRow = document.getElementById('inside-row');
28    const learnRow = document.getElementById('learn-row');
29    const designRow = document.getElementById('design-row');
30    const customerSpotlightRow = document.getElementById('customer-spotlight-row');
31
32
33    blogs.forEach(blog => {
34
35        const blogContainer = document.createElement('div');
36        blogContainer.className = 'col-xs-12 col-sm-6 card';
37
38        let tags = ""
39
40        if (blog.tags.includes('inside'))
41            tags += '<span class="tag-inside">Inside CORELDRAW</span>';
42        if (blog.tags.includes('learn'))
43            tags += '<span class="tag-learn">Learn</span>';
44        if (blog.tags.includes('design'))
45            tags += '<span class="tag-design">Design</span>';
46        if (blog.tags.includes('customer-spotlight'))
47            tags += '<span class="tag-customer-spotlight">Customer Spotlight</span>';
48
49        blogContainer.innerHTML = `
50            <a class="blog" href="${blog.href}" 
51                    data-track-event="e_ctaClick" 
52                    data-track-attr-cta="body-${blog.cta}" 
53                    data-track-attr-ctx="tile" >
54                <img intrinsicsize="603x422" height="422" width="603"
55                    src="${blog.imgSrc}" alt="${blog.imgAlt}" />
56                <div class="blog-content">
57                    <div class="blog-text">
58                        <div class="blog-tags">
59                            ${tags}
60                        </div>
61                        <h3>${blog.title}</h3>
62                        <p>${blog.desc}</p>
63                    </div>
64                    <svg class="icon-button" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
65                    <circle cx="20" cy="20" r="20" fill="currentColor"/>
66                    <path d="M14.1667 20.0001H25.8333M25.8333 20.0001L20 14.1667M25.8333 20.0001L20 25.8334" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
67                    </svg>
68
69                </div>
70            </a>
71        `
72
73        if (blog.tags[0] == 'inside')
74            insideRow.appendChild(blogContainer.cloneNode(true));
75        if (blog.tags[0] == 'learn')
76            learnRow.appendChild(blogContainer.cloneNode(true));
77        if (blog.tags[0] == 'design')
78            designRow.appendChild(blogContainer.cloneNode(true));
79        if (blog.tags[0] == 'customer-spotlight')
80            customerSpotlightRow.appendChild(blogContainer.cloneNode(true));
81    })
82
83
84}
85
86