@gudhub/ssg-web-components-library 1.0.0

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

@@ -0,0 +1,23 @@
+import html from './homepage-banner.html';
+import './homepage-banner.scss';
+
+class HomepageBanner extends GHComponent {
+    constructor() {
+        super();
+    }
+
+    async onServerRender() {
+        this.ghId = this.getAttribute('data-gh-id') || null;
+
+        this.json = await super.getGhData(this.ghId);
+
+        this.list = this.json.list;
+
+        this.image = this.json.image;
+
+        super.render(html);
+    }
+
+}
+
+window.customElements.define('homepage-banner', HomepageBanner);

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

@@ -0,0 +1,147 @@
+homepage-banner {
+    background-color: var(--primary-bg-color);
+    display: block;
+    .banner_list {
+        color: var(--subtitle-color);
+        margin-bottom: 30px;
+    }
+    .flex_button {
+        display: flex;
+        gap: 20px;
+    }
+    .left {
+        max-width: 705px;
+        width: calc(100% - 588px);
+    }
+    .right {
+        max-width: 588px;
+        
+        display: block;
+        transform: scale(.8);
+    }
+    .btn {
+        white-space: nowrap;
+    }
+}
+
+@media screen and (max-width: 1350px) {
+    homepage-banner {
+        .left {
+            max-width: 705px;
+            width: calc(100% / 2);
+        }
+        .right {
+            position: relative;
+            left: 0;
+            transform: scale(0.7);
+        }
+    }
+}
+@media screen and (max-width: 1200px) {
+    homepage-banner {
+        .right {
+            position: relative;
+            left: 0;
+            transform: scale(0.6);
+        }
+    }
+}
+@media screen and (max-width: 1100px) {
+    homepage-banner {
+        .right {
+            position: relative;
+            left: 40px;
+            transform: scale(0.55);
+        }
+    }
+}
+@media screen and (max-width: 1024px) {
+    homepage-banner {
+        .flex-wrapper {
+            flex-direction: column;
+        }
+        .left, .right {
+            width: 100%;
+            max-width: 100%;
+        }
+        .right {
+            margin-top: 20px;
+            display: flex;
+            justify-content: center;
+            position: relative;
+            height: 360px;
+        }
+        #gwd-ad {
+            position: absolute;
+            top: -90px;
+            left: calc(50% - 490px);
+        }
+    }
+}
+@media screen and (max-width: 600px) {
+    homepage-banner {
+        .flex_button {
+            flex-direction: column;
+            .btn {
+                text-align: center;
+            }
+        }
+    }
+}
+@media screen and (max-width: 560px) {
+    homepage-banner {
+        .right {
+            transform: scale(.5);
+            left: -100px;
+        }
+        #gwd-ad {
+            left: calc(50% - 220px);
+        }
+    }
+}
+
+@media screen and (max-width: 470px) {
+    homepage-banner {
+        .right {
+            transform: scale(.45);
+            height: 295px;
+        }
+        #gwd-ad {
+            top: -120px;
+            left: calc(50% - 200px);
+        }
+    }
+}
+@media screen and (max-width: 420px) {
+    homepage-banner {
+        .right {
+            transform: scale(.4);
+            height: 255px;
+        }
+        #gwd-ad {
+            top: -140px;
+            left: calc(50% - 170px);
+        }
+    }
+}
+@media screen and (max-width: 385px) {
+    homepage-banner {
+        .right {
+            transform: scale(.35);
+            height: 230px;
+            left: -90px;
+        }
+    }
+}
+@media screen and (max-width: 360px) {
+    homepage-banner {
+        .right {
+            transform: scale(.3);
+            height: 200px;
+            left: -84px;
+        }
+        #gwd-ad {
+            top: -150px;
+        }
+    }
+}

package/src/components/image-component/config.js

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

package/src/components/image-component/image-component.html

