Skip to content

Commit ed8a595

Browse files
JeanMecheAndrewKushnir
JeanMeche
authored and
AndrewKushnir
committed
docs: Improve previous version navigation (#49063)
In archive mode the link to the current doc will now point to same page. If the page doesn't exist anymore, it will show a contextualized warning message. See #46850 PR Close #49063
1 parent fe58f0a commit ed8a595

File tree

4 files changed

+41
-18
lines changed

4 files changed

+41
-18
lines changed

‎aio/src/app/app.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767

6868
<main class="sidenav-content" [id]="pageId">
6969
<div id="main-content" tabindex="-1"></div>
70-
<aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
70+
<aio-mode-banner *ngIf="versionInfo" [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
7171
<aio-doc-viewer [class.no-animations]="disableAnimations" [doc]="currentDocument" (docReady)="onDocReady()" (docRemoved)="onDocRemoved()" (docInserted)="onDocInserted()" (docRendered)="onDocRendered()">
7272
</aio-doc-viewer>
7373
<aio-dt *ngIf="dtOn" [(doc)]="currentDocument"></aio-dt>

‎aio/src/app/custom-elements/search/file-not-found-search.component.ts‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,41 @@
1-
import { Component, OnInit } from '@angular/core';
2-
import { Observable } from 'rxjs';
3-
import { switchMap } from 'rxjs/operators';
4-
import { LocationService } from 'app/shared/location.service';
5-
import { SearchResults } from 'app/search/interfaces';
6-
import { SearchService } from 'app/search/search.service';
1+
import {Component, OnInit} from '@angular/core';
2+
import {Observable} from 'rxjs';
3+
import {switchMap} from 'rxjs/operators';
4+
import {LocationService} from 'app/shared/location.service';
5+
import {SearchResults} from 'app/search/interfaces';
6+
import {SearchService} from 'app/search/search.service';
77

88
@Component({
99
selector: 'aio-file-not-found-search',
10-
template:
11-
`<div class="alert is-helpful">
10+
template: `<div class="alert is-helpful">
11+
<p *ngIf="redirectedFrom">
12+
You were redirected from the Angular v{{ redirectedFrom }} documentation, but this page doesn't
13+
exist in this version.
14+
</p>
1215
<p>Let's see if any of these search results help...</p>
13-
</div>
14-
<aio-search-results class="embedded" [searchResults]="searchResults | async"></aio-search-results>`
16+
</div>
17+
<aio-search-results
18+
class="embedded"
19+
[searchResults]="searchResults | async"
20+
></aio-search-results>`,
1521
})
1622
export class FileNotFoundSearchComponent implements OnInit {
1723
searchResults: Observable<SearchResults>;
24+
redirectedFrom: number | null = null;
1825
constructor(private location: LocationService, private search: SearchService) {}
1926

2027
ngOnInit() {
2128
this.searchResults = this.location.currentPath.pipe(switchMap(path => {
2229
const query = path.split(/\W+/).join(' ');
2330
return this.search.search(query);
2431
}));
32+
33+
this.redirectedFrom = this.getRedirectedFromParam();
34+
}
35+
36+
private getRedirectedFromParam(): number | null {
37+
const urlSearchParams = new URLSearchParams(window.location.search);
38+
const redirected_from = urlSearchParams.get('redirected_from');
39+
return redirected_from ? parseInt(redirected_from, 10) : null;
2540
}
2641
}

‎aio/src/app/layout/mode-banner/mode-banner.component.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Location } from '@angular/common';
12
import { Component, Input } from '@angular/core';
23
import { VersionInfo } from 'app/navigation/navigation.service';
34

@@ -6,13 +7,20 @@ import { VersionInfo } from 'app/navigation/navigation.service';
67
template: `
78
<div *ngIf="mode === 'archive'" class="mode-banner alert archive-warning">
89
<p>
9-
This is the <strong>archived documentation for Angular v{{ version?.major }}.</strong> Please visit
10-
<a href="https://angular.io/">angular.io</a> to see documentation for the current version of Angular.
10+
This is the <strong>archived documentation for Angular v{{ version.major }}.</strong> Please visit
11+
<a href="https://angular.io{{currentPath}}?redirected_from={{version.major}}">angular.io</a>
12+
to see this page for the current version of Angular.
1113
</p>
1214
</div>
1315
`,
1416
})
1517
export class ModeBannerComponent {
1618
@Input() mode: string;
17-
@Input() version: VersionInfo | undefined;
19+
@Input() version: VersionInfo;
20+
21+
currentPath: string;
22+
23+
constructor(private location: Location) {
24+
this.currentPath = this.location.path();
25+
}
1826
}

‎goldens/size-tracking/aio-payloads.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"main": 469389,
66
"polyfills": 33938,
77
"styles": 74561,
8-
"light-theme": 92890,
9-
"dark-theme": 93036
8+
"light-theme": 92905,
9+
"dark-theme": 93051
1010
}
1111
},
1212
"aio-local": {
@@ -15,8 +15,8 @@
1515
"main": 469779,
1616
"polyfills": 33836,
1717
"styles": 74561,
18-
"light-theme": 92890,
19-
"dark-theme": 93036
18+
"light-theme": 92905,
19+
"dark-theme": 93051
2020
}
2121
}
2222
}

0 commit comments

Comments
 (0)