From b7c334c274d84d41c73b88e40f48cd0cf1b24b17 Mon Sep 17 00:00:00 2001 From: Marc Stammerjohann Date: Thu, 16 Jul 2020 09:19:44 +0200 Subject: [PATCH 1/4] feat(trailing-slash): add trailing slash url serializer --- src/app/app.module.ts | 8 +++++--- .../utils/trailing-slash-url-serializer.ts | 20 +++++++++++++++++++ 2 files changed, 25 insertions(+), 3 deletions(-) create mode 100644 src/app/utils/trailing-slash-url-serializer.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 98ce15cd..4af4304e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -21,6 +21,8 @@ import { import { NewsletterSignupModule } from '@components/newsletter-signup/newsletter-signup.module'; import { NizSearchComponentModule } from '@components/search/search.module'; import { PipesModule } from '@pipes/pipes.module'; +import { UrlSerializer } from '@angular/router'; +import { TrailingSlashUrlSerializer } from './utils/trailing-slash-url-serializer'; @NgModule({ declarations: [AppComponent], @@ -35,7 +37,7 @@ import { PipesModule } from '@pipes/pipes.module'; MarkdownModule.forRoot({ loader: HttpClient }), NizTabsModule, NizTabModule, - NizFooterModule, + NizFooterModule, NizNavbarModule, NizToolbarModule, NizInlineSvgModule, @@ -43,9 +45,9 @@ import { PipesModule } from '@pipes/pipes.module'; NizSearchComponentModule, PipesModule, NizToastModule, - NizMenuModule + NizMenuModule, ], - providers: [], + providers: [{ provide: UrlSerializer, useClass: TrailingSlashUrlSerializer }], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) diff --git a/src/app/utils/trailing-slash-url-serializer.ts b/src/app/utils/trailing-slash-url-serializer.ts new file mode 100644 index 00000000..99f58e55 --- /dev/null +++ b/src/app/utils/trailing-slash-url-serializer.ts @@ -0,0 +1,20 @@ +import { DefaultUrlSerializer, UrlTree } from '@angular/router'; + +export class TrailingSlashUrlSerializer extends DefaultUrlSerializer { + private static _withTrailingSlash(url: string): string { + const splitOn = url.indexOf('?') > -1 ? '?' : '#'; + const pathArr = url.split(splitOn); + + if (!pathArr[0].endsWith('/')) { + const fileName: string = url.substring(url.lastIndexOf('/') + 1); + if (fileName.indexOf('.') === -1) { + pathArr[0] += '/'; + } + } + return pathArr.join(splitOn); + } + + serialize(tree: UrlTree): string { + return TrailingSlashUrlSerializer._withTrailingSlash(super.serialize(tree)); + } +} From 2295542dc1b30cf5ac5852296cf1554bbc338ffb Mon Sep 17 00:00:00 2001 From: Marc Stammerjohann Date: Thu, 16 Jul 2020 09:39:18 +0200 Subject: [PATCH 2/4] feat: add issue link --- src/app/utils/trailing-slash-url-serializer.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/utils/trailing-slash-url-serializer.ts b/src/app/utils/trailing-slash-url-serializer.ts index 99f58e55..a2f240e2 100644 --- a/src/app/utils/trailing-slash-url-serializer.ts +++ b/src/app/utils/trailing-slash-url-serializer.ts @@ -1,5 +1,8 @@ import { DefaultUrlSerializer, UrlTree } from '@angular/router'; +/** + * @see https://github.com/angular/angular/issues/16051 + */ export class TrailingSlashUrlSerializer extends DefaultUrlSerializer { private static _withTrailingSlash(url: string): string { const splitOn = url.indexOf('?') > -1 ? '?' : '#'; From d7b31200b19dac5b6669bac41625d4e62264f204 Mon Sep 17 00:00:00 2001 From: Marc Stammerjohann Date: Thu, 16 Jul 2020 10:12:00 +0200 Subject: [PATCH 3/4] feat: add trailing slash before hashtag from toc --- .../src/lib/table-of-contents/table-of-contents.component.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/projects/design/src/lib/table-of-contents/table-of-contents.component.ts b/projects/design/src/lib/table-of-contents/table-of-contents.component.ts index f15bbef6..16507795 100644 --- a/projects/design/src/lib/table-of-contents/table-of-contents.component.ts +++ b/projects/design/src/lib/table-of-contents/table-of-contents.component.ts @@ -77,7 +77,7 @@ export class TableOfContentsComponent implements OnInit, OnDestroy { switchMap((el) => this.content.getCurrent().pipe(map((c) => [el.id, c.route])) ), - tap(([el, route]) => this.location.replaceState(`${route}#${el}`)), + tap(([el, route]) => this.location.replaceState(`${route}/#${el}`)), takeUntil(this.onDestroy$) ) .subscribe(); @@ -107,11 +107,12 @@ export class TableOfContentsComponent implements OnInit, OnDestroy { } scrollTo(url: string, id: string) { - this.location.replaceState(`${url}#${id}`); + this.location.replaceState(`${url}/#${id}`); this.document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' }); } active(url: string, id: string) { + console.warn('active', this.location.path(true)); return this.location.path(true) === `${url}#${id}` ? 'active' : ''; } From 08f9060a798c3cd0dd8eaf50d3f0eab8e39b31c5 Mon Sep 17 00:00:00 2001 From: Marc Stammerjohann Date: Thu, 16 Jul 2020 10:18:18 +0200 Subject: [PATCH 4/4] feat: remove log --- .../src/lib/table-of-contents/table-of-contents.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/design/src/lib/table-of-contents/table-of-contents.component.ts b/projects/design/src/lib/table-of-contents/table-of-contents.component.ts index 16507795..268b8634 100644 --- a/projects/design/src/lib/table-of-contents/table-of-contents.component.ts +++ b/projects/design/src/lib/table-of-contents/table-of-contents.component.ts @@ -112,7 +112,6 @@ export class TableOfContentsComponent implements OnInit, OnDestroy { } active(url: string, id: string) { - console.warn('active', this.location.path(true)); return this.location.path(true) === `${url}#${id}` ? 'active' : ''; }