@gudhub/ssg-web-components-library 1.0.0

package/src/components/blog/posts-template/posts-template.html

@@ -0,0 +1,239 @@
+<section class="posts-template" ${numberOfPage != 1 ? `data-page="${numberOfPage}"` : ''}>
+    ${empty ? 
+        empty === 'category' ? `
+            <div class="container">
+                <div class="empty">
+                    This category is empty 	&#128557;
+                </div>
+            </div>
+        ` : empty === 'author' ? `
+            <div class="container">
+                <div class="empty">
+                    This author have no posts yet 	&#128557;
+                </div>
+            </div>
+        ` : ''
+    : `
+    <div class="container">
+        <div class="search">
+            <input type="text" placeholder="Search" onfocus="triggeringFetchArticles()" oninput="triggeringSearch()">
+            <div class="icon">
+                <svg class="loader_icon" width="111" height="111" viewBox="0 0 111 111" fill="none" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="55.9604" cy="55.9604" rx="40.234" ry="40.234" stroke="#00BFD6" stroke-width="9"></ellipse> <path d="M55.6819 15.7275C66.3523 15.6536 76.6151 19.8216 84.2125 27.3145C91.8099 34.8074 96.1196 45.0115 96.1935 55.6819" stroke="url(#paint0_linear_4557_5035)" stroke-width="9" stroke-linecap="round"></path> <defs> <linearGradient id="paint0_linear_4557_5035" x1="90.6947" y1="76.2658" x2="16.332" y2="31.743" gradientUnits="userSpaceOnUse"> <stop stop-color="#C5DFFF"></stop> <stop offset="0.0001" stop-color="#C5DFFF"></stop> <stop offset="0.830038" stop-color="#1681FF" stop-opacity="0.01"></stop> <stop offset="1" stop-color="#1681FF" stop-opacity="0"></stop> </linearGradient> </defs> </svg>
+                <svg class="search_icon" xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 24 23" fill="none"><path d="M21.3438 19.8274L15.9158 14.3994C17.2202 12.8335 17.8706 10.825 17.7319 8.79169C17.5931 6.75839 16.6757 4.85688 15.1706 3.48272C13.6656 2.10856 11.6887 1.36755 9.65116 1.41385C7.61366 1.46015 5.67245 2.29018 4.23134 3.73128C2.79024 5.17239 1.96021 7.1136 1.91391 9.1511C1.86762 11.1886 2.60862 13.1655 3.98278 14.6706C5.35694 16.1757 7.25845 17.093 9.29175 17.2318C11.325 17.3706 13.3336 16.7201 14.8995 15.4158L20.3275 20.8438L21.3438 19.8274ZM3.37507 9.34376C3.37507 8.06436 3.75445 6.81369 4.46525 5.74991C5.17604 4.68613 6.18633 3.85702 7.36833 3.36741C8.55034 2.87781 9.85099 2.7497 11.1058 2.9993C12.3606 3.2489 13.5132 3.86499 14.4179 4.76966C15.3226 5.67433 15.9387 6.82695 16.1883 8.08177C16.4379 9.33658 16.3098 10.6372 15.8202 11.8192C15.3306 13.0012 14.5014 14.0115 13.4377 14.7223C12.3739 15.4331 11.1232 15.8125 9.84382 15.8125C8.12878 15.8106 6.48454 15.1285 5.27182 13.9158C4.05911 12.703 3.37697 11.0588 3.37507 9.34376Z" fill="#525252"></path></svg>
+            </div>
+        </div>
+        ${type === "blog" ? `
+        ` : ''}
+        ${mainPost ? `
+            <div class="post main">
+                <div class="post_left">
+                    <a href="${mainArticle.slug}">
+                        <image-component width="670" height="285" data-url="${mainArticle.thumbnail}" data-src="${mainArticle.thumbnail_src}" alt="${mainArticle.thumbnail_alt}" title="${mainArticle.thumbnail_title}"></image-component>
+                    </a>
+                </div> 
+                <div class="post_right">
+                    <div class="top">
+                        <div class="top_flex">
+                            <div>
+                                <div class="categories">
+                                    ${
+                                        mainArticle.categories.reduce((acc, category, index) => {
+                                            return acc + ` 
+                                                <div class="category">
+                                                    <a href="${category.slug}">${category.name}</a>
+                                                </div>       
+                                            `
+                                            }, 
+                                        '')
+                                    }
+                                </div>
+                                <div class="time_to_read">
+                                    <span>${mainArticle.time_to_read}</span>
+                                    <span>min read</span>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="views">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"> <g clip-path="url(#clip0_841_1707)"> <mask id="mask0_841_1707" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="21"> <path d="M20 0.5H0V20.5H20V0.5Z" fill="white"/> </mask> <g mask="url(#mask0_841_1707)"> <mask id="mask1_841_1707" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="21"> <path d="M0 0.500002H20V20.5H0V0.500002Z" fill="white"/> </mask> <g mask="url(#mask1_841_1707)"> <path d="M19.1719 10.5C19.1719 10.5 16.2031 16.75 9.95312 16.75C3.70312 16.75 0.734375 10.5 0.734375 10.5C0.734375 10.5 3.70312 4.25 9.95312 4.25C16.2031 4.25 19.1719 10.5 19.1719 10.5Z" stroke="#0C6980" stroke-width="1.5625" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.0781 10.5C13.0781 8.7741 11.679 7.375 9.95312 7.375C8.22723 7.375 6.82812 8.7741 6.82812 10.5C6.82812 12.2259 8.22723 13.625 9.95312 13.625C11.679 13.625 13.0781 12.2259 13.0781 10.5Z" stroke="#0C6980" stroke-width="1.5625" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> </g> </g> </g> <defs> <clipPath id="clip0_841_1707"> <rect width="20" height="20" fill="white" transform="translate(0 0.5)"/> </clipPath> </defs> </svg>
+                                    <span>${mainArticle.views}</span>
+                                </div>
+                                <div class="rating">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none"> <path d="M9.5 1.33912L12.1266 6.65893L18 7.51203L13.75 11.6529L14.7532 17.5L9.5 14.7394L4.24678 17.5L5.25004 11.6529L1 7.51203L6.87335 6.65893L9.5 1.33912Z" stroke="#0C6980" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> </svg>
+                                    <span>${mainArticle.rating.avg}</span>
+                                </div>
+                                <div class="comments">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none"> <g id="Group"> <g id="Group_2"> <g id="Group_3"> <path id="Vector" d="M12.8477 9.29297C13.3331 9.29297 13.7266 8.89947 13.7266 8.41406C13.7266 7.92866 13.3331 7.53516 12.8477 7.53516C12.3622 7.53516 11.9688 7.92866 11.9688 8.41406C11.9688 8.89947 12.3622 9.29297 12.8477 9.29297Z" fill="#0C6980"/> <path id="Vector_2" d="M9.33203 9.29297C9.81744 9.29297 10.2109 8.89947 10.2109 8.41406C10.2109 7.92866 9.81744 7.53516 9.33203 7.53516C8.84662 7.53516 8.45312 7.92866 8.45312 8.41406C8.45312 8.89947 8.84662 9.29297 9.33203 9.29297Z" fill="#0C6980"/> <path id="Vector_3" d="M5.81641 9.29297C6.30181 9.29297 6.69531 8.89947 6.69531 8.41406C6.69531 7.92866 6.30181 7.53516 5.81641 7.53516C5.331 7.53516 4.9375 7.92866 4.9375 8.41406C4.9375 8.89947 5.331 9.29297 5.81641 9.29297Z" fill="#0C6980"/> <path id="Vector_4" d="M17.6289 0.75H1.03516C0.64682 0.75 0.332031 1.06479 0.332031 1.45312V15.375C0.332031 15.7633 0.64682 16.0781 1.03516 16.0781H7.257L8.73754 18.4223C8.86639 18.6263 9.09079 18.75 9.33203 18.75C9.57327 18.75 9.79768 18.6263 9.92652 18.4223L11.4071 16.0781H17.6289C18.0172 16.0781 18.332 15.7633 18.332 15.375V1.45312C18.332 1.06479 18.0172 0.75 17.6289 0.75ZM16.9258 14.6719H11.0195C10.7783 14.6719 10.5539 14.7956 10.425 14.9995L9.33203 16.7301L8.23902 14.9995C8.11018 14.7956 7.88577 14.6719 7.64453 14.6719H1.73828V2.15625H16.9258V14.6719Z" fill="#0C6980"/> </g> </g> </g> </svg>
+                                    <span>${mainArticle.commentsQuantity}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <a href="${mainArticle.slug}">
+                            <h2 class="post_title main_post_title">
+                                ${mainArticle.h1}
+                            </h2>
+                        </a>
+                    </div>
+                    <div class="author_date">
+                        <div class="symbol">By</div>
+                        <a class="author" href="${mainArticle.author_slug}">${mainArticle.author}</a>
+                        <div class="symbol"> | </div>
+                        <div class="posted_at">
+                            ${new Date(Number(mainArticle.posted_at)).toLocaleDateString('uk')}
+                        </div>
+                    </div>
+                    <div class="intro">            
+                        ${mainArticle.intro}
+                    </div>
+                    <div class="read_more">
+                        <a href="${mainArticle.slug}">
+                            <span>Read more</span>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="17" viewBox="0 0 22 17" fill="none">
+                                <path d="M12.5 1L20 8.5M20 8.5L12.5 16M20 8.5L0 8.5" stroke="#141616" stroke-width="2"/>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>    
+        ` : ''}
+        
+        <div class="posts_list">
+            ${
+                postForPage ? postForPage.reduce((acc, article, index) => {
+                return acc + `
+                    <div class="post">
+                        <div class="post_left">
+                            <a href="${article.slug}">
+                                <image-component width="462" height="200" lazyload data-url="${article.thumbnail}" data-src="${article.thumbnail_src}" alt="${article.thumbnail_alt}" title="${article.thumbnail_title}"></image-component>
+                            </a>
+                        </div> 
+                        <div class="post_right">
+                            <div class="top">
+                                <div class="top_flex">
+                                    <div>
+                                        <div class="categories">
+                                            ${
+                                                article.categories.reduce((acc, category, index) => {
+                                                    return acc + ` 
+                                                        <div class="category">
+                                                            <a href="${category.slug}">${category.name}</a>
+                                                        </div>       
+                                                    `
+                                                    }, 
+                                                '')
+                                            }
+                                        </div>
+                                        <div class="time_to_read">
+                                            <span>${article.time_to_read}</span>
+                                            <span>min read</span>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <div class="views">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"> <g clip-path="url(#clip0_841_1707)"> <mask id="mask0_841_1707" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="21"> <path d="M20 0.5H0V20.5H20V0.5Z" fill="white"/> </mask> <g mask="url(#mask0_841_1707)"> <mask id="mask1_841_1707" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="21"> <path d="M0 0.500002H20V20.5H0V0.500002Z" fill="white"/> </mask> <g mask="url(#mask1_841_1707)"> <path d="M19.1719 10.5C19.1719 10.5 16.2031 16.75 9.95312 16.75C3.70312 16.75 0.734375 10.5 0.734375 10.5C0.734375 10.5 3.70312 4.25 9.95312 4.25C16.2031 4.25 19.1719 10.5 19.1719 10.5Z" stroke="#0C6980" stroke-width="1.5625" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.0781 10.5C13.0781 8.7741 11.679 7.375 9.95312 7.375C8.22723 7.375 6.82812 8.7741 6.82812 10.5C6.82812 12.2259 8.22723 13.625 9.95312 13.625C11.679 13.625 13.0781 12.2259 13.0781 10.5Z" stroke="#0C6980" stroke-width="1.5625" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> </g> </g> </g> <defs> <clipPath id="clip0_841_1707"> <rect width="20" height="20" fill="white" transform="translate(0 0.5)"/> </clipPath> </defs> </svg>
+                                            <span>${article.views}</span>
+                                        </div>
+                                        <div class="rating">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none"> <path d="M9.5 1.33912L12.1266 6.65893L18 7.51203L13.75 11.6529L14.7532 17.5L9.5 14.7394L4.24678 17.5L5.25004 11.6529L1 7.51203L6.87335 6.65893L9.5 1.33912Z" stroke="#0C6980" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> </svg>
+                                            <span>${article.rating.avg}</span>
+                                        </div>
+                                        <div class="comments">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none"> <g id="Group"> <g id="Group_2"> <g id="Group_3"> <path id="Vector" d="M12.8477 9.29297C13.3331 9.29297 13.7266 8.89947 13.7266 8.41406C13.7266 7.92866 13.3331 7.53516 12.8477 7.53516C12.3622 7.53516 11.9688 7.92866 11.9688 8.41406C11.9688 8.89947 12.3622 9.29297 12.8477 9.29297Z" fill="#0C6980"/> <path id="Vector_2" d="M9.33203 9.29297C9.81744 9.29297 10.2109 8.89947 10.2109 8.41406C10.2109 7.92866 9.81744 7.53516 9.33203 7.53516C8.84662 7.53516 8.45312 7.92866 8.45312 8.41406C8.45312 8.89947 8.84662 9.29297 9.33203 9.29297Z" fill="#0C6980"/> <path id="Vector_3" d="M5.81641 9.29297C6.30181 9.29297 6.69531 8.89947 6.69531 8.41406C6.69531 7.92866 6.30181 7.53516 5.81641 7.53516C5.331 7.53516 4.9375 7.92866 4.9375 8.41406C4.9375 8.89947 5.331 9.29297 5.81641 9.29297Z" fill="#0C6980"/> <path id="Vector_4" d="M17.6289 0.75H1.03516C0.64682 0.75 0.332031 1.06479 0.332031 1.45312V15.375C0.332031 15.7633 0.64682 16.0781 1.03516 16.0781H7.257L8.73754 18.4223C8.86639 18.6263 9.09079 18.75 9.33203 18.75C9.57327 18.75 9.79768 18.6263 9.92652 18.4223L11.4071 16.0781H17.6289C18.0172 16.0781 18.332 15.7633 18.332 15.375V1.45312C18.332 1.06479 18.0172 0.75 17.6289 0.75ZM16.9258 14.6719H11.0195C10.7783 14.6719 10.5539 14.7956 10.425 14.9995L9.33203 16.7301L8.23902 14.9995C8.11018 14.7956 7.88577 14.6719 7.64453 14.6719H1.73828V2.15625H16.9258V14.6719Z" fill="#0C6980"/> </g> </g> </g> </svg>
+                                            <span>${article.commentsQuantity}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <a href="${article.slug}">
+                                    <div class="post_title">
+                                        ${article.h1}
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="bottom">
+                                <div class="author_date">
+                                    <div class="symbol">By</div>
+                                    <a class="author" href="${article.author_slug}">${article.author}</a>
+                                    <div class="symbol"> | </div>
+                                    <div class="posted_at">
+                                        ${new Date(Number(article.posted_at)).toLocaleDateString('uk')}
+                                    </div>
+                                </div>
+                                <div class="intro">            
+                                    ${article.intro}
+                                </div>
+                                <div class="read_more">
+                                    <a href="${article.slug}">
+                                        <span>Read more</span>
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="17" viewBox="0 0 22 17" fill="none">
+                                            <path d="M12.5 1L20 8.5M20 8.5L12.5 16M20 8.5L0 8.5" stroke="#141616" stroke-width="2"/>
+                                        </svg>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    `
+                }, '') : ''
+            }
+        </div>
+        ${ amountOfPages > 1 ? `
+            <div class="pagination">
+                <div class="pagination_wrapper">
+                    <div class="prev ${numberOfPage == 1 ? 'disable' : ''}">
+                        ${numberOfPage == 2 ? `
+                            <a href="${currentCategory ? `${currentCategory.slug}` : '/blog/'}">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none"><path d="M8 13L2 7M2 7L8 0.999999M2 7L18 7" stroke="#4D555B" stroke-width="2"/></svg>
+                            </a>
+                        ` : numberOfPage == 1 ? `
+                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none"><path d="M8 13L2 7M2 7L8 0.999999M2 7L18 7" stroke="#4D555B" stroke-width="2"/></svg>
+                            ` : `
+                                <a href="${currentCategory ? `${currentCategory.slug}` : '/blog/'}page/${numberOfPage -1}/">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none"><path d="M8 13L2 7M2 7L8 0.999999M2 7L18 7" stroke="#4D555B" stroke-width="2"/></svg>
+                                </a>
+                            `}
+                    </div>
+                    <ul class="pages">
+                        
+                        ${
+                            countOfPages.reduce((acc, page, index) => {
+                            return acc + `
+                                ${index > 0 ? `
+                                    ${numberOfPage == index + 1 ? `
+                                        <li class="page active">
+                                            <span>${index + 1}</span>
+                                        </li>
+                                    ` : `
+                                        <li class="page ${numberOfPage == index + 1 ? 'active' : ''}">
+                                            <a href="${currentCategory ? `${currentCategory.slug}` : '/blog/'}page/${index + 1}/">${index + 1}</a>
+                                        </li>
+                                    `}
+                                ` : `
+                                    ${numberOfPage == index + 1 ? `
+                                        <li class="page active">
+                                            <span>${index + 1}</span>
+                                        </li>
+                                    
+                                    ` : `
+                                        <li class="page">
+                                            <a href="${currentCategory ? `${currentCategory.slug}` : '/blog/'}">1</a>
+                                        </li>    
+                                    `}
+                                `}
+                                `
+                            }, '')
+                        }
+                    </ul>
+                    <div class="next ${countOfPages.length == numberOfPage ? 'disable' : ''}">
+                        ${countOfPages.length == numberOfPage ? `
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none"><path d="M10 1L16 7M16 7L10 13M16 7L-1.04907e-06 7" stroke="#4D555B" stroke-width="2"/></svg>
+                        ` : `
+                            <a href="${currentCategory ? `${currentCategory.slug}` : '/blog/'}page/${numberOfPage + 1}/">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none"><path d="M10 1L16 7M16 7L10 13M16 7L-1.04907e-06 7" stroke="#4D555B" stroke-width="2"/></svg>
+                            </a>
+                        `}
+                    </div>
+                </div>
+            </div>
+        ` : ''}
+    </div>
+    `}
+</section>