@skhemata/skhemata-blog/dist/src/SkhemataBlog.js

Skhemata Blog Web Component. This web component provides several sub components in addition to main component, allowing featured blogs, blog listing and blog post display.

import { __decorate } from "tslib";
/**
 *
 * Lit Blog parent component to handle routing
 *
 * */
import { html, css, property, SkhemataBase } from '@skhemata/skhemata-base';
// Import element dependencies
import { SkhemataBlogList } from './component/SkhemataBlogList';
import { SkhemataBlogPost } from './component/SkhemataBlogPost';
import { SkhemataBlogSearch } from './component/SkhemataBlogSearch';
import { SkhemataBlogCategories } from './component/SkhemataBlogCategories';
import { translationEngDefault } from './translation/SkhemataBlog/eng';
export class SkhemataBlog extends SkhemataBase {
    constructor() {
        super();
        this.apiWordpress = {
            url: ''
        };
        this.blogPagePath = '';
        this.blogTitle = '';
        this.postsPerPage = 4;
        this.pagerType = "infinite";
        this.searchedBlogPosts = '';
        this.slug = '';
        // Component specific properties
        this.isSlugName = true;
        this.translationData = {
            eng: translationEngDefault,
        };
        if (window.history.scrollRestoration) {
            window.history.scrollRestoration = 'manual';
        }
    }
    static get scopedElements() {
        return {
            'skhemata-blog-list': SkhemataBlogList,
            'skhemata-blog-post': SkhemataBlogPost,
            'skhemata-blog-search': SkhemataBlogSearch,
            'skhemata-blog-categories': SkhemataBlogCategories,
        };
    }
    static get styles() {
        return [
            ...super.styles,
            css `
        :host {
          --skhemata-blog-text-color: #000;

          display: block;
          padding: 25px 0;
          color: var(--skhemata-blog-text-color);
        }
        @media screen and (max-width: 430px) {
          :host {
            padding: 25px 20px;
          }
        }

        .blog-category-item {
          display: inline;
          cursor: pointer;
          color: var(--skhemata-blog-link-color);
          transition: all 0.3s ease 0s;
        }
        .blog-category-item:hover {
          color: rgb(28, 119, 185);
        }
        .columns {
          width: 100%;
          margin: 0px;
        }
        .columns.search,
        .columns.search .column {
          margin-top: 0px;
          margin-bottom: 0px;
          padding-top: 0px;
          padidng-bottom: 0px;
        }
      `,
        ];
    }
    handleNavigate(e) {
        this.slug = e.detail.slug || '';
    }
    render() {
        return html `
      <div class="columns search">
        <div class="column">
          <skhemata-blog-search
            .searchedBlogPosts=${this.searchedBlogPosts}
            .blogPagePath=${this.blogPagePath}
            .translationDir=${this.translationDir}
            .translationData=${this.translationData}
            .translationLang=${this.translationLang}
          ></skhemata-blog-search>
        </div>
      </div>
      <div class="columns is-desktop">
        <div class="column is-three-quarters-desktop">
          ${this.slug
            ? html `
                <skhemata-blog-post
                  .apiWordpress=${this.apiWordpress}
                  .blogPagePath=${this.blogPagePath}
                  .searchedBlogPosts=${this.searchedBlogPosts}
                  .slug=${this.slug}
                  @navigate=${this.handleNavigate}
                  .translationDir=${this.translationDir}
                  .translationData=${this.translationData}
                  .translationLang=${this.translationLang}
                ></skhemata-blog-post>
              `
            : html `
                <skhemata-blog-list
                  .apiWordpress=${this.apiWordpress}
                  .blogPagePath=${this.blogPagePath}
                  .searchedBlogPosts=${this.searchedBlogPosts}
                  .postsPerPage=${this.postsPerPage}
                  .pagerType=${this.pagerType}
                  @navigate=${this.handleNavigate}
                  .translationDir=${this.translationDir}
                  .translationData=${this.translationData}
                  .translationLang=${this.translationLang}
                ></skhemata-blog-list>
              `}
        </div>
        <skhemata-blog-categories
          class="column"
          .apiWordpress=${this.apiWordpress}
          .blogPagePath=${this.blogPagePath}
          .translationDir=${this.translationDir}
          .translationData=${this.translationData}
          .translationLang=${this.translationLang}
        ></skhemata-blog-categories>
      </div>
    `;
    }
}
__decorate([
    property({ type: Object, attribute: 'api-wordpress' })
], SkhemataBlog.prototype, "apiWordpress", void 0);
__decorate([
    property({ type: String, attribute: 'blog-page-path' })
], SkhemataBlog.prototype, "blogPagePath", void 0);
__decorate([
    property({ type: String, attribute: 'blog-title' })
], SkhemataBlog.prototype, "blogTitle", void 0);
__decorate([
    property({ type: Number, attribute: 'posts-per-page' })
], SkhemataBlog.prototype, "postsPerPage", void 0);
__decorate([
    property({ type: String, attribute: 'pager-type' })
], SkhemataBlog.prototype, "pagerType", void 0);
__decorate([
    property({ type: String })
], SkhemataBlog.prototype, "searchedBlogPosts", void 0);
__decorate([
    property({ type: String })
], SkhemataBlog.prototype, "slug", void 0);
__decorate([
    property({ type: Boolean })
], SkhemataBlog.prototype, "isSlugName", void 0);
__decorate([
    property({ type: Object })
], SkhemataBlog.prototype, "translationData", void 0);
//# sourceMappingURL=SkhemataBlog.js.map