@@ -0,0 +1,25 @@
+<picture data-natural-width="${imageWidth}">
+    ${ (imageWidth < 1200) && (imageWidth > 600) ? `
+        <source media="(min-width: 600px)" srcset="${path}${extension}.webp" type="image/webp">
+        <source media="(min-width: 600px)" srcset="${path}${extension}" type="image/${extension.substring(1, extension.length)}">
+    ` : ''}
+    ${ imageWidth > 600 ? `
+        <source media="(max-width: 600px)" srcset="${path}-600${extension}.webp" type="image/webp">
+    ` : ''}
+    ${ imageWidth > 1200 ? `
+        <source media="(max-width: 1200px)" srcset="${path}-1200${extension}.webp" type="image/webp">
+        <source media="(min-width: 1200px)" srcset="${path}${extension}.webp" type="image/webp">
+    ` : ''}
+    ${ imageWidth > 600 ? `
+        <source media="(max-width: 600px)" srcset="${path}-600${extension}" type="image/${extension.substring(1, extension.length)}">
+    ` : ''}
+    ${ imageWidth > 1200 ? `
+        <source media="(max-width: 1200px)" srcset="${path}-1200${extension}" type="image/${extension.substring(1, extension.length)}">
+        <source media="(min-width: 1200px)" srcset="${path}${extension}" type="image/${extension.substring(1, extension.length)}">
+    ` : ''}
+    ${ imageWidth <= 600 ? `
+        <source srcset="${src}" type="image/${src.split('.')[src.split('.').length - 1]}" />
+    ` : ''}
+    <source srcset="${src}.webp" type="image/webp">
+    <img src="${src}" ${ title ? `title="${title}"` : '' } ${ alt ? `alt="${alt}"` : '' } ${ lazyload ? 'loading="lazy"' : '' } ${ width ? `width="${width}"` : '' } ${ height ? `height="${height}"` : '' } >
+</picture>

package/src/components/image-component/image-component.js

