@gudhub/ssg-web-components-library 1.0.0

package/src/components/meta/meta-tag.js

@@ -0,0 +1,168 @@
+import generalInfo from '/src/general-info.json';
+
+class MetaTag extends GHComponent {
+    /**
+     * type = title / ddescription / meta_image_src - every value generate different meta tag
+     * og - generate open graph meta tag with type you set
+     * twitter - generate meta tag of twitter card with type you set
+     * data-twitter-name - name of your twitter account (@Template)
+     * data-chapter - chapter, default - pages
+     * data-appId - app id of application with this page
+     * data-itemId - item id of item with this page
+     */
+    constructor() {
+        super();
+    }
+    
+    async onServerRender() {
+        this.type = this.getAttribute('type');
+        this.og = this.hasAttribute('og') ? true : false;
+        this.twitter = this.hasAttribute('twitter') ? true : false;
+        this.twitterName = this.hasAttribute('data-twitter-name') ? this.getAttribute('data-twitter-name') : false;
+        const appId = this.hasAttribute('data-appId') ? this.getAttribute('data-appId') : false;
+        const itemId = this.hasAttribute('data-itemId') ? this.getAttribute('data-itemId') : false;
+        const chapter = this.hasAttribute('data-chapter') ? this.getAttribute('data-chapter') : 'pages';
+
+        if (appId && itemId) {
+            this.addTag(appId, itemId, false, chapter);
+        } else {
+            if (chapter == 'blog' && !itemId) {
+                const url = new URL(window.location.href);
+                const category = url.searchParams.get('category');
+                const path = url.searchParams.get('path');
+                if (path.includes('/page/')) {
+                    let slug = `/blog/${category}/`;
+                    await this.addTag(appId, false, slug, chapter);
+                } else {
+                    let ids = await super.findIds(chapter);
+                    await this.addTag(ids.appId, ids.itemId, false, chapter);
+                }
+            } else {
+                let ids = await super.findIds(chapter);
+                await this.addTag(ids.appId, ids.itemId, false, chapter);
+            }
+        }
+    }
+    async addTag (appId, itemId, slug, chapter) {
+        const app = await gudhub.getApp(appId);
+        const items = app.items_list;
+        let item;
+        let fieldId;
+        let value;
+        if (!slug) {
+            item = items.find(findedItem => findedItem.item_id == itemId);
+        } else {
+            for (let findedItem in items) {
+                
+                let iterationItem = items[findedItem].fields.find(field => field.field_value == slug)
+                if (iterationItem) {
+                    item = items[findedItem];
+                }
+            }
+            
+        }
+
+        fieldId = app.field_list.find(findedField => findedField.name_space === this.type);
+        fieldId = fieldId.field_id;
+        value = item.fields.find(findedField => findedField.field_id == fieldId).field_value;
+        
+        value = isNaN(value) ? value : await this.getContent(`https://gudhub.com/userdata/${window.constants.chapters[chapter].app_id}/${value}.html`);
+        
+        if (this.og) {
+            if (this.type != 'meta_image_src') {
+                const meta = document.createElement('meta');
+                let type = this.type;
+                const name = 'og:' + type;
+                meta.setAttribute('property', name);
+                meta.setAttribute('content', value);
+                document.querySelector('head').prepend(meta);
+            }
+            if (this.type == 'title') {
+                const metaSiteName = document.createElement('meta');
+                const name = 'og:site_name';
+                metaSiteName.setAttribute('property', name);
+                metaSiteName.setAttribute('content', generalInfo.name);
+                document.querySelector('head').prepend(metaSiteName);
+            }
+            if (this.type == 'meta_image_src') {
+                const metaSiteImage = document.createElement('meta');
+                const name = 'og:image';
+                metaSiteImage.setAttribute('property', name);
+                metaSiteImage.setAttribute('content', `${window.MODE === 'production' ? 'https' : 'http'}://${window.constants.website}${value}`);
+                document.querySelector('head').prepend(metaSiteImage);
+            }
+        } else if (this.twitter) {
+            if (this.type != 'meta_image_src') {
+                const meta = document.createElement('meta');
+                let type = this.type;
+                const name = 'twitter:' + type;
+                meta.setAttribute('name', name);
+                meta.setAttribute('content', value);
+                document.querySelector('head').prepend(meta);
+            }
+            
+            if (this.type == 'title') {
+                const metaCard = document.createElement('meta');
+                metaCard.setAttribute('name', 'twitter:card');
+                metaCard.setAttribute('content', 'summary_large_image');
+                
+                document.querySelector('head').prepend(metaCard);
+                
+                const metaSite = document.createElement('meta');
+                metaSite.setAttribute('name', 'twitter:site');
+                metaSite.setAttribute('content', this.twitterName);
+                
+                document.querySelector('head').prepend(metaSite);
+            }
+            
+
+            if (this.type == 'meta_image_src') {
+                const metaSiteImage = document.createElement('meta');
+                const name = 'twitter:image';
+                metaSiteImage.setAttribute('name', name);
+                metaSiteImage.setAttribute('content', `${window.MODE === 'production' ? 'https' : 'http'}://${window.constants.website}${value}`);
+                document.querySelector('head').prepend(metaSiteImage);
+            }
+        } else {
+            const meta = document.createElement('meta');
+            let name;
+            if (this.type == "title") {
+                name = "title"
+            } else if (this.type == "meta_image_src") {
+                name = "image"
+            } else {
+                name = this.type
+            }
+            meta.setAttribute('name', name);
+            meta.setAttribute('content', value);
+            document.querySelector('head').prepend(meta);
+        }
+        if (!document.querySelector('[property="og:type"]')) {
+            const metaWebsite = document.createElement('meta');
+            metaWebsite.setAttribute('property', 'og:type');
+            metaWebsite.setAttribute('content', 'webiste');
+            document.querySelector('head').prepend(metaWebsite);
+        }
+        
+        if (!document.querySelector('[property="og:locale"]')) {
+            const metaLocale = document.createElement('meta');
+            metaLocale.setAttribute('property', 'og:locale');
+            metaLocale.setAttribute('content', 'en');
+            document.querySelector('head').prepend(metaLocale);
+        }
+
+        this.remove();
+    }
+
+    getContent(link) {
+        return new Promise(async (resolve) => {
+            const response = await fetch(link);
+            const content = await response.text();
+            const div = document.createElement('div');
+            div.insertAdjacentHTML('beforeend', content);
+            resolve(div.innerText);
+        });
+    }
+}
+
+window.customElements.define('meta-tag', MetaTag);

