@gudhub/ssg-web-components-library 1.0.0

package/src/components/recent-posts/recent-posts.js

@@ -0,0 +1,89 @@
+import html from './recent-posts.html';
+import { generateArticlesAndCommentsObject } from '../../generate-articles-and-comments-object.js';
+import authorObject from './author-object.json';
+import './recent-posts.scss';
+
+class RecentPosts extends GHComponent {
+    constructor() {
+        super();
+    }
+    
+    async onServerRender() {
+        let articlesAndComments = await gudhub.jsonConstructor(await generateArticlesAndCommentsObject());
+        console.log('articlesAndComments',articlesAndComments)
+        let articles = articlesAndComments.articlesAndComments.articles;
+        console.log('articles',articles)
+        let comments = articlesAndComments.articlesAndComments.comments;
+        let categories = articlesAndComments.articlesAndComments.categories;
+
+        const authors = await gudhub.jsonConstructor(authorObject);
+        this.authors = authors.authors;
+
+        this.articles = articles.slice(0, 3);
+        for (let article in this.articles) {
+            let commentsQuantity = 0;
+            for (let comment in comments) {
+                if (comments[comment].article_id == this.articles[article].id) {
+                    commentsQuantity++;
+                }
+            }
+            this.articles[article].commentsQuantity = commentsQuantity;
+        }
+
+        for (let article = 0; article < this.articles.length; article++) {
+            // CATEGORIES
+            this.articles[article].rating.avg = Number(this.articles[article].rating.avg.toFixed(1));
+            const post = this.articles[article];
+            post.category = [];
+            
+            for (let category in post.categories) {
+                let categoryName = this.articles[article].categories[category].fields.find(field => field.field_id == window.constants.chapters.blog.heading_field_id).field_value;
+                let categorySlug = this.articles[article].categories[category].fields.find(field => field.field_id == window.constants.chapters.blog.slug_field_id).field_value;
+                let categoryObject = {
+                    "name": categoryName,
+                    "slug": categorySlug
+                }
+                post.category.push(categoryObject)
+            }
+            this.articles[article].categories = post.category;
+            delete this.articles[article].category;
+
+            // AUTHORS
+            console.log(this.authors)
+            let authorSlug = this.authors.find(author => {
+                if (author.author_id == this.articles[article].author_id) {
+                    return author
+                }
+            });
+            console.log(authorSlug)
+            this.articles[article].author_slug = authorSlug.slug
+        }
+
+        // INTRO
+        const promises = [];
+        this.articles.forEach((article, index) => {
+            promises.push(new Promise(async (resolve) => {
+                let content = await gudhub.getInterpretationById(window.constants.chapters.blog.app_id, article.id.split('.')[1], article.intro_id, 'html');
+                this.articles[index].intro = content;
+                resolve();
+            }));
+        });
+
+        await new Promise(resolve => {
+            Promise.all(promises).then(() => {
+                resolve();
+            })
+        });
+
+        super.render(html);
+    }
+
+    openArticle(post) {
+        if (event.target.tagName != 'A' ) {
+            let href = post.querySelector('.post_left a').href;
+            window.location.href = href;
+        }
+    }
+}
+
+window.customElements.define('recent-posts', RecentPosts);

package/src/components/recent-posts/recent-posts.json

@@ -0,0 +1,258 @@
+{
+    "type": "object",
+    "id": 3,
+    "childs": [
+        {
+            "type": "array",
+            "id": 1,
+            "childs": [
+                {
+                    "type": "property",
+                    "id": 3,
+                    "property_name": "article_id",
+                    "property_type": "field_value",
+                    "name_space": "article"
+                }
+            ],
+            "property_name": "comments",
+            "app_id": "33454",
+            "filter": [
+                {
+                    "field_id": 796249,
+                    "data_type": "radio_button",
+                    "valuesArray": [
+                        "1"
+                    ],
+                    "search_type": "equal_or",
+                    "selected_search_option_variable": "Value"
+                }
+            ]
+        },
+        {
+            "type": "array",
+            "id": 1,
+            "childs": [
+                {
+                    "type": "property",
+                    "id": 3,
+                    "property_name": "h1",
+                    "property_type": "field_value",
+                    "name_space": "h1",
+                    "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",
+                    "boolean_strategy": "and",
+                    "valuesArray": [
+                        "2"
+                    ],
+                    "search_type": "equal_or",
+                    "$$hashKey": "object:9190",
+                    "selected_search_option_variable": "Value"
+                },
+                {
+                    "field_id": 796222,
+                    "data_type": "radio_button",
+                    "boolean_strategy": "and",
+                    "valuesArray": [
+                        "1"
+                    ],
+                    "search_type": "equal_or",
+                    "$$hashKey": "object:9236",
+                    "selected_search_option_variable": "Value"
+                }
+            ],
+            "isSortable": 0
+        },
+        {
+            "type": "array",
+            "id": 1,
+            "childs": [
+                {
+                    "type": "property",
+                    "id": 3,
+                    "property_name": "title",
+                    "property_type": "field_value",
+                    "name_space": "title",
+                    "interpretation": 1
+                },
+                {
+                    "type": "property",
+                    "id": 7,
+                    "property_name": "intro",
+                    "property_type": "field_value",
+                    "name_space": "intro"
+                },
+                {
+                    "type": "property",
+                    "id": 21,
+                    "property_name": "categories",
+                    "property_type": "function",
+                    "function": "function(item, appId) {\n  const app = await gudhub.getApp(appId);\n  const categoryField = item.fields.find(field => field.field_id == 796231);\n  if(categoryField) {\n    const categoryItems = categoryField.field_value.split(',');\n    const categoryItemsIds = categoryItems.map(item => Number(item.split('.')[1]));\n    return app.items_list.filter(item => categoryItemsIds.includes(Number(item.item_id)));\n  }\n  return null;\n}"
+                },
+                {
+                    "type": "property",
+                    "id": 18,
+                    "property_name": "updated_at",
+                    "property_type": "field_value",
+                    "name_space": "updated_at"
+                },
+                {
+                    "type": "property",
+                    "id": 20,
+                    "property_name": "rating",
+                    "property_type": "function",
+                    "function": "function(item, appId, gudhub) {\n  const app = await gudhub.getApp(appId);\n  let ratings = item.fields.find(field => field.field_id == 796224);\n  let summ = 0;\n  if(ratings) {\n    ratings = ratings.field_value.split(',');\n    ratings.forEach(item => summ += Number(item));\n  }\n  return {\n    count: ratings.length || 0,\n    avg: summ / ratings.length\n  };\n}"
+                },
+                {
+                    "type": "property",
+                    "id": 19,
+                    "property_name": "views",
+                    "property_type": "field_value",
+                    "name_space": "views",
+                    "interpretation": 1
+                },
+                {
+                    "type": "property",
+                    "id": 13,
+                    "property_name": "thumbnail_src",
+                    "property_type": "field_value",
+                    "name_space": "thumbnail_src",
+                    "interpretation": 1
+                },
+                {
+                    "type": "property",
+                    "id": 15,
+                    "property_name": "thumbnail_alt",
+                    "property_type": "field_value",
+                    "name_space": "thumbnail_alt",
+                    "interpretation": 1
+                },
+                {
+                    "type": "property",
+                    "id": 16,
+                    "property_name": "thumbnail_title",
+                    "property_type": "field_value",
+                    "name_space": "thumbnail_title",
+                    "interpretation": 1
+                },
+                {
+                    "type": "property",
+                    "id": 14,
+                    "property_name": "thumbnail",
+                    "property_type": "field_value",
+                    "name_space": "thumbnail",
+                    "interpretation": 1
+                },
+                {
+                    "type": "property",
+                    "id": 17,
+                    "property_name": "posted_at",
+                    "property_type": "field_value",
+                    "name_space": "posted_at"
+                },
+                {
+                    "type": "property",
+                    "id": 4,
+                    "property_name": "slug",
+                    "property_type": "field_value",
+                    "name_space": "slug",
+                    "interpretation": 1
+                },
+                {
+                    "type": "property",
+                    "id": 12,
+                    "property_name": "h1",
+                    "property_type": "field_value",
+                    "name_space": "h1",
+                    "interpretation": 1
+                },
+                {
+                    "type": "property",
+                    "id": 10,
+                    "property_name": "author_id",
+                    "property_type": "field_value",
+                    "name_space": "author"
+                },
+                {
+                    "type": "property",
+                    "id": 11,
+                    "property_name": "intro_id",
+                    "property_type": "field_id",
+                    "name_space": "intro"
+                },
+                {
+                    "type": "property",
+                    "id": 9,
+                    "property_name": "time_to_read",
+                    "property_type": "field_value",
+                    "name_space": "time_to_read",
+                    "interpretation": 1
+                },
+                {
+                    "type": "property",
+                    "id": 8,
+                    "property_name": "author",
+                    "property_type": "field_value",
+                    "name_space": "author",
+                    "interpretation": 1
+                },
+                {
+                    "type": "property",
+                    "id": 5,
+                    "property_name": "id",
+                    "property_type": "variable",
+                    "variable_type": "current_item"
+                }
+            ],
+            "property_name": "articles",
+            "app_id": "33453",
+            "filter": [
+                {
+                    "field_id": 796213,
+                    "data_type": "radio_button",
+                    "valuesArray": [
+                        "0"
+                    ],
+                    "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"
+                }
+            ],
+            "isSortable": 1,
+            "field_id_to_sort": "796229",
+            "sortType": "desc"
+        }
+    ],
+    "property_name": "articlesAndComments"
+}

package/src/components/recent-posts/recent-posts.scss

@@ -0,0 +1,274 @@
+recent-posts {
+    background: #f0f2f3;
+    h2 {
+        text-align: center;
+        margin-bottom: 45px;
+        font-size: 36px;
+    }
+    .button {
+        margin: 0 auto;
+        background-color: #00BFD6;
+    }
+    .recent_posts {
+        .posts_wrapper {
+            display: flex;
+            flex-wrap: wrap;
+        }
+        .post {
+            background-color: #fff;
+            background: #ffffff;
+            border: 1px solid #dbe2e7;
+            transition: all .2s ease;
+            cursor: pointer;
+            &:hover {
+                box-shadow: 3px 3px 15px rgb(174 174 192 / 30%);
+                .read_more {
+                    a {
+                        color: #00BFD6;
+                        svg path {
+                            stroke: #00BFD6;
+                        }
+                        &::before {
+                            width: 100%;
+                        }
+                    }
+                }
+            }
+            .post_right {
+                padding: 24px;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                height: calc(100% - 200px);
+            }
+            .author_date {
+                display: flex;
+                margin-bottom: 16px;
+                & > * {
+                    margin-right: 4px;
+                    font-size: 14px;
+                    line-height: 17px;
+                    color: #141616;
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+                & > a {
+                    font-size: 14px;
+                    line-height: 17px;
+                    color: #0c6980;
+                    display: block;
+                    position: relative;
+                    transition: all .2s ease;
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        bottom: -5px;
+                        left: 0;
+                        width: 0;
+                        height: 1px;
+                        background-color: #00BFD6;
+                        transition: all .2s ease;
+                    }
+                    &:hover {
+                        color: #00BFD6;
+                        &::after {
+                            width: 100%;
+                        }
+                    }
+                }
+            }
+            .intro {
+                font-size: 16px;
+                line-height: 24px;
+                color: #4d555b;
+                margin-bottom: 24px;
+                p {
+                    -webkit-line-clamp: 3;
+                    -webkit-box-orient: vertical;
+                    display: -webkit-box;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+            .read_more {
+                display: flex;
+                a {
+                    display: flex;
+                    align-items: center;
+                    font-size: 18px;
+                    line-height: 25px;
+                    color: #141616;
+                    padding: 10px 20px;
+                    padding-left: 0;
+                    position: relative;
+                    transition: all .2s ease;
+                    svg path {
+                        transition: all .2s ease;
+                    }
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        width: 100%; 
+                        height: 1px;
+                        background-color: #141616;
+                        bottom: 0;
+                        left: 0;
+                    }
+                    &::before {
+                        content: '';
+                        position: absolute;
+                        width: 0; 
+                        height: 1px;
+                        background-color: #00BFD6;
+                        bottom: 0;
+                        left: 0;
+                        z-index: 2;
+                        transition: all .2s ease;
+                    }
+                    svg {
+                        margin-left: 10px;
+                    }
+                }
+            }
+            h3 {
+                font-size: 24px;
+                line-height: 33px;
+                color: #141616;
+                margin-bottom: 8px;
+            }
+            .top_flex {
+                display: flex;
+                align-items: flex-start;
+                margin-bottom: 16px;
+                flex-direction: column;
+                & > * {
+                    margin-right: 16px;
+                    font-size: 14px;
+                    line-height: 17px;
+                    color: #111111;
+                    display: flex;
+                    align-items: center;
+                    & > div {
+                        margin-right: 16px;
+                        &:last-child {
+                            margin-right: 0;
+                            white-space: nowrap;
+                        }
+                    }
+                    &:last-child {
+                        margin-right: 0;
+                        margin-top: 5px;
+                    }
+                }
+                .views,
+                .rating,
+                .comments {
+                    display: flex;
+                    align-items: center;
+                    svg {
+                        margin-right: 10px;
+                    }
+                }
+            }
+            .categories {
+                display: flex;
+                a {
+                    background-color: #141616;
+                    padding: 4px 8px;
+                    font-size: 14px;
+                    white-space: nowrap;
+                    line-height: 17px;
+                    color: #fff;
+                    display: block;
+                    transition: all .2s ease;
+                    &:hover {
+                        background-color: #00BFD6;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media screen and (min-width: 1200px) {
+    recent-posts {
+        .post {
+            width: 32.27%;
+            margin-right: 1.5%;
+            margin-bottom: 1.5%;
+            max-width: 464px;
+            img {
+                height: 200px;
+                object-fit: cover;
+                width: 100%;
+            }
+            &:nth-child(3n) {
+                margin-right: 0;
+            }
+        }
+    }
+}
+@media screen and (max-width: 1200px) and (min-width: 770px) {
+    recent-posts {
+        .post {
+            width: 49%;
+            margin-right: 2%;
+            margin-bottom: 2%;
+            img {
+                width: 100%;
+                height: 200px;
+                object-fit: cover;
+            }
+            &:nth-child(2n) {
+                margin-right: 0;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 920px) {
+    recent-posts .recent_posts .post .top_flex {
+        align-items: flex-start;
+        flex-direction: column;
+        & > div:first-child {
+            margin-bottom: 10px;
+        }
+    }
+}
+@media screen and (max-width: 770px) {
+    recent-posts .recent_posts .post {
+        width: 100%;
+        margin-bottom: 15px;
+        .post_left {
+            img {
+                width: 100%;
+            }
+        }
+        .post_right {
+            height: auto;
+        }
+    }
+}
+@media screen and (max-width: 500px) {
+    recent-posts .recent_posts .post h3 {
+        font-size: 18px;
+        line-height: 24px;
+    }
+}
+@media screen and (max-width: 400px) {
+    recent-posts {
+        h2 {
+            font-size: 28px;
+            margin-bottom: 30px;
+        }
+        .recent_posts .post {
+            .post_right {
+                padding: 10px;
+            }
+            .top_flex > * > div {
+                margin-right: 6px;
+            }
+        }
+    }
+}

package/src/components/reviews-slider/config.js

@@ -0,0 +1,5 @@
+export const reviewsSlider = {
+  tag: 'reviews-slider',
+  src: '@gudhub/ssg-web-component-library/src/components/reviews-slider/reviews-slider.js',
+  serverOnly: false
+}

package/src/components/reviews-slider/reviews-slider-data.json

@@ -0,0 +1,30 @@
+{
+    "title": "Відгуки про GudHub CRM",
+    "items": [
+      {
+        "author": "Сиченко Марія",
+        "position": "Проект-менеджер",
+        "review": "За допомогою CRM для бізнесу, я структурую дані та керую робочими процесами та задачами всього в кілька кліків! Це надзвичайна економія часу і зусиль! 100% рекомендую!))"
+      },
+      {
+        "author": "Делькевич Ілля",
+        "position": "Керівник департаменту",
+        "review": "Раджу всім купити CRM систему для бізнесу і полегшити робочі процеси у вашій компанії. Я вже зробила це, і GudHub платформа дійсно стала для мене знахідкою!"
+      },
+      {
+        "author": "Федорицкий Матвій",
+        "position": "IT BSD",
+        "review": "Для мене великим плюсом є універсальність цієї CRM для великого бізнесу. Тепер я можу керувати всіма робочими процесами без зайвих зусиль.)"
+      },
+      {
+        "author": "Сиченко Марія",
+        "position": "Проект-менеджер",
+        "review": "За допомогою CRM для бізнесу, я структурую дані та керую робочими процесами та задачами всього в кілька кліків! Це надзвичайна економія часу і зусиль! 100% рекомендую!))"
+      },
+      {
+        "author": "Федорицкий Матвій",
+        "position": "IT BSD",
+        "review": "Для мене великим плюсом є універсальність цієї CRM для великого бізнесу. Тепер я можу керувати всіма робочими процесами без зайвих зусиль.)"
+      }
+    ]
+  }