@@ -0,0 +1,107 @@
+import html from './image-component.html';
+
+class ImageComponent extends GHComponent {
+    /*
+     * src - path to static image 
+     * alt - alternative text
+     * title - title
+     * lazyload - if image must have loading="lazy" 
+     * dataSrc - url to image on gudhub (for dynamic images like a thumbnail of articles)
+     * dataUrl - path to place where image from dataSrc will be save (for dynamic images like a thumbnail of articles)
+     * data-rerender - for rerendering this component on client
+     * width - width
+     * height - height
+     */
+    constructor() {
+        super();
+    }
+
+    async onServerRender() {
+        await this.render('server')
+        
+    }
+    async onClientReady() {
+        if (this.hasAttribute('data-rerender')) {
+            await this.render('client')
+        }
+    }
+    async render (caller) {
+        this.src = this.getAttribute('src');
+        this.alt = this.getAttribute('alt');
+        this.title = this.getAttribute('title');
+        this.lazyload = this.hasAttribute('lazyload');
+        this.dataSrc = this.getAttribute('data-src');
+        this.dataUrl = this.getAttribute('data-url');
+        
+        this.width = this.hasAttribute('width') ? this.getAttribute('width') : false;
+        this.height = this.hasAttribute('height') ? this.getAttribute('height') : false;
+        // Download image from gudhub (this.dataUrl ) to cache (this.dataSrc)
+        await new Promise(async (resolve) => {
+            if(this.dataSrc && this.dataUrl && !window.disableImagesRegeneration) {
+                await fetch(this.dataSrc + '?source=' + this.dataUrl + '&mode=ssr');
+                this.src = this.dataSrc;
+                resolve();
+            } else {
+                if(this.src) {
+                    await fetch(this.src + '?mode=ssr');
+                    resolve();
+                }
+            }
+        })
+        
+        await new Promise(async (resolve) => {
+            // Use new Image to have ability get params like from real image, for example naturalWidth
+            this.image = new Image();
+        
+            this.image.addEventListener('load', () => {
+                const srcHasParams = this.image.getAttribute('src').indexOf('?') !== -1;
+                let src = srcHasParams ? this.image.getAttribute('src').substring(0, image.getAttribute('src').indexOf('?')) : this.image.getAttribute('src');
+                if(src.indexOf('&') !== -1) {
+                    src = src.substring(0, src.indexOf('&'))
+                }
+                this.extension = src.substring(src.lastIndexOf('.'), src.length);
+                this.path = src.substring(0, src.length - this.extension.length);
+                
+                this.imageWidth = this.image.naturalWidth;
+                resolve();
+            });
+        
+            this.image.setAttribute('src', this.src);
+        })
+        caller == 'client' ? this.clientRender() : super.render(html);
+    }
+
+    clientRender() {
+        this.innerHTML = /*html*/`
+        <picture data-natural-width="${this.imageWidth}">
+            ${ (this.imageWidth < 1200) && (this.imageWidth > 600) ? `
+                <source media="(min-width: 600px)" srcset="${this.path}${this.extension}.webp" type="image/webp">
+                <source media="(min-width: 600px)" srcset="${this.path}${this.extension}" type="image/${this.extension.substring(1, this.extension.length)}">
+            ` : ''}
+            ${ this.imageWidth > 600 ? `
+                <source media="(max-width: 600px)" srcset="${this.path}-600${this.extension}.webp" type="image/webp">
+            ` : ''}
+            ${ this.imageWidth > 1200 ? `
+                <source media="(max-width: 1200px)" srcset="${this.path}-1200${this.extension}.webp" type="image/webp">
+                <source media="(min-width: 1200px)" srcset="${this.path}${this.extension}.webp" type="image/webp">
+            ` : ''}
+            ${ this.imageWidth > 600 ? `
+                <source media="(max-width: 600px)" srcset="${this.path}-600${this.extension}" type="image/${this.extension.substring(1, this.extension.length)}">
+            ` : ''}
+            ${ this.imageWidth > 1200 ? `
+                <source media="(max-width: 1200px)" srcset="${this.path}-1200${this.extension}" type="image/${this.extension.substring(1, this.extension.length)}">
+                <source media="(min-width: 1200px)" srcset="${this.path}${this.extension}" type="image/${this.extension.substring(1, this.extension.length)}">
+            ` : ''}
+            ${ this.imageWidth <= 600 ? `
+                <source srcset="${this.src}" type="image/${this.src.split('.')[this.src.split('.').length - 1]}" />
+            ` : ''}
+            <source srcset="${this.src}.webp" type="image/webp">
+            <img src="${this.src}" ${ this.title ? `title="${this.title}"` : '' } ${ this.alt ? `alt="${this.alt}"` : '' } ${ this.lazyload ? 'loading="lazy"' : '' } ${ this.width ? `width="${this.width}"` : '' } ${ this.height ? `height="${this.height}"` : '' } >
+        </picture>
+        `;
+    }
+}
+
+if(!window.customElements.get('image-component')) {
+    window.customElements.define('image-component', ImageComponent);
+}

package/src/components/list-text-and-media/config.js

@@ -0,0 +1,5 @@
+export const listTextAndMedia = {
+  tag: 'list-text-and-media',
+  src: '@gudhub/ssg-web-component-library/src/components/list-text-and-media/list-text-and-media.js',
+  serverOnly: false
+}

package/src/components/list-text-and-media/list-text-and-media-data.json

