src/app/about/about.component.scss → src/app/page/page.component.scss

-@import '../../assets/scss/color';
 @import '../../assets/scss/typography';
-
-.content-container {
-  overflow: auto;
-}
-
-h2 {
-  @include cn-bold-16;
-  color: $red-default;
-}
-
-.about-container {
-  max-width: 760px;
-}
+@import '../../assets/scss/color';
+@import '../../assets/scss/ghost';
 
 .version {
   padding-top: 80px;
   font-size: $font-size-xxsmall;
   color: $grey-3;
 }
+
+.articleContainer {
+  padding-top: 20px;
+}

src/app/about/about.component.spec.ts → src/app/page/page.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AboutComponent } from './about.component';
+import { PageComponent } from './page.component';
 
-describe('AboutComponent', () => {
-  let component: AboutComponent;
-  let fixture: ComponentFixture<AboutComponent>;
+describe('PageComponent', () => {
+  let component: PageComponent;
+  let fixture: ComponentFixture<PageComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ AboutComponent ]
-    })
-    .compileComponents();
+      declarations: [PageComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AboutComponent);
+    fixture = TestBed.createComponent(PageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/page/page.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DomSanitizer } from '@angular/platform-browser';
+import packageJson from '../../../package.json';
+import { Page } from './models/page.model';
+import { PageService } from './services/page.service';
+import { PageEnum } from './enum/page.enum';
+
+@Component({
+  selector: 'app-page',
+  templateUrl: './page.component.html',
+  styleUrls: ['./page.component.scss'],
+})
+export class PageComponent implements OnInit {
+  public page: Page;
+  public version: string;
+  private slugPage: string;
+  private quiSommesNous = PageEnum.quiSommesNous;
+
+  constructor(private sanitizer: DomSanitizer, private route: ActivatedRoute, private pageService: PageService) {}
+
+  ngOnInit(): void {
+    this.route.params.subscribe((routeParams) => {
+      this.slugPage = routeParams.slugPage;
+      this.pageService.getPage(this.slugPage).subscribe((page) => {
+        this.page = page.pages[0];
+        this.page.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.page.html);
+      });
+      // Display version number in 'About' page only
+      this.slugPage == this.quiSommesNous ? (this.version = packageJson.version) : (this.version = '');
+    });
+  }
+}

src/app/page/services/page.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { PageService } from './page.service';
+
+describe('PageService', () => {
+  let service: PageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/page/services/page.service.ts

+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+import { Page } from '../models/page.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PageService {
+  private readonly baseUrl = 'api/pages/';
+  constructor(private http: HttpClient, private router: Router) {}
+
+  public getPage(slugPage: string): Observable<Page> {
+    return this.http.get<Page>(`${this.baseUrl}` + slugPage).pipe(
+      map((item: Page) => {
+        return new Page(item);
+      }),
+      catchError(() => {
+        this.router.navigate(['/']);
+        return new Observable<Page>();
+      })
+    );
+  }
+}

src/app/post/components/post-details/post-details.component.scss

@@ -3,15 +3,9 @@
 @import '../../../../assets/scss/layout';
 @import '../../../../assets/scss/breakpoint';
 @import '../../../../assets/scss/hyperlink';
-
-$margin-post: 20px;
+@import '../../../../assets/scss/ghost';
 
 .postContainer {
-  max-width: 1200px;
-  margin: $margin-post 0;
-  min-height: calc(
-    var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post} * 3
-  );
   .chevronLeft {
     height: 24px;
     width: 24px;
@@ -19,6 +13,7 @@ $margin-post: 20px;
     margin-right: 10px;
   }
 }
+
 .tag {
   @include cn-bold-16;
   text-transform: uppercase;
@@ -26,11 +21,6 @@ $margin-post: 20px;
   fill: $secondary-color;
   stroke: $secondary-color;
 }
