@gudhub/ssg-web-components-library 1.0.0

package/src/components/blog/authors-list/authors-list.json

@@ -0,0 +1,132 @@
+{
+    "type": "array",
+    "id": 1,
+    "childs": [
+        {
+            "type": "property",
+            "id": 3,
+            "property_name": "title",
+            "property_type": "field_value",
+            "name_space": "title",
+            "interpretation": 1
+        },
+        {
+            "type": "property",
+            "id": 4,
+            "property_name": "h1",
+            "property_type": "field_value",
+            "name_space": "h1",
+            "interpretation": 1
+        },
+        {
+            "type": "property",
+            "id": 12,
+            "property_name": "id",
+            "property_type": "variable",
+            "variable_type": "current_item"
+        },
+        {
+            "type": "property",
+            "id": 19,
+            "property_name": "thumbnail_alt",
+            "property_type": "field_value",
+            "name_space": "thumbnail_alt",
+            "interpretation": 1
+        },
+        {
+            "type": "property",
+            "id": 16,
+            "property_name": "intro",
+            "property_type": "field_value",
+            "name_space": "intro",
+            "interpretation": 1
+        },
+        {
+            "type": "property",
+            "id": 18,
+            "property_name": "thumbnail_title",
+            "property_type": "field_value",
+            "name_space": "thumbnail_title",
+            "interpretation": 1
+        },
+        {
+            "type": "property",
+            "id": 13,
+            "property_name": "intro_id",
+            "property_type": "field_value",
+            "name_space": "intro"
+        },
+        {
+            "type": "property",
+            "id": 10,
+            "property_name": "description",
+            "property_type": "field_value",
+            "name_space": "description",
+            "interpretation": 1
+        },
+        {
+            "type": "property",
+            "id": 17,
+            "property_name": "thumbnail",
+            "property_type": "field_value",
+            "name_space": "thumbnail",
+            "interpretation": 1
+        },
+        {
+            "type": "property",
+            "id": 6,
+            "property_name": "facebook",
+            "property_type": "field_value",
+            "name_space": "facebook",
+            "interpretation": 1
+        },
+        {
+            "type": "property",
+            "id": 9,
+            "property_name": "thumbnail_src",
+            "property_type": "field_value",
+            "name_space": "thumbnail_src",
+            "interpretation": 1
+        },
+        {
+            "type": "property",
+            "id": 7,
+            "property_name": "slug",
+            "property_type": "field_value",
+            "name_space": "slug",
+            "interpretation": 1
+        },
+        {
+            "type": "property",
+            "id": 5,
+            "property_name": "linkedin",
+            "property_type": "field_value",
+            "name_space": "linkedin",
+            "interpretation": 1
+        }
+    ],
+    "property_name": "authors",
+    "app_id": "33453",
+    "filter": [
+        {
+            "field_id": 796213,
+            "data_type": "radio_button",
+            "valuesArray": [
+                "1"
+            ],
+            "search_type": "equal_or",
+            "$$hashKey": "object:3722",
+            "selected_search_option_variable": "Value"
+        },
+        {
+            "field_id": 796222,
+            "data_type": "radio_button",
+            "valuesArray": [
+                "1"
+            ],
+            "search_type": "equal_or",
+            "$$hashKey": "object:3764",
+            "selected_search_option_variable": "Value"
+        }
+    ]
+}

package/src/components/blog/authors-list/authors-list.scss

