This commit removes an unnecessary wrapper `<div>` from the
"Cheat sheet" guide. The CSS styles that referenced the element's ID
(`#cheatsheet`) have been updated to use `.page-guide-cheatsheet`
instead.
PR Close#41051
Previously, styling of `<code>` elements utilized the `:not()` CSS
pseudo-class with multiple selectors (`:not(h1, h2, ...)`). It turns out
that older browsers (such as IE11) do not support multiple selectors in
a single `:not()` instance.
(See [MDN][1] and [CanIUse][2] for more info.)
This commit fixes `<code>` styling to use multiple separate `:not()`
instances instead (`:not(h1):not(h2)...`), so that they are styled
correctly on older browsers as well.
NOTE:
This change seems to trigger some kind of bug in LightHouse that causes
the a11y score of `/start` to be calculated as 0 (which is clearly
wrong). This happens on Linux (tested on CI and locally using the
Windows Subsystem for Linux (WSL)) - on Windows the score is computed
correctly as 98/100.
([Example failure][3])
The bug seems to be related to the layout of the content and goes away
if we change the viewport size (for example, switching to LightHouse's
`desktop` config) or make another change that affects the content's
layout (for example, reducing the padding of `<code>` elements).
To work around the issue, this commit updates the `test-aio-a11y.js`
script to test `/start-routing` instead of `/start`.
[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/:not#description:~:text=Using%20two%20selectors
[2]: https://caniuse.com/css-not-sel-list
[3]: https://circleci.com/gh/angular/angular/931038
PR Close#41051
The "Features" page organizes features in groups/rows of 3 features
each. On wide screens, all 3 paragraphs of a group/row can be shown next
to each other. On narrow screens, the layout changes to stack the
paragraphs vertically. On medium screens, however, the 3rd paragragh is
wrapped over to the next line.
Previously, the wrapped content was left-aligned, which left a lot of
empty space on the right.
This commit improves the layout on medium screens by ensuring the
paragraphs are horizontally centered (with space distributed evenly
around them).
Before: ![features page before][1]
After: ![features page after][2]
[1]: https://user-images.githubusercontent.com/8604205/109344670-b64ef000-7877-11eb-9013-890562ff2f3d.png
[2]: https://user-images.githubusercontent.com/8604205/109344678-b7801d00-7877-11eb-9224-d7715f7d7235.png
PR Close#41051
Previously, in contrast to docs pages, marketing pages had a non-fixed
top-menu, which meant that the top-menu would scroll out of the viewport
along with the rest of the content. This had a couple of downsides:
- The UI was different between pages (i.e. different top-menu behavior
on docs vs marketing pages).
- Since some of the marketing pages are long, it was not easy for people
to navigate to a different page (i.e. they had to scroll all the way
back up).
This commit improves the UX by using the same, fixed top-menu on all
pages, which restores consistency and allows the user to navigate around
more easily.
NOTE:
The old behavior (non-fixed top-menu) is kept on the homepage, since its
top-menu design in a little different than other pages (e.g. it uses a
transparent top-menu) and would not play well with a fixed top-menu.
PR Close#41051
In 6cff877 we broke the decorator docs because the
doc-gen no longer knew how to identify them.
This commit updates the dgeni processor responsible
for identifying the decorators in the code and ensures
that the docs are now generated correctly.
Fixes#40851
PR Close#41091
This commit adds `/tutorial` to the list of angular.io pages that we run
a11y tests against and updates the required scores to match the current
ones (to avoid a future regression going unnoticed).
PR Close#41103
This commit updates the `audit-web-app.js` script (used to run PWA and
a11y tests on angular.io) to also print the version of the browser used
to run the tests. This can help when debugging a CI failure.
PR Close#41103
setting the `hero` property as an optional property fixes the compilation
error: `Property 'hero' has no initializer and is not definitely assigned
in the constructor` when having the ts transpiler set to "strict" mode.
PR Close#40942
After my speaker meeting with the Geekle team, they communicated that
they moved the date to avoid colliding with ng-conf. Originally added
in#40697, per @mgechev.
PR Close#41050
This commit updates the Angular framework, Angular CDK/Material and
Angular CLI to latest stable versions (11.2.3, 11.2.2 and 11.2.2
respectively).
This update also fixes a Lighthouse audit fail due to
`@angular/core@11.0.0` being identified as vulnerable to XSS:
https://snyk.io/vuln/SNYK-JS-ANGULARCORE-1070902
Regarding the payload size increases, they are mostly attributed to
Angular Material:
- Before this commit: 448461 B
- After framework update: 448554 B ( +93 B)
- After Material update: 449292 B (+738 B)
- After CLI update: 449310 B ( +18 B)
PR Close#40994
In this version, we no longer need our custom logic to skip certain
HTTPS related audits on localhost, since Lighthouse will treat it as a
secure context (similar to how browsers do).
See also GoogleChrome/lighthouse#11766.
PR Close#40994
Previously, the event dates displayed on the angular.io "Events" page
(`/events`) was off by one day on timezones with a negative offset from
UTC. See
https://github.com/angular/angular/pull/41050#issuecomment-788958888.
This commit fixes it by using the `getUTC*` methods of the `Date` object
to extract the date info, which are not affected by the user's timezone.
PR Close#41053
Shifts colors to pass WebAIM contrast checker and adds media
query so that body padding is smaller at smaller widths.
Body padding responsiveness will help on StackBlitz and small
screens.
PR Close#40890
We need to explicitly set the `enableIvy` option in a tsconfig file
to tell StackBlitz not to use ViewEngine.
This commit will generate an appropriate tsconfig.json file in the
example data that is sent to StackBlitz, which matches the Ivy
setting of the AIO project itself.
PR Close#40930
This commit cleans up the styles and the elements/classes used for
styling the content of the `<aio-resource-list>` component.
This change has been extracted from #36045.
Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>
PR Close#40944
This commit replaces some outdated URLs in "Contribute" links (on the
"Contribute" page):
- `github.com/angular/material2` --> `github.com/angular/components`
- `github.com/angular/angularfire2` --> `github.com/angular/angularfire`
It also replaces the deprecated `md-button` attribute with `mat-button`.
PR Close#40944
Since `.filter-button` elements only appear inside `.group-buttons`
elements, this commit moves `.filter-button` CSS styles inside
`.group-buttons` styles.
PR Close#40944
This change fixes an incompatibility between the old `@angular/http` package
and its successor (`@angular/common/http`) by re-introducing the types that were supported before.
It now allows to use number and boolean directly as HTTP params, instead of having to convert it to string first.
Before:
this.http.get('/api/config', { params: { page: `${page}` } });
After:
this.http.get('/api/config', { params: { page }});
`HttpParams` has also been updated to have most of its methods accept number or boolean values.
Fixes#23856
BREAKING CHANGE:
The methods of the `HttpParams` class now accept `string | number | boolean`
instead of `string` for the value of a parameter.
If you extended this class in your application,
you'll have to update the signatures of your methods to reflect these changes.
PR Close#40663
The "Press kit" page has a "Terminology" section that lists a couple of
terms (currently AOT and JIT compilation).
This commit adds links to the corresponding entries in "Glossary" to
make it easier for people to find out what the terms mean.
PR Close#40945
Fixes error: `TS2564: Property 'heroes' has no initializer and is not definitely assigned in the constructor`
and makes `hero` property consistent with ch 3 (ref: #40942)
PR Close#40970
Increases contrast of example copy.
Explicitly references inputs from labels.
Updates screenshot of styles that aren't accessible.
Removes the term master.
Provides more detailed alternate text for the image.
Adds padding to input so it is an easier target for touch or pointer.
PR Close#40575
Previously, in order to apply some styles to marketing (i.e. non-docs)
pages, we listed the various `.page-*` classes that corresponded to docs
pages. This meant that adding/removing a marketing page required updates
in several places, which is error-prone.
This commit avoids this by using a Sass mixin for applying styles to
marketing pages.
PR Close#40881
Previously, some of the marketing pages had different styles for the
top-nav than others (even if they had the same layout and
blue-background header). More specifically, the top-nav had a box-shadow
and it was absolutely positioned on some marketing pages, while it had
no box-shadow and was statically positioned on others.
This commit makes the appearance of marketing pages wrt the top-nav
consistent across all marketing pages by changing the styles for the
remaining pages:
- Contributors (`/about`)
- Contribute (`/contribute`)
- Press kit (`/presskit`)
Before: ![contribute topnav shadow before][1]
After: ![contribute topnav shadow after][2]
[1]: https://user-images.githubusercontent.com/8604205/107984898-a6aaee00-6fd1-11eb-8bf3-79393c8983ff.png
[2]: https://user-images.githubusercontent.com/8604205/107984900-a7438480-6fd1-11eb-8d9b-a643d69ab692.png
PR Close#40881
Previously, in order to apply some styles to docs (i.e. non-marketing)
pages, we listed the various `.folder-*` classes that corresponded to
docs pages. This meant that adding/removing a docs area required updates
in several places, which is error-prone.
This commit avoids this by using a Sass mixin for applying styles to
docs pages.
PR Close#40881
This commit removes some unnecessary styles setting `font-family` to
`$main-font`. These styles are redundant, because the targeted elements
already inherit this style from `<body>`.
PR Close#40881
This commit removes some CSS rules targeting `.doc-version select` in
the sidenav. These rules do not match any elements any more, since now
we use a custom `<aio-select>` component (instead of the `<select>`
element).
PR Close#40881
Previously, some of the links on the error pages had URLs prefixed with
`https://angular.io/`. This caused them to be treated as external URLs,
which had the following downsides:
- Links would always point to `angular.io` instead of the same version
as the error page (e.g. `next.angular.io` or `v11.angular.io`).
- Dgeni would not be able to check that the URLs are valid (i.e. point
to existing pages).
- An external link icon would incorrectly be shown next to the links on
`angular.io`.
This commit fixes the links to use relative URLs.
PR Close#40881
Our approach for handling cyclic imports results in code that is
not easy to tree-shake, so it is not suitable for publishing in a
library.
When compiling in partial compilation mode, we are targeting
such library publication, so we now create a fatal diagnostic
error instead of trying to handle the cyclic import situation.
Closes#40678
PR Close#40782
ChromeDriver now supports Apple Silicon ARM processors.
`webdriver-manager` versions 12.1.7 and earlier will, however,
incorrectly download the arm64 ChromeDriver regardless of the
system's architecture. This results in failure to run Protractor tests
on macOS with the error: `spawn Unknown system error -86`
This commit fixes the problem by upgrading `webdriver-manager` to
version 12.1.8, which includes a fix.
See also https://stackoverflow.com/questions/65618558.
PR Close#40756
In #40419 we move the code that creates the `heroes` object
above the code that updates the message service. But this moved
that line of code outside of the docregion that is displayed in
the tutorial ealier on, making it non-sensical.
This commit ensures that this line of code is now rendered in the
tutorial be moving it within the correct docregion.
Closes#40788
PR Close#40789
On larger screens the top-bar has a height of 64px. On screens smaller
than 600px, the top-bar has a height of 56px. As a result, the sidenav
should have a top position of 56px on screens smaller than 600px and
64px on other screens.
Previously, the style setting the top position to 56px was tied to the
presence of the `.collapsed` class, which depends on whether the sidenav
is docked or not. The change from docked to collapsed sidenav, however,
happens at 992px. As a result, the sidenav had an incorrect top position
(56px instead of 64px) on screens between 600px and 991px.
This commit fixes this by ensuring the change of the top position for
the sidenav happens at 600px.
PR Close#40802
Both `CodeExampleComponent` and `CodeTabsComponent` components receive
some code via content projection, grab the projected content and pass it
through to a `CodeComponent` instance for formatting and displaying.
Previously, the projected content was kept in the DOM (hidden). This
unnecessarily increased the number of DOM nodes.
This commit fixes this by clearing the projected DOM nodes once their
content has been captured.
PR Close#40802
Update the HTTP guide and associated example to demonstrate
how an interceptor can be used to provide a custom JSON parser.
Resolves#21079
PR Close#40645
After the docs UI redesign `h2` tags got a border top.
`border-top: 1px solid #dbdbdb;`;
In the sections of Getting Started guide in order to separate
`What's next` from above content an `<hr />` tag was used,
that now becomes unnecessary.
This commit removes unnecessary `<hr />` tags.
PR Close#40693
The "Usage Notes" section is often at the bottom of a long page of content
which can make it difficult to discover. This commit adds a link at the
end of the "Description" if there is a "Usage Notes" section on the page.
This link should help the reader to discover that there is more information
available further down the page.
This is basically a marginal fix. The longer term fix should be to
consider what content goes in which sections and how they should
be laid out on the page.
See #40753
PR Close#40835
The CDK has had a service for copying strings to the clipboard. These changes switch
AIO to it, rather than having to maintain a custom solution.
PR Close#40840
Initially raised due to #39509, this change updates our
"Support policy and schedule" with the same disclaimer
from the "Release frequency" section above.
PR Close#40770
`@angular/platform-server` provides the foundation for rendering an
Angular app on the server. In order to achieve that, it uses a
server-side DOM implementation (currently [domino][1]).
For rendering on the server to work as closely as possible to running
the app on the browser, we need to make DOM globals (such as `Element`,
`HTMLElement`, etc.), which are normally provided by the browser,
available as globals on the server as well.
Currently, `@angular/platform-server` achieves this by extending the
`global` object with the DOM implementation provided by `domino`. This
assignment happens in the [setDomTypes()][2] function, which is
[called in a `PLATFORM_INITIALIZER`][3]. While this works in most cases,
there are some scenarios where the DOM globals are needed sooner (i.e.
before initializing the platform). See, for example, #24551 and #39950
for more details on such issues.
This commit provides a way to solve this problem by exposing a
side-effect-ful entry-point (`@angular/platform-server/init`), that
shims the `global` object with DOM globals. People will be able to
import this entry-point in their server-rendered apps before
bootstrapping the app (for example, in their `main.server.ts` file).
(See also [#39950 (comment)][4].)
In a future update, the [`universal` schematics][5] will include such an
import by default in newly generated projects.
[1]: https://www.npmjs.com/package/domino
[2]: https://github.com/angular/angular/blob/0fc8466f1be392917e0c/packages/platform-server/src/domino_adapter.ts#L17-L21
[3]: https://github.com/angular/angular/blob/0fc8466f1be392917e0c/packages/platform-server/src/server.ts#L33
[4]: https://github.com/angular/angular/issues/39950#issuecomment-747598403
[5]: https://github.com/angular/angular-cli/blob/cc51432661eb4ab4b6a3/packages/schematics/angular/universal
PR Close#40559
The removed bit was copied and pasted from a previous section. Not relevent for the particular step of the tutorial.
The removed bit can we found as intended in __Adding Navigation__ section.
PR Close#40812
Observables are not the only async mechanism that Angular employs.
This change respects that application developers are not required to
use Observables in their own application architecture.
Closes#39155
PR Close#39237
This commit updates the documentation style guide
so that it is in line with current standards, those
of Google as well as those within the Angular docs.
PR Close#36281
Previously, if an entry-point had no public exports (such as the
`@angular/platform-server/shims` introduced in #40559, which is a
side-effect-ful entry-point), it was incorrectly marked as having all
its exports deprecated (which marks the entry-point as deprecated as
well).
This commit fixes this by ensuring that an entry-point is not marked as
having all its exports deprecated if it has no public exports.
PR Close#40737
Previously, the API list container (in the template of the
`<aio-api-list>` component) had three different CSS classes
(`.api-list-container`, `.docs-content`, `.l-content-small`) that were
all used for styling it. This seemed unnecessary and made it more difficult
to see what styles were applied to the container.
This commit removes the extra classes and consolidates the styles under
the `.api-list-container` class (which was the most descriptive one).
PR Close#40704
This commit ensures that all styles for the API list page (which are
defined in `_api-list.scss`) only apply to elements inside an
`<aio-api-list>` element. This will prevent the styles accidentally
taking effect on a different part of the app.
PR Close#40704
The `.code-anchor` class can be used anywhere where we have code
examples (including API pages and docs guides). Previously, global
styles for `.code-anchor` were defined in `_api-list.scss` (i.e. the
styles from `_api-list.scss` were also applied to `.code-anchor`
elements in other pages/components).
This commit moves the `.code-anchor` styles to `_code.scss`, which
contains other common code-related styles.
PR Close#40704
The `.symbol` CSS class (which is primarily used to denote the type of
API symbols - classes, functions, interfaces, etc.) are used in several
places:
- In the API list page (with the corresponding styles defined in
`_api-list.scss`).
- In search results (with the corresponding styles defined in
`_errors.scss`).
- In error list page (with the corresponding styles defined in
`search-results.scss`).
- In the `<aio-select>` component (with the corresponding styles defined
in `_select-menu.scss`).
Previously, global styles for `.symbol` were defined in `_api-list.scss`
(i.e. the styles from `_api-list.scss` were also applied to `.symbol`
elements in other places/components). Also, some of the SCSS files
mentioned above defined some duplicate styles for `.symbol`.
This commit moves the `.symbol` styles to a new `_api-symbols.scss`
file, which contains common symbol-related styles.
PR Close#40704
This commit removes some styles from `_api-list.scss` that are no longer
used (i.e. either their CSS selectors do not match any element in the
app or they are overridden by other rules).
PR Close#40704
This commit ensures that all styles for the TOC (which are defined in
`_toc.scss`) only apply to elements inside an `<aio-toc>` element. This
will prevent the styles accidentally taking effect on a different part
of the app.
PR Close#40704
This commit ensures that all styles for the select-menu element (which
are defined in `_select-menu.scss`) only apply to elements inside an
`<aio-select>` element. This will prevent the styles accidentally taking
effect on a different part of the app.
PR Close#40704
This commit ensures that all styles for the "Resources" page (which are
defined in `_resources.scss`) only apply to elements inside an
`<aio-resource-list>` element. This will prevent the styles accidentally
taking effect on a different part of the app.
PR Close#40704
This commit removes some styles from `_resources.scss` that are no
longer used (i.e. either their CSS selectors do not match any element in
the app or they are overridden by other rules).
PR Close#40704
This commit removes some styles from `_label.scss` that are no longer
used (i.e. their CSS selectors do not match any element in the app).
PR Close#40704
This commit removes the `_edit-page-cta.scss` file, which is no longer
used (i.e. the rules it contains do not match any element in the app).
PR Close#40704
George Kalpakas
Sagar Pandita
LordMsz
Pete Bacon Darwin
Sivamuthu Kumar
Quentin Monmert
Carl Fredrik Samson
Chris
MG
David Pine
David Shevitz
Daniel
Aristeidis Bampakos
Kapunahele Wong
twerske
Alan Agius
Theoklitos Bampouris
cexbrayat
George Kapris
Amadou Sall
DerekRTP
Dmitrij Kuba
Alexey Elin
Brandon Winchester
Enea Jahollari
Dan Levy
Kristiyan Kostadinov
mgechev
Nils Mehlhorn
Jeremy Elbourn
Sam Hrncir
Nicholas Papadopoulos
Amit Gharat
Mickael Istria
Kanstantsin Kamkou
Valerij Dobler
hilmer-martin
