In some cases (unclear when), traceviewer-js, used by Lighthouse under the hood,
assumes `atob`/`btoa` are defined in the global scope. This is true for browser
environments, but not on node.
As a result, some aggregations that required access to model-tracing failed to
produce results, dropping the overall PWA score.
This affected #16665 (e.g. commit 0de6eec7a).
If a usage of `{@link ...}` does not provide a title then
compute it based on the `title` and/or `name` properties
or set the link to invalid.
Closes#16811
Sidenav headers had been anchors w/o hrefs. These can’t take focus which makes you can’t navigate through them with keyboard. For a11y purposes, this PR turns them into buttons.
By reflex we began all component tests with an async `beforeEach` that called `compileComponents`.
In at least one case (`live-example.component.spec.ts`) that led to the `it` tests being async as well.
There is no need to call `.compileComponents` because CLI web pack + plugin inlines all templates and styles.
While `.compileComponents` was harmless, it added complexity and distraction which we should not inflict on future readers and testers.
Previously the logic for deciding when to display
the search result was spread between different
parts of the application and used non-intuitive logic
such as sending a blank results set to the searchResults.
This commit moves the management of displaying
the search results (and also setting focus of the
search input box) to the AppComponent. This makes
it easier to understand what happens and why; but
also allows the search UI components to be more
easily reused (such as embedding them in the 404
page).
(Coincidentally), this wasn't an issue before fdfeaaf1f, because
pre-verification was run after `test.sh`, during which `aio-builds-setup` was
built.
Now that `deploy-staging.sh` is being run before `test.sh`, we need to build
the `aio-builds-setup` scripts first.
Previously, `aio/aio-builds-setup/scripts/travis-preverify-pr.sh` was supposed
to exit with 1 if a PR did not meet the preconditions and 2 if an error occurred
during pre-verification.
It relied on the exit codes of the node script that did the actual work, but
didn't account for errors that would be thrown in the `sh` script itself (e.g.
if the node script was not available). This caused such errors to appear as
non-verified PRs, instead of real errors that should fail the build.
This commit swaps the exit codes, so that now a 2 means non-verified PR and 1
designates an error.
Since abb36e3cb, we no longer rely on the cli to set up ServiceWorker, but do it
manually as part of `yarn build`. When using `ng serve`, registering the
ServiceWorker fails, because we haven't created `ngsw-manifest.json` nor copied
`worker-basic.min.js` into dist.
This commit works around this, by only registering the service worker in
production mode (which is what the cli does too).
Caveat:
It is not possible to enable ServiceWorker with `ng serve`/`yarn start` and
using the `--prod` flag will try to register it, but fail because the necessary
files (`ngsw-manifest.json` and `worker-basic.min.js`) will not be available.
(As a work-around, you can use `yarn build` and serve the files in `dist/` with
`yarn http-server -- dist -p 4200`.)
Previously, no previews would be deployed for PRs that didn't touch files inside
`aio/`. Now, previews will be deployed for PRs that touch non-spec files inside
either `aio/` or `packages/` (as long as other preconditions are met).
Partially addresses #16526.
Only one h1 is allowed per document.
(Also took the opportunity to remove unnecessary blank lines from these
docs, and a bit of general tidying.)
Closes#16193
This fail behaviour is only turned on for `yarn docs`;
in `yarn docs-watch` you only receive a warning.
This is because you can get false errors when watching
since we don't parse all the docs in that case.
* fix(aio): allow code blocks to clear floated images
Previously the negative margin on the code headings were causing
floated images to overlay the start of a code block. Now all code block
successfully clear all floated elements.
* feat(aio): add a `.clear` class for clearing floating images
* fix(aio): tidy up image styles
The css rules for `img.right` and `img.left` allow authors easy
access to floating an image on the left or right, respectively.
The `.image-display` rule which was always found on a figure
has been simplified so that all figures have this styling. It is very
unlikely that a figure will be used outside the content area; and
at this time it seems like `figure` is as good an indicator that we
want this kind of styling as anything.
Now that images are all tagged with width and height values, we cannot
assume to modify these dimensions via CSS as it can cause the image to
lose its correct proportions. Until we find a better solition we must set
`height` to `auto` when the screen width is below 1300px to ensure that
these images maintain their proportions as they get shrunk to fit.
* docs(aio): general tidy up of image HTML in guides
Previously, the guides have a lot of inline image styling and unnecessary
use of the `image-display` css class.
Images over 700px are problematic for guide docs, so those have been given
specific widths and associated heights.
* docs(aio): use correct anchor for "back to the top" link
The `#toc` anchor does not work when the page is
wide enough that the TOC is floating to the side.
* build(aio): add `#top-of-page` to path variants for link checking
Since the `#top-of-page` is outside the rendered docs
the `checkAnchorLinks` processor doesn't find them
as valid targets for links.
Adding them as a `pathVariant` solves this problem
but will still catch links to docs that do not actually exist.
* fix(aio): ensure that headings clear floated images
* fix(aio): do not force live-example embedded image to 100% size
This made them look too big, generally. Leaving them with no size means
that they will look reasonable in large viewports and switch to 100% width
in narrow viewports.
closes#16608
Formerly, tried to navigate when user clicked an anchor with an image url (to view image in a new tab) resulting in 404.
Now ignores href URL with any extension and lets browser handle it.
closes#16603
As before this PR, when wide (side-by-side), the sidenav open/close status only changes when nav to/from marketing page in which case it opens for guide/api and closes for marketing page.
Fundamentals and Techniques nav groups we also links to pages. This caused
counterintuitive behaviour when clicking on them.
This commit moves each link from the group item to a children item, called
Introduction.
Closes#16604
The CSS rule for positioning the automated header links was too general,
causing other links inside headings to be positioned incorrectly.
Closes#16573
Previously the `hasToc` was initialised to true, which caused a flash of
unwanted "Contents" [sic] even if the page was not going to need a ToC.
Closes#16597
TOC appears in right panel when wide and hides embedded TOC
Right TOC panel height adjusts dynamically during scroll
Refactored `TocService` and its tests for clarity.
- Moved info bar section in pipe template to be the first section to match other templates
- Fixed label styling for type label
- Added label styling for status label
closes#16521
`LocationService` sends `GaService` a url stripped of fragment and query strings.
`GaService` already guards against re-send of the prior url so it will only report doc changes.
These utils support flexible, natural attribute interpretation as applied to code-example and code-pane. Then apply those utils to code-example and live-example
This contains a fix for the typescript module reader.
Previously, TS modules that were of the form:
```
a/b/index.ts
```
Would be given the name `index` and id of `a/b/index`.
This is not desirable, so the new version of dgeni-packages/typescript
removes this `index` from the id and name, which results in name of
`b` and id of `a/b`.
Update to in-memory-web-api should handle id=0.
Make sure this works by having a hero with id=0 in ToH.
Coincidentally delete lingering dead app/ folders
Todo: fix ToH images (which have to do anyway)
In the API docs there are occasions where we do not wish the code snippet
to have a copy button. This commit supports that by providing a new `hideCopy`
attribute.
Parse all `<img>` tags, during doc-gen, and insert the width and height of
the sourceed image, if neither are already specified.
Warnings are reported if the `<img>` tag has no `src` attribute or the image
cannot be loaded.
The work is done in the `addImageDimensions` post-processor, which must be
configured with a `basePath` so that it knows where to find the images.
Closes#15888
- Changed search result link hover state to white to be more legible
- Increased the max-height on search results container to remove the jitter
- Changed search results to have space-around vs space-between for more appropriate spacing
The autolinking is now done on the `renderedContent` which means it also
captures and autolinks headings that were generated outside of markdown.
PR Close#16336
Previously the CSS styling for material icons was too broad and affected
all instances of icons. This commit constrains the position of copy button
icons only to copy buttons.
Because:
1. `docs` feels like a "top level" page, similar to `features`, `resources`, `events` etc.
2. This enables the ServiceWorker to pre-fetch/cache the document (similar to what happens with all
other direct children of `content/docs/`), without the need for special-casing it in
`ngsw-manifest.json`.
- Banner class code consolidation for API pages
- Set up temporary table of contents class and file
- API pages title styling
- Add color styling to doc-type listed on each API details page
- Classes and SCSS variables refactor
- Mobile optimization on headers, info-banner, and API pages
- API page table custom styling
- API Class Overview template code overview into table format
- Content container now has a max width and made the body background the same offwhite color so the cut-off is not visible
- Sidenav will always remain at the left of the page
- Added a max width to the api banner of filter search inputs
- Left aligned content container so it is flush with sidenav
- Changed API filter width to match size of filter results
- Add snackbar and pointer cursor for copy code button inside aio-code components
- Flex cenetered content in features page
- Removed duplicate global css class
- Add styles to links inside of sub-sections
- Remove focus outline on top nav bar links
We were filtering this document from the docs list but
not removing it from the module export lists.
We can actually filter it out much easier at the TypeScript
parsing point, which means we do not need the
`filterIgnoredDocs` processor any more.
Closes#16287
The side nav and menu buttons need to appear early on in the loading of the page.
Currently we are using icon fonts with ligatures to get icons for these areas.
This can result in a flash of unstyled font.
By replacing these with SVG icons, we get a better user experience.
By overriding the `MdIconRegistry` we can inline the SVG source, which
means that there will never by a delay in rendering the icons.
The new `CustomMdIconRegistry` expects a multi-provider containing an array
of `SvgIconInfo` objects. These objects hold the name and SVG source of the
icon. When `MdIconComponent` requests an SVG icon we will get it from the
pre-loading cache, if available, before delegating back to the original
`MdIconRegistry`.
Note that SVG versions of `md-icon` do not apply the `material-icons` CSS
class to the element, so the styling for the icons that we are preloading
has been changed to use `.mat-icon` instead.
Closes#16100
This is to tidy up the `author-packagse`, which currently duplicates a
lot of the configuration in the main packages. We need to
DRY this up so that we don't fall foul of a change in one being missed in
the other.
closes#16125
API search still updates query params as sending someone a pre-filtered API search link is handy.
While typing in the search box no longer updates the URL in the addr bar, you can still create a link like `~/?search=animations` and it will open the search dialog and profile the search box as it may be useful to email such a thing to someone.
Previously, the path returned by `LocationService.path()` preserved leading
slashes, which resulted in requests with consequtive slashes in the URL. Such
requests would fail (with a 404) on staging.
This commit fixes it, by removing leading slashes from the path. It also
refactors `LocationService` a bit, converting path to an observable,
`currentPath` (similar to `currentUrl`), and applies certain clean-ups (e.g.
stripping slashes, query, hash) in one place, which simplifies consumption.
Closes#16230
Changed description from h3 to h2 to match the other header
Created api page classes for consistent styling
Add styles for info-bar section
Wrapped pre tags for code not to go off of screen
This helps to ensure that the full docs have been
generated before we begin watching.
You can disable this by providing the `--watch-only`
flag. E.g. `yarn docs-watch -- --watch-only`.
Dgeni is now providing the `id` for all the documents to be viewed. So we
no longer need to add this to the DocumentContents object.
There are some notable changes in the refactoring:
`DocumentService`:
* The id of the document to render is now obtained from `LocationService.path()`.
* The `getFileNotFoundDoc` and `getErrorDoc` methods have been extracted from
the `fetchDocument` method.
`AppComponent`:
* the `pageId` is now computed in a separate `setPageId` method.
`AppComponen` spec file:
* The `TestHttp` has had the hard coded documents removed and replaced with
a function that will generate docs as needed.
* Scrolls to hash element or top of page when no hash.
* Scrolls down a bit (80px) to account for top menu overhang.
* No longer scrolls when the hash element is not found.
* Adds `<a id="top-of-page"></a>` which will benefit future efforts to
navigate there from within a page.
Index: Changed h3s to h2s given hierarchy
Index: Aligned text and image blocks to be centered
Index: Announcement bar button darkened for appropriate contrast
Search Results: Changed to list items in unordered list to accommodate accessibility and updated styles accordingly
Fixed capitalization in sidenav menu items
Add min height property to sidenav-content for better viewing on short pages or high resolution screens
Add dividier between change log items as before to h2
Table adjustments to reduce off-screen items
Update home page banner text and icon change, and fix banner img and mobile alignment
Fix and add links in doc landing page and change card footer text to reflect correct name
Removed docs landing page to rebase with master
PR Close#16138
Angular change detection bug -> no page update on resize.
Reverting to `@HostListener('window:resize', ['$event.target.innerWidth'])` cures it.
Delete DeviceService which no longer serves a purpose.
Adjusted affected AppComponent and LiveExample tests.
PR Close#16143
There are external resources that link to the old URLs. In order to avoid
breaking them, the old URLs are redirected to the new ones.
Fixes#15795Closes#16133
PR Close#16162
Previously, due ot a limitation/bug in AoT compilation and `useValue`, the
`global` injected into `SwUpdateNotificationsService` was always undefined,
which prevented it from actually reloading the page after activating a
ServiceWorker update.
This commit fixes it by switching to `useFactory`, which works correctly with
AoT.
Aligned padding to fit beneath the top nav
Add scroll bar styling inside sidenav menu
Increased font size of h2 to be different from h3 for better legibility
Now if you specifically provide an empty `@title` tag
for a contents file, the doc-gen will not complain and
the browser will just display a reasonable default.
Add visually hidden class and apply to h2 in search results
Changed h2 group headers to h3s
Add roles to main and content
Fix API material icon placement
Image alt additions where needed
Add lang attribute to html tag
Add aria-label on search input
If a document provided a title jsdoc tag then its h1
element was being rendered incorrectly as a markdown
paragraph.
This change renders the title as a markdown h1 tag
directly.
Fixes#16099
Previously, the `AppComponent.pageId` was set via the current URL, rather than
the document being displayed. This is only really noticeable when the URL does not
match a valid doc and we are actually displaying a 404 page.
Now we compute the `pageId` from the URL of the document being viewed,
which is returned from the `DocumentService.currentDocument` observable instead.
I found that VS Code was taking an age to bring up the intellisense
for TypeScript source files in the `aio/src` folder.
I believe that this is because it was trying to parse all the files in
the `aio/content/examples` folder as well, which is not relevant to the
web app development.
This change restricts the root `aio/tsconfig.json` to only the entry points
for the app, the unit tests and e2e tests.
Documents can specify their title via the `title` or `name` jsdoc tags.
This change adds that, if neither are provided, the first `<h1>` element
is removed from the `renderedContent` and used for the title.
If there is still no title then it is set to the empty string and a warning
is logged.
contributor fix
contributor card styling updates
button styling and container size fix
remove button and add image border
selection filter for buttons
header only show when group selected and styles
initial flip card funcitonality and data change
selected buttons styling
complete flip func and card style
flip feature
contributor group changes
fixes
This task is suitable for day to day docs authoring.
This task cuts corners, which makes it much faster than a full `yarn docs`
run but it does not produce completely valid output.
In general this isgood enough for authors to see their changes as they make them.
The task is triggered by a call to
```
yarn docs-watch
```
This sets up watchers on the `aio/contents` and `packages` folders.
Any changes to files below these folders new doc generation run to start.
The input to the generation is confined to a collection of files related
to the changed file. For example:
* a change to a file in `aio/content/marketing` will generate all the
marketing files.
* a change to a file in `aio/content/tutorial` or `aio/examples/toh-*`
will generate all the tutorial files (and their embedded examples).
* a change to a file in `aio/guide` or `aio/examples` (but not a `toh-`
example) will generate the appropriate guide and its embedded examples
* a change to a file in `packages` or `packages/examples` will generate
the appropriate API doc and its embedded examples.
Be aware that the mapping between docs and its examples are based on doc file
and example folder structure being equivalent. Sometimes a doc will reference
an example in a different folder, in which case the generated doc will be
inaccurate. Mostly this is not a big problem.
When content pages were short, the footer would take up a large part
of the display area and the side nav would look like it was shorter than
it really was.
This change moves the footer into the main content area so that the
nav always extends to the full length the browser.
Regular plunker is unusable on narrow screen
Refactors LiveExampleComponent and adds tests.
Refactor width detection to `DeviceService` because need to know width change in 2 places.
Keep “disable” option add in earlier spikes because simple and potentially useful in future.
Currently, running `yarn test-pwa-score` right after deploying to staging fails
with the error:
```
{ Error: Unable to load the page: timeout reached ... code: 'PAGE_LOAD_ERROR' }
```
As a temporary fix, this commit prevents the build from failing because of PWA
score errors (until we identify the cause and fix it).
Display area names in all caps
Exclude results with no title because they don’t show & can’t be clicked.
Should find these and give their docs a title.
Previously, only a few characters of the SHA would appear on the preview link
comment posted on the PR. This was usually enough for GitHub to create a link to
the corresponding commit, but it was possible to have collisions with other
commits with the same first characters (which prevented GitHub from identifying
the correct commit and create a link.)
This commit fixes this issue by including the full SHA on the commentso GitHub
can identify the correct commit and create the link. GitHub will automatically
truncate the link text (by default to 7 chars unless more are necessary to
uniquely identify the commit).
Previously, when trying to upload the build artifacts for a PR/SHA that was
already successfully deployed (e.g. when re-running a Travis job), the preview
server would return a 403 and the build would fail.
Since we have other mechanisms to verify that the PR author is trusted and the
artifacts do indeed come from the specified PR and since the new artifacts
should be the same with the already deployed ones (same SHA), there is no reason
to fail the build. The preview server will reject the request with a special
HTTP status code (409 - Conflict), which the `deploy-preview` script will
recognize and exit with 0.
Don’t show the side nav in mobile (not side-by-side) view when arriving or navigating.
Only show it by request.
The side nav should continue to appear in wide mode (side-by-side) when navigating from a marketing page to a guide page.
The implementation adds three plugins to the remark processor:
* remove support for code blocks triggered by indented
text - only gfm triple backticks are supported; and also adds support for
dgeni inline tags.
* ignore content within `code-example` and `code-tabs` elements. This prevents
the content being accidentally treated as markdown
* ignore dgeni inline tags, e.g. `{@link ... }` to prevent the content of
the links from being accidentally treated as markdown
Sometimes, depending on the length of lines, anchor elements would be formatted
incorrectly by `html.prettyPrint` and the space right after the element was
removed.
This was apparently caused by a bug in `html.prettyPrint` in combination with
its default behavior of wrapping lines at a specific limit (70 chars). Since the
output is only meant to be used as JSON string data, wrapping the lines makes it
less readable by adding unnecessary `\n`.
This commit disables the line wrapping, which effectively avoids the bug that
was responsible for incorrectly formatting anchor elements and surrounding
space.
Related to #15681.
This version changes the expected syntax for emphasis.
The original Rho renderer uses `*` for strong an `_` for em.
But it is more standard in markdown to use `**` or `__` for bold
and `*` or `_` for em.
Igor Minar
Georgios Kalpakas
Peter Bacon Darwin
Jesus Rodriguez
Ward Bell
Alex Rickabaugh
Stefanie Fluin
Jason Hodges
aravindfz
Souvik Basu
Kapunahele Wong
Will Howell
Kim Burgess
swseverance
Chris McKnight
Filipe Silva
Natalie Sidhom
cameronbriar
Santi
Andy
Igor Minar