@gudhub/ssg-web-components-library 1.0.0

package/src/components/top-banner/top-banner.js

@@ -0,0 +1,50 @@
+import html from './top-banner.html';
+import './top-banner.scss';
+class TopBanner extends GHComponent {
+    /**
+     * data-background-image - without value
+     * If you set attribute - data-background-image you can write a path to image like a value for property "background_image" in json object of this component on GudHub
+     */
+    
+    constructor() {
+        super();
+    }
+    async onServerRender() {
+        let url = new URL(window.location.href);
+        url = url.searchParams.get('path');
+        this.slug = url;
+        // if this a pagination page (/blog/page/2/), set in the breadcrumbs only one item (Home > Blog)
+        if (url.includes('/page/')) {
+            this.page = true;
+            this.breadcrumbs = JSON.stringify([{"title": "Blog"}])
+        } else {
+            this.page = false;
+            this.ghId = this.getAttribute('data-gh-id') || null;
+            this.json = await super.getGhData(this.ghId);
+            
+            this.button = this.json.button || null;
+            if (!this.json.button) {
+                this.classList.add('without_button');
+            }
+            
+            let breadcrumbsTitle = document.createElement('div')
+            breadcrumbsTitle.innerHTML = this.json.title;
+            
+            this.breadcrumbs = JSON.stringify([{"title": breadcrumbsTitle.innerText}]);
+            
+            this.image = this.json.image || false;
+        }
+        this.backgroundImage = this.hasAttribute('data-background-image');
+        if (this.backgroundImage) {
+            this.style.backgroundImage = `url(${this.json.background_image})`;
+            this.style.setProperty('--breadcrumbsColor', '#DBE2E7');
+            this.style.setProperty('--breadcrumbsLastColor', '#fff');
+        } else {
+            this.style.setProperty('--breadcrumbsColor', '#4D555B');
+            this.style.setProperty('--breadcrumbsLastColor', '#000');
+        }
+
+        super.render(html);
+    }
+}
+window.customElements.define('top-banner', TopBanner);

package/src/components/top-banner/top-banner.scss

@@ -0,0 +1,132 @@
+top-banner {
+    &[data-background-image] {
+        background-image: var(--backgroundImage);
+        background-repeat: no-repeat;
+        background-size: cover;
+        .button {
+            background-color: #2b60fa;
+            &:hover {
+                border-color: #fff;
+            }
+        }
+        .top_banner {
+            padding: 120px 0;
+            padding-top: 70px;
+        }
+        h1 {
+            color: #fff;
+        }
+        .main_subtitle {
+            color: #fff;
+        }
+    }
+    .top_banner {
+        position: relative;
+        height: 100%;
+        padding-top: 70px;
+        .small_container {
+            text-align: center;
+            max-width: 950px;
+            margin: 0 auto;
+        }
+        .main_subtitle {
+            margin-bottom: 45px;
+        }
+        .button {
+            margin: 0 auto;
+        }
+    }
+}
+@media screen and (max-width: 1500px) {
+    top-banner {
+        .top_banner {
+            .small_container { 
+                padding: 0 40px;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 600px) {
+    top-banner {
+        padding-top: 46px;
+        .top_banner {
+            .small_container { 
+                padding: 0 15px;
+            }
+        }
+    }
+
+    top-banner[data-background-image=true].without_button .top_banner {
+        padding: 60px 0;
+        .main_subtitle {
+            margin-bottom: 0;
+        }
+    }
+    top-banner[data-background-image=true] {
+        padding-top: 0;
+        .top_banner {
+            padding: 60px 0;
+            padding-top: 22px;
+            breadcrumbs-component {
+                padding-top: 0 !important;
+                .breadcrumbs_list {
+                    margin-bottom: 22px;
+                }
+            }
+            .main_subtitle {
+                margin-bottom: 30px;
+            }
+        }
+    }
+    top-banner .top_banner .main_subtitle {
+        margin-bottom: 25px;
+    }
+}
+
+@media screen and (max-width: 1450px) {
+    .service_banner_right {
+        width: 44%;
+    }
+}
+@media screen and (max-width: 1300px) {
+    .service_banner {
+        display: flex;
+        flex-direction: column-reverse;
+        height: auto;
+        padding: 0;
+        &_right {
+            width: 100%;
+            height: 200px;
+            position: static;
+            max-width: 100%;
+            img {
+                width: 100%;
+                height: 200px;
+            }
+        }
+        &_left {
+            max-width: 100%;
+            padding-bottom: 40px;
+        }
+        h1 {
+            margin-top: 40px;
+        }
+    }
+}
+@media screen and (max-width: 600px) {
+    .service_banner {
+        h1 {
+            margin-top: 30px;
+        }
+        &_right {
+            height: 120px;
+            img {
+                height: 120px;
+            }
+        }
+        &_left {
+            padding-bottom: 30px;
+        }
+    }
+}

package/src/config.js

@@ -0,0 +1,38 @@
+export * as metaComponents from './components/meta/config.js';
+export { topBanner } from './components/top-banner/config.js';
+export { headerComponent } from './components/header/config.js';
+export { footerComponent } from './components/footer/config.js';
+export { counterSection } from './components/counter-section/config.js';
+export { getInTouchBlock } from './components/get-in-touch-block/config.js';
+export { buttonComponent } from './components/button-component/config.js';
+export { getInTouchForm } from './components/get-in-touch-form/config.js';
+export { popupContainer } from './components/popup/config.js';
+export { recentPosts } from './components/recent-posts/config.js';
+export { gridOld } from './components/grid/config.js';
+export { editMode } from './components/edit-mode/config.js';
+export { imageComponent } from './components/image-component/config.js';
+export { fullscreenImageAndText } from './components/fullscreen-image-and-text/config.js';
+export { contactUsBlock } from './components/contact-us-block/config.js';
+export { tabsComponent } from './components/tabs/config.js';
+export { faqComponent } from './components/faq/config.js';
+export { breadcrumbsComponent } from './components/breadcrumbs/config.js';
+export { textOnly } from './components/text-only/config.js';
+export { categoryBanner } from './components/category-banner/config.js';
+export { reviewsSlider } from './components/reviews-slider/config.js';
+export { homepageBanner } from './components/homepage-banner/config.js';
+export { gridComponent } from './components/grid-component/config.js';
+export { mediaAndText } from './components/media-and-text/config.js';
+export { mediaAndAccordion } from './components/media-and-accordion/config.js';
+export { animationBlock } from './components/animation-block/config.js';
+export { pricesCards } from './components/prices-cards/config.js';
+export { bannerAndText } from './components/banner-and-text/config.js';
+export { overflowCards } from './components/overflow-cards/config.js';
+export { crmServicesBanner } from './components/crm-services-banner/config.js';
+export { serviceCounter } from './components/service-counter/config.js';
+export { serviceImageCounter } from './components/service-image-counter/config.js';
+export { mediaAndListOfText } from './components/media-and-list-of-text/config.js';
+export { listTextAndMedia } from './components/list-text-and-media/config.js';
+export { counterSectionWithText } from './components/counter-section-with-text/config.js';
+export { aboutUsBanner } from './components/about-us-banner/config.js';
+export { aboutUsImageCounter } from './components/about-us-image-counter/config.js';
+export { aboutUsTeamMembers } from './components/about-us-team-members/config.js';