package/src/components/meta/organization-schema.js

@@ -0,0 +1,50 @@
+import generalInfo from '/src/general-info.json';
+class OrganizationSchema extends GHComponent {
+    constructor() {
+        super();
+    }
+
+    async onServerRender() {
+        const schema = {
+            "@context": "https://schema.org",
+            "@type": "Organization",
+            "name": generalInfo.name,
+            "legalName": generalInfo.legalName,
+            "url": `${window.MODE === 'production' ? 'https' : 'http'}://${window.constants.website}`,
+            "logo": `${window.MODE === 'production' ? 'https' : 'http'}://${window.constants.website}/assets/images/logo.svg`,
+            "foundingDate": generalInfo.foundingDate,
+            "founders": [
+                {
+                    "@type": "Person",
+                    "name": generalInfo.founders
+                }
+            ],
+            "address": {
+                "@type": "PostalAddress",
+                "streetAddress": generalInfo.separatedAddress.streetAddress,
+                "addressLocality": generalInfo.separatedAddress.addressLocality,
+                "addressRegion": generalInfo.separatedAddress.addressRegion,
+                "postalCode": generalInfo.separatedAddress.postalCode,
+                "addressCountry": generalInfo.separatedAddress.addressCountry
+            },
+            "contactPoint": {
+                "@type": "ContactPoint",
+                "contactType": "customer support",
+                "telephone": `[${generalInfo.phone}]`,
+                "email": generalInfo.email
+            },
+            "sameAs": [generalInfo.socLinks.linkedin, generalInfo.socLinks.facebook, generalInfo.socLinks.instagram, generalInfo.socLinks.twitter]
+        }
+
+        if (!document.head.querySelector('#organizationSchema')) {
+
+            document.head.innerHTML += `
+                <script id="organizationSchema" type="application/ld+json">${JSON.stringify(schema)}</script>
+            `;
+
+        }
+        this.remove();
+    }
+}
+
+window.customElements.define('organization-schema', OrganizationSchema);

