Merge bb79dcb into 4cb3319

.editorconfig

@@ -13,7 +13,7 @@ trim_trailing_whitespace = true
 max_line_length = off
 trim_trailing_whitespace = false
 
-[*.json]
+[{*.json, *.scss}]
 indent_size = 2
 
 [{package.json,.travis.yml}]

e2e/protractor.browserstack.base.conf.js

@@ -34,12 +34,12 @@ exports.config = {
         "browserName": "Chrome"
     }, {
         "browserName": "Firefox"
-    } ,{
+    } ,/*{
         "os" : "Windows",
         "os_version" : "7",
         "browserName": "IE",
         "browser_version" : "11.0",
-    }, {
+    }, */{
         "browserName": "android",
         "device": "Samsung Galaxy S9 Plus",
         "realMobile": true

functions/package.json

@@ -36,6 +36,8 @@
     "@fortawesome/fontawesome-free": "5.8.1",
     "@google-cloud/storage": "2.5.0",
     "@ng-bootstrap/ng-bootstrap": "4.1.1",
+    "@ngx-loading-bar/core": "4.2.0",
+    "@ngx-loading-bar/router": "4.2.0",
     "angulartics2": "7.5.1",
     "bootstrap": "4.3.1",
     "classlist.js": "1.1.20150312",

package.json

@@ -76,6 +76,8 @@
     "@angular/service-worker": "7.2.13",
     "@fortawesome/fontawesome-free": "5.8.1",
     "@ng-bootstrap/ng-bootstrap": "4.1.1",
+    "@ngx-loading-bar/core": "4.2.0",
+    "@ngx-loading-bar/router": "4.2.0",
     "angulartics2": "7.5.1",
     "bootstrap": "4.3.1",
     "classlist.js": "1.1.20150312",

src/app/app.module.ts

@@ -9,15 +9,17 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { LoadingBarModule } from '@ngx-loading-bar/core';
+import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
 import { Angulartics2Module } from 'angulartics2';
+
 import { environment } from '../environments/environment';
 import { APP_CONFIG, APP_DI_CONFIG } from './app-config';
 import { AppRoutingModule } from './app-routing.module';
 import { AlertComponent } from './components/alert/alert.component';
 import { AppComponent } from './components/app/app.component';
 import { CarouselComponent } from './components/carousel/carousel.component';
 import { FooterComponent } from './components/footer/footer.component';
-import { LoadingSpinnerComponent } from './components/loading-spinner/loading-spinner.component';
 import { NavMenuComponent } from './components/nav-menu/nav-menu.component';
 import { PagerComponent } from './components/pager/pager.component';
 import { SideBarComponent } from './components/side-bar/side-bar.component';
@@ -60,7 +62,6 @@ import { SearchBarComponent } from './widgets/search-bar/search-bar.component';
         ArticleListComponent,
         ArticleDetailComponent,
         ScrollableDirective,
-        LoadingSpinnerComponent,
         AdminLoginComponent,
         FooterComponent,
         SideBarComponent,
@@ -97,6 +98,8 @@ import { SearchBarComponent } from './widgets/search-bar/search-bar.component';
 
         AppRoutingModule,
         Angulartics2Module.forRoot(environment.Angulartics2),
+        LoadingBarRouterModule,
+        LoadingBarModule,
 
         ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production})
     ],

src/app/components/app/app.component.html

@@ -1,10 +1,11 @@
 
 <app-nav-menu></app-nav-menu>
 
+<ngx-loading-bar></ngx-loading-bar>
+
 <div class="container">
     <div class="row">
         <div class="col-12">
-            <app-loading-spinner *ngIf="pagination.loading | async"></app-loading-spinner>
             <app-alert></app-alert>
         </div>
     </div>

src/app/components/app/app.component.spec.ts

@@ -7,7 +7,6 @@ import { NotFoundComponent } from '../../pages/not-found/not-found.component';
 import { angulartics2GoogleGlobalSiteTagStub } from '../../testing/angulartics-stub.spec';
 import { activatedRouteStub, TestHelperModule } from '../../testing/test.helper.module.spec';
 import { CarouselComponent } from '../carousel/carousel.component';
-import { LoadingSpinnerComponent } from '../loading-spinner/loading-spinner.component';
 import { NavMenuComponent } from '../nav-menu/nav-menu.component';
 import { AppComponent } from './app.component';
 