@@ -0,0 +1,70 @@
+{
+    "title": "Title",
+    "subtitle": "Subtitle",
+    "items": [
+       {
+            "title": "Item Title",
+            "subtitle": "Item Subtitle",
+            "link": "#",
+            "link_text": "link_text",
+            "image": {
+                "src": "/assets/images/placeholder392x324.png",
+                "alt": "Item Title",
+                "title": "Item Title"
+            },
+            "text_list": [
+                "Vestibulum eget pretium mi",
+                "In fringilla ultrices aliquet",
+                "Donec non metus consectetur"
+            ]
+        },
+        {
+            "title": "Item Title",
+            "subtitle": "Item Subtitle",
+            "link": "#",
+            "link_text": "link_text",
+            "image": {
+                "src": "/assets/images/placeholder392x324.png",
+                "alt": "Item Title",
+                "title": "Item Title"
+            },
+            "text_list": [
+                "Vestibulum eget pretium mi",
+                "In fringilla ultrices aliquet",
+                "Donec non metus consectetur"
+            ]
+        },
+        {
+            "title": "Item Title",
+            "subtitle": "Item Subtitle",
+            "link": "#",
+            "link_text": "link_text",
+            "image": {
+                "src": "/assets/images/placeholder392x324.png",
+                "alt": "Item Title",
+                "title": "Item Title"
+            },
+            "text_list": [
+                "Vestibulum eget pretium mi",
+                "In fringilla ultrices aliquet",
+                "Donec non metus consectetur"
+            ]
+        },
+        {
+            "title": "Item Title",
+            "subtitle": "Item Subtitle",
+            "link": "#",
+            "link_text": "link_text",
+            "image": {
+                "src": "/assets/images/placeholder392x324.png",
+                "alt": "Item Title",
+                "title": "Item Title"
+            },
+            "text_list": [
+                "Vestibulum eget pretium mi",
+                "In fringilla ultrices aliquet",
+                "Donec non metus consectetur"
+            ]
+        }
+    ]
+  }

package/src/components/list-text-and-media/list-text-and-media.html

@@ -0,0 +1,38 @@
+<section class="list-text-and-media">
+    <div class="container">
+        ${json.title ? `
+            <h2 gh-id="${ghId}.title"> TITLE </h2>
+        ` : ''}
+        ${json.subtitle ? `
+            <p class="subtitle" gh-id="${ghId}.subtitle"> SUBTITLE </p>
+        ` : ''}
+        <div class="list flex-wrapper">
+            ${items.reduce((acc, item, index) => acc + `
+                <a href="${item.link}" class="list_item flex-wrapper">
+                    <div class="text">
+                        <div class="top">
+                            <h3>${item.title}</h3>
+                            <p class="subtitle">${item.subtitle}</p>
+                            ${item.text_list && item.text_list.length > 0 ? `
+                                <ul class="text-list">
+                                    ${item.text_list.reduce((acc, text) => acc + `
+                                        <li>${text}</li>
+                                    `, '')}
+                                </ul>
+                            ` : ''}
+                        </div>
+                        <div class="bottom">
+                            <div class="link">
+                                <span>${item.link_text}</span>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"><circle cx="10" cy="10.6282" r="10" fill="#0A79FE"/><path d="M8.25 6.62817L12 10.3782L8.25 14.1282" stroke="white"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="media">
+                            <image-component lazyload src="${item.image.src}" alt="${item.image.alt}" title="${item.image.title}" width="392" height="324"></image-component>
+                    </div>
+                </a>
+            `, '')}
+        </div>
+    </div>
+</section>

package/src/components/list-text-and-media/list-text-and-media.js

@@ -0,0 +1,22 @@
+import html from './list-text-and-media.html';
+import './list-text-and-media.scss';
+import jsonTemplate from './list-text-and-media-data.json';
+class ListMediaAndText extends GHComponent {
+    
+    constructor() {
+        super();
+        super.setDefaultData(jsonTemplate);
+    }
+
+    async onServerRender() {
+        this.ghId = this.getAttribute('data-gh-id') || null;
+        
+        this.json = await super.getGhData(this.ghId);
+
+        this.items = this.json.items;
+
+        super.render(html);
+    }
+}
+
+window.customElements.define('list-text-and-media', ListMediaAndText);

package/src/components/list-text-and-media/list-text-and-media.readme.md

@@ -0,0 +1,30 @@
+# Attributes:
+
+none
+
+# Component data-object: 
+("?" means "unnecessary")
+```json
+{
+    "title?": "Title",
+    "subtitle?": "Subtitle",
+    "items": [
+        {
+            "title": "Item Title",
+            "subtitle": "Item Subtitle",
+            "link": "#",
+            "link_text": "link_text",
+            "image": {
+                "src": "/assets/images/placeholder392x324.png",
+                "alt": "Item Title",
+                "title": "Item Title"
+            },
+            "text_list": [
+                "Vestibulum eget pretium mi",
+                "In fringilla ultrices aliquet",
+                "Donec non metus consectetur"
+            ]
+        }
+    ]
+}
+```