package/src/components/meta/service-schema.js

@@ -0,0 +1,76 @@
+import generalInfo from '/src/general-info.json';
+class ServiceSchema extends GHComponent {
+    /**
+     * data-chapter - chapter, default - pages
+     */
+    constructor() {
+        super();
+    }
+
+    async onServerRender() {
+        const chapter = this.hasAttribute('data-chapter') ? this.getAttribute('data-chapter') : 'pages';
+
+        let ids = await super.findIds(chapter);
+        const app = await gudhub.getApp(ids.appId);
+        const items = app.items_list;
+        let item = items.find(findedItem => findedItem.item_id == ids.itemId);
+        const serviceName = item.fields.find(field => field.field_id == window.constants.chapters[chapter].heading_field_id).field_value;
+        const serviceDescription = item.fields.find(field => field.field_id == window.constants.chapters[chapter].description_field_id).field_value;
+        const serviceSlug = item.fields.find(field => field.field_id == window.constants.chapters[chapter].slug_field_id).field_value;
+        const serviceImage = item.fields.find(field => field.field_id == window.constants.chapters[chapter].image_field_id).field_value;
+        const schema = {
+            "@context": "https://schema.org",
+            "@type": "Service",
+            "name": serviceName,
+            "description": serviceDescription,
+            "url": `${window.MODE === 'production' ? 'https' : 'http'}://${window.constants.website}${serviceSlug}`,
+            "provider": {
+                "@type": "Organization",
+                "name": generalInfo.name
+            },
+            "serviceType": "IT Development Services",
+            "areaServed": [
+                {
+                    "@type": "Place",
+                    "address": {
+                        "@type": "PostalAddress",
+                        "streetAddress": generalInfo.separatedAddress.streetAddress,
+                        "addressLocality": generalInfo.separatedAddress.addressLocality,
+                        "addressRegion": generalInfo.separatedAddress.addressRegion,
+                        "postalCode": generalInfo.separatedAddress.postalCode,
+                        "addressCountry": generalInfo.separatedAddress.addressCountry
+                    }
+                }
+            ],
+            "hoursAvailable": {
+                "@type": "OpeningHoursSpecification",
+                "opens": "09:00",
+                "closes": "18:00",
+                "dayOfWeek": [
+                    "Monday",
+                    "Tuesday",
+                    "Wednesday",
+                    "Thursday",
+                    "Friday"
+                ]
+            },
+            "image": {
+                "@type": "ImageObject",
+                "url": `${window.MODE === 'production' ? 'https' : 'http'}://${window.constants.website}${serviceImage}`,
+                "width": "800",
+                "height": "600"
+            }
+        };
+
+        if (!document.head.querySelector('#serviceSchema')) {
+
+            document.head.innerHTML += `
+                <script id="serviceSchema" type="application/ld+json">${JSON.stringify(schema)}</script>
+            `;
+
+        }
+        this.remove();
+    }
+}
+
+window.customElements.define('service-schema', ServiceSchema);

package/src/components/meta/title-tag.js