@@ -20,7 +19,6 @@ describe('AppComponent', () => {
             declarations: [
                 AppComponent,
                 NavMenuComponent,
-                LoadingSpinnerComponent,
                 CarouselComponent
             ],
             providers: [
@@ -99,7 +97,6 @@ describe('AppComponentSeoService', () => {
             declarations: [
                 AppComponent,
                 NavMenuComponent,
-                LoadingSpinnerComponent,
                 CarouselComponent
             ],
             providers: [
@@ -297,7 +294,6 @@ describe('AppComponentAlertService', () => {
             declarations: [
                 AppComponent,
                 NavMenuComponent,
-                LoadingSpinnerComponent,
                 CarouselComponent
             ],
             providers: [
@@ -344,11 +340,7 @@ describe('AppComponentAlertService', () => {
         comp.router.initialNavigation();
         comp.alert.success('My success message', false);
         fixture.detectChanges();
-        comp.router.navigate(['unit-test'])
-            .catch(reason => {
-                expect(reason)
-                    .toBeUndefined();
-            });
+        activatedRouteStub.navigate(fixture, comp.router, ['unit-test']);
         tick(1000);
         fixture.detectChanges();
         tick(1000);
@@ -360,11 +352,7 @@ describe('AppComponentAlertService', () => {
         comp.router.initialNavigation();
         comp.alert.success('My success message', true);
         fixture.detectChanges();
-        comp.router.navigate(['unit-test'])
-            .catch(reason => {
-                expect(reason)
-                    .toBeUndefined();
-            });
+        activatedRouteStub.navigate(fixture, comp.router, ['unit-test']);
         tick(1000);
         fixture.detectChanges();
         tick(1000);
@@ -393,11 +381,7 @@ describe('AppComponentAlertService', () => {
         comp.router.initialNavigation();
         comp.alert.error('My error message', false);
         fixture.detectChanges();
-        comp.router.navigate(['unit-test'])
-            .catch(reason => {
-                expect(reason)
-                    .toBeUndefined();
-            });
+        activatedRouteStub.navigate(fixture, comp.router, ['unit-test']);
         tick(1000);
         fixture.detectChanges();
         tick(1000);
@@ -409,11 +393,7 @@ describe('AppComponentAlertService', () => {
         comp.router.initialNavigation();
         comp.alert.error('My error message', true);
         fixture.detectChanges();
-        comp.router.navigate(['unit-test'])
-            .catch(reason => {
-                expect(reason)
-                    .toBeUndefined();
-            });
+        activatedRouteStub.navigate(fixture, comp.router, ['unit-test']);
         tick(1000);
         fixture.detectChanges();
         tick(1000);
@@ -432,7 +412,6 @@ describe('AppComponentServer', () => {
             declarations: [
                 AppComponent,
                 NavMenuComponent,
-                LoadingSpinnerComponent,
                 CarouselComponent
             ],
             providers: [

src/app/components/carousel/carousel.component.html

@@ -12,9 +12,12 @@
              *ngFor="let carouselItem of carouselModel.carouselItems; trackBy:trackByIndex; let i = index">
             <img class="d-block w-100" [src]="carouselItem.src" alt="{{ carouselItem.alt }}" />
             <div class="carousel-caption d-none d-md-block">
-                <h5>{{ carouselItem.caption }}</h5>
+                <h1>{{ carouselItem.caption }}</h1>
                 <p>{{ carouselItem.text }}</p>
             </div>
+            <div class="carousel-caption d-block d-md-none">
+                <h5>{{ carouselItem.caption }}</h5>
+            </div>
         </div>
     </div>
     <a class="carousel-control-prev" href="#carousel-main-indicators" role="button" data-slide="prev">

src/app/components/footer/footer.component.html

@@ -2,67 +2,29 @@
 <footer class="py-3 bg-dark text-light">
     <div class="container text-center text-md-left">
         <div class="row">
-            <div class="col-md-3 mr-auto my-md-4 my-0 mt-4 mb-1">
-                <h5 class="font-weight-bold mb-2" i18n>About</h5>
-                <p i18n>This is my personal web site so it is all about me :-)</p>
-                <p i18n>Also, this is an open source project. Here is the keywords : angular, firebase, firebase hosting, firebase functions, cloud firestore, GCP</p>
-            </div>
-            <hr class="clearfix w-100 d-md-none"/>
-            <div class="col-md-3 mx-auto my-md-4 my-0 mt-4 mb-1">
-                <h5 class="font-weight-bold mb-2" i18n>Content</h5>
-                <ul class="list-unstyled">
-                    <li [routerLinkActive]="['active']">
-                        <a class="text-light" [routerLink]="[pageService.routerLinks.blogs]">
-                            <span i18n>Blog</span>
-                        </a>
-                    </li>
-                    <li [routerLinkActive]="['active']">
-                        <a class="text-light" [routerLink]="[pageService.routerLinks.articles]">
-                            <span i18n>Articles</span>
-                        </a>
-                    </li>
-                    <li [routerLinkActive]="['active']">
-                        <a class="text-light" [routerLink]="[pageService.routerLinks.quotes]">
-                            <span i18n>Quotes</span>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-            <hr class="clearfix w-100 d-md-none"/>
-            <div class="col-md-3 mx-auto my-md-4 my-0 mt-4 mb-1">
-                <h5 class="font-weight-bold mb-2" i18n>Fun</h5>
-                <ul class="list-unstyled">
-                    <li [routerLinkActive]="['active']">
-                        <a class="text-light" [routerLink]="[pageService.routerLinks.jokes]">
-                            <span i18n>Jokes</span>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-            <hr class="clearfix w-100 d-md-none"/>
-            <div class="col-md-3 mx-auto my-md-4 my-0 mt-4 mb-1">
-                <h5 class="font-weight-bold mb-2" i18n>Developer Zone</h5>
-                <ul class="list-unstyled">
-                    <li [routerLinkActive]="['active']">
-                        <a class="text-light" [routerLink]="['/playground']">
-                            <span i18n>Playground</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a class="text-light" href="/coverage" target="_blank" rel="noopener">
-                            <span i18n>Coverage</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a class="text-light" href="/documentation" target="_blank" rel="noopener">
-                            <span i18n>Documentation</span>
-                        </a>
-                    </li>
-                </ul>
-                <a class="text-light" href="https://github.com/supermurat/super-firebase-angular"
-                   target="_blank" rel="noopener" title="GitHub">
-                    <i class="fab fa-github fa-3x"></i>
-                </a>
+            <div class="col-12">
+                <div class="card-deck">
+                    <div class="card mt-4 mb-1 text-white bg-dark card-fix-width"
+                         *ngFor="let footerBlock of footerBlocks; trackBy:pageService.trackByIndex">
+                        <div class="card-body">
+                            <h5 class="card-title">{{ footerBlock.title }}</h5>
+                            <div [innerHTML]="footerBlock.content"></div>
+                            <div *ngIf="footerBlock.menuItems.length > 0">
+                                <ul class="list-unstyled">
+                                    <li [routerLinkActive]="['active']"
+                                        *ngFor="let menuItem of footerBlock.menuItems; trackBy:pageService.trackByIndex">
+                                        <a class="text-light" [routerLink]="[menuItem.url]" *ngIf="!menuItem.target">
+                                            <span>{{ menuItem.text }}</span>
+                                        </a>
+                                        <a class="text-light" href="{{ menuItem.url }}" target="{{ menuItem.target }}" rel="{{ menuItem.rel }}" *ngIf="menuItem.target">
+                                            <span>{{ menuItem.text }}</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>

src/app/components/footer/footer.component.ts

@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
-import { PageService } from '../../services';
+import { Component, OnInit } from '@angular/core';
+import { BlockModel, ConfigModel } from '../../models';
+import { ConfigService, PageService } from '../../services';
 
 /**
  * Footer Component
@@ -8,12 +9,27 @@ import { PageService } from '../../services';
     selector: 'app-footer',
     templateUrl: './footer.component.html'
 })
-export class FooterComponent {
+export class FooterComponent implements OnInit {
 
+    /** footer blocks */
+    footerBlocks: Array<BlockModel> = [];
     /**
      * constructor of FooterComponent
      * @param pageService: PageService
+     * @param configService: ConfigService
      */
-    constructor(public pageService: PageService) {
+    constructor(public pageService: PageService,
+                public configService: ConfigService) {
     }
+
+    /**
+     * ngOnInit
+     */
+    ngOnInit(): void {
+        this.configService.getConfig()
+            .subscribe((config: ConfigModel) => {
+                this.footerBlocks = config.footerBlocks;
+            });
+    }
+
 }