@gudhub/ssg-web-components-library 1.0.0

package/src/components/blog/contents/contents.js

@@ -0,0 +1,63 @@
+import html from './contents.html';
+import './contents.scss';
+
+class ContentsComponent extends GHComponent {
+    
+    constructor() {
+        super();
+    }
+
+    async onServerRender() {
+
+        this.headings = JSON.parse(this.getAttribute('data-headings'));
+        this.newHeadings = [];
+        const fullUrl = new URL('http://website.com' + window.location.search);
+        const url = fullUrl.searchParams.get('path');
+        for (let h in this.headings) {
+            let div = document.createElement('div');
+            div.innerHTML = this.headings[h].text;
+            let text = div.querySelector('a') ? div.querySelector('a').innerText : this.headings[h].text;
+            let iterationH = {
+                "text": text,
+                "level": this.headings[h].level,
+                "link": `${url}#${text.toLowerCase().replace(/[^\w\s]/g, '-').replace(/ /g, '-').replace(/-$/, '').replace(/^-/, '')}`,
+            };
+            this.newHeadings.push(iterationH)
+        }
+
+        super.render(html);
+    }
+
+    onClientReady() {
+        this.scrollContent()
+    }
+
+    openContents (item) {
+        item.parentElement.classList.toggle('active');
+    }
+
+    scrollContent(){
+        let anchorSections = document.querySelectorAll('article h2, article h3');
+
+        let anchors = document.querySelectorAll('.aside_wrapper contents-component .h_list li a');
+
+        function changeLinkState() {
+            
+            let index = anchorSections.length;
+
+            while (--index && window.scrollY + 110 < anchorSections[index].offsetTop) { }
+
+            window.anchor = anchorSections[index];
+            for (let anchor = 0; anchor < anchors.length; anchor++) {
+                anchors[anchor].parentElement.classList.remove('active-anchor');
+            }
+            anchors[index] ? anchors[index].parentElement.classList.add('active-anchor') : null;
+        }
+
+        changeLinkState();
+        window.addEventListener('scroll', changeLinkState);
+    }
+
+}
+
+window.customElements.define('contents-component', ContentsComponent);

package/src/components/blog/contents/contents.scss