@@ -0,0 +1,64 @@
+class TitleTag extends GHComponent {
+    /**
+     *  data-chapter - chapter, default - pages
+     *  data-appId - app id of application with this page
+     *  data-itemId - item id of item with this page
+     */
+    constructor() {
+        super();
+    }
+
+    async onServerRender() {
+        const appId = this.hasAttribute('data-appId') ? this.getAttribute('data-appId') : false;
+        const itemId = this.hasAttribute('data-itemId') ? this.getAttribute('data-itemId') : false;
+        if (appId && itemId) {
+            this.findTitle(appId, itemId, false);
+        } else {
+            const chapter = this.hasAttribute('data-chapter') ? this.getAttribute('data-chapter') : 'pages';
+            if (chapter == 'blog' && !itemId) {
+                const url = new URL(window.location.href);
+                const category = url.searchParams.get('category');
+                const path = url.searchParams.get('path');
+                if (path.includes('/page/')) {
+                    let slug = `/blog/${category}/`;
+                    await this.findTitle(appId, false, slug);
+                } else {
+                    let ids = await super.findIds(chapter);
+                    await this.findTitle(ids.appId, ids.itemId, false);
+                }
+            } else {
+                let ids = await super.findIds(chapter);
+                await this.findTitle(ids.appId, ids.itemId, false);
+            }
+        }
+    }
+    async findTitle (appId, itemId, slug) {
+        const app = await gudhub.getApp(appId);
+        const items = app.items_list;
+
+        let item;
+        let fieldId;
+        let value;
+        if (!slug) {
+            item = items.find(findedItem => findedItem.item_id == itemId);
+        } else {
+            items.forEach(findedItem => {
+                let iterationItem = findedItem.fields.find(field => field.field_value == slug)
+                if (iterationItem) {
+                    item = findedItem;
+                }
+            });
+        }
+        fieldId = app.field_list.find(findedField => findedField.name_space === 'title').field_id;
+        value = item.fields.find(findedField => findedField.field_id == fieldId).field_value;
+        
+        
+        const title = document.createElement('title');
+        title.innerText = value;
+        
+        document.querySelector('head').appendChild(title);
+        this.remove();
+    }
+}
+
+window.customElements.define('title-tag', TitleTag);

package/src/components/overflow-cards/config.js

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

package/src/components/overflow-cards/overflow-cards-data.json

@@ -0,0 +1,33 @@
+{
+    "title": "Використання GudHub CRM Системи для Бізнесу",
+    "subtitle": "Разом з CRM платформою для бізнесу, компанії успішно збільшили кількість замовлень та клієнтів і вивели свій бізнез на новий рівень!",
+    "cards": [
+      {
+        "title": "Компанія Atlasiko подвоїла кількість замовлень",
+        "text": "Завдяки зручній системі комунікації та ряду запропонованих інструментів, ІТ компанія отримує більшу кількість замовлень, тим самим сприяючи росту та розвитку бізнесу",
+        "image": {
+          "src": "/assets/images/media-icons.jpg",
+          "alt": "Media Icons",
+          "title": "Media Icons"
+        }
+      },
+      {
+        "title": "х3 нових клієнтів в Applet3D",
+        "text": "За допомогою запуску кампаній та розсилки електронних листів, кількість клієнтів на послуги 3D візуалізації та анімації архітектури в Applet3D збільшилися втричі.",
+        "image": {
+          "src": "/assets/images/media-icons-2.jpg",
+          "alt": "Media Icons",
+          "title": "Media Icons"
+        }
+      },
+      {
+        "title": "EasyStoneShop досягла точнішого прогнозування продажів",
+        "text": "Компанія може передбачити кількість продажів за місяць і сформувати сценарії частоти замовлень.",
+        "image": {
+          "src": "/assets/images/media-icons-3.jpg",
+          "alt": "Media Icons",
+          "title": "Media Icons"
+        }
+      }
+    ]
+  }

package/src/components/overflow-cards/overflow-cards.html

