iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(docs-infra): generate the `404.html` page correctly (#41163) 

Previously, the generated `404.html` page did not include a `<body>`
tag. In some browsers (such as IE 11), this was causing warnings in the
console.

This commit ensures the generated page contains a `<body>` tag. It also
fixes the indentation in the generated page.

PR Close #41163
This commit is contained in:
George Kalpakas 2021-03-10 23:09:43 +02:00 committed by Andrew Kushnir
parent 79e21b966e
commit e1e766a880
2 changed files with 47 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
aio/scripts/build-404-page.js
View File

@ -18,8 +18,9 @@ function _main() {
const dst404PagePath = join(DIST_DIR, '404.html'); const dst404PagePath = join(DIST_DIR, '404.html');
const srcIndexContent = readFileSync(srcIndexPath, 'utf8'); const srcIndexContent = readFileSync(srcIndexPath, 'utf8');
const src404BodyContent = readFileSync(src404BodyPath, 'utf8'); const src404BodyContent = readFileSync(src404BodyPath, 'utf8').trim();
const dst404PageContent = srcIndexContent.replace(/<body>[\s\S]+<\/body>/, src404BodyContent); const dst404PageContent = srcIndexContent
.replace(/(<body>)[\s\S]+(<\/body>)/, `$1\n ${src404BodyContent}\n$2`);
if (dst404PageContent === srcIndexContent) { if (dst404PageContent === srcIndexContent) {
throw new Error( throw new Error(

88
aio/src/404-body.html
View File

@ -1,52 +1,52 @@
<!-- <!--
This content replaces the `<body>` content of `index.html` to generate our custom `404.html` page. This content replaces the `<body>` content of `index.html` to generate our custom `404.html` page.
The content must visually and structurally resemble the resulting HTML of the main app for not The content must visually and structurally resemble the resulting HTML of the main app for not
found pages (e.g. https://angular.io/not/existing). found pages (e.g. https://angular.io/not/exist.ing).
--> -->
<style> <style>
.mat-toolbar-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap} .mat-toolbar-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}
.mat-toolbar-row{height:64px} .mat-toolbar-row{height:64px}
@media (max-width:600px){.mat-toolbar-row{height:56px}} @media (max-width:600px){.mat-toolbar-row{height:56px}}
.nav-link.home{margin-left:24px} .nav-link.home{margin-left:24px}
</style> </style>
<aio-shell class="mode-stable page-file-not-found folder-file-not-found view- aio-notification-hide"> <aio-shell class="mode-stable page-file-not-found folder-file-not-found view- aio-notification-hide">
<mat-toolbar class="app-toolbar no-print mat-toolbar mat-primary"> <mat-toolbar class="app-toolbar no-print mat-toolbar mat-primary">
<mat-toolbar-row class="mat-toolbar-row"> <mat-toolbar-row class="mat-toolbar-row">
<a class="nav-link home" href="/"> <a class="nav-link home" href="/">
<img alt="Home" height="40" src="assets/images/logos/angular/logo-nav@2x.png" title="Home" width="150"> <img alt="Home" height="40" src="assets/images/logos/angular/logo-nav@2x.png" title="Home" width="150">
</a> </a>
</mat-toolbar-row> </mat-toolbar-row>
</mat-toolbar> </mat-toolbar>
<mat-sidenav-container class="sidenav-container mat-drawer-container mat-sidenav-container" role="main"> <mat-sidenav-container class="sidenav-container mat-drawer-container mat-sidenav-container" role="main">
<mat-sidenav-content class="mat-drawer-content mat-sidenav-content"> <mat-sidenav-content class="mat-drawer-content mat-sidenav-content">
<section class="sidenav-content" role="article"> <section class="sidenav-content" role="article">
<aio-doc-viewer> <aio-doc-viewer>
<div class="content"> <div class="content">
<div class="nf-container l-flex-wrap flex-center"> <div class="nf-container l-flex-wrap flex-center">
<img src="assets/images/support/angular-404.svg" width="300" height="300" /> <img src="assets/images/support/angular-404.svg" width="300" height="300" />
<div class="nf-response l-flex-wrap"> <div class="nf-response l-flex-wrap">
<h1 class="no-toc" id="page-not-found">Resource Not Found</h1> <h1 class="no-toc" id="page-not-found">Resource Not Found</h1>
<p>We're sorry. The resource you are looking for cannot be found.</p> <p>We're sorry. The resource you are looking for cannot be found.</p>
</div>
</div> </div>
</div> </div>
</div> </aio-doc-viewer>
</aio-doc-viewer> </section>
</section> </mat-sidenav-content>
</mat-sidenav-content> </mat-sidenav-container>
</mat-sidenav-container>
<footer class="no-print"> <footer class="no-print">
<aio-footer> <aio-footer>
<p> <p>
Powered by Google ©2010-2021. Powered by Google ©2010-2021.
Code licensed under an <a href="license" title="License text">MIT-style License</a>. Code licensed under an <a href="license" title="License text">MIT-style License</a>.
Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>. Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
</p> </p>
</aio-footer> </aio-footer>
</footer> </footer>
</aio-shell> </aio-shell>