6abbaaed89
The `FETCH_ERROR` document is used when we are unable to retrieve a document (except for 404 errors), which includes when there is no internet connection. Using the `<current-location>` element in the document's template to show the path of the page we failed to retrieve assumes that the element's bundle is available (e.g. cached by the SW) or can be fetched from the server. When none of these conditions is met, the `DocViewer` is unable to prepare the document and fails, never showing the `FETCH_ERROR` page to the user. Furthermore, the path we are looking to retrieve via `<current-location>` is essentially the document ID, which we already have. Thus, loading and instantiating a whole component just for that is overkill. This commit addresses both issues by getting rid of the `<current-location>` component and directly embedding the document ID into the `FETCH_ERROR` content. PR Close #27250
138 lines
4.0 KiB
HTML
138 lines
4.0 KiB
HTML
<h1>Test Code Page</h1>
|
|
|
|
<h2><code-tabs></h2>
|
|
|
|
<p>No linenums at code-tabs level</p>
|
|
<code-tabs >
|
|
<code-pane header='TS code file' language='ts'>
|
|
class {
|
|
foo(param: string) {}
|
|
}
|
|
</code-pane>
|
|
<code-pane header='HTML content file' language='html'><h1>Heading</h1></code-pane>
|
|
<code-pane header='JSON data file' language='json' class='avoid'>{ "key": "value" }</code-pane>
|
|
</code-tabs>
|
|
<p></p>
|
|
|
|
<p>linenums=true at code-tabs level</p>
|
|
<code-tabs linenums='true'>
|
|
<code-pane header='TS code file' language='ts'>
|
|
class {
|
|
foo(param: string) {}
|
|
}
|
|
</code-pane>
|
|
<code-pane header='HTML content file' language='html'><h1>Heading</h1></code-pane>
|
|
<code-pane header='JSON data file' language='json' class='avoid'>{ "key": "value" }</code-pane>
|
|
</code-tabs>
|
|
<p></p>
|
|
|
|
<p>No linenums at code-tabs level; linenums=true for HTML pane</p>
|
|
<code-tabs >
|
|
<code-pane header='TS code file' language='ts'>
|
|
class {
|
|
foo(param: string) {}
|
|
}
|
|
</code-pane>
|
|
<code-pane header='HTML content file' language='html' linenums='true'><h1>Heading</h1></code-pane>
|
|
<code-pane header='JSON data file' language='json' class='avoid'>{ "key": "value" }</code-pane>
|
|
</code-tabs>
|
|
<p></p>
|
|
|
|
<h2><code-example></h2>
|
|
|
|
<p>One line.</p>
|
|
<code-example>const foo = 'bar'</code-example>
|
|
|
|
<p>Multi-line, linenums=false.</p>
|
|
<code-example linenums='false'>
|
|
<hero-details <em>nghost-pmm-5>
|
|
<h2 </em>ngcontent-pmm-5>Bah Dah Bing</h2>
|
|
<hero-team <em>ngcontent-pmm-5 </em>nghost-pmm-6>
|
|
<h3 _ngcontent-pmm-6>Headless Team</h3>
|
|
</hero-team>
|
|
</hero-details>
|
|
</code-example>
|
|
|
|
<p>Default linenums.</p>
|
|
<code-example>
|
|
<hero-details <em>nghost-pmm-5>
|
|
<h2 </em>ngcontent-pmm-5>Mister Fantastic</h2>
|
|
<hero-team <em>ngcontent-pmm-5 </em>nghost-pmm-6>
|
|
<h3 _ngcontent-pmm-6>Headless Team</h3>
|
|
</hero-team>
|
|
</hero-details>
|
|
</code-example>
|
|
|
|
<p>Header on this one.</p>
|
|
<code-example header="hero-details.component.ts (excerpt)">
|
|
<hero-details <em>nghost-pmm-5>
|
|
<h2 </em>ngcontent-pmm-5>Mister Fantastic</h2>
|
|
<hero-team <em>ngcontent-pmm-5 </em>nghost-pmm-6>
|
|
<h3 _ngcontent-pmm-6>Winning Team</h3>
|
|
</hero-team>
|
|
</hero-details>
|
|
</code-example>
|
|
|
|
<p>An "avoid" header on this one.</p>
|
|
<code-example class="avoid" header="hero-details.component.ts (Avoid)">
|
|
<hero-details <em>nghost-pmm-5>
|
|
<h2 </em>ngcontent-pmm-5>Mister Fantastic</h2>
|
|
<hero-team <em>ngcontent-pmm-5 </em>nghost-pmm-6>
|
|
<h3 _ngcontent-pmm-6>Losing Team</h3>
|
|
</hero-team>
|
|
</hero-details>
|
|
</code-example>
|
|
|
|
## Backticked code blocks
|
|
|
|
```html
|
|
<hero-details>
|
|
<h2>Mister Fantastic</h2>
|
|
<hero-team>
|
|
<h3>Losing Team</h3>
|
|
</hero-team>
|
|
</hero-details>
|
|
```
|
|
|
|
<h2><live-example></h2>
|
|
|
|
<p>Plain live-example</p>
|
|
Try this <live-example></live-example>.
|
|
|
|
<p>live-example with title atty</p>
|
|
<live-example title="Good Example"></live-example>
|
|
|
|
<p>live-example with title body</p>
|
|
<live-example title="Good Example">Try this great example</live-example>
|
|
|
|
<p>live-example with name</p>
|
|
<live-example name="testy" title="Better Example"></live-example>
|
|
|
|
<p>live-example with spacey name and stackblitz</p>
|
|
<live-example name=" testy " stackblitz="super-stackblitz"></live-example>
|
|
|
|
<p>live-example with name and stackblitz but no download</p>
|
|
<live-example name="testy" stackblitz="super-stackblitz" noDownload></live-example>
|
|
|
|
<p>live-example embedded with name and stackblitz</p>
|
|
<live-example embedded name="testy" stackblitz="super-stackblitz"></live-example>
|
|
|
|
<p>More text follows ...</p>
|
|
|
|
<p>Getting Started Widgets</p>
|
|
|
|
<p>Interpolation</p>
|
|
<aio-gs-interpolation></aio-gs-interpolation>
|
|
|
|
<p>Property Binding</p>
|
|
<aio-gs-property-binding></aio-gs-property-binding>
|
|
|
|
<p>Event Binding</p>
|
|
<aio-gs-event-binding></aio-gs-event-binding>
|
|
|
|
<p>NgIf</p>
|
|
<aio-gs-ng-if></aio-gs-ng-if>
|
|
|
|
<p>NgFor</p>
|
|
<aio-gs-ng-for></aio-gs-ng-for>
|