@@ -0,0 +1,33 @@
+<section class="overflow-cards">
+    <div class="container">
+        <div class="top">
+            <div class="top_left">
+                <h2 gh-id="${ghId}.title"> TITLE </h2>
+                
+                ${jsonData.subtitle ? `
+                    <p class="subtitle" gh-id="${ghId}.subtitle">
+                        SUBTITLE
+                    </p>
+                ` : ''}
+            </div>
+            <div class="top_right">
+                ${button ? `
+                    <button-component data-popup-id="${button.popupId}" data-placement="${button.placement}">${button.text}</button-component>
+                ` : ''}
+            </div>
+        </div>
+        <div class="flex-wrapper">
+            ${cards.reduce((acc, card, index) => {
+                return acc + `
+                <div class="cards">
+                    <h3 gh-id="${ghId}.cards.${index}.title"></h3>
+                    <div class="text">
+                        <p gh-id="${ghId}.cards.${index}.text"></p>
+                    </div>
+                    <image-component src="${card.image.src}" alt="${card.image.alt}" title="${card.image.title}" lazyload width="330" height="274"></image-component>
+                </div>
+                `
+                }, '')}
+        </div>
+    </div>
+</section>

package/src/components/overflow-cards/overflow-cards.js

@@ -0,0 +1,28 @@
+import html from './overflow-cards.html';
+import './overflow-cards.scss';
+import jsonTemplate from './overflow-cards-data.json';
+
+class OverflowCards extends GHComponent {
+
+    constructor() {
+        super();
+        super.setDefaultData(jsonTemplate);
+        this.ghId = this.getAttribute('data-gh-id') || null;
+    }
+
+    async onServerRender() {
+        this.ghId = this.getAttribute('data-gh-id') || null;
+        this.subtitle = this.hasAttribute('data-subtitle') ? this.getAttribute('data-subtitle') : true;
+
+        const json = await super.getGhData(this.ghId);
+
+        this.jsonData = json;
+
+        this.cards = json.cards;
+        this.button = json.button ? json.button : {"text": "Спробувати Безкоштовно", "class": 'btn'};
+
+        super.render(html);
+    }
+}
+
+window.customElements.define('overflow-cards', OverflowCards);

package/src/components/overflow-cards/overflow-cards.scss