package/src/components/list-text-and-media/list-text-and-media.scss

@@ -0,0 +1,156 @@
+list-text-and-media {
+    background: var(--primary-bg-color);
+    .subtitle{
+        text-align: center;
+    }
+    .list {
+        flex-direction: column;
+        gap: 50px;
+        h2 {
+            margin-bottom: 0;
+        }
+        .subtitle {
+            margin-bottom:  0;
+        }
+        &_item {
+            gap: 20px;
+            color: var(--block-primary-text-color);
+            &:nth-child(even) {
+                flex-direction: row-reverse;
+            }
+            .text, .media {
+                border-radius: 20px;
+            }
+            .subtitle {
+                color: inherit;
+            }
+            .text {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                align-items: flex-start;
+                flex-grow: 0;
+                flex-shrink: 1;
+                gap: 20px;
+                width: 100%;
+                padding: 30px;
+                background-color: var(--block-primary-bg-color);
+                transition: background-color .3s ease;
+                .top {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 20px;
+                    .subtitle {
+                        text-align: left;
+                    }
+                    .text-list {
+                        padding-left: 20px;
+                        line-height: 140%;
+                        font-size: var(--h2-subtitle-font-size);
+                        li:not(:last-child) {
+                            margin-bottom: 10px;
+                        }
+                    }
+                    h3 {
+                        color: var(--block-primary-h-color);
+                        margin-bottom: 0;
+                    }
+                }
+                .bottom {
+                    .link {
+                        padding: 10px 0;
+                        font-size: var(--text-font-size);
+                        font-weight: 700;
+                        color: var(--block-primary-h-color);
+                        display: flex;
+                        align-items: center;
+                        gap: 10px;
+                        transition: color .3s ease;
+                        svg {
+                            position: relative;
+                            left: 0;
+                            transition: all .2s ease;
+                        }
+                    }
+                }
+            }
+            .media {
+                flex-grow: 1;
+                flex-shrink: 0;
+                overflow: hidden;
+                height: min-content;
+                
+                img {
+                    background-color: var(--image-bg-color);
+                }
+            }
+            &:hover {
+                .text {
+                    background-color: var(--tertiary-bg-color);
+                }
+                .bottom .link {
+                    color: var(--primary-color);
+                    svg {
+                        left: 10px;
+                    }
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: 1025px) and (min-width: 870px) {
+        .list {
+            flex-direction: row;
+            flex-wrap: wrap;
+            gap: 20px;
+            .list_item {
+                flex-direction: column;
+                justify-content: space-between;
+                align-items: center;
+                background-color: var(--block-primary-bg-color);
+                padding: 20px;
+                border-radius: 20px;
+                max-width: calc(50% - 25px);
+                .text {
+                    padding: 0;
+                    height: 100%;
+                }
+                .media {
+                    flex-grow: 0;
+                    border-radius: 15px;
+                }
+                &:hover {
+                    background-color: var(--tertiary-bg-color);
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: 870px) {
+        .list {
+            max-width: 500px;
+            margin: auto;
+            align-items: center;
+            gap: 20px;
+            .list_item {
+                width: 100%;
+                flex-direction: column;
+                align-items: center;
+                background-color: var(--block-primary-bg-color);
+                padding: 20px;
+                border-radius: 20px;
+                .text {
+                    padding: 0;
+                    height: 100%;
+                }
+                .media {
+                    flex-grow: 0;
+                    border-radius: 15px;
+                }
+                &:hover {
+                    background-color: var(--tertiary-bg-color);
+                }
+            }
+        }
+    }
+}

package/src/components/media-and-accordion/config.js

@@ -0,0 +1,5 @@
+export const mediaAndAccordion = {
+  tag: 'media-and-accordion',
+  src: '@gudhub/ssg-web-component-library/src/components/media-and-accordion/media-and-accordion.js',
+  serverOnly: false
+}