-.title {
-  @include cn-bold-30;
-  color: $grey-1;
-  margin-bottom: 8px;
-}
 .informations {
   @include cn-regular-16;
   div:nth-child(2n) {
@@ -39,172 +29,14 @@ $margin-post: 20px;
 }
 
 .description {
-  div {
-    max-width: 860px;
-    line-height: 180%;
-  }
-  ::ng-deep hr {
-    display: block;
-    margin: 3.2em 0;
-    padding: 0;
-    height: 1px;
-    border: 0;
-    border-top: 1px solid #dfe1e3;
+  ::ng-deep img {
+    width: 100%;
+    height: 100%;
   }
   ::ng-deep figure {
-    margin: 0;
     figcaption {
       margin-top: 1%;
-      font-size: small;
       text-align: center;
-      color: #626d79;
-    }
-  }
-  ::ng-deep img {
-    width: 100%;
-    height: 100%;
-  }
-  ::ng-deep .kg-embed-card {
-    position: relative;
-    width: 110%;
-    padding-top: 65%;
-    iframe {
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      width: 100%;
-      height: 100%;
-      border: none;
-    }
-  }
-  ::ng-deep a {
-    @include hyperlink;
-    padding: 0;
-  }
-  ::ng-deep p {
-    @include cn-regular-20;
-    line-height: 1.6em;
-  }
-  ::ng-deep li {
-    @include cn-regular-20;
-    line-height: 1.6em;
-    margin-bottom: 10px;
-  }
-  ::ng-deep h2 {
-    margin-top: 50px;
-  }
-  ::ng-deep blockquote {
-    margin: 1.5em 0;
-    padding: 0 1.6em;
-    border-left: 3px solid $blue;
-  }
-  ::ng-deep .kg-image-card {
-    margin: 0 auto;
-    max-width: 100%;
-    ::ng-deep .kg-image {
-      max-width: 100%;
-      margin-top: 10px;
-      display: block;
-      margin-left: auto;
-      margin-right: auto;
-    }
-  }
-  ::ng-deep .kg-bookmark-card {
-    margin-top: 30px;
-    font: inherit;
-    vertical-align: baseline;
-    ::ng-deep .kg-bookmark-container {
-      display: flex;
-      border-radius: 3px;
-      color: var(--darkgrey);
-      text-decoration: none;
-      box-shadow: 0 2px 5px -1px rgb(0 0 0 / 15%), 0 0 1px rgb(0 0 0 / 9%);
-      ::ng-deep .kg-bookmark-content {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: flex-start;
-        padding: 20px;
-        ::ng-deep .kg-bookmark-title {
-          color: $grey-1;
-          @include cn-regular-18;
-        }
-        ::ng-deep .kg-bookmark-description {
-          display: -webkit-box;
-          overflow-y: hidden;
-          margin-top: 12px;
-          max-height: 48px;
-          color: $grey-2;
-          line-height: 1.5em;
-          font-weight: 400;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-        }
-        ::ng-deep .kg-bookmark-metadata {
-          display: flex;
-          flex-wrap: wrap;
-          align-items: center;
-          margin-top: 14px;
-          color: var(--darkgrey);
-          font-weight: 500;
-          ::ng-deep .kg-bookmark-icon {
-            margin-right: 8px;
-            width: 22px;
-            height: 22px;
-            display: block;
-          }
-          ::ng-deep .kg-bookmark-author {
-            line-height: 1.5em;
-            @include cn-regular-18;
-          }
-          ::ng-deep .kg-bookmark-publisher {
-            overflow: hidden;
-            line-height: 1.5em;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            color: $grey-2;
-          }
-        }
-      }
-      ::ng-deep .kg-bookmark-thumbnail {
-        position: relative;
-        min-width: 33%;
-        max-height: 100%;
-        img {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          border-radius: 0 3px 3px 0;
-          -o-object-fit: cover;
-          object-fit: cover;
-        }
-      }
     }
   }
 }
-
-.gh-canvas {
-  display: grid;
-  grid-template-columns:
-    [full-start] minmax(4vmin, auto) [wide-start] minmax(auto, 240px) [main-start] min(720px, calc(100% - 8vw))
-    [main-end] minmax(auto, 240px) [wide-end] minmax(4vmin, auto) [full-end];
-}
-
-.gh-canvas > * {
-  grid-column: main-start/main-end;
-}
-
-.gh-canvas .article-image {
-  grid-column: wide-start/wide-end;
-  width: 100%;
-  margin: 4vmin 0 0;
-  img {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    width: 100%;
-  }
-}

src/app/services/notification.service.ts

@@ -7,17 +7,32 @@ import { ToastrService } from 'ngx-toastr';
 export class NotificationService {
   constructor(private toastr: ToastrService) {}
 
-  showSuccess(message: string, title: string, timespan: number = 10000): void {
+  public showSuccess(message: string, title: string, timespan: number = 10000): void {
     this.toastr.success(message, title, {
       timeOut: timespan,
     });
   }
 
   // Par defaut, l'erreur reste affichée jusqu'à ce qu'on clique dessus
-  showError(message: string, title: string, timespan: number = 0): void {
+  public showError(message: string, title: string, timespan: number = 0): void {
     this.toastr.error(message, title, {
       timeOut: timespan,
       disableTimeOut: timespan ? false : true,
     });
   }
+
+  // Par defaut, l'erreur reste affichée jusqu'à ce qu'on clique dessus
+  public showAppNewVersion(): void {
+    const update = this.toastr.info(
+      'Une nouvelle version est disponible, cliquer ici pour mettre à jour.',
+      'Nouvelle version',
+      {
+        disableTimeOut: true,
+      }
+    );
+
+    update.onTap.subscribe((action) => {
+      window.location.reload();
+    });
+  }
 }

src/app/services/update.service.ts

+import { Injectable } from '@angular/core';
+import { SwUpdate } from '@angular/service-worker';
+import { NotificationService } from './notification.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UpdateService {
+  // Ref: https://angular.io/api/service-worker/SwUpdate
+  // Ref: https://alligator.io/angular/service-worker-updates/
+  constructor(private swUpdate: SwUpdate, private notificationService: NotificationService) {}
+
+  subscribeUpdate() {
+    if (this.swUpdate.isEnabled) {
+      this.swUpdate.available.subscribe(() => {
+        this.showUpdateToast();
+      });
+    }
+  }
+
+  private async showUpdateToast() {
+    this.notificationService.showAppNewVersion();
+  }
+}

src/assets/scss/_ghost.scss

+@import '../../assets/scss/color';
+@import '../../assets/scss/layout';
+@import '../../assets/scss/breakpoint';
+@import '../../assets/scss/hyperlink';
+
+$margin-post: 20px;
+
+.postContainer {
+  max-width: 1200px;
+  margin: $margin-post 0;
+  min-height: calc(
+    var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post} * 3
+  );
+}
+.title {
+  @include cn-bold-30;
+  color: $grey-1;
+  margin-bottom: 8px;
+}
+
+.description {
+  div {
+    max-width: 860px;
+    line-height: 180%;
+  }
+  ::ng-deep hr {
+    display: block;
+    margin: 3.2em 0;
+    padding: 0;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #dfe1e3;
+  }
+  ::ng-deep figure {
+    margin: 0;
+    figcaption {
+      font-size: small;
+      color: #626d79;
+    }
+  }
+  ::ng-deep .kg-embed-card {
+    position: relative;
+    width: 110%;
+    padding-top: 65%;
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  }
+  ::ng-deep a {
+    @include hyperlink;
+    padding: 0;
+  }
+  ::ng-deep p {
+    @include cn-regular-20;
+    line-height: 1.6em;
+  }
+  ::ng-deep li {
+    @include cn-regular-20;
+    line-height: 1.6em;
+    margin-bottom: 10px;
+  }
+  ::ng-deep h2 {
+    margin-top: 50px;
+  }
+  ::ng-deep blockquote {
+    margin: 1.5em 0;
+    padding: 0 1.6em;
+    border-left: 3px solid $blue;
+  }
+  ::ng-deep .kg-image-card {
+    margin: 0 auto;
+    max-width: 100%;
+    ::ng-deep .kg-image {
+      max-width: 100%;
+      margin-top: 10px;
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+  ::ng-deep .kg-bookmark-card {
+    margin-top: 30px;
+    font: inherit;
+    vertical-align: baseline;
+    ::ng-deep .kg-bookmark-container {
+      display: flex;
+      border-radius: 3px;
+      color: var(--darkgrey);
+      text-decoration: none;
+      box-shadow: 0 2px 5px -1px rgb(0 0 0 / 15%), 0 0 1px rgb(0 0 0 / 9%);
+      ::ng-deep .kg-bookmark-content {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        padding: 20px;
+        ::ng-deep .kg-bookmark-title {
+          color: $grey-1;
+          @include cn-regular-18;
+        }
+        ::ng-deep .kg-bookmark-description {
+          display: -webkit-box;
+          overflow-y: hidden;
+          margin-top: 12px;
+          max-height: 48px;
+          color: $grey-2;
+          line-height: 1.5em;
+          font-weight: 400;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+        ::ng-deep .kg-bookmark-metadata {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          margin-top: 14px;
+          color: var(--darkgrey);
+          font-weight: 500;
+          ::ng-deep .kg-bookmark-icon {
+            margin-right: 8px;
+            width: 22px;
+            height: 22px;
+            display: block;
+          }
+          ::ng-deep .kg-bookmark-author {
+            line-height: 1.5em;
+            @include cn-regular-18;
+          }
+          ::ng-deep .kg-bookmark-publisher {
+            overflow: hidden;
+            line-height: 1.5em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: $grey-2;
+          }
+        }
+      }
+      ::ng-deep .kg-bookmark-thumbnail {
+        position: relative;
+        min-width: 33%;
+        max-height: 100%;
+        img {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          border-radius: 0 3px 3px 0;
+          -o-object-fit: cover;
+          object-fit: cover;
+        }
+      }
+    }
+  }
+}
+
+.gh-canvas {
+  display: grid;
+  grid-template-columns:
+    [full-start] minmax(4vmin, auto) [wide-start] minmax(auto, 240px) [main-start] min(720px, calc(100% - 8vw))
+    [main-end] minmax(auto, 240px) [wide-end] minmax(4vmin, auto) [full-end];
+}
+
+.gh-canvas > * {
+  grid-column: main-start/main-end;
+}
+
+.gh-canvas .article-image {
+  grid-column: wide-start/wide-end;
+  width: 100%;
+  margin: 4vmin 0 0;
+  img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+}

src/environments/environment.ts

@@ -15,4 +15,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

src/index.html

@@ -56,8 +56,11 @@
       crossorigin="anonymous"
     ></script>
     <script src="https://embed.typeform.com/embed.js"></script>
+    <link rel="manifest" href="manifest.webmanifest" />
+    <meta name="theme-color" content="#333333" />
   </head>
   <body>
     <app-root></app-root>
+    <noscript>Please enable JavaScript to continue using this application.</noscript>
   </body>
 </html>

src/manifest.webmanifest

+{
+  "name": "Rés'in",
+  "short_name": "Rés'in",
+  "theme_color": "#333333",
+  "background_color": "#fff",
+  "display": "standalone",
+  "description": "Retrouver tous les lieux de la médiation numérique de la métropole mais aussi les actualités, projets, ressources, études et appels à projet liès à l'inclusion numérique...",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}