@@ -0,0 +1,112 @@
+overflow-cards {
+    background: var(--primary-bg-color);
+    .top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 30px;
+        margin-bottom: 30px;
+    }
+    h2 {
+        text-align: left;
+        max-width: 804px;
+    }
+    .subtitle {
+        max-width: 804px;
+        margin-bottom: 0 !important;
+    }
+    .btn {
+        white-space: nowrap;
+    }
+    .flex-wrapper {
+        position: relative;
+        bottom: -100px;
+        margin-top: -100px;
+        gap: 20px;
+        flex-wrap: wrap;
+        .cards {
+            width: calc(33% - 13px);
+            border-radius: var(--block-primary-border-radius);
+            background: var(--block-primary-bg-color);
+            padding: 30px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            h3 {
+                color: var(--block-primary-h-color);
+                margin-bottom: 0;
+            }
+            .text {
+                color: var(--block-primary-text-color);
+            }
+            img {
+                width: 100%;
+                height: auto;
+                border-radius: var(--block-primary-border-radius);
+                background-color: var(--image-bg-color);
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 1050px) {
+    overflow-cards .flex-wrapper .cards {
+        padding: 20px;
+    }
+}
+@media screen and (min-width: 1050px) {
+    overflow-cards {
+        section {
+            padding-bottom: 0;
+        }
+    }
+}
+@media screen and (max-width: 1050px) {
+    overflow-cards .flex-wrapper {
+        bottom: 0;
+        margin-top: 0;
+        .cards {
+            width: calc(50% - 10px);
+        }
+    }
+}
+@media screen and (max-width: 950px) {
+    overflow-cards .top {
+        flex-direction: column;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    overflow-cards {
+        h2 {
+            text-align: center;
+        }
+        .subtitle {
+            text-align: center;
+        }
+        .flex-wrapper {
+            justify-content: center;
+            .cards {
+                width: 100%;
+                max-width: 400px;
+                text-align: center;
+            }
+        }
+    }
+}
+@media screen and (max-width: 450px) {
+    overflow-cards {
+        h2 {
+            text-align: left;
+        }
+        .subtitle {
+            text-align: left;
+        }
+        .flex-wrapper {
+            .cards {
+                text-align: left;
+
+            }
+        }
+    }
+}

package/src/components/popup/config.js

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

package/src/components/popup/popup.html

@@ -0,0 +1,10 @@
+<div class="background_shadow" onclick="backgroundClosePopup()">
+    <div class="popup">
+        <div class="popup_top">
+            <div class="close" onclick="closePopup()">
+                <svg xmlns="http://www.w3.org/2000/svg" width="29" height="30" viewBox="0 0 29 30" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.85786 21.1421L21 7L22.4142 8.41421L8.27208 22.5564L6.85786 21.1421Z" fill="#1B1B1D"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M8.85786 6.85786L23 21L21.5858 22.4142L7.44365 8.27208L8.85786 6.85786Z" fill="#1B1B1D"></path></svg>
+            </div>
+        </div>
+        <div class="child-container"></div>
+    </div>
+</div>

package/src/components/popup/popup.js

@@ -0,0 +1,66 @@
+import html from './popup.html';
+import './popup.scss';
+
+class Popup extends GHComponent {
+
+    constructor() {
+        super();
+        this.popupId = this.getAttribute('data-popup-id');
+    }
+    
+    async onServerRender() {
+        const child = this.innerHTML;
+        super.render(html);
+        const childContainer = this.getChildContainer();
+        if (childContainer && child) {
+            childContainer.innerHTML = child;
+        }
+    }
+
+    onClientReady() {
+        this.renderChild();
+        if (this.hasAttribute('data-autostart')) {
+            const delay = Number(this.getAttribute('data-autostart'));
+            if (delay) {
+                setTimeout(() => this.openPopup(), delay);
+            }
+        }
+        window.addEventListener('open-popup', (e) => {
+            if (this.popupId === e.detail.popupId) {
+                if (this.child && this.child.tagName.toLowerCase() === 'get-in-touch-form') {
+                    this.child.placement = e.detail.placement ? e.detail.placement : 'no-placement-attribute';
+                }
+                this.openPopup();
+            }
+        });
+    }
+
+    getChildContainer() {
+        return this.getElementsByClassName('child-container')[0];
+    }
+
+    renderChild() {
+        const childContainer = this.getChildContainer();
+        this.child = childContainer.children[0];
+        if (this.child) {
+            this.child.clientRender();
+        }
+    }
+
+    backgroundClosePopup() {
+        if (event.target.className == 'background_shadow') {
+            this.closePopup();
+        }
+    }
+
+    openPopup() {
+        this.classList.add('active');
+    }
+
+    closePopup() {
+        this.classList.remove('active');
+        this.child.onParentPopupClose();
+    }
+}
+
+window.customElements.define('popup-container', Popup);

package/src/components/popup/popup.readme.md

@@ -0,0 +1,13 @@
+
+# Usage:
+The component that should be in the popup is written inside the component: "<popup-container> <YOUR-COMPONENT> </popup-container>".
+Also, on the user's client, the popup calls the "clientRender()" method, if it is defined in your component that is in the popup, it will be applied.
+
+# Data-attributes:
+data-popup-id="popup-id": there can be several popups on the page, so that the popup understands what exactly it should open with the id attribute. When the "open-popup" event si dispatched, the popup checks whether "e.detail.popupId" matches the id in the popup attribute.
+
+data-autostart="time in milliseconds": popup will open itself after delay
+
+data-no-bg-shadow: shadowed background will not appear
+
+data-position="bottom-right": popup will be positioned in right bottom corner