Commit Graph

959 Commits

Author SHA1 Message Date
dario-piotrowicz eb04684ed3 fix(docs-infra): make anchor in list item inherit line-height (#42572)
in order to have a consistent line-height between list items containing
text and list items containing links the anchors should inherit the list
item's line-height

PR Close #42572
2021-06-16 14:03:32 -07:00
dario-piotrowicz 7b85a4d457 fix(docs-infra): add horizontal margins to nav menu (#42561)
add a 2px left and right margin to the aio-nav-menu to make
sure that the items outline doesn't get cropped

PR Close #42561
2021-06-16 14:02:53 -07:00
dario-piotrowicz 40612d1932 fix(docs-infra): fix width of sidenav icons (#42561)
make sure that the width of the sidenav chervon icon is 2.4rem
(this needs to be done using the flex property and not the
width one as that can change in flex containers)

also center chevron icon inside mat-icon container in order to maintain
the correct icon positioning at any font-size

PR Close #42561
2021-06-16 14:02:53 -07:00
dario-piotrowicz 91e307b59d fix(docs-infra): prevent vertical nav item overflowing (#42561)
prevent the overflowing unwanted effect that happens during
a nav item opening and closing (during the chevron rotation)

PR Close #42561
2021-06-16 14:02:53 -07:00
Dario Piotrowicz 3b81528ddd fix(docs-infra): improve card layout for different browser font sizes (#42533)
Remove the fixed height set on the card elements present in angular.io,
allowing the cards to have a dynamic height derived from their content
and thus removing overflow issues related to the browser's font-size,
make other minor css related adjustments to allow the card to look good
on the different browser's font-size settings

PR Close #42533
2021-06-16 14:02:24 -07:00
Pete Bacon Darwin 62aca30286 feat(docs-infra): add support for "special elements" (#41299)
This commit adds support for generating pages that document
special Angular elements, such as `ng-content` and `ng-template`,
which have special behavior in Angular but are not directives nor
components.

Resolves #41273

PR Close #41299
2021-06-16 14:01:16 -07:00
George Kalpakas 828fde6e0d feat(docs-infra): implement popup to inform about the use of cookies (#42259)
This commit adds a popup to angular.io to inform the user about the use
of cookies. Once the user confirms having read the info, the popup will
not be shown on subsequent visits.

This commit is partly based on angular/material.angular.io#988.

Fixes #42209

PR Close #42259
2021-06-14 09:54:08 -07:00
George Kalpakas 1a6a79b63a refactor(docs-infra): provide `local-/sessionStorage` via DI (#42259)
Previously, we had the same logic in a couple of places to safely access
the `Window`'s `local-/sessionStorage` and provide a no-op fallback if
necessary. Soon, we will need the same logic for the cookies popup
(see #42209).

This commit reduces code duplication by providing
`local-/sessionStorage` as injectables and sharing the logic for
accessing them safely. This also makes it easier to mock the storage in
tests without having to mess with the actual `Window` object.

NOTE:
This commit actually decreases the payload size in the `main` bundle by
40B.

PR Close #42259
2021-06-14 09:54:08 -07:00
George Kalpakas a7d1e65a51 test(docs-infra): fix warnings in `ThemeToggleComponent` unit tests. (#42259)
due to unknown `<mat-icon>` element

This commit fixes some warnings in the unit tests of the
`ThemeToggleComponent`, which were caused by the following:

- The `<mat-icon>` element used in `ToggleThemeComponent`'s template was
  not declared in tests.
- The `dark-theme.css` and `light-theme.css` files requested by
  `ToggleThemeComponent` were not available.

PR Close #42259
2021-06-14 09:54:08 -07:00
George Kalpakas edf3e5a9cf build(docs-infra): align code with new CLI v12 apps (#42259)
This commit aligns the angular.io config files more closely to how a
newly generated CLI v12 app would look like. This helps validate the
setup and makes it easier to apply new chages in the future (by
preventing the angular.io layout from deviating too much from the
default new app layout).

PR Close #42259
2021-06-14 09:54:08 -07:00
Pete Bacon Darwin f788e6b8a6 refactor(docs-infra): prepare DocumentService to handle new disambiguated URLs (#42509)
A subsequent commit is going to change disambiguated URLs.
This commit prepares the AIO application to attempt the new URLs
if the old URLs fail. This will help to mitigate problems that may occur
during the period between deployment of the new version and the
service-worker not being updated.

PR Close #42509
2021-06-08 11:45:53 -07:00
Alex Inkin b061e5b2d7 fix(docs-infra): fix search results font color (#42488)
Use the same white constant for no results message
PR Close #42488
2021-06-07 09:38:06 -07:00
Kristiyan Kostadinov 3d1c905c91 refactor(docs-infra): clean up AIO Sass files (#42442)
Cleans up AIO's Sass files by:
* Switching them all over to the `@use`-based API from Angular Material.
* Removing the import of the Material theming API in a bunch of places that weren't using it.
* Migrating the new usages of Sass utility functions to the new syntax (e.g. `map.get` vs `map-get`).
* Fixing a few files that were using 4 spaces for indentation instead of 2.

PR Close #42442
2021-06-02 13:25:42 -07:00
George Kalpakas 1d9c6bb31d docs(docs-infra): document the implementation of styles (incl. theming) in angular.io (#42396)
PR Close #42396
2021-06-01 10:16:21 -07:00
George Kalpakas 4a5af60dc5 fix(docs-infra): improve homepage layout in print mode (#42396)
In #41129, the `.hero-logo` image was changed from an `<img>` element to
a `<div>` with an image background. As a result, in print mode (where
browsers often omit backgrounds to save ink) the logo was not present.

This commit fixes this by ensuring the word `Angular` is displayed as a
title instead of the logo in print mode. It also hides the `Get started`
button in print mode, since it doesn't add any value.

Before: ![homepage-print before][1]
After: ![homepage-print after][2]

[1]: https://user-images.githubusercontent.com/8604205/120068867-889e6080-c08b-11eb-9bd5-233d8592f7ec.png
[2]: https://user-images.githubusercontent.com/8604205/120068869-89cf8d80-c08b-11eb-8740-a68a5ef68c34.png

PR Close #42396
2021-06-01 10:16:20 -07:00
George Kalpakas 58160742b1 refactor(docs-infra): remove unused `_typography-theme.scss` file (#42396)
This commit removes the `_typography-theme.scss` file that is currently
not used. The file contains a single Sass mixin
(`docs-site-typography-theme()`), which is never called.

PR Close #42396
2021-06-01 10:16:20 -07:00
George Kalpakas 3b97287758 refactor(docs-infra): minor refactorings/style changes (#42396)
This commit includes some minor refactorings and style changes as a
follow-up to PR #41129. (The changes were minor enough that didn't
warrant blocking the PR.)

PR Close #42396
2021-06-01 10:16:20 -07:00
George Kalpakas e798bfabb0 build(docs-infra): fix linting warnings (#42359)
This commit fixes some linting warning that were printed when running
`ng lint`. The warnings can be seen in the `lint` step of
[this CI job][1].

Most of the warnings were related to the deprecation of passing context
to Jasmine matchers in favor of using the [withContext()][2] matcher
(introduced in Jasmine v3.3.0).

[1]: https://circleci.com/gh/angular/angular/995543
[2]: https://jasmine.github.io/api/3.3/matchers.html#withContext

PR Close #42359
2021-06-01 10:11:47 -07:00
AleksanderBodurri cdb8f556fb feat(docs-infra): implement dark mode (#41129)
defines styles for a first iteration of an aio darkmode

PR Close #41129
2021-05-27 11:24:53 -07:00
AleksanderBodurri 8d9d1c293d feat(docs-infra): create module theme files (#41129)
creates theming files for the module styles in aio; done as part of the effor to make aio themeable

PR Close #41129
2021-05-27 11:24:53 -07:00
AleksanderBodurri ab7e8dc99d feat(docs-infra): create typography and layout theme files (#41129)
creates theming files for the aio typography styles; done as part of the effort to make aio themeable

PR Close #41129
2021-05-27 11:24:53 -07:00
AleksanderBodurri d429029074 refactor(docs-infra): grab scss mixins with scss use syntax instead of global imports (#41129)
move away from global mixins because @import is going to be deprecated

PR Close #41129
2021-05-27 11:24:53 -07:00
AleksanderBodurri 21e35ece79 refactor(docs-infra): grab scss constants using scss use syntax instead of the global imports (#41129)
move away from using global constants in scss files because @import will be deprecated soon

PR Close #41129
2021-05-27 11:24:53 -07:00
AleksanderBodurri eff26e1be8 refactor(docs-infra): rename namespaced scss to index files (#41129)
scss files were forwarded from files that were named without convention, changes these file names to follow conventions

PR Close #41129
2021-05-27 11:24:52 -07:00
AleksanderBodurri 85a627f741 feat(docs-infra): port over material io theming logic to angular io (#41129)
brings in theming tools from material io into angular io in preparation of implementing darkmode

PR Close #41129
2021-05-27 11:24:52 -07:00
Igor Minar f74fd64523 fix(docs-infra): increase the opacity of background-color for inline `code` blocks (#42297)
I intentionally did not change the font size as discussed in #41196
because the current
font size is already about the same as the normal text size.

Fixes #41196

PR Close #42297
2021-05-25 17:59:26 +00:00
mgechev c9bc88757b docs: embed the devtools video in the corresponding guide (#42161)
Allow people consume the content in a video format.

PR Close #42161
2021-05-20 16:55:16 +00:00
mgechev 53c10c325a docs: update the angular roadmap (#42050)
Update the Angular roadmap to reflect efforts in Q2 2021.

PR Close #42050
2021-05-12 20:46:33 -04:00
Pete Bacon Darwin 8e232e6d88 build(docs-infra): show a dist-tag when installing the CLI on non-stable versions (#41991)
It is important to use the correct major version of the Angular CLI when
following the examples in the tutorials. This commit provides a custom
element that renders an appropriate dist-tag in the setup step of
the tutorial when the docs are not in "stable" mode.

Fixes #39821

PR Close #41991
2021-05-10 16:10:33 -04:00
Pete Bacon Darwin adc732decb refactor(docs-infra): remove unused CSS rule (#41960)
The `.ngmodule-iist` is no longer used so can be removed.

PR Close #41960
2021-05-10 10:28:30 -04:00
Pete Bacon Darwin 3a48c0739d build(docs-infra): ensure that terminal code snippets render correctly (#41986)
After the changes to the `lang-none` styling in #41335, code snippets marked with

```
language="none" class="code-shell"
```

were being styled with the same foreground and background colours.

It turns out that most of these ought to be marked `language="sh"`
in which case the `code-shell` style became redundant and has been
removed.

Fixes #41984

PR Close #41986
2021-05-07 13:11:04 -04:00
Kapunahele Wong a4e3ea0311 feat(docs-infra): add support for unformatted code-snippets (#41335)
This commit adds support for skipping formatting in `<aio-code>`
elements (which are used by `<code-example>` and `<code-pane>` elements
under the hood) by specifying the `language` option as `'root'`.

This is useful for code-snippets that include plain text.

PR Close #41335
2021-05-06 15:03:44 -04:00
Alan Agius 4f20cd16b4 build(docs-infra): add `assert` polyfill (#41764)
With this change we add the `assert` polyfill which is required because `timezone-mock` is a Node.JS library which is being used in Browser.

PR Close #41764
2021-04-28 12:33:20 -07:00
Alan Agius 17ffb7480f build(docs-infra): update angular packages to `12.0.0-rc.0` (#41764)
Update Angular packages to `12.0.0-rc.0`

PR Close #41764
2021-04-28 12:33:20 -07:00
George Kalpakas 27ad7624d0 fix(docs-infra): fix external link icons positioning (#41794)
While trying to fix the appearance of `<code>` elements inside of
anchors with external URLs in #41694, the positioning of external link
icons was broken for anchors that would span multiple lines (see #41774
for details).

This commit fixes the positioning of external link icons, while still
preserving the correct appearance of `<code>` elements inside anchors
with external URLs.

NOTE:
Different types of links with external URLs can be seen in the following
docs sections:
- http://localhost:4200/docs#assumptions
- http://localhost:4200/guide/http#security-xsrf-protection
- http://localhost:4200/guide/workspace-config#generation-schematics

Fixes #41774

PR Close #41794
2021-04-26 09:24:04 -07:00
George Kalpakas 404ec48051 fix(docs-infra): fix code inside anchor elements with external URLs (#41694)
Previously, due to the `inline-flex` display style of anchor elements
with external URLs, `<code>` elements nested inside such anchor elements
would cause extra spacing between lines. An occurrence of this can be
seen in the [Angular workspace configuration][1] guide.

This commit fixes the problem by removing the `inline-flex` display
style (allowing anchor elements to fall back to the default `inline`
style).

For reference, the `inline-flex` style was introduced in commit
7944ee2c30 in order to avoid underlining
link icons. This style seems to no longer be necessary (either it was
never necessary or the underlying browser bug that made it necessary was
fixed).

Before: ![code links before][2]
After: ![code links after][3]

[1]: https://next.angular.io/guide/workspace-config#generation-schematics
[2]: https://user-images.githubusercontent.com/8604205/115149753-34589780-a06e-11eb-8d4e-825b5e94282d.png
[3]: https://user-images.githubusercontent.com/8604205/115149755-3589c480-a06e-11eb-9b15-825d75c74878.png

PR Close #41694
2021-04-19 08:32:08 -07:00
George Kalpakas 52bade5413 refactor(docs-infra): remove duplicate `ol` selector (#41694)
This commit removes a duplicate `ol` selector from `typography.scss`.

PR Close #41694
2021-04-19 08:32:08 -07:00
George Kalpakas f10a7e1f7e refactor(docs-infra): simplify regex in search WebWorker (#41693)
This commit simplifies a regex used in angular.io's search WebWorker. It
also updates some comments to add more context on what the code does.

PR Close #41693
2021-04-19 08:31:31 -07:00
Pete Bacon Darwin 14a64acb72 build(docs-infra): store search dictionary as a string (#41447)
Previously, the search index info file contained an array of strings that is
the dictionary of terms in the corpus.
Storing this as a space separated string reduces the size of the file.

PR Close #41447
2021-04-07 13:51:08 -07:00
Pete Bacon Darwin fccffc647b refactor(docs-infra): include more info in search index data (#41368)
The AIO search index is built in a WebWorker on the browser from a set
of page information that is downloaded as a JSON file (`search-data.json`).
We want to keep this file as small as possible while providing enough
data to generate a useful index to query against.

Previously, we only included one copy of each (non-ignored) term from each
doc but this prevents more subtle ranking of query results, since the number
of occurences of a term in a doc is lost.

This commit changes the generated file in the following ways:

- All non-ignored terms are now included in the order in which they appear
  in the doc.
- The terms are indexed into a dictonary to avoid the text of the term being
  repeated in every doc that contains the term.
- Each term is pre-"stemmed" using the same Porter Stemming algorith that the
  Lunr search engine uses.

The web-worker has been updated to decode the new format of the file.
Now that all terms are included, it may enable some level of phrase based
matching in the future.

The size of the generated file is considerably larger than previously, but
on production HTTP servers the data is sent compressed, which reduces the
size dramatically.

PR Close #41368
2021-04-01 12:02:37 -07:00
Pete Bacon Darwin 55f7f1d446 feat(docs-infra): improve search query processing (#41368)
This commit tries to improve the search results by processing
the query and attempting progressively less restrictive searches
until a non-zero set of pages is matched.

The new procesing includes:

* stripping off quote marks, which were causing searches to fail
* first attempting to match pages where ALL the query terms exist
* second attempting to match pages where ANY of the query terms exist
* third attempting to match pages where the title contains partial word matches

The first query attempt approximates, quite well, the idea of searching
for multi-word phrases. This is given the technical nature of the terms
and the fairly small size of the corpus.

PR Close #41368
2021-04-01 12:02:37 -07:00
George Kalpakas 3470ea17d5 fix(docs-infra): increase the max width of the `file-not-found` page (#41275)
Previously, the max width of the `file-not-found` page was limited to
50rem (800px by default). This allowed little space for showing
potentially helpful search results, which are shown in columns).

This commit increases the max width of the `file-not-found` page to
84rem (1344px by default) to allow search results to be visible without
requiring scrolling. This will not negatively affect UX, because the
page uses a multi-column layout and therefore there will rarely be long
lines of text to scan.

PR Close #41275
2021-04-01 11:36:44 -07:00
George Kalpakas 3cda3e6a32 fix(docs-infra): correctly show search results on narrow screens (#41275)
Previously, some part of the search results would be hidden and
inaccessible on narrow screens. This was caused by an issue with the
flexbox layout. See [here][1] for more info on the issue and the
available solutions.
NOTE: This issue affected both the search results shown when using the
search box (on the top right of the page) as well as the search results
shown in the `file-not-found` page.

This commit changes how the layout of search results is achieved to
ensure they are always accessible via scrolling on all screen sizes
(while keeping the same layout on larger screens).

Before: ![search results at 768px before][2]
After: ![search results at 768px after][3]

[1]: https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container#33455342
[2]: https://user-images.githubusercontent.com/8604205/111772790-efe2ac00-88b5-11eb-925d-a80faeaa5369.png
[3]: https://user-images.githubusercontent.com/8604205/111772810-f5d88d00-88b5-11eb-8b2a-60bdc3736ea3.png

PR Close #41275
2021-04-01 11:36:44 -07:00
George Kalpakas 8d457ab2e1 fix(docs-infra): fix `<code-tabs>` in IE11 (#41183)
Previously, `<code-tabs>` did not work correctly in IE11. More
specifically, due to how IE11 handles updates to `innerHTML`, the
contents of `<code-pane>` elements were cleared before we could capture
them and pass them to the `<aio-code>` components.

This commit fixes it by ensuring we capture the `<code-pane>` contents
before clearing unneeded HTML.

Before: ![code tabs in IE11 before][1]
After: ![code tabs in IE11 after][2]

[1]: https://user-images.githubusercontent.com/8604205/110815248-f4460e00-8292-11eb-868e-eca7ba5e9cd3.png
[2]: https://user-images.githubusercontent.com/8604205/110815253-f5773b00-8292-11eb-80a6-1a0b1ea44d8f.png

PR Close #41183
2021-03-12 13:22:57 -08:00
George Kalpakas ea00e2c0b4 fix(docs-infra): fix display of AngularJS logo on the "Press kit" page in IE11 (#41183)
Previously, the AngularJS SVG logo shown on the "Press kit" page was not
displayed correctly in IE11 (see the image below).

This commit fixes it by explicitly specifying the SVG `viewBox` on the
logo.

Before: ![presskit AngularJS logo in IE11 before][1]
After: ![presskit AngularJS logo in IE11 after][2]

[1]: https://user-images.githubusercontent.com/8604205/110812629-7123b880-8290-11eb-9f71-0ae910536fa5.png
[2]: https://user-images.githubusercontent.com/8604205/110812633-7254e580-8290-11eb-896c-84f595d273b8.png

PR Close #41183
2021-03-12 13:22:57 -08:00
George Kalpakas 0d1b3fe55e fix(docs-infra): fix the layout of the "Features" page in IE11 (#41183)
IE11 does not support `justify-content: space-evenly` and therefore
falls back to the default (`flex-start`), breaking the layout of the
items in the "Features" page (see the image below).

This commit fixes the layout by specifying `space-around` as a fallback
for `justify-content`, which keeps the layout closer to the intended.

Before: ![features page layout in IE11 before][1]
After: ![features page layout in IE11 after][2]

[1]: https://user-images.githubusercontent.com/8604205/110811038-045bee80-828f-11eb-8027-d5851762a5eb.png
[2]: https://user-images.githubusercontent.com/8604205/110811076-0a51cf80-828f-11eb-98a0-2f2928128dd0.png

PR Close #41183
2021-03-12 13:22:57 -08:00
George Kalpakas 5c0122f7fd fix(docs-infra): fix the layout of docs pages in IE11 (#41183)
IE11 does not recognize the `<main>` element as a block element and
therefore it does not apply margin/paddings/widths as expected. This
resulted in the layout of docs pages being broken in IE11 (see the image
below).

This commit fixes the layout by explicitly setting `.sidenav-content`
(which is a `<main>` element) to `display: block`.

Before: ![docs pages layout in IE11 before][1]
After: ![docs pages layout in IE11 after][2]

[1]: https://user-images.githubusercontent.com/8604205/110808902-1b014600-828d-11eb-9eef-c1234dc2d436.png
[2]: https://user-images.githubusercontent.com/8604205/110808907-1ccb0980-828d-11eb-91d9-06e5cfafc894.png

PR Close #41183
2021-03-12 13:22:57 -08:00
George Kalpakas 8c939dcb40 fix(docs-infra): fix angular.io on browsers that support Custom Elements but not ES2015 (#41183)
Before #41162, angular.io was broken on IE 11 due to missing a polyfill
for an API (`Reflect.construct()`) needed by the Custom Elements ES5
shim. #41162 tried to fix this by loading the necessary polyfill
(`es.reflect.construct.js`) on browsers that do not support ES2015
modules (including IE 11).

It turns out that the fix in #41162 was itself broken, because the
`es.reflect.consruct.js` script (included directly in the page via a
`<script>` tag) was in CommonJS format (which cannot run in the browser
as is). By chance, this still allowed browsers that supported neither
Custom Elements nor ES2015 modules (such as IE 11) to work correctly as
a side-effect of loading the `@webcomponents/custom-elements` polyfill
after the Custom Elements ES5 shim (`native-shim.js`). However, on the
few browsers that natively support Custom Elements but not ES2015
modules, angular.io would still be broken.

This commit correctly fixes angular.io on all browsers by properly
bundling the polyfills and transpiling to ES5.

Implementation-wise, we use [esbuild][1] for bundling the polyfills (and
converting from CommonJS to a browser-compatible, IIFE-based format) and
[swc][2] for downleveling the code to ES5 (since `esbuild` only supports
ES2015+).

[1]: https://esbuild.github.io/
[2]: https://swc.rs/

PR Close #41183
2021-03-12 13:22:57 -08:00
George Kalpakas e1e766a880 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
2021-03-11 09:30:03 -08:00
George Kalpakas 79e21b966e fix(docs-infra): fix angular.io on IE 11 (#41162)
Previously, the angular.io app was broken on IE 11. In particular, pages
that included Custom Elements would fail to load, because the
`Reflect.construct()` method (which the Custom Elements ES5 shim relies
on) was not available.

This commit fixes this by loading the polyfill for `Reflect.construct()`
on browsers that do not support ES2015 (including IE 11).

PR Close #41162
2021-03-11 09:25:32 -08:00