feat(docs-infra): Add opensearch description (#25479)

Enables Chrome users to search angular.io and its subdomains from the browsers navigation bar.
Not sure if compatible with Firefox yet.
The queried term in the URL is removed after closing the search-results.

PR Close #25479

.circleci/config.yml

@@ -150,7 +150,7 @@ jobs:
       - restore_cache:
           key: *cache_key
       - run: yarn install --frozen-lockfile --non-interactive
-      - run: ./aio/scripts/build-artifacts.sh $AIO_SNAPSHOT_ARTIFACT_PATH
+      - run: ./aio/scripts/build-artifacts.sh $AIO_SNAPSHOT_ARTIFACT_PATH $CIRCLE_PR_NUMBER $CIRCLE_SHA1
       - store_artifacts:
           path: *aio_preview_artifact_path
           # The `destination` needs to be kept in synch with the value of

aio/package.json

@@ -28,6 +28,7 @@
     "presetup-local": "yarn presetup",
     "setup-local": "yarn aio-use-local && yarn example-use-local",
     "postsetup-local": "yarn postsetup",
+    "set-opensearch-url": "node --eval \"const sh = require('shelljs'); sh.set('-e'); sh.sed('-i', /PLACEHOLDER_URL/g, process.argv[1], 'dist/assets/opensearch.xml');\"",
     "test-pwa-score-localhost": "concurrently --kill-others --success first \"http-server dist -p 4200 --silent\" \"yarn test-pwa-score http://localhost:4200 90\"",
     "test-pwa-score": "node scripts/test-pwa-score",
     "example-e2e": "yarn example-check-local && node ./tools/examples/run-example-e2e",

aio/scripts/build-artifacts.sh

@@ -6,11 +6,20 @@ source "`dirname $0`/../../scripts/ci/env.sh" print
 
 readonly INPUT_DIR=dist/
 readonly OUTPUT_FILE=$PROJECT_ROOT/$1
+readonly PR_NUMBER=$2
+readonly PR_LAST_SHA=$3
+readonly deployedUrl=https://pr${PR_NUMBER}-${PR_LAST_SHA:0:7}.ngbuilds.io/
+ 
 (
   cd $PROJECT_ROOT/aio
 
   # Build and store the app
   yarn build
+  
+  # Set deployedUrl as parameter in the opensearch description
+  # deployedUrl must end with /
+  yarn set-opensearch-url $deployedUrl
+
   mkdir -p "`dirname $OUTPUT_FILE`"
   tar --create --gzip --directory "$INPUT_DIR" --file "$OUTPUT_FILE" .
 )

aio/scripts/deploy-to-firebase.sh

@@ -92,6 +92,10 @@ fi
   # Include any mode-specific files
   cp -rf src/extra-files/$deployEnv/. dist/
 
+  # Set deployedUrl as parameter in the opensearch description
+  # deployedUrl must end with /
+  yarn set-opensearch-url $deployedUrl
+
   # Check payload size
   yarn payload-size
 

aio/src/app/app.component.ts

@@ -384,6 +384,7 @@ export class AppComponent implements OnInit {
 
   hideSearchResults() {
     this.showSearchResults = false;
+    this.locationService.setSearch('', {});
   }
 
   focusSearchBox() {

aio/src/assets/opensearch.xml

@@ -0,0 +1,9 @@
+<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
+                       xmlns:moz="http://www.mozilla.org/2006/browser/search/">
+<ShortName>Angular</ShortName>
+<Description>Search Angular</Description>
+<InputEncoding>UTF-8</InputEncoding>
+<Image width="16" height="16" type="image/x-icon">images/favicons/favicon-16x16.png</Image>
+<Url type="text/html" method="get" template="PLACEHOLDER_URL?search={searchTerms}"/>
+<moz:SearchForm>PLACEHOLDER_URL?search={searchTerms}</moz:SearchForm>
+</OpenSearchDescription>

aio/src/index.html

@@ -7,6 +7,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
+  <link rel="search" type="application/opensearchdescription+xml" href="assets/opensearch.xml">
   <link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico">
   <link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png"
         sizes="32x32">