feat(RSS-ECOMM-3_99): add blog page

src/app/App/model/AppModel.ts

@@ -27,6 +27,10 @@ class AppModel {
         const { default: AboutUsPageModel } = await import('@/pages/AboutUsPage/model/AboutUsPageModel.ts');
         return new AboutUsPageModel(this.appView.getHTML());
       },
+      [PAGE_ID.BLOG]: async (): Promise<Page> => {
+        const { default: PostListModel } = await import('@/pages/Blog/PostList/model/PostListModel.ts');
+        return new PostListModel(this.appView.getHTML(), this.router);
+      },
       [PAGE_ID.CART_PAGE]: async (): Promise<Page> => {
         const { default: CartPageModel } = await import('@/pages/CartPage/model/CartPageModel.ts');
         return new CartPageModel(this.appView.getHTML());

src/app/styles/fonts.scss

@@ -1,8 +1,8 @@
 @font-face {
   src:
     local('cerapro-black'),
-    url('./fonts/cerapro-black-webfont.woff2') format('woff2'),
-    url('fonts/cerapro-black-webfont.woff') format('woff');
+    url('/public/fonts/cerapro-black-webfont.woff2') format('woff2'),
+    url('/public/fonts/cerapro-black-webfont.woff') format('woff');
   font-family: 'Cerapro';
   font-weight: 900;
   font-style: normal;
@@ -12,8 +12,8 @@
 @font-face {
   src:
     local('cerapro-bold'),
-    url('./fonts/cerapro-bold-webfont.woff2') format('woff2'),
-    url('fonts/cerapro-bold-webfont.woff') format('woff');
+    url('/public/fonts/cerapro-bold-webfont.woff2') format('woff2'),
+    url('/public/fonts/cerapro-bold-webfont.woff') format('woff');
   font-family: 'Cerapro';
   font-weight: 700;
   font-style: normal;
@@ -23,8 +23,8 @@
 @font-face {
   src:
     local('cerapro-medium'),
-    url('./fonts/cerapro-medium-webfont.woff2') format('woff2'),
-    url('fonts/cerapro-medium-webfont.woff') format('woff');
+    url('/public//fonts/cerapro-medium-webfont.woff2') format('woff2'),
+    url('/public/fonts/cerapro-medium-webfont.woff') format('woff');
   font-family: 'Cerapro';
   font-weight: 500;
   font-style: normal;
@@ -34,8 +34,8 @@
 @font-face {
   src:
     local('cerapro-regular'),
-    url('./fonts/cerapro-regular-webfont.woff2') format('woff2'),
-    url('fonts/cerapro-regular-webfont.woff') format('woff');
+    url('/public/fonts/cerapro-regular-webfont.woff2') format('woff2'),
+    url('/public/fonts/cerapro-regular-webfont.woff') format('woff');
   font-family: 'Cerapro';
   font-weight: 400;
   font-style: normal;

src/entities/Navigation/view/NavigationView.ts

@@ -13,6 +13,8 @@ class NavigationView {
 
   private toAboutLink: LinkModel;
 
+  private toBlogLink: LinkModel;
+
   private toCatalogLink: LinkModel;
 
   private toLoginLink: LinkModel;
@@ -27,6 +29,7 @@ class NavigationView {
     this.toRegisterLink = this.createToRegisterLink();
     this.toCatalogLink = this.createToCatalogLink();
     this.toAboutLink = this.createToAboutLink();
+    this.toBlogLink = this.createToBlogLink();
     this.navigation = this.createHTML();
   }
 
@@ -40,6 +43,7 @@ class NavigationView {
       this.toLoginLink.getHTML(),
       this.toRegisterLink.getHTML(),
       this.toCatalogLink.getHTML(),
+      this.toBlogLink.getHTML(),
       this.toAboutLink.getHTML(),
     );
     return this.navigation;
@@ -60,6 +64,21 @@ class NavigationView {
     return this.toAboutLink;
   }
 
+  private createToBlogLink(): LinkModel {
+    this.toBlogLink = new LinkModel({
+      attrs: {
+        href: PAGE_ID.BLOG,
+      },
+      classes: [styles.link],
+      text: PAGE_LINK_TEXT[getStore().getState().currentLanguage].BLOG,
+    });
+
+    observeCurrentLanguage(this.toBlogLink.getHTML(), PAGE_LINK_TEXT, PAGE_LINK_TEXT_KEYS.BLOG);
+
+    this.navigationLinks.set(PAGE_ID.BLOG, this.toBlogLink);
+    return this.toBlogLink;
+  }
+
   private createToCatalogLink(): LinkModel {
     this.toCatalogLink = new LinkModel({
       attrs: {

src/pages/Blog/Post/view/PostView.ts

@@ -0,0 +1,122 @@
+import type RouterModel from '@/app/Router/model/RouterModel';
+import type { Post } from '@/shared/constants/blog';
+
+import getStore from '@/shared/Store/Store.ts';
+import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts';
+import { PAGE_ID } from '@/shared/constants/pages.ts';
+import createBaseElement from '@/shared/utils/createBaseElement.ts';
+
+import styles from './post.module.scss';
+
+export default class PostView {
+  private blogPost: HTMLDivElement;
+
+  private callback: (post: PostView) => void;
+
+  private card: HTMLLIElement;
+
+  private post: Post;
+
+  private router: RouterModel;
+
+  constructor(post: Post, postClickCallback: (post: PostView) => void, router: RouterModel) {
+    this.post = post;
+    this.router = router;
+    this.callback = postClickCallback;
+    this.card = this.createCardHTML();
+    this.blogPost = this.createPostHtml();
+
+    this.card.addEventListener('click', (event) => this.onPostClick(event));
+    observeStore(selectCurrentLanguage, () => this.updateLanguage());
+  }
+
+  private createCardHTML(): HTMLLIElement {
+    const li = createBaseElement({
+      cssClasses: [styles.cardItem],
+      innerContent: this.createCardInfoHTML(),
+      tag: 'li',
+    });
+    li.id = this.post.id;
+
+    return li;
+  }
+
+  private createCardInfoHTML(): string {
+    const ln = getStore().getState().currentLanguage;
+    const read =
+      ln === 'en' ? `Read in ${this.post.time.toString()} minutes` : `Читать за ${this.post.time.toString()} минуты`;
+    const readMore = ln === 'en' ? 'Read more...' : 'Читать далее...';
+    const content = `
+      <article class=${styles.article}>
+        <div class=${styles.wrapImage}>
+          <img src="/${this.post.image}" alt="${this.post.tittle[ln]}" class=${styles.img}></img>
+        </div>
+          <p class=${styles.dataTime}>${this.post.date[ln]} | ${read}</p>
+          <p class=${styles.title}>${this.post.tittle[ln]}</p>
+          <p class=${styles.shortDescription}>${this.post.shortDescription[ln]}</p>
+          <p class=${styles.reed}>${readMore}</p>
+        </div>
+      </article>`;
+
+    return content;
+  }
+
+  private async onPostClick(event: Event): Promise<void> {
+    event.preventDefault();
+    await this.router.navigateTo(`${PAGE_ID.BLOG}/${this.post.id}`);
+    this.callback(this);
+  }
+
+  public createPostHtml(): HTMLDivElement {
+    const div = createBaseElement({
+      cssClasses: [styles.post],
+      innerContent: this.createPostInfoHtml(),
+      tag: 'div',
+    });
+
+    return div;
+  }
+
+  public createPostInfoHtml(): string {
+    const ln = getStore().getState().currentLanguage;
+    this.post.content[ln] = this.post.content[ln].replace(/<p>/g, `<p class=${styles.paragraph}>`);
+    this.post.content[ln] = this.post.content[ln].replace(/<h2>/g, `<h4 class=${styles.headText}>`);
+    this.post.content[ln] = this.post.content[ln].replace(/<h3>/g, `<h4 class=${styles.headText}>`);
+    this.post.content[ln] = this.post.content[ln].replace(/<h4>/g, `<h4 class=${styles.headText}>`);
+    this.post.content[ln] = this.post.content[ln].replace(/<h5>/g, `<h4 class=${styles.headText}>`);
+    this.post.content[ln] = this.post.content[ln].replace(/<ul>/g, `<h4 class=${styles.list}>`);
+    this.post.content[ln] = this.post.content[ln].replace(/<li>/g, `<h4 class=${styles.item}>`);
+    const tittle = `
+    <div class=${styles.head}>
+      <h1 class=${styles.title}>${this.post.tittle[ln]}</h1>
+      <p class=${styles.shortDescription}>${this.post.shortDescription[ln]}</p>
+    </div>
+    <img src="/${this.post.image}" alt="${this.post.tittle[ln]}" class=${styles.img}></img>
+    <div class=${styles.info}>
+      ${this.post.content[ln]}
+    </div>`;
+    return tittle;
+  }
+
+  public getCardHTML(short?: boolean): HTMLLIElement {
+    if (short) {
+      this.card.classList.add(styles.short);
+    } else {
+      this.card.classList.remove(styles.short);
+    }
+    return this.card;
+  }
+
+  public getPost(): Post {
+    return this.post;
+  }
+
+  public getPostHTML(): HTMLDivElement {
+    return this.blogPost;
+  }
+
+  public updateLanguage(): void {
+    this.card.innerHTML = this.createCardInfoHTML();
+    this.blogPost.innerHTML = this.createPostInfoHtml();
+  }
+}

src/pages/Blog/Post/view/post.module.scss

@@ -0,0 +1,126 @@
+.cardItem {
+  background-color: var(--white);
+
+  &:hover {
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+
+    .reed {
+      color: var(--steam-green-800);
+    }
+  }
+}
+
+.img {
+  width: 100%;
+  height: auto;
+  display: block;
+  margin: 0 auto;
+}
+
+.dataTime {
+  font: var(--regular-font);
+  color: var(--steam-green-800);
+  margin: 0 var(--extra-small-offset);
+}
+
+.wrapImage {
+  width: 100%;
+}
+
+.title {
+  font: var(--extra-regular-font);
+  color: var(--black);
+  letter-spacing: 1px;
+  margin: 0 var(--extra-small-offset);
+  max-width: 75%;
+}
+
+.short .title {
+  font: var(--regular-font);
+}
+
+.shortDescription {
+  font: var(--regular-font);
+  color: var(--noble-gray-700);
+  letter-spacing: 1px;
+  margin: 0 var(--extra-small-offset);
+}
+
+.short .shortDescription {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.reed {
+  display: block;
+  font: var(--regular-font);
+  color: var(--black);
+  transition: color 0.2s;
+  margin: 0 var(--extra-small-offset);
+  margin-top: 0;
+}
+
+.article {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.5rem;
+
+  cursor: pointer;
+  transition: box-shadow 0.2s;
+  padding-bottom: var(--extra-small-offset);
+}
+
+.head {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: var(--extra-large-offset);
+  margin: 0;
+  background-color: rgba($color: #46a358, $alpha: 0.1);
+}
+
+.info {
+  display: block;
+  margin: 0 auto;
+  padding: var(--small-offset);
+  background-color: var(--white);
+  @media (max-width: 768px) {
+    margin: 0 var(--small-offset);
+  }
+}
+
+.list {
+  font: var(--extra-regular-font);
+  letter-spacing: 1px;
+  color: var(--noble-gray-800);
+  margin: var(--extra-small-offset);
+}
+.item {
+  color: var(--noble-gray-700);
+  letter-spacing: 1px;
+  margin: var(--small-offset);
+}
+.paragraph {
+  color: var(--noble-gray-700);
+  letter-spacing: 1px;
+  margin: var(--small-offset);
+}
+
+.headText {
+  font: var(--extra-regular-font);
+  letter-spacing: 1px;
+  color: var(--noble-gray-800);
+  margin: var(--extra-small-offset);
+}
+
+.post {
+  width: 75%;
+  margin: 0 auto;
+  @media (max-width: 768px) {
+    width: auto;
+  }
+}