@@ -0,0 +1,171 @@
+authors-list {
+    breadcrumbs-component {
+        margin-top: 30px;
+    }
+    h1 {
+        text-align: center;
+    }
+    .authors-list {
+        display: flex;
+        .author {
+            padding: 20px 24px;
+            background: #FFFFFF;
+            border: 1px solid #DBE2E7;
+            a {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                height: 100%;
+            }
+            .image {
+                margin-bottom: 24px;
+                img{
+                    display: block;
+                    // height: 310px;
+                    width: auto;
+                    object-fit: cover;
+                    margin: 0 auto;
+                }
+            }
+            h3 {
+                font-weight: 700;
+                font-size: 40px;
+                line-height: 48px;
+                color: #141616;
+                margin-bottom: 8px;
+            }
+            .description {
+                font-size: 18px;
+                line-height: 25px;
+                color: #4D555B;
+                margin-bottom: 8px;
+            }
+            .intro {
+                font-size: 18px;
+                line-height: 27px;
+                color: #4D555B;
+                margin-bottom: 24px;
+            }
+            .post_bottom {
+                display: flex;
+                .link {
+                    display: flex;
+                    align-items: center;
+                    font-size: 18px;
+                    line-height: 25px;
+                    color: #141616;
+                    padding: 10px 20px;
+                    padding-left: 0;
+                    position: relative;
+                    transition: all 0.2s ease;
+                    &::before {
+                        content: "";
+                        position: absolute;
+                        width: 0;
+                        height: 1px;
+                        background-color: #00BFD6;
+                        bottom: 0;
+                        left: 0;
+                        z-index: 2;
+                        transition: all 0.2s ease;
+                    }
+                    &::after {
+                        content: "";
+                        position: absolute;
+                        width: 100%;
+                        height: 1px;
+                        background-color: #141616;
+                        bottom: 0;
+                        left: 0;
+                    }
+                    svg {
+                        margin-left: 10px;
+                        path {
+                            transition: all .2s ease;
+                        }
+                    }
+                }
+            }
+            &:hover {
+                .post_bottom {
+                    .link {
+                        color: #00BFD6;
+                        &::before {
+                            width: 100%;
+                        }
+                        svg path {
+                            stroke: #00BFD6;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media screen and (min-width: 1025px) {
+    authors-list {
+        .authors-list {
+            .author {
+                width: 32.27%;
+                margin-right: 1.5%;
+                max-width: 464px;
+                &:nth-child(3n) {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 1025px) {
+    authors-list {
+        .authors-list {
+            flex-wrap: wrap;
+        }
+    }
+}
+@media screen and (max-width: 1025px) and (min-width: 750px) {
+    authors-list {
+        .authors-list {
+            .author {
+                width: 49%;
+                margin-right: 2%;
+                margin-bottom: 2%;
+                &:nth-child(2n) {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 750px) {
+    authors-list {
+        .authors-list {
+            .author {
+                width: 100%;
+                margin-bottom: 15px;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}
+@media screen and (max-width: 500px) {
+    authors-list .authors-list .author {
+        padding: 15px;
+        .image {
+            margin-bottom: 15px;
+        }
+        h3 {
+            font-size: 26px;
+            line-height: 36px;
+        }
+        .intro {
+            font-size: 16px;
+            line-height: 24px;
+            margin-bottom: 15px;
+        }
+    }
+}

package/src/components/blog/categories-list/categories-list.html

@@ -0,0 +1,21 @@
+<div class="categories-component">
+    <div class="container">
+        <div class="button" onclick="openList()">Categories</div>
+        <div class="list_wrapper">
+            <ul class="categories_list">
+                <li ${url == '/blog/' ? 'class="active"' : ''}>
+                    <a href="/blog/">View all</a>
+                </li>
+                ${
+                    categories.reduce((acc, category, index) => {
+                        return acc + `
+                            <li ${url == category.slug ? 'class="active"' : ''}>
+                                <a href="${category.slug}">${category.title}</a>
+                            </li>
+                        `
+                    }, '')
+                }
+            </ul>
+        </div>
+    </div>
+</div>

package/src/components/blog/categories-list/categories-list.js

@@ -0,0 +1,26 @@
+import html from './categories-list.html';
+import './categories-list.scss';
+
+import categoriesObject from './categories-list.json';
+
+class CategoriesList extends GHComponent {
+
+    constructor() {
+        super();
+    }
+
+    async onServerRender() {
+        this.categories = await gudhub.jsonConstructor(categoriesObject);
+        this.categories = this.categories.categories;
+        this.url = new URL (window.location.href);
+        this.url = this.url.searchParams.get('path');
+        super.render(html);
+    }
+
+    openList(item) {
+        item.classList.toggle('active');
+    }
+
+}
+
+window.customElements.define('categories-list', CategoriesList);

package/src/components/blog/categories-list/categories-list.json

@@ -0,0 +1,53 @@
+{
+    "type": "array",
+    "id": 1,
+    "childs": [
+        {
+            "type": "property",
+            "id": 3,
+            "property_name": "title",
+            "property_type": "field_value",
+            "name_space": "title",
+            "interpretation": 1
+        },
+        {
+            "type": "property",
+            "id": 4,
+            "property_name": "slug",
+            "property_type": "field_value",
+            "name_space": "slug",
+            "interpretation": 1
+        },
+        {
+            "type": "property",
+            "id": 5,
+            "property_name": "id",
+            "property_type": "variable",
+            "variable_type": "current_item"
+        }
+    ],
+    "property_name": "categories",
+    "app_id": "33453",
+    "filter": [
+        {
+            "field_id": 796213,
+            "data_type": "radio_button",
+            "valuesArray": [
+                "2"
+            ],
+            "search_type": "equal_or",
+            "$$hashKey": "object:17515",
+            "selected_search_option_variable": "Value"
+        },
+        {
+            "field_id": 796222,
+            "data_type": "radio_button",
+            "valuesArray": [
+                "1"
+            ],
+            "search_type": "equal_or",
+            "$$hashKey": "object:17557",
+            "selected_search_option_variable": "Value"
+        }
+    ]
+}

package/src/components/blog/categories-list/categories-list.scss

@@ -0,0 +1,125 @@
+categories-list {
+    margin-bottom: 60px;
+    .list_wrapper {
+        display: flex;
+        justify-content: center;
+    }
+    .categories-component {
+        display: flex;
+        justify-content: center;
+        .button {
+            display: none;
+        }
+    }
+    .categories_list {
+        display: flex;
+        background: #FFFFFF;
+        border: 1px solid rgba(17, 17, 17, 0.08);
+        box-shadow: 0px 4px 10px rgba(17, 17, 17, 0.02);
+        padding: 8px;
+        list-style: none;
+        li {
+            margin-right: 5px;
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+        a {
+            display: block;
+            padding: 8px 16px;
+            font-size: 16px;
+            line-height: 24px;
+            color: #111111;
+            transition: all .2s ease;
+        }
+        li.active, li:hover {
+            a {
+                background: #0C6980;
+                box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
+                color: #fff;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 900px) {
+    categories-list {
+        position: relative;
+        .categories-component {
+            position: absolute;
+            .button {
+                cursor: pointer;
+                display: inline-block;
+                border: 1px solid rgba(17, 17, 17, 0.08);
+                width: 165px;
+                padding: 8px;
+                border-bottom-color: transparent;
+                position: relative;
+                &::after {
+                    content: "";
+                    position: absolute;
+                    top: calc(50% - 2px);
+                    right: 10px;
+                    width: 10px;
+                    height: 10px;
+                    transition: all 0.2s ease;
+                    background-repeat: no-repeat;
+                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M13 1.5L7 7.5L1 1.5' stroke='%2300BFD6' stroke-width='2'/%3E%3C/svg%3E");
+                    background-size: contain;
+                }
+                &.active::after {
+                    top: calc(50% - 6px);
+                    transform: rotate(180deg);
+                }
+            }
+        }
+        .container {
+            position: relative;
+        }
+        .categories_list {
+            flex-direction: column;
+            align-items: flex-start;
+            height: 100%;
+            width: 165px;
+            max-height: 0;
+            overflow: hidden;
+            transition: all .2s ease;
+            padding: 0;
+            li {
+                display: block;
+                width: 100%;
+            }
+        }
+        .list_wrapper {
+            position: absolute;
+            top: 36px;
+            left: 40px;
+        }
+        .button.active + .list_wrapper .categories_list {
+            max-height: 500px;
+        }
+    }
+}
+
+@media screen and (max-width: 600px) {
+    categories-list .list_wrapper {
+        left: 15px;
+    }
+}
+@media screen and (max-width: 460px) {
+    categories-list {
+        margin-bottom: 20px !important;
+        .categories-component {
+            position: static;
+            .button {
+                width: 100%;
+            }
+        }
+        .list_wrapper {
+            width: calc(100% - 30px);
+        }
+        .categories_list {
+            width: 100%;
+        }
+    }
+}

package/src/components/blog/comments/comments.html

@@ -0,0 +1,89 @@
+<section class="comments">
+    <div class="container">
+        <div class="title">Share your thoughts in the comments below!</div>
+        <div class="like_subtitle">Have any ideas or suggestions about the article or website? Feel free to write it.</div>
+        <form class="comment__form" onsubmit="sendForm()">
+            <input type="text" name="name" placeholder="Name" required>
+            <input type="email" name="email" placeholder="Email address">
+            <textarea required name="text" cols="30" rows="10" placeholder="Comment"></textarea>
+            <div class="checkbox">
+                <input type="checkbox" name="save" id="save">
+                <label for="save">Save my name and email in this browser for the next time I comment.</label>
+            </div>
+            <button type="submit">Post Comment</button>
+            <span class="success"></span>
+        </form>
+        ${comments.length > 0 ? `
+            <h2>Comments</h2>
+        ` : ''}
+        <div class="comments__wrapper">
+            ${
+                comments.reduce((acc, comment, index) => {
+                    return acc + ` 
+                        <div itemprop="comment" itemscope="" itemtype="https://schema.org/Comment" data-id="${comment.id}" class="comments__item">
+                            <div class="wrapper">
+                                <div class="image">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#00BFD6" d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm7.753 18.305c-.261-.586-.789-.991-1.871-1.241-2.293-.529-4.428-.993-3.393-2.945 3.145-5.942.833-9.119-2.489-9.119-3.388 0-5.644 3.299-2.489 9.119 1.066 1.964-1.148 2.427-3.393 2.945-1.084.25-1.608.658-1.867 1.246-1.405-1.723-2.251-3.919-2.251-6.31 0-5.514 4.486-10 10-10s10 4.486 10 10c0 2.389-.845 4.583-2.247 6.305z"></path></svg>
+                                </div>
+                                <div class="main">
+                                    <div class="top">
+                                       <div class="top_left">
+                                            <div class="name_email">
+                                                <span itemprop="creator" class="name">${comment.name}</span>
+                                                <span class="email">(${comment.email})</span>
+                                            </div>
+                                            <div class="bottom">
+                                                <span itemprop="datePublished" datetime="${new Date(Number(comment.date)).toLocaleDateString('uk')}" class="date">${new Date(Number(comment.date)).toLocaleDateString('uk')}</span>
+                                            </div>
+                                       </div>
+                                       <div class="top_right">
+                                            <span class="desktop reply" onclick="addCommentForm()">Reply</span> 
+                                        </div>
+                                    </div>
+                                    <p itemprop="text" class="comment_content">
+                                        ${comment.text}
+                                    </p>
+                                    <div class="mobile_wrapper">
+                                        <span class="mobile reply" onclick="addCommentForm()">Reply</span> 
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        ${comment.replies.length ? `
+                            ${
+                                comment.replies.reduce((acc, reply, index) => {
+                                    return acc + ` 
+                                    <div itemprop="comment" itemscope="" itemtype="https://schema.org/Comment" data-id="${comment.id}" class="comments__item reply">
+                                        <div class="wrapper">
+                                            <div class="image">
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#00BFD6" d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm7.753 18.305c-.261-.586-.789-.991-1.871-1.241-2.293-.529-4.428-.993-3.393-2.945 3.145-5.942.833-9.119-2.489-9.119-3.388 0-5.644 3.299-2.489 9.119 1.066 1.964-1.148 2.427-3.393 2.945-1.084.25-1.608.658-1.867 1.246-1.405-1.723-2.251-3.919-2.251-6.31 0-5.514 4.486-10 10-10s10 4.486 10 10c0 2.389-.845 4.583-2.247 6.305z"></path></svg>
+                                            </div>
+                                            <div class="main">
+                                                <div class="top">
+                                                   <div class="top_left">
+                                                        <div class="name_email">
+                                                            <span itemprop="creator" class="name">${reply.name}</span>
+                                                            <span class="email">(${reply.email})</span>
+                                                        </div>
+                                                        <div class="bottom">
+                                                            <span itemprop="datePublished" datetime="${new Date(Number(reply.date)).toLocaleDateString('uk')}" class="date">${new Date(Number(reply.date)).toLocaleDateString('uk')}</span>
+                                                        </div>
+                                                   </div>
+                                                </div>
+                                                <p itemprop="text" class="comment_content">
+                                                    ${reply.text}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    `
+                                }, '')
+                            }
+                        ` : ''}
+                    `
+                    }, 
+                '')
+            }
+        </div>
+    </div>
+</section>