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
Andrew Kushnir
parent
79e21b966e
commit
e1e766a880
|
|
@ -18,8 +18,9 @@ function _main() {
|
|||
const dst404PagePath = join(DIST_DIR, '404.html');
|
||||
|
||||
const srcIndexContent = readFileSync(srcIndexPath, 'utf8');
|
||||
const src404BodyContent = readFileSync(src404BodyPath, 'utf8');
|
||||
const dst404PageContent = srcIndexContent.replace(/<body>[\s\S]+<\/body>/, src404BodyContent);
|
||||
const src404BodyContent = readFileSync(src404BodyPath, 'utf8').trim();
|
||||
const dst404PageContent = srcIndexContent
|
||||
.replace(/(<body>)[\s\S]+(<\/body>)/, `$1\n ${src404BodyContent}\n$2`);
|
||||
|
||||
if (dst404PageContent === srcIndexContent) {
|
||||
throw new Error(
|
||||
|
|
|
|||
|
|
@ -1,52 +1,52 @@
|
|||
<!--
|
||||
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
|
||||
found pages (e.g. https://angular.io/not/existing).
|
||||
-->
|
||||
<!--
|
||||
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
|
||||
found pages (e.g. https://angular.io/not/exist.ing).
|
||||
-->
|
||||
|
||||
<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{height:64px}
|
||||
@media (max-width:600px){.mat-toolbar-row{height:56px}}
|
||||
.nav-link.home{margin-left:24px}
|
||||
</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{height:64px}
|
||||
@media (max-width:600px){.mat-toolbar-row{height:56px}}
|
||||
.nav-link.home{margin-left:24px}
|
||||
</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-row class="mat-toolbar-row">
|
||||
<a class="nav-link home" href="/">
|
||||
<img alt="Home" height="40" src="assets/images/logos/angular/logo-nav@2x.png" title="Home" width="150">
|
||||
</a>
|
||||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
<mat-toolbar class="app-toolbar no-print mat-toolbar mat-primary">
|
||||
<mat-toolbar-row class="mat-toolbar-row">
|
||||
<a class="nav-link home" href="/">
|
||||
<img alt="Home" height="40" src="assets/images/logos/angular/logo-nav@2x.png" title="Home" width="150">
|
||||
</a>
|
||||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
|
||||
<mat-sidenav-container class="sidenav-container mat-drawer-container mat-sidenav-container" role="main">
|
||||
<mat-sidenav-content class="mat-drawer-content mat-sidenav-content">
|
||||
<section class="sidenav-content" role="article">
|
||||
<aio-doc-viewer>
|
||||
<div class="content">
|
||||
<div class="nf-container l-flex-wrap flex-center">
|
||||
<img src="assets/images/support/angular-404.svg" width="300" height="300" />
|
||||
<div class="nf-response l-flex-wrap">
|
||||
<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>
|
||||
<mat-sidenav-container class="sidenav-container mat-drawer-container mat-sidenav-container" role="main">
|
||||
<mat-sidenav-content class="mat-drawer-content mat-sidenav-content">
|
||||
<section class="sidenav-content" role="article">
|
||||
<aio-doc-viewer>
|
||||
<div class="content">
|
||||
<div class="nf-container l-flex-wrap flex-center">
|
||||
<img src="assets/images/support/angular-404.svg" width="300" height="300" />
|
||||
<div class="nf-response l-flex-wrap">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aio-doc-viewer>
|
||||
</section>
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
</aio-doc-viewer>
|
||||
</section>
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
|
||||
<footer class="no-print">
|
||||
<aio-footer>
|
||||
<p>
|
||||
Powered by Google ©2010-2021.
|
||||
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>.
|
||||
</p>
|
||||
</aio-footer>
|
||||
</footer>
|
||||
<footer class="no-print">
|
||||
<aio-footer>
|
||||
<p>
|
||||
Powered by Google ©2010-2021.
|
||||
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>.
|
||||
</p>
|
||||
</aio-footer>
|
||||
</footer>
|
||||
|
||||
</aio-shell>
|
||||
</aio-shell>
|
||||
|
|
|
|||
Loading…
Reference in New Issue