Commit Graph

4321 Commits

Author SHA1 Message Date
George Kalpakas 8365bc8946 refactor(docs-infra): fix code indentation in `ContributorListComponent`'s template (#41051)
This commit fixes the indentation of the template of
`ContributorListComponent` to make it more readable.

PR Close #41051
2021-03-09 08:52:51 -08:00
George Kalpakas 1b38b413de docs: fix indentation of code snippets in the "Cheat sheet" guide (#41051)
Previously, the indentation of code snippets in the "Cheat sheet" guide
was done using regular spaces. However, leading whitespace is ignored in
HTML elements (by default), which resulted in the identation being lost.

This commit fixes this by using the ` ` HTML entity for
indentation, ensuring the code snippets are easier to read.

Some examples:

Before: ![cheatsheet code indentation before][1]
After: ![cheatsheet code since PR 40944][2]

[1]: https://user-images.githubusercontent.com/8604205/109385242-218dd600-78fb-11eb-9261-18ab5f2c308c.png
[2]: https://user-images.githubusercontent.com/8604205/109385246-25b9f380-78fb-11eb-8e82-d8a561deba21.png

PR Close #41051
2021-03-09 08:52:51 -08:00
George Kalpakas 76daca800e refactor(docs-infra): remove unnecessary wrapper `<div>` from the "Cheat sheet" guide (#41051)
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
2021-03-09 08:52:51 -08:00
George Kalpakas f85a178a49 fix(docs-infra): fix `<code>` styling in the "Cheat sheet" guide (#41051)
Since #40944, `<code>` elements have a distinctive background to make
them stand out from regular text. However, this styling is not desirable
in certain cells of the "Cheat sheet" guide's tables, which exclusively
contain code.

This commit updates the `<code>` styling to remove the distinctive
background in those "Cheat sheet" cells.

Before #40944: ![cheatsheet code before PR 40944][1]
Since #40944: ![cheatsheet code since PR 40944][2]
After this commit: ![cheatsheet code after][3]

[1]: https://user-images.githubusercontent.com/8604205/109383633-4f215200-78f0-11eb-95e2-2a2c4fb3a31f.png
[2]: https://user-images.githubusercontent.com/8604205/109383634-50527f00-78f0-11eb-8c48-ff5f96918c4d.png
[3]: https://user-images.githubusercontent.com/8604205/109383635-50eb1580-78f0-11eb-9cf2-98851692ddd9.png

PR Close #41051
2021-03-09 08:52:51 -08:00
George Kalpakas d80d6ea3f6 fix(docs-infra): fix styling of `<code>` elements on older browsers (#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
2021-03-09 08:52:51 -08:00
George Kalpakas 269d7e4d22 fix(docs-infra): improve the layout of the "Features" page on medium screens (#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
2021-03-09 08:52:51 -08:00
George Kalpakas 27bb6f6a04 fix(docs-infra): use a fixed top-menu on marketing pages as well (#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
2021-03-09 08:52:51 -08:00
George Kalpakas 7944ee2c30 fix(docs-infra): do not underline link icons on hover (#41051)
The external links in the docs content and the download links in the
"Press kit" page have icons next to their text (an external link icon
and a download icon respectively).

Previously, when hovering over one of those links, the icons used to get
underlined along with the link text, which was not desirable.

This commit fixes it by changing the mechanics of how these icons are
positioned inside the anchor elements so that only the link text is
underlined on hover.

Before: ![external links on hover before][1]
Before: ![presskit links on hover before][2]
After: ![external links on hover after][3]
After: ![presskit links on hover after][4]

[1]: https://user-images.githubusercontent.com/8604205/109340455-b64bf180-7871-11eb-923b-3113a237b8d8.png
[2]: https://user-images.githubusercontent.com/8604205/109340461-b815b500-7871-11eb-9c9d-91b6ffb17346.png
[3]: https://user-images.githubusercontent.com/8604205/109340458-b77d1e80-7871-11eb-884c-c1093ec83e66.png
[4]: https://user-images.githubusercontent.com/8604205/109340462-b815b500-7871-11eb-8f00-702b2b61f6ac.png

PR Close #41051
2021-03-09 08:52:51 -08:00
Sagar Pandita c1a93fcf32 docs: remove augury resource (#41107)
Partially addresses #41030.

PR Close #41107
2021-03-08 10:00:13 -08:00
LordMsz 2d69f0c9ca docs: extend :host selector documentation (#41055)
explain behavior of selectors *before* `:host` that escape encapsulation
and explain preferred usage of `:host-context`

PR Close #41055
2021-03-08 08:36:04 -08:00
Pete Bacon Darwin 2893b925c3 build(docs-infra): capture all decorators in doc-gen (#41091)
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
2021-03-08 08:34:40 -08:00
George Kalpakas 7854c4ddbe test(docs-infra): run a11y tests against `/tutorial` and update a11y scores (#41103)
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
2021-03-08 08:33:47 -08:00
George Kalpakas e59246cf5c test(docs-infra): print the browser version in `audit-web-app.js` to help debugging (#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
2021-03-08 08:33:47 -08:00
Sivamuthu Kumar 44bb78dbbd docs: update repo link to auto scroll to readme section (#41105)
Co-authored-by: George Kalpakas <kalpakas.g@gmail.com>
PR Close #41105
2021-03-08 08:33:00 -08:00
Sivamuthu Kumar 3d3ab4aa5d docs: add angular-eslint and remove codelyzer from tooling (#41105)
fixes #41029

PR Close #41105
2021-03-08 08:33:00 -08:00
Quentin Monmert c676ec1ce5 docs: fix some typos in angular.io examples (#41093)
This commit updates example code to make the spacing more consistent.

PR Close #41093
2021-03-05 15:08:11 -08:00
Carl Fredrik Samson e7453f15d5 docs: fix issue #40941 (#40942)
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
2021-03-05 09:47:44 -08:00
Chris d9acaa8547 docs: remove Codelyzer recommendation from style guide (#40992)
Fixes #40903

PR Close #40992
2021-03-04 11:01:48 -08:00
MG 84b8f250f9 docs: add ng-mocks to tooling resources (#41027)
closes #41025

PR Close #41027
2021-03-03 23:31:38 +00:00
David Pine 7765b648e7 docs: update Angular Global Summit on event pages (#41050)
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
2021-03-03 10:04:56 -08:00
David Shevitz d10599459d docs: update @reviewed date (#41060)
PR Close #41060
2021-03-03 10:03:57 -08:00
George Kalpakas ffbacbbc98 build(docs-infra): upgrade cli command docs sources to d62203a9f (#41046)
Updating [angular#master](https://github.com/angular/angular/tree/master) from
[cli-builds#master](https://github.com/angular/cli-builds/tree/master).

##
Relevant changes in
[commit range](84b99497f...d62203a9f):

**Modified**
- help/build.json

PR Close #41046
2021-03-03 09:55:43 -08:00
George Kalpakas 21f0deeaa6 build(docs-infra): update Angular framework, Material and CLI to latest methods (#40994)
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
2021-03-03 09:43:56 -08:00
George Kalpakas 6e40551394 build(docs-infra): update Lighthouse to version 7.2.0 (#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
2021-03-03 09:43:56 -08:00
George Kalpakas cb16035fd3 fix(docs-infra): correctly display event dates on all timezones (#41053)
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
2021-03-03 09:37:21 -08:00
Daniel 5eab6e14f1 docs: fix typo in router.md file (#41064)
PR Close #41064
2021-03-03 09:36:06 -08:00
Aristeidis Bampakos 198e841564 docs(http): add example for interceptor order (#39938)
Add an example for the order of interceptor with image

PR Close #39938
2021-03-01 15:33:36 -08:00
Kapunahele Wong 6c783c7fcb docs: rewrite structural-directives.md (#40015)
PR Close #40015
2021-03-01 15:32:26 -08:00
Kapunahele Wong 356d9a0537 docs: improve contrast of colors and body padding in boilerplate CSS (#40890)
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
2021-03-01 15:30:32 -08:00
twerske be8893fd1d docs: add youtube to social icons (#40987)
PR Close #40987
2021-02-26 15:50:36 -08:00
Alan Agius 06fb318b3b docs: update inlineCritical default value (#40920)
Related to https://github.com/angular/angular-cli/pull/20096

PR Close #40920
2021-02-26 15:41:15 -08:00
Pete Bacon Darwin 4859c0947a build(docs-infra): implement full template checking for examples (#40930)
This commit turns on full template type checking and fixes the examples
that had errors.

PR Close #40930
2021-02-26 15:40:44 -08:00
Pete Bacon Darwin 03d92f75e6 build(docs-infra): enable Ivy in StackBlitz examples (#40930)
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
2021-02-26 15:40:44 -08:00
George Kalpakas 272b5645c4 fix(docs-infra): improve the layout of the "Resources" page (#40944)
This commit improves the readability of the "Resources" page by limiting
the content's max width to 50em (which is 800px by default).

It also gets rid of custom color values and either uses the default
color or colors specified via Sass variables.

Before: ![resources page before][1]
After: ![resources page after][2]

This change has been extracted from #36045.

[1]: https://user-images.githubusercontent.com/8604205/108601949-104b4380-73a8-11eb-864b-948db8c36f80.png
[2]: https://user-images.githubusercontent.com/8604205/108602036-894a9b00-73a8-11eb-870d-39bea9b46d97.png

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40944
2021-02-26 15:39:29 -08:00
George Kalpakas d3eff182e3 refactor(docs-infra): clean up styling of the `<aio-resource-list>` component (#40944)
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
2021-02-26 15:39:29 -08:00
George Kalpakas 00562ed935 fix(docs-infra): center the "Contribute" page (#40944)
This commit improves the layout of the "Contribute" page by centering
the content (similar to other marketing pages).

Before: ![contribute layout before][1]
After: ![contribute layout after][2]

This change has been extracted from #36045.

[1]: https://user-images.githubusercontent.com/8604205/108595056-5b545f00-7386-11eb-97b6-c3606dbfb5fa.png
[2]: https://user-images.githubusercontent.com/8604205/108595060-5becf580-7386-11eb-91fa-b2877f2a4691.png

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40944
2021-02-26 15:39:29 -08:00
George Kalpakas 2af8099fbc fix(docs-infra): use up-to-date URLs in "Contribute" links (and replace deprecated `md-button`) (#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
2021-02-26 15:39:29 -08:00
George Kalpakas c4a9c003cb fix(docs-infra): remove unwanted underline when hovering over contributor info links (#40944)
This commit removes an unwanted underline effect when hovering over
contributor info links (`.contributor-info > .info-item`). This was
accidentally introduced in #40427.

Before: ![contributor info on hover before][1]
After: ![contributor info on hover after][2]

[1]: https://user-images.githubusercontent.com/8604205/108560170-045a7580-7305-11eb-98d2-4302d98581c6.png
[2]: https://user-images.githubusercontent.com/8604205/108560176-058ba280-7305-11eb-97eb-74cf2c830a39.png

PR Close #40944
2021-02-26 15:39:29 -08:00
George Kalpakas d97b45d82a fix(docs-infra): make inline code stand out more (#40944)
This commit improves the styling of inline code blocks to make them
stand out more.

Before: ![code formatting before][1]
After: ![code formatting after][2]

This change has been extracted from #36045.

[1]: https://user-images.githubusercontent.com/8604205/108554295-8e521080-72fc-11eb-94e8-09246ae334c8.png
[2]: https://user-images.githubusercontent.com/8604205/108553733-c9077900-72fb-11eb-8001-1f0baf8b95bc.png

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40944
2021-02-26 15:39:29 -08:00
George Kalpakas 516de34778 fix(docs-infra): improve the appearance of `.filter-button` elements (#40944)
This commit improves the appearance of `.filter-button` elements used to
jump between different categories in "Contributors" and "Resources" pages.

Before (wide screen): ![contributors buttons (wide screen) before][1]
Before (narrow screen): ![contributors buttons (narrow screen) before][2]
After (wide screen): ![contributors buttons (wide screen) after][3]
After (narrow screen): ![contributors buttons (narrow screen) after][4]

This change has been extracted from #36045.

[1]: https://user-images.githubusercontent.com/8604205/108414895-72376c00-7235-11eb-9537-7a7b059d09fe.png
[2]: https://user-images.githubusercontent.com/8604205/108414923-782d4d00-7235-11eb-8ba4-87a3a9ae14cd.png
[3]: https://user-images.githubusercontent.com/8604205/108414929-78c5e380-7235-11eb-807a-109b4200e64e.png
[4]: https://user-images.githubusercontent.com/8604205/108414942-7cf20100-7235-11eb-8ef0-9b2da397b3ee.png

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40944
2021-02-26 15:39:29 -08:00
George Kalpakas ae50e40216 refactor(docs-infra): move `.filter-button` styles inside `.group-buttons` (#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
2021-02-26 15:39:29 -08:00
George Kalpakas d6f6197728 fix(docs-infra): put the license references in a separate paragraph in the footer (#40944)
This commit improves how sentences are broken up into lines in the
footer (due to the limited max-width of the content) by moving the
license references in a separate paragraph.

Before: ![footer before][1]
After: ![footer after][2]

[1]: https://user-images.githubusercontent.com/8604205/108595211-593ed000-7387-11eb-8ee5-f13c8bf522f4.png
[2]: https://user-images.githubusercontent.com/8604205/108595214-5a6ffd00-7387-11eb-9a9d-dbaa2175f51f.png

PR Close #40944
2021-02-26 15:39:29 -08:00
George Kalpakas 2475dbe7b2 refactor(docs-infra): remove redundant Sass mixin (#40944)
This commit removes the `bp()` Sass mixin, which was only used in one
place (and also included several unused code-branches).

PR Close #40944
2021-02-26 15:39:28 -08:00
George Kalpakas 2a518fb44c refactor(docs-infra): use Sass variables for colors used in themes (#40944)
This change has been extracted from #36045.

NOTE:
The color names for the RC theme were computed using
https://www.color-blindness.com/color-name-hue.

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40944
2021-02-26 15:39:28 -08:00
George Kalpakas 6275346871 fix(docs-infra): increase margin of header-links (#40944)
This change has been extracted from #36045.

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40944
2021-02-26 15:39:28 -08:00
Theoklitos Bampouris fb82558d78 docs: Change lexical in security guide (#41016)
Change `onerror` attribute reference to `script` element reference
PR Close #41016
2021-02-26 15:14:57 -08:00
cexbrayat 91cdc11aa0 fix(common): allow number or boolean as http params (#40663)
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
2021-02-26 12:03:50 -08:00
George Kalpakas 383d226118 fix(docs-infra): add links to glossary for terms on the "Press kit" page (#40945)
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
2021-02-26 08:28:22 -08:00
George Kalpakas 117c49f799 fix(docs-infra): more clearly separate different sections on the "Press kit" page (#40945)
This commit adds a horizontal line and some extra spacing between
different sections of the "Press kit" page to make it easier to identify
where one section ends and the next begins.

Before: ![presskit sections before][1]
After: ![presskit sections after][2]

[1]: https://user-images.githubusercontent.com/8604205/108739638-8208c600-753d-11eb-99bb-ea119640de39.png
[2]: https://user-images.githubusercontent.com/8604205/108745297-95b72b00-7543-11eb-9a35-56325477534b.png

PR Close #40945
2021-02-26 08:28:22 -08:00
George Kalpakas 78a70498b5 fix(docs-infra): improve the layout and appearance of the "Press kit" page (#40945)
This commit improves the layout and appearance of the "Press kit" page.
Most notable changes include:
- Center content and limit max width to 50em (which is 50px by default).
- Remove uppercase transform for headings.
- Use a two-column layout for icons (instead of one icon per row).
- Show "download" icons next to download links.

Before (wide): ![presskit page (wide) before][1]
Before (narrow 1/2): ![presskit page (narrow 1/2) before][2]
Before (narrow 2/2): ![presskit page (narrow 2/2) before][3]
After (wide): ![presskit page (wide) after][4]
After (narrow 1/2): ![presskit page (narrow 1/2) after][5]
After (narrow 2/2): ![presskit page (narrow 2/2) after][6]

This change is based on code from #36045.

[1]: https://user-images.githubusercontent.com/8604205/108739632-80d79900-753d-11eb-8ddc-ac542ec5b3ac.png
[2]: https://user-images.githubusercontent.com/8604205/108739641-82a15c80-753d-11eb-9b20-8119ad117460.png
[3]: https://user-images.githubusercontent.com/8604205/108739643-83d28980-753d-11eb-8afa-2d7a5e87d586.png
[4]: https://user-images.githubusercontent.com/8604205/108739638-8208c600-753d-11eb-99bb-ea119640de39.png
[5]: https://user-images.githubusercontent.com/8604205/108739642-8339f300-753d-11eb-9b25-5c1988adb1dd.png
[6]: https://user-images.githubusercontent.com/8604205/108739645-846b2000-753d-11eb-8ef3-b6a8b7c6d1ff.png

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40945
2021-02-26 08:28:21 -08:00