Fix links with tabs

angular.json

@@ -102,8 +102,7 @@
       },
       "tags": [],
       "implicitDependencies": [
-        "file-uploader",
-        "portfolio"
+        "file-uploader"
       ]
     },
     "feedback": {
@@ -198,52 +197,6 @@
       },
       "tags": []
     },
-    "portfolio": {
-      "projectType": "library",
-      "root": "libs/portfolio",
-      "sourceRoot": "libs/portfolio/src",
-      "prefix": "valor-software-site-base",
-      "targets": {
-        "build": {
-          "executor": "@nrwl/angular:ng-packagr-lite",
-          "outputs": [
-            "dist/libs/portfolio"
-          ],
-          "options": {
-            "project": "libs/portfolio/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "libs/portfolio/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "libs/portfolio/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "executor": "@nrwl/jest:jest",
-          "outputs": [
-            "coverage/libs/portfolio"
-          ],
-          "options": {
-            "jestConfig": "libs/portfolio/jest.config.js",
-            "passWithNoTests": true
-          }
-        },
-        "lint": {
-          "executor": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": [
-              "libs/portfolio/src/**/*.ts",
-              "libs/portfolio/src/**/*.html"
-            ]
-          }
-        }
-      },
-      "tags": []
-    },
     "route-pages-blog-portfolio": {
       "projectType": "library",
       "root": "libs/route-pages/blog-portfolio",
@@ -291,8 +244,7 @@
       "tags": [],
       "implicitDependencies": [
         "common-docs",
-        "feedback",
-        "portfolio"
+        "feedback"
       ]
     },
     "route-pages-careers": {
@@ -438,8 +390,7 @@
       "tags": [],
       "implicitDependencies": [
         "common-docs",
-        "feedback",
-        "portfolio"
+        "feedback"
       ]
     },
     "route-pages-services-page": {

apps/valor-software-site/src/app/404.component.ts

@@ -10,8 +10,8 @@ import { Component } from '@angular/core';
                     <h1 class="text-light_title_col text-8xl leading-100 md:text-250 md:leading-250 mb-4 font-bold">404</h1>
                     <p class="leading-40 text-grey_font_col text-center lg:text-left text-large font-bold mb-6">Ooops! You weren’t supposed to see this.</p>
                     <p class="text-base leading-6 text-light_title_col text-center lg:text-left">The page you’re looking for no longer exist. Return to the previous page and remember: you haven’t seen anything! </p>
-                    <button class="btn-pink w-full md:w-auto flex justify-center mt-8">
-                        <a [routerLink]="'/'"  class="w-full flex justify-center items-center">Go to the main page <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+                    <button class="w-full md:w-auto flex justify-center mt-8">
+                        <a [routerLink]="'/'"  class="btn-pink w-full flex justify-center items-center">Go to the main page <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
                     </button>
                 </div>
                 <div class="hidden lg:flex items-end">

apps/valor-software-site/src/app/app.module.ts

@@ -3,11 +3,10 @@ import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 import { routes } from './app.routing';
 import { AppComponent } from './app.component';
-import { CommonDocsModule, ARTICLES_LIST, ARTICLES_REFACTORED_TITLE_LIST, SeoService, OLD_ROUTES_FROM_OLD_SITE } from '@valor-software/common-docs';
+import { CommonDocsModule, ARTICLES_LIST, SeoService, PORTFOLIO_LIST, ARTICLES_REFACTORED_TITLE_LIST, OLD_ROUTES_FROM_OLD_SITE } from '@valor-software/common-docs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ScullyLibModule } from '@scullyio/ng-lib';
 import { articlesList, articlesRefactoringTitlesList } from "../../../../assets/articles/articlesList";
-import { PORTFOLIO_LIST } from "@valor-software/portfolio";
 import { projectsList } from "../assets/portfolio/portfolio.list";
 import { linksFromOldSite } from "../../../../assets/articles/brokenRoutes";
 import { NotFoundComponent } from './404.component';

libs/common-docs/src/common-docs.module.ts

@@ -19,9 +19,8 @@ import { SwiperModule } from "swiper/angular";
 import { BlogPreviewComponent } from './components/blog-preview/blog-preview.component';
 import { BlogPortfolioItemComponent } from './components/blog-preview/blog-portfolio-item.component';
 import { GetArticlesService } from './services/getArticles.service';
-import { ArticlesRouteService } from './services/articlesRoute.service';
 import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from 'ng-recaptcha';
-import { GetPortfolioService } from "@valor-software/portfolio";
+import { GetPortfolioService } from "./services/getPortfolio.service";
 import { CustomSlicePipe } from './pipes/customSlice.pipe';
 
 export { PopoverComponent } from './components/popover/popover.component';
@@ -34,13 +33,15 @@ export { ModalService } from './services/modal.service';
 export { BreadCrumbsComponent } from './components/breadCrumbs/breadCrumbs.component';
 export { ShowHideDirective } from './directives/showHide.directive';
 export { GetArticlesService } from './services/getArticles.service';
-export { ArticlesRouteService } from './services/articlesRoute.service';
 export { IArticle } from './models/article.interface';
 export { BlogPreviewComponent } from './components/blog-preview/blog-preview.component';
 export { BlogPortfolioItemComponent } from './components/blog-preview/blog-portfolio-item.component';
 export { ARTICLES_LIST, ARTICLES_REFACTORED_TITLE_LIST } from './tokens/articlesList.token';
 export { SeoService } from './services/seo.service';
 export { CustomSlicePipe } from './pipes/customSlice.pipe';
+export { PORTFOLIO_LIST } from './tokens/portfolioList.token';
+export { IPortfolio } from './models/portfolio.interface';
+export { GetPortfolioService } from './services/getPortfolio.service';
 export { titleRefactoring, checkHTMLExtension} from './utils/titleRefactoringUtil';
 export { OLD_ROUTES_FROM_OLD_SITE } from "./tokens/linksFromOldSite.token";
 
@@ -70,9 +71,9 @@ export { OLD_ROUTES_FROM_OLD_SITE } from "./tokens/linksFromOldSite.token";
     ShowHideDirective,
     BlogPreviewComponent,
     BlogPortfolioItemComponent,
-    CustomSlicePipe
+    CustomSlicePipe,
   ],
