From 1b251c1d68dea1ebb0caa2320b6f10d07b4aca2d Mon Sep 17 00:00:00 2001 From: danyaZh Date: Tue, 31 Oct 2023 15:10:41 +0200 Subject: [PATCH 1/3] feat: created new design for blog page --- ...medusa-the-new-year-dedicated-release.json | 2 +- ...n-nx-monorepo-while-retaining-history.json | 2 +- ...n-nx-monorepo-while-retaining-history.json | 2 +- ...medusa-the-new-year-dedicated-release.json | 2 +- .../blog-preview/blog-preview.component.html | 25 ++-- .../src/models/article.interface.ts | 30 +++-- .../blog/src/blog-page.component.html | 80 ------------ libs/route-pages/blog/src/blog.module.ts | 7 +- .../components/article/article.component.scss | 67 ++++++++++ .../components/article/article.component.ts | 71 +---------- .../blog-item/blog-item.component.html | 102 ++++++++++++++++ .../blog-item/blog-item.component.scss | 42 +++++++ .../blog-item/blog-item.component.ts | 22 ++++ .../src/components/blog/blog.component.html | 114 ++++++------------ .../src/components/blog/blog.component.scss | 0 .../src/components/blog/blog.component.ts | 102 +++------------- libs/route-pages/blog/src/components/index.ts | 1 + .../blog/src/models/blog.consts.ts | 15 +++ libs/route-pages/blog/src/models/index.ts | 1 + .../pages/blog-page/blog-page.component.html | 69 +++++++++++ .../pages/blog-page/blog-page.component.scss | 38 ++++++ .../blog-page}/blog-page.component.ts | 15 +-- libs/route-pages/blog/src/pages/index.ts | 1 + .../blog/src/pipes/domain-name.pipe.ts | 15 +++ libs/route-pages/blog/src/routes.ts | 2 +- 25 files changed, 473 insertions(+), 354 deletions(-) delete mode 100644 libs/route-pages/blog/src/blog-page.component.html create mode 100644 libs/route-pages/blog/src/components/article/article.component.scss create mode 100644 libs/route-pages/blog/src/components/blog-item/blog-item.component.html create mode 100644 libs/route-pages/blog/src/components/blog-item/blog-item.component.scss create mode 100644 libs/route-pages/blog/src/components/blog-item/blog-item.component.ts create mode 100644 libs/route-pages/blog/src/components/blog/blog.component.scss create mode 100644 libs/route-pages/blog/src/models/blog.consts.ts create mode 100644 libs/route-pages/blog/src/models/index.ts create mode 100644 libs/route-pages/blog/src/pages/blog-page/blog-page.component.html create mode 100644 libs/route-pages/blog/src/pages/blog-page/blog-page.component.scss rename libs/route-pages/blog/src/{ => pages/blog-page}/blog-page.component.ts (94%) create mode 100644 libs/route-pages/blog/src/pages/index.ts create mode 100644 libs/route-pages/blog/src/pipes/domain-name.pipe.ts diff --git a/apps/valor-software-site/src/assets/articles/medusa-the-new-year-dedicated-release/medusa-the-new-year-dedicated-release.json b/apps/valor-software-site/src/assets/articles/medusa-the-new-year-dedicated-release/medusa-the-new-year-dedicated-release.json index 4b378d0ba..310ff5264 100644 --- a/apps/valor-software-site/src/assets/articles/medusa-the-new-year-dedicated-release/medusa-the-new-year-dedicated-release.json +++ b/apps/valor-software-site/src/assets/articles/medusa-the-new-year-dedicated-release/medusa-the-new-year-dedicated-release.json @@ -1,7 +1,7 @@ { "title": "Medusa the New Year-dedicated Release", "order": 60, -"domains": ["dev_quality_assurance", "sales_marketing", "module_federation", "module_federation"], +"domains": ["dev_quality_assurance", "sales_marketing", "module_federation"], "authorImg": "assets/articles/medusa-the-new-year-dedicated-release/Vitor_Bergamo.jpeg", "language": "en", "bgImg": "assets/articles/medusa-the-new-year-dedicated-release/valor_site_new_year.png", diff --git a/apps/valor-software-site/src/assets/articles/migrating-a-repo-to-an-nx-monorepo-while-retaining-history/migrating-a-repo-to-an-nx-monorepo-while-retaining-history.json b/apps/valor-software-site/src/assets/articles/migrating-a-repo-to-an-nx-monorepo-while-retaining-history/migrating-a-repo-to-an-nx-monorepo-while-retaining-history.json index 4853e2e52..7e75d8cad 100644 --- a/apps/valor-software-site/src/assets/articles/migrating-a-repo-to-an-nx-monorepo-while-retaining-history/migrating-a-repo-to-an-nx-monorepo-while-retaining-history.json +++ b/apps/valor-software-site/src/assets/articles/migrating-a-repo-to-an-nx-monorepo-while-retaining-history/migrating-a-repo-to-an-nx-monorepo-while-retaining-history.json @@ -7,6 +7,6 @@ "bgImg": "assets/articles/migrating-a-repo-to-an-nx-monorepo-while-retaining-history/migrating-a-repo-to-an-nx-monorepo-while-retaining-history.png", "author": "Guilherme Tod", "position": "Software Developer", - "date": "Tue Mon 16 2023 10:45:55 GMT+0000 (Coordinated Universal Time)", + "date": "Tue Jan 17 2023 10:45:55 GMT+0000 (Coordinated Universal Time)", "seoDescription": "Why you should migrate and retain history" } \ No newline at end of file diff --git a/assets/articles/0058-migrating-a-repo-to-an-nx-monorepo-while-retaining-history/migrating-a-repo-to-an-nx-monorepo-while-retaining-history.json b/assets/articles/0058-migrating-a-repo-to-an-nx-monorepo-while-retaining-history/migrating-a-repo-to-an-nx-monorepo-while-retaining-history.json index 4853e2e52..7e75d8cad 100644 --- a/assets/articles/0058-migrating-a-repo-to-an-nx-monorepo-while-retaining-history/migrating-a-repo-to-an-nx-monorepo-while-retaining-history.json +++ b/assets/articles/0058-migrating-a-repo-to-an-nx-monorepo-while-retaining-history/migrating-a-repo-to-an-nx-monorepo-while-retaining-history.json @@ -7,6 +7,6 @@ "bgImg": "assets/articles/migrating-a-repo-to-an-nx-monorepo-while-retaining-history/migrating-a-repo-to-an-nx-monorepo-while-retaining-history.png", "author": "Guilherme Tod", "position": "Software Developer", - "date": "Tue Mon 16 2023 10:45:55 GMT+0000 (Coordinated Universal Time)", + "date": "Tue Jan 17 2023 10:45:55 GMT+0000 (Coordinated Universal Time)", "seoDescription": "Why you should migrate and retain history" } \ No newline at end of file diff --git a/assets/articles/0060-medusa-the-new-year-dedicated-release/medusa-the-new-year-dedicated-release.json b/assets/articles/0060-medusa-the-new-year-dedicated-release/medusa-the-new-year-dedicated-release.json index 4b378d0ba..310ff5264 100644 --- a/assets/articles/0060-medusa-the-new-year-dedicated-release/medusa-the-new-year-dedicated-release.json +++ b/assets/articles/0060-medusa-the-new-year-dedicated-release/medusa-the-new-year-dedicated-release.json @@ -1,7 +1,7 @@ { "title": "Medusa the New Year-dedicated Release", "order": 60, -"domains": ["dev_quality_assurance", "sales_marketing", "module_federation", "module_federation"], +"domains": ["dev_quality_assurance", "sales_marketing", "module_federation"], "authorImg": "assets/articles/medusa-the-new-year-dedicated-release/Vitor_Bergamo.jpeg", "language": "en", "bgImg": "assets/articles/medusa-the-new-year-dedicated-release/valor_site_new_year.png", diff --git a/libs/common-docs/src/components/blog-preview/blog-preview.component.html b/libs/common-docs/src/components/blog-preview/blog-preview.component.html index 7a04e7c85..d1779f242 100644 --- a/libs/common-docs/src/components/blog-preview/blog-preview.component.html +++ b/libs/common-docs/src/components/blog-preview/blog-preview.component.html @@ -1,14 +1,15 @@ - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/libs/common-docs/src/models/article.interface.ts b/libs/common-docs/src/models/article.interface.ts index 7f7baf53e..cd2460beb 100644 --- a/libs/common-docs/src/models/article.interface.ts +++ b/libs/common-docs/src/models/article.interface.ts @@ -1,15 +1,19 @@ export interface IArticle { - author?: string; - authorImg?: string; - secondAuthor?: string; - secondAuthorImg?: string; - domains: string[]; - language: string; - bgImg: string; - title: string; - position?: string; - date: string; - content: string; - seoDescription?: string; - order?: number; + author?: string; + authorImg?: string; + secondAuthor?: string; + secondAuthorImg?: string; + domains: string[]; + language: string; + bgImg: string; + title: string; + position?: string; + date: string; + content: string; + seoDescription?: string; + order?: number; + readingTime: string; + + // ToDO: implement change of the languages + languages?: string[]; } \ No newline at end of file diff --git a/libs/route-pages/blog/src/blog-page.component.html b/libs/route-pages/blog/src/blog-page.component.html deleted file mode 100644 index 01f82961f..000000000 --- a/libs/route-pages/blog/src/blog-page.component.html +++ /dev/null @@ -1,80 +0,0 @@ -
- -
-
-
-

- {{activeArticle?.title | customSlice: 40}} -

-

- {{activeArticle?.seoDescription | customSlice: 300}} -

- -
- -
-

Latest Articles

- - -
- - - - - - - - - - -
-
- -
- -
-

Articles

-
- -
-
- - diff --git a/libs/route-pages/blog/src/blog.module.ts b/libs/route-pages/blog/src/blog.module.ts index 78a5b9545..2c4ea84cf 100644 --- a/libs/route-pages/blog/src/blog.module.ts +++ b/libs/route-pages/blog/src/blog.module.ts @@ -2,17 +2,20 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { routes } from './routes'; -import { BlogPageComponent } from './blog-page.component'; +import { BlogPageComponent } from './pages'; import { CommonDocsModule } from '@valor-software/common-docs'; -import { BlogComponent, ArticleComponent } from './components'; +import { BlogComponent, ArticleComponent, BlogItemComponent } from './components'; import { FeedbackModule } from '@valor-software/feedback'; import { SwiperModule } from 'swiper/angular'; +import { DomainNamePipe } from './pipes/domain-name.pipe'; @NgModule({ declarations: [ BlogPageComponent, BlogComponent, ArticleComponent, + BlogItemComponent, + DomainNamePipe ], imports: [ CommonModule, diff --git a/libs/route-pages/blog/src/components/article/article.component.scss b/libs/route-pages/blog/src/components/article/article.component.scss new file mode 100644 index 000000000..db9f3b47e --- /dev/null +++ b/libs/route-pages/blog/src/components/article/article.component.scss @@ -0,0 +1,67 @@ +::ng-deep.turbo-table { + margin-top: 25px; +} + +::ng-deep.turbo-table tbody tr:not(:first-of-type) { + border-top: 1px solid gray; +} + +::ng-deep.turbo-table tbody tr:not(:first-of-type) td:not(:last-of-type) { + border-right: 1px solid gray +} + +::ng-deep.turbo-table tbody tr:not(:first-of-type) td { + padding: 5px 10px; +} + +::ng-deep tbody tr:first-of-type { + text-align: center; +} + +::ng-deep mark { + background-color: #A9A9A9; + color: #383838; + border-radius: 0.3em; + padding: 0.1em 0.25em; +} + +::ng-deep.white { + color: #ffffff; +} + +::ng-deep.small-img { + margin: auto; + width: 40% +} + +::ng-deep.block-citation { + border-left-width: 8px; + --tw-border-opacity: 1; + border-color: rgba(32, 32, 32, var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: #2c2c2d; +} + +::ng-deep.block-citation > .attribution { + padding: 0 16px 16px 16px; + text-align: right; +} + +::ng-deep.block-citation > blockquote { + border: 0px; + border-radius: 3rem; +} + +::ng-deep.block-citation > blockquote > .paragraph:first-of-type:before { + content: open-quote; + float: left; + font-size: 3em; + margin-right: 4px; + font-weight: 700; + line-height: 0.6em; + color: rgba(226, 78, 99, var(--tw-text-opacity)); +} + +::ng-deep.block-citation > blockquote > .paragraph:first-of-type:after { + content: no-close-quote; +} \ No newline at end of file diff --git a/libs/route-pages/blog/src/components/article/article.component.ts b/libs/route-pages/blog/src/components/article/article.component.ts index 07365018c..7cfb443da 100644 --- a/libs/route-pages/blog/src/components/article/article.component.ts +++ b/libs/route-pages/blog/src/components/article/article.component.ts @@ -13,76 +13,7 @@ import { of, Subscription } from 'rxjs'; @Component({ // eslint-disable-next-line @angular-eslint/component-selector selector: 'article', - styles: [` - ::ng-deep.turbo-table { - margin-top: 25px; - } - - ::ng-deep.turbo-table tbody tr:not(:first-of-type) { - border-top: 1px solid gray; - } - - ::ng-deep.turbo-table tbody tr:not(:first-of-type) td:not(:last-of-type) { - border-right: 1px solid gray - } - - ::ng-deep.turbo-table tbody tr:not(:first-of-type) td { - padding: 5px 10px; - } - - ::ng-deep tbody tr:first-of-type { - text-align: center; - } - - ::ng-deep mark { - background-color: #A9A9A9; - color: #383838; - border-radius: 0.3em; - padding: 0.1em 0.25em; - } - - ::ng-deep.white { - color: #ffffff; - } - - ::ng-deep.small-img { - margin: auto; - width: 40% - } - - ::ng-deep.block-citation { - border-left-width: 8px; - --tw-border-opacity: 1; - border-color: rgba(32, 32, 32, var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: #2c2c2d; - } - - ::ng-deep.block-citation > .attribution { - padding: 0 16px 16px 16px; - text-align: right; - } - - ::ng-deep.block-citation > blockquote { - border: 0px; - border-radius: 3rem; - } - - ::ng-deep.block-citation > blockquote > .paragraph:first-of-type:before { - content: open-quote; - float: left; - font-size: 3em; - margin-right: 4px; - font-weight: 700; - line-height: 0.6em; - color: rgba(226, 78, 99, var(--tw-text-opacity)); - } - - ::ng-deep.block-citation > blockquote > .paragraph:first-of-type:after { - content: no-close-quote; - } - - `], + styleUrls: ['./article.component.scss'], templateUrl: './article.component.html' }) export class ArticleComponent implements OnDestroy { diff --git a/libs/route-pages/blog/src/components/blog-item/blog-item.component.html b/libs/route-pages/blog/src/components/blog-item/blog-item.component.html new file mode 100644 index 000000000..1bfae78c9 --- /dev/null +++ b/libs/route-pages/blog/src/components/blog-item/blog-item.component.html @@ -0,0 +1,102 @@ +
+ + + +
+ +
+ +
+

{{_article.title | customSlice: 80}}

+
+ +
+
+ Also Available: + English + +
+ + {{_article?.readingTime + ' read'}} +
+ +
+ {{_article.seoDescription | customSlice: 180}} +
+ +
+ +
+ +
+ By {{_article.author}} + {{_article.date ?? '' | date}} +
+ + + +
+ +
+ +
+

{{_article?.title | customSlice: 80}}

+
+ + + + +
+ +
+ +
+

{{_article.title | customSlice: 80}}

+
+ +
+
+ Also Available: + English + +
+ + {{_article?.readingTime + ' read'}} +
+ +
+ {{_article.seoDescription | customSlice: 180}} +
+ +
+ +
+ +
+ By {{_article.author}} + {{_article.date ?? '' | date}} +
+ +
+ +
+ +
+ \ No newline at end of file diff --git a/libs/route-pages/blog/src/components/blog-item/blog-item.component.scss b/libs/route-pages/blog/src/components/blog-item/blog-item.component.scss new file mode 100644 index 000000000..974de12e4 --- /dev/null +++ b/libs/route-pages/blog/src/components/blog-item/blog-item.component.scss @@ -0,0 +1,42 @@ +$grey: #8C8C8C; +$red: #E24E63; + +:host { + font-family: 'Work Sans', 'sans-serif'; +} + +.blog-item { + flex-direction: column; + + .text-container { + font-size: 28px; + + @apply w-full text-light_title_col leading-40 font-bold; + } +} + +.grey-color { + color: $grey; +} + +.domains { + color: $red; + font-size: 14px; + + .vertical-separator { + color: $grey; + } +} + +.arrow-down { + position: relative; + top: -3px; + content: ""; + display: inline-block; + width: 10px; + height: 10px; + border-right: 2px solid white; + border-top: 2px solid white; + transform: rotate(135deg); + margin-left: 16px; +} diff --git a/libs/route-pages/blog/src/components/blog-item/blog-item.component.ts b/libs/route-pages/blog/src/components/blog-item/blog-item.component.ts new file mode 100644 index 000000000..fcd0c43f1 --- /dev/null +++ b/libs/route-pages/blog/src/components/blog-item/blog-item.component.ts @@ -0,0 +1,22 @@ +import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core'; +import { IArticle } from '@valor-software/common-docs'; + +@Component({ + // eslint-disable-next-line @angular-eslint/component-selector + selector: 'blog-item', + templateUrl: './blog-item.component.html', + styleUrls: ['./blog-item.component.scss'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class BlogItemComponent { + @Input() set article(data: IArticle) { + this._article = data; + const date = new Date(data.date); + this._article.date = isNaN(date.getTime()) ? '' : date.toISOString(); + } + @Input() showLatestArticles = false; + @Input() showActiveArticle = false; + + _article?: IArticle; +} \ No newline at end of file diff --git a/libs/route-pages/blog/src/components/blog/blog.component.html b/libs/route-pages/blog/src/components/blog/blog.component.html index 6f9d371ff..63287a184 100644 --- a/libs/route-pages/blog/src/components/blog/blog.component.html +++ b/libs/route-pages/blog/src/components/blog/blog.component.html @@ -1,82 +1,42 @@ - - -
-
-
- -
-
- -
-
-
+
- -
-
-

Domains

-
-
-

{{getDomainTitle(key)}}

-
- -
+
+ + + + + -
-
-

Language

-
-
-

{{getLanguageTitle(key)}}

-
-
-
-
-
-
- + + - -
-
- - - - - - - - - - - - - - -
+ + + + + + +
- -
- -
- no articles img -

No Results found

-

Try adjusting your search or filter to find what you’re looking for.

- -
- - + + + + + +
+ +
+ no articles img +

No Results found

+ + + +
+ diff --git a/libs/route-pages/blog/src/components/blog/blog.component.scss b/libs/route-pages/blog/src/components/blog/blog.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/libs/route-pages/blog/src/components/blog/blog.component.ts b/libs/route-pages/blog/src/components/blog/blog.component.ts index f2d28bc30..65b9020ef 100644 --- a/libs/route-pages/blog/src/components/blog/blog.component.ts +++ b/libs/route-pages/blog/src/components/blog/blog.component.ts @@ -1,88 +1,32 @@ -import { AfterViewInit, ChangeDetectorRef, Component, Input, OnDestroy } from '@angular/core'; -import { GetArticlesService, titleRefactoring } from '@valor-software/common-docs'; -import { Subscription } from 'rxjs'; -import { IArticle } from '@valor-software/common-docs'; -import { Router } from '@angular/router'; - -export const Domains = { - business_analysis: 'Business Analysis', - user_research_design: 'User Research & Design', - dev_quality_assurance: 'Development & Quality Assurance', - devops_cloud: 'DevOps & Cloud', - recruitment_pm: 'Recruitment & Project Mgmt.', - sales_marketing: 'Sales & Marketing', - module_federation: 'Module Federation', - other: 'Other' -}; - -export const Languages = { - en: 'English', - pt: 'Portuguese' -}; +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { IArticle, titleRefactoring } from '@valor-software/common-docs'; @Component({ // eslint-disable-next-line @angular-eslint/component-selector selector: 'blog-block', - templateUrl: './blog.component.html' + styleUrls: ['./blog.component.scss'], + templateUrl: './blog.component.html', + changeDetection: ChangeDetectionStrategy.OnPush }) -export class BlogComponent implements OnDestroy, AfterViewInit { - sortList: string[] = []; - sortLang: string[] = []; - $articles?: Subscription; - articles?: IArticle[]; - sortArticles?: IArticle[] = []; - activeIndex: string[] = []; +export class BlogComponent { + articles: IArticle[] = []; showAll = false; - isCollapsed = true; - - @Input() set _articles(value: IArticle[]) { - this.articles = Object.assign(value); - this.sortArticles = Object.assign(value); - } + maxArticlesLength = 9; - constructor( - private router: Router, - private getArticles: GetArticlesService, - private cdr: ChangeDetectorRef, - ) { - this.getSortKeys(); + @Input() set _articles(values: IArticle[]) { + this.articles = Object.assign(values); } - ngAfterViewInit(): void { + // TODO: remove or rework this code while switch language implementation + /*ngAfterViewInit(): void { this.toggleLanguage('en'); } - getSortKeys() { - const sortSet = new Set(); - Object.keys(Domains).map(key => sortSet.add(key)); - this.sortList = [...sortSet]; - - const sortLang = new Set(); - Object.keys(Languages).map(key => sortLang.add(key)); - this.sortLang = [...sortLang]; - } - - getDomainTitle(key: string) { - const resKey = key as keyof typeof Domains; - return Domains[resKey]; - } - getLanguageTitle(key: string) { const resKey = key as keyof typeof Languages; return Languages[resKey]; } - toggleActiveIndex(key: string) { - if (this.activeIndex.includes(key)) { - this.activeIndex = this.activeIndex.filter(item => item !== key); - this.showAll = false; - return; - } - - this.activeIndex = [...this.activeIndex, key]; - this.showAll = false; - } - toggleLanguage(key: string) { if (!this.activeIndex.includes(key)) { const keys = this.activeIndex.filter(item => item !== 'pt' && item !== 'en'); @@ -90,27 +34,9 @@ export class BlogComponent implements OnDestroy, AfterViewInit { } this.showAll = false; - } + }*/ - updateArticles(articles: IArticle[] | []) { - this.sortArticles = articles; - this.cdr.detectChanges(); - } - - resetAll() { - const lang = this.activeIndex.includes('pt') ? 'pt' : 'en'; - this.activeIndex = [lang]; - } - - getRouteLink(link: string): any { + getRouteLink(link: string): string { return titleRefactoring(link); } - - checkLength(): boolean { - return !!(this.sortArticles?.length && this.sortArticles?.length > 8); - } - - ngOnDestroy() { - this.$articles?.unsubscribe(); - } } \ No newline at end of file diff --git a/libs/route-pages/blog/src/components/index.ts b/libs/route-pages/blog/src/components/index.ts index 9c586faa2..9fae7d0da 100644 --- a/libs/route-pages/blog/src/components/index.ts +++ b/libs/route-pages/blog/src/components/index.ts @@ -1,2 +1,3 @@ export * from './article/article.component'; export * from './blog/blog.component'; +export * from './blog-item/blog-item.component'; diff --git a/libs/route-pages/blog/src/models/blog.consts.ts b/libs/route-pages/blog/src/models/blog.consts.ts new file mode 100644 index 000000000..5a62b1978 --- /dev/null +++ b/libs/route-pages/blog/src/models/blog.consts.ts @@ -0,0 +1,15 @@ +export const Domains: Record = { + business_analysis: 'Business Analysis', + user_research_design: 'User Research & Design', + dev_quality_assurance: 'Development & Quality Assurance', + devops_cloud: 'DevOps & Cloud', + recruitment_pm: 'Recruitment & Project Mgmt.', + sales_marketing: 'Sales & Marketing', + module_federation: 'Module Federation', + other: 'Other' +}; + +export const Languages = { + en: 'English', + pt: 'Portuguese' +}; diff --git a/libs/route-pages/blog/src/models/index.ts b/libs/route-pages/blog/src/models/index.ts new file mode 100644 index 000000000..4c2996b7a --- /dev/null +++ b/libs/route-pages/blog/src/models/index.ts @@ -0,0 +1 @@ +export * from './blog.consts'; diff --git a/libs/route-pages/blog/src/pages/blog-page/blog-page.component.html b/libs/route-pages/blog/src/pages/blog-page/blog-page.component.html new file mode 100644 index 000000000..455f9ec9b --- /dev/null +++ b/libs/route-pages/blog/src/pages/blog-page/blog-page.component.html @@ -0,0 +1,69 @@ +
+
+ + + + + +
+ + + + + +
+ +
+

Latest Articles

+ + + + + + + + + + +
+
+
+ +
+
+

All Articles

+ +
+ +
+
+ +
+ + diff --git a/libs/route-pages/blog/src/pages/blog-page/blog-page.component.scss b/libs/route-pages/blog/src/pages/blog-page/blog-page.component.scss new file mode 100644 index 000000000..13faf2e6a --- /dev/null +++ b/libs/route-pages/blog/src/pages/blog-page/blog-page.component.scss @@ -0,0 +1,38 @@ +// ToDo: add base styles import +$bp-small: 640px; +$bp-medium: 768px; +$bp-large: 1024px; + +.main-image { + width: 65%; + display: flex; + margin-right: 40px; + max-height: 100%; + + @media (max-width: $bp-large) { + width: 100%; + } +} + +.first-articles { + width: 30%; + display: none; + flex-direction: column; + max-height: 100%; + + @media (min-width: $bp-large) { + display: flex; + } +} + +::ng-deep .swiper-slide { + padding-top: 0; +} + +::ng-deep .pink_swiper .swiper-pagination { + margin-top: 16px; +} + +::ng-deep .pink_swiper .swiper-slide { + padding-top: 0; +} \ No newline at end of file diff --git a/libs/route-pages/blog/src/blog-page.component.ts b/libs/route-pages/blog/src/pages/blog-page/blog-page.component.ts similarity index 94% rename from libs/route-pages/blog/src/blog-page.component.ts rename to libs/route-pages/blog/src/pages/blog-page/blog-page.component.ts index 4d939307b..d03b7ae92 100644 --- a/libs/route-pages/blog/src/blog-page.component.ts +++ b/libs/route-pages/blog/src/pages/blog-page/blog-page.component.ts @@ -10,7 +10,8 @@ SwiperCore.use([Pagination]); @Component({ // eslint-disable-next-line @angular-eslint/component-selector selector: 'blog-page', - templateUrl: './blog-page.component.html' + templateUrl: './blog-page.component.html', + styleUrls: ['./blog-page.component.scss'] }) export class BlogPageComponent implements OnDestroy { routeUrl = ''; @@ -50,12 +51,6 @@ export class BlogPageComponent implements OnDestroy { return titleRefactoring(link); } - filterFirstItems() { - if (this.activeArticle) { - this.firstArticles = this.firstArticles?.filter(item => item !== this.activeArticle); - } - } - ngOnDestroy() { this.$generalSubscription.unsubscribe(); } @@ -74,4 +69,10 @@ export class BlogPageComponent implements OnDestroy { }) ); } + + private filterFirstItems() { + if (this.activeArticle) { + this.firstArticles = this.firstArticles?.filter(item => item !== this.activeArticle); + } + } } \ No newline at end of file diff --git a/libs/route-pages/blog/src/pages/index.ts b/libs/route-pages/blog/src/pages/index.ts new file mode 100644 index 000000000..cb6deaedb --- /dev/null +++ b/libs/route-pages/blog/src/pages/index.ts @@ -0,0 +1 @@ +export * from './blog-page/blog-page.component'; diff --git a/libs/route-pages/blog/src/pipes/domain-name.pipe.ts b/libs/route-pages/blog/src/pipes/domain-name.pipe.ts new file mode 100644 index 000000000..69814ecc2 --- /dev/null +++ b/libs/route-pages/blog/src/pipes/domain-name.pipe.ts @@ -0,0 +1,15 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { Domains } from '../models'; + +@Pipe({ name: 'domainName' }) +export class DomainNamePipe implements PipeTransform { + + transform(domains: string[]): string { + if (!domains.length) { + return ''; + } + + return domains.map(domain => Domains[domain]).filter(Boolean) + .join(` | `); + } +} \ No newline at end of file diff --git a/libs/route-pages/blog/src/routes.ts b/libs/route-pages/blog/src/routes.ts index 62b174cb5..cf90bf896 100644 --- a/libs/route-pages/blog/src/routes.ts +++ b/libs/route-pages/blog/src/routes.ts @@ -1,4 +1,4 @@ -import { BlogPageComponent } from './blog-page.component'; +import { BlogPageComponent } from './pages/blog-page/blog-page.component'; import { Routes } from '@angular/router'; import { ArticleComponent } from './components'; From 6afda24e5df70d5e692269d3afde0307f5e70764 Mon Sep 17 00:00:00 2001 From: danyaZh Date: Thu, 2 Nov 2023 17:34:05 +0200 Subject: [PATCH 2/3] refactor: fixed comments --- .../blog-item/blog-item.component.html | 21 +++++++------ .../blog-item/blog-item.component.scss | 22 +++++++++---- .../pages/blog-page/blog-page.component.html | 31 +++++++++++-------- 3 files changed, 45 insertions(+), 29 deletions(-) diff --git a/libs/route-pages/blog/src/components/blog-item/blog-item.component.html b/libs/route-pages/blog/src/components/blog-item/blog-item.component.html index 1bfae78c9..4b803e106 100644 --- a/libs/route-pages/blog/src/components/blog-item/blog-item.component.html +++ b/libs/route-pages/blog/src/components/blog-item/blog-item.component.html @@ -9,8 +9,8 @@ [alt]="_article.title"> -
-

{{_article.title | customSlice: 80}}

+
+

{{_article.title}}

{{_article?.readingTime + ' read'}}
-
- {{_article.seoDescription | customSlice: 180}} +
+ {{_article.seoDescription}}
@@ -49,8 +49,8 @@ [alt]="_article.title">
-
-

{{_article?.title | customSlice: 80}}

+
+

{{_article?.title}}

@@ -63,8 +63,9 @@ [alt]="_article.title">
-
-

{{_article.title | customSlice: 80}}

+
+

{{_article.title}}

{{_article?.readingTime + ' read'}}
-
- {{_article.seoDescription | customSlice: 180}} +
+ {{_article.seoDescription}}
diff --git a/libs/route-pages/blog/src/components/blog-item/blog-item.component.scss b/libs/route-pages/blog/src/components/blog-item/blog-item.component.scss index 974de12e4..66015daae 100644 --- a/libs/route-pages/blog/src/components/blog-item/blog-item.component.scss +++ b/libs/route-pages/blog/src/components/blog-item/blog-item.component.scss @@ -7,12 +7,6 @@ $red: #E24E63; .blog-item { flex-direction: column; - - .text-container { - font-size: 28px; - - @apply w-full text-light_title_col leading-40 font-bold; - } } .grey-color { @@ -40,3 +34,19 @@ $red: #E24E63; transform: rotate(135deg); margin-left: 16px; } + +.two-line-limit { + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; /* number of lines to show */ + line-clamp: 2; + -webkit-box-orient: vertical; +} + +.four-line-limit { + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 4; /* number of lines to show */ + line-clamp: 4; + -webkit-box-orient: vertical; +} \ No newline at end of file diff --git a/libs/route-pages/blog/src/pages/blog-page/blog-page.component.html b/libs/route-pages/blog/src/pages/blog-page/blog-page.component.html index 455f9ec9b..d3234d9ab 100644 --- a/libs/route-pages/blog/src/pages/blog-page/blog-page.component.html +++ b/libs/route-pages/blog/src/pages/blog-page/blog-page.component.html @@ -1,20 +1,25 @@
- - - + + + + + +
From 367ed897cccf65c7b5f27d4845c213fb145a01a2 Mon Sep 17 00:00:00 2001 From: danyaZh Date: Tue, 7 Nov 2023 14:10:31 +0200 Subject: [PATCH 3/3] refactor: fixed comments --- .../src/components/blog-item/blog-item.component.html | 2 +- .../blog/src/pages/blog-page/blog-page.component.html | 8 -------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/libs/route-pages/blog/src/components/blog-item/blog-item.component.html b/libs/route-pages/blog/src/components/blog-item/blog-item.component.html index 4b803e106..8e5d9a647 100644 --- a/libs/route-pages/blog/src/components/blog-item/blog-item.component.html +++ b/libs/route-pages/blog/src/components/blog-item/blog-item.component.html @@ -64,7 +64,7 @@
+ class="text-4xl lg:text-5xl w-full text-light_title_col leading-32 lg:leading-46 font-bold mt-8 lg:mt-12 two-line-limit">

{{_article.title}}

diff --git a/libs/route-pages/blog/src/pages/blog-page/blog-page.component.html b/libs/route-pages/blog/src/pages/blog-page/blog-page.component.html index d3234d9ab..3ceeebd7c 100644 --- a/libs/route-pages/blog/src/pages/blog-page/blog-page.component.html +++ b/libs/route-pages/blog/src/pages/blog-page/blog-page.component.html @@ -10,14 +10,6 @@ class="w-full lg:pt-0" [showActiveArticle]="true" [article]="activeArticle"> - -