@@ -0,0 +1,157 @@
+contents-component {
+    .contents {
+        border: 1px solid #DBE2E7;
+        padding: 30px;
+    }
+    .contents_title {
+        font-weight: 400;
+        font-size: 20px;
+        line-height: 30px;
+        text-transform: uppercase;
+        color: #878787;
+        margin-bottom: 22px;
+    }
+    ul {
+        list-style: none;
+    }
+    .active-anchor a {
+        color: #00BFD6 !important;
+    }
+    li {
+        margin-top: 8px;
+        a {
+            font-size: 16px;
+            line-height: 25px;
+            color: #4D555B;
+            transition: all .2s ease;
+        }
+        &:hover {
+            a {
+                color: #141616;
+            }
+        }
+        &.child {
+            padding-left: 20px;
+            margin-top: 2px;
+            a {
+                font-size: 14px;
+                line-height: 25px;
+                color: #4D555B;
+                transition: all .2s ease;
+            }
+            &:hover {
+                a {
+                    color: #141616;
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 992px) {
+    article-component {
+        aside .aside_wrapper {
+            position: static;
+        }
+        contents-component {
+            position: fixed;
+            background: #fff;
+            z-index: 2;
+            width: 100%;
+            top: 96px;
+            left: 0;
+            transition: all .5s ease;
+            .contents {
+                padding: 0;
+            }
+            .h_list {
+                height: 100%;
+                max-height: 0;
+                overflow: hidden;
+                transition: all .5s ease;
+            }
+            .contents_title {
+                margin-bottom: 0;
+                padding: 10px;
+                padding-left: 40px;
+                cursor: pointer;
+                position: relative;
+                text-transform: capitalize;
+                &::before {
+                    content: "";
+                    position: absolute;
+                    top: 20px;
+                    right: 40px;
+                    width: 16px;
+                    height: 16px;
+                    transition: all .5s 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;
+                }
+            }
+            li a {
+                padding-left: 40px;
+            }
+            .contents.active {
+                .contents_title {
+                    padding-bottom: 5px;
+                    &::before {
+                        top: 14px;
+                        transform: rotate(180deg);
+                    }
+                }
+                .h_list {
+                    max-height: 1000px;
+                    padding: 0;
+                    padding-top: 0;
+                }
+                li {
+                    &:hover a {
+                        background-color: #efefef;
+                    }
+                    &.child {
+                        a {
+                            padding-top: 2px;
+                            padding-bottom: 2px;
+                        }
+                    }
+                    a {
+                        padding-top: 4px;
+                        padding-bottom: 4px;
+                        display: block;
+                    }
+                }
+            }
+            li {
+                margin-top: 0;
+                a {
+                    transition: padding-left .5s ease, background-color .2s ease;
+                }
+                &.child {
+                    margin-top: 0;
+                }
+            }
+        }
+    }
+}
+@media screen and (max-width: 600px) {
+    article-component {
+        contents-component {
+            .contents_title {
+                padding-left: 15px;
+                &::before {
+                    right: 15px;
+                }
+            }
+            li a {
+                padding-left: 15px;
+            }
+        }
+    }
+}
+@media screen and (max-width: 450px) {
+    contents-component .contents {
+        padding: 15px;
+    }
+}

package/src/components/blog/posts-template/articles.json

@@ -0,0 +1,139 @@
+[
+    {
+        "type": "property",
+        "id": 3,
+        "property_name": "title",
+        "property_type": "field_value",
+        "field_id": "794783",
+        "interpretation": 1
+    },
+    {
+        "type": "property",
+        "id": 3,
+        "property_name": "intro",
+        "property_type": "field_value",
+        "field_id": "794786",
+        "interpretation": 1
+    },
+    {
+        "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 == 794788);\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",
+        "field_id": "794790"
+    },
+    {
+        "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 == 794801);\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",
+        "field_id": "794802",
+        "interpretation": 1
+    },
+    {
+        "type": "property",
+        "id": 13,
+        "property_name": "thumbnail_src",
+        "property_type": "field_value",
+        "field_id": "794800",
+        "interpretation": 1
+    },
+    {
+        "type": "property",
+        "id": 15,
+        "property_name": "thumbnail_alt",
+        "property_type": "field_value",
+        "field_id": "794799",
+        "interpretation": 1
+    },
+    {
+        "type": "property",
+        "id": 16,
+        "property_name": "thumbnail_title",
+        "property_type": "field_value",
+        "field_id": "794798",
+        "interpretation": 1
+    },
+    {
+        "type": "property",
+        "id": 14,
+        "property_name": "thumbnail",
+        "property_type": "field_value",
+        "field_id": "794797",
+        "interpretation": 1
+    },
+    {
+        "type": "property",
+        "id": 17,
+        "property_name": "posted_at",
+        "property_type": "field_value",
+        "field_id": "794791"
+    },
+    {
+        "type": "property",
+        "id": 4,
+        "property_name": "slug",
+        "property_type": "field_value",
+        "field_id": "794804",
+        "interpretation": 1
+    },
+    {
+        "type": "property",
+        "id": 12,
+        "property_name": "h1",
+        "property_type": "field_value",
+        "field_id": "794783",
+        "interpretation": 1
+    },
+    {
+        "type": "property",
+        "id": 10,
+        "property_name": "author_id",
+        "property_type": "field_value",
+        "field_id": "794789"
+    },
+    {
+        "type": "property",
+        "id": 11,
+        "property_name": "intro_id",
+        "property_type": "field_id",
+        "field_id": "794786"
+    },
+    {
+        "type": "property",
+        "id": 9,
+        "property_name": "time_to_read",
+        "property_type": "field_value",
+        "field_id": "794795",
+        "interpretation": 1
+    },
+    {
+        "type": "property",
+        "id": 8,
+        "property_name": "author",
+        "property_type": "field_value",
+        "field_id": "794789",
+        "interpretation": 1
+    },
+    {
+        "type": "property",
+        "id": 5,
+        "property_name": "id",
+        "property_type": "variable",
+        "variable_type": "current_item"
+    }
+]

package/src/components/blog/posts-template/authors-object.json

@@ -0,0 +1,61 @@
+{
+    "type": "array",
+    "id": 1,
+    "childs": [
+        {
+            "type": "property",
+            "id": 3,
+            "property_name": "name",
+            "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": 5,
+            "property_name": "author_id",
+            "property_type": "variable",
+            "variable_type": "current_item"
+        },
+        {
+            "type": "property",
+            "id": 6,
+            "property_name": "slug",
+            "property_type": "field_value",
+            "name_space": "slug",
+            "interpretation": 1
+        }
+    ],
+    "property_name": "authors",
+    "app_id": "33453",
+    "filter": [
+        {
+            "field_id": 796213,
+            "data_type": "radio_button",
+            "valuesArray": [
+                "1"
+            ],
+            "search_type": "equal_or",
+            "$$hashKey": "object:10830",
+            "selected_search_option_variable": "Value"
+        },
+        {
+            "field_id": 796222,
+            "data_type": "radio_button",
+            "valuesArray": [
+                "1"
+            ],
+            "search_type": "equal_or",
+            "$$hashKey": "object:10872",
+            "selected_search_option_variable": "Value"
+        }
+    ]
+}

package/src/components/blog/posts-template/categories.json

@@ -0,0 +1,61 @@
+{
+    "type": "array",
+    "id": 1,
+    "childs": [
+        {
+            "type": "property",
+            "id": 6,
+            "property_name": "slug",
+            "property_type": "field_value",
+            "name_space": "slug",
+            "interpretation": 1
+        },
+        {
+            "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": 5,
+            "property_name": "category_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:10830",
+            "selected_search_option_variable": "Value"
+        },
+        {
+            "field_id": 796222,
+            "data_type": "radio_button",
+            "valuesArray": [
+                "1"
+            ],
+            "search_type": "equal_or",
+            "$$hashKey": "object:10872",
+            "selected_search_option_variable": "Value"
+        }
+    ]
+}