-  providers: [ModalService, SendEmailService, ArticlesRouteService, GetArticlesService, GetPortfolioService,
+  providers: [ModalService, SendEmailService, GetArticlesService, GetPortfolioService,
     {
       provide: RECAPTCHA_V3_SITE_KEY,
       useValue: '6LctnKQdAAAAABGStzrEdBnCWVYwkqAafI7pcUz3',

libs/common-docs/src/components/blog-preview/blog-portfolio-item.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { IArticle } from "../../models/article.interface";
-import { IPortfolio } from "@valor-software/portfolio";
+import { IPortfolio } from "../../models/portfolio.interface";
 
 
 @Component({

libs/common-docs/src/components/blog-preview/blog-preview.component.html

@@ -4,7 +4,11 @@
             class="article_swiper"
     >
         <ng-template swiperSlide *ngFor="let article of articles">
-            <blog-portfolio-item class="w-full cursor-pointer" [article]="article" (click)="route(article.title)"></blog-portfolio-item>
+            <ng-container *ngIf="article && article.title">
+                <a class="block w-full cursor-pointer" href="javascript:void(0)" [routerLink]="['/articles', getRouteLink(article.title)]">
+                    <blog-portfolio-item [article]="article"></blog-portfolio-item>
+                </a>
+            </ng-container>
         </ng-template>
     </swiper>
 </ng-container>

libs/common-docs/src/components/blog-preview/blog-preview.component.ts

@@ -3,7 +3,7 @@ import { GetArticlesService } from "../../services/getArticles.service";
 import { IArticle } from "../../models/article.interface";
 import { forkJoin, Subscription } from "rxjs";
 import SwiperCore, { Pagination, SwiperOptions  } from "swiper";
-import {Router} from "@angular/router";
+import {titleRefactoring} from "../../utils/titleRefactoringUtil";
 SwiperCore.use([Pagination]);
 
 @Component({
@@ -37,7 +37,6 @@ export class BlogPreviewComponent implements OnDestroy, OnInit{
 
     constructor(
         private getArticles: GetArticlesService,
-        private router: Router
     ) {}
 
     ngOnInit() {
@@ -58,12 +57,7 @@ export class BlogPreviewComponent implements OnDestroy, OnInit{
         this.$articles?.unsubscribe();
     }
 
-    route(title: string) {
-        if (!title) {
-            return;
-        }
-
-        const link = this.getArticles.getRefactoredTitle(title);
-        this.router.navigate(['articles', link]);
+    getRouteLink(link: string): string {
+        return titleRefactoring(link);
     }
 }

libs/common-docs/src/components/breadCrumbs/breadCrumbs.component.ts

@@ -7,16 +7,17 @@ import { Router, UrlSegment } from "@angular/router";
     template:`
         <div *ngIf="segments && segments?.length && segments.length > 1">
             <div class="flex text-grey_font_col">
-                <p class="underline cursor-pointer" (click)="navigate()">Home</p>
+                <a href="javascript:void(0)" class="underline cursor-pointer" [routerLink]="[getRouteLink()]">Home</a>
                 <ng-container *ngFor="let segment of segments;let i = index">
                     <ng-container *ngIf="segment.title && segment.path">
                         <span>&nbsp;{{'>'}}&nbsp;</span>
-                        <p
-                                (click)="navigate(i)"
+                        <a
+                                href="javascript:void(0)"
+                                [routerLink]="[getRouteLink(i)]"
                                 [ngClass]="{'disabled': checkDisabled(i), 'underline cursor-pointer': !checkDisabled(i)}"
                         >
                             {{segment.title.toString() | titlecase}}
-                        </p>
+                        </a>
                     </ng-container>
                 </ng-container>
             </div>
@@ -62,24 +63,19 @@ export class BreadCrumbsComponent {
         });
     }
 
-    navigate(link?: number) {
-        if (!this.segments?.length) {
-            return;
-        }
-
-        if (!link && link !== 0) {
-            this.router.navigate(['/']);
-            return;
+    getRouteLink(link?: number): string {
+        if (!this.segments?.length || !link && link !== 0) {
+            return '/';
         }
 
         link++;
         if (link >= this.segments.length) {
-            return;
+            return '/';
         }
 
         const arr = this.segments.slice(0, link);
         const url = arr.map(url => url.path);
-        this.router.navigate([`/${url.join('/')}`]);
+        return `/${url.join('/')}`;
     }
 
     checkDisabled(index: number) {

libs/common-docs/src/components/popover/popover.component.html

@@ -2,16 +2,18 @@
     <div class="popover pt-10 px-10 z-20" [class.popover_show]="show">
         <div class="arrow"></div>
         <div class="flex justify-between flex-wrap">
-            <div class="w-45% cursor-pointer text-light_font_col mb-12" *ngFor="let item of popover_str" changeSrcOnHover [defaultSrc]="item.icon" [activeSrc]="item.activeIcon" [routerLink]="item.route" (click)="changeShow(false)">
-                <div class="flex mb-2.5">
-                    <div class="flex items-center">
-                        <img [src]="item.icon">
-                        <h3 class="ml-2.5">{{item.title}}</h3>
+            <div class="w-45% cursor-pointer text-light_font_col mb-12" *ngFor="let item of popover_str" changeSrcOnHover [defaultSrc]="item.icon" [activeSrc]="item.activeIcon" (click)="changeShow(false)">
+                <a href="javaScript:void(0)" [routerLink]="item.route">
+                    <div class="flex mb-2.5">
+                        <div class="flex items-center">
+                            <img [src]="item.icon">
+                            <h3 class="ml-2.5">{{item.title}}</h3>
+                        </div>
+                        <div *ngIf="!item.route" class="bg-yellow_bg_col rounded-2xl text-dark_font_col text-xs ml-5 self-center px-1.5" >
+                            Coming soon
+                        </div>
                     </div>
-                    <div *ngIf="!item.route" class="bg-yellow_bg_col rounded-2xl text-dark_font_col text-xs ml-5 self-center px-1.5" >
-                        Coming soon
-                    </div>
-                </div>
+                </a>
                 <div>
                     <p class="text-grey_font_col text-sm">{{item.description}}</p>
                 </div>
@@ -23,16 +25,18 @@ <h3 class="ml-2.5">{{item.title}}</h3>
 
 <!--ADAPTIVE MENU-->
 <div class="adaptive-popover" [class.show]="show">
-    <div class="" *ngFor="let item of popover_str; index as i" [routerLink]="item.route" (click)="changeShow(false)">
-        <div class="flex" [class.mb-7]="i !== popover_str.length-1">
-            <div class="flex items-center">
-                <img [src]="item.icon">
-                <h3 class="ml-2.5 text-xl">{{item.title}}</h3>
-            </div>
-            <div *ngIf="!item.route" class="bg-yellow_bg_col rounded-2xl px-2 text-dark_font_col text-xs ml-5 self-center">
-                Coming soon
+    <div class="" *ngFor="let item of popover_str; index as i" (click)="changeShow(false)">
+        <a href="javaScript:void(0)" [routerLink]="item.route">
+            <div class="flex" [class.mb-7]="i !== popover_str.length-1">
+                <div class="flex items-center">
+                    <img [src]="item.icon">
+                    <h3 class="ml-2.5 text-xl">{{item.title}}</h3>
+                </div>
+                <div *ngIf="!item.route" class="bg-yellow_bg_col rounded-2xl px-2 text-dark_font_col text-xs ml-5 self-center">
+                    Coming soon
+                </div>
             </div>
-        </div>
+        </a>
     </div>
 </div>
 

libs/common-docs/src/components/services_block/services-block.component.html

@@ -1,8 +1,8 @@
 <div class="flex justify-between flex-col flex-wrap lg:flex-row" *ngIf="preview">
-    <div *ngFor="let serv of servicesInfList" class="lg:w-48% bg-grey py-7 px-12 flex justify-between flex-col-reverse md:flex-row font-bold mb-8 w-full items-center cursor-pointer md:border-2 md:border-transparent md:hover:border-pink transition-colors" (click)="routeLink('services')">
+    <a *ngFor="let serv of servicesInfList" href="javascript:void(0)" [routerLink]="getRouteLink('services')" class="block lg:w-48% bg-grey py-7 px-12 flex justify-between flex-col-reverse md:flex-row font-bold mb-8 w-full items-center cursor-pointer md:border-2 md:border-transparent md:hover:border-pink transition-colors">
         <p class="text-light_title_col md:text-large block md:mr-3.5 flex items-center mt-6 md:mt-0 text-xl md:leading-44 text-center md:text-left">{{serv.title}}</p>
         <img [src]="serv.img" [alt]="serv.title + ' icon'" class="md:max-w-45% max-w-10.5">
-    </div>
+    </a>
 </div>
 <ng-container *ngIf="!preview">
     <div

libs/common-docs/src/components/services_block/services-block.component.ts

@@ -15,7 +15,7 @@ export class ServicesBlockComponent {
         private router: Router
     ) {}
 
-    routeLink(link: string) {
-        this.router.navigate([`/${link}`]);
+    getRouteLink(link: string) {
+        return [`/${link}`];
     }
 }

libs/portfolio/src/getPortfolio.service.ts → libs/common-docs/src/services/getPortfolio.service.ts

@@ -1,9 +1,9 @@
 import { Inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { IPortfolio } from "./portfolio.interface";
-import { PORTFOLIO_LIST } from "./portfolioList.token";
-import {titleRefactoring, checkHTMLExtension} from "./titleRefactoringUtil";
+import { IPortfolio } from "../models/portfolio.interface";
+import { PORTFOLIO_LIST } from "../tokens/portfolioList.token";
+import {titleRefactoring, checkHTMLExtension} from "../utils/titleRefactoringUtil";
 
 
 @Injectable({providedIn: 'platform'})

libs/common-docs/src/services/seo.service.ts

@@ -1,12 +1,12 @@
-import { Injectable, Inject } from '@angular/core';
+import {Inject, Injectable} from '@angular/core';
 import { Title, Meta } from '@angular/platform-browser';
-import {filter} from "rxjs/operators";
-import {NavigationEnd, Router, UrlSegment} from "@angular/router";
-import {Observable, Subscription} from "rxjs";
-import {GetArticlesService} from "./getArticles.service";
-import { GetPortfolioService } from "@valor-software/portfolio";
+import { GetArticlesService } from "./getArticles.service";
+import { GetPortfolioService } from "./getPortfolio.service";
+import { filter } from "rxjs/operators";
+import { NavigationEnd, Router, UrlSegment } from "@angular/router";
+import { Observable, Subscription } from "rxjs";
 import { checkHTMLExtension } from "../utils/titleRefactoringUtil";
-import {OLD_ROUTES_FROM_OLD_SITE} from "../tokens/linksFromOldSite.token";
+import { OLD_ROUTES_FROM_OLD_SITE } from "../tokens/linksFromOldSite.token";
 
 const ex: {[key: string] : { nameType: 'meta' | 'title', name: string, nameValue: string, content: string }[]} = {
     '/': [