Publish Stable

- @vercel/build-utils@2.15.0
 - vercel@24.0.1
 - @vercel/client@10.4.0
 - @vercel/frameworks@0.7.0
 - @vercel/go@1.3.1
 - @vercel/node-bridge@2.2.0
 - @vercel/node@1.14.0
 - @vercel/python@2.2.1
 - @vercel/redwood@0.6.0
 - @vercel/routing-utils@1.13.0
 - @vercel/ruby@1.3.1
 - @vercel/static-build@0.23.0

.eslintignore

@@ -2,17 +2,14 @@ node_modules
 dist
 examples
 
-# gatsby-plugin-now
+packages/node/src/bridge.ts
-packages/gatsby-plugin-now/test/fixtures
 
-# build-utils
+packages/*/test/fixtures
-packages/build-utils/test/fixtures
 
 # cli
 packages/cli/@types
 packages/cli/download
 packages/cli/dist
-packages/cli/test/fixtures
 packages/cli/test/dev/fixtures
 packages/cli/bin
 packages/cli/link
@@ -22,19 +19,19 @@ packages/cli/src/util/dev/templates/*.ts
 packages/client/tests/fixtures
 packages/client/lib
 
-# next
-packages/next/test/fixtures
-
-# node
-packages/node/src/bridge.ts
-packages/node/test/fixtures
-
 # node-bridge
-packages/node-bridge/bridge.*
+packages/node-bridge/bridge.js
+packages/node-bridge/launcher.js
+packages/node-bridge/helpers.js
+packages/node-bridge/source-map-support.js
+
+# middleware
+packages/middleware/src/entries.js
 
 # static-build
 packages/static-build/test/fixtures
 packages/static-build/test/build-fixtures
+packages/static-build/test/cache-fixtures
 
 # redwood
 packages/redwood/test/fixtures

.github/CODEOWNERS

@@ -4,24 +4,26 @@
 *                                        @TooTallNate
 /.github/workflows                       @AndyBitz @styfle
 /packages/frameworks                     @AndyBitz
-/packages/cli/src/commands/dev       @TooTallNate @styfle @AndyBitz
+/packages/cli/src/commands/build         @TooTallNate @styfle @AndyBitz @gdborton @jaredpalmer
-/packages/cli/src/util/dev           @TooTallNate @styfle @AndyBitz
+/packages/cli/src/commands/dev           @TooTallNate @styfle @AndyBitz
-/packages/cli/src/commands/domains   @javivelasco @mglagola @anatrajkovska
+/packages/cli/src/util/dev               @TooTallNate @styfle @AndyBitz
-/packages/cli/src/commands/certs     @javivelasco @mglagola @anatrajkovska
+/packages/cli/src/commands/domains       @javivelasco @mglagola @anatrajkovska
-/packages/cli/src/commands/env       @styfle @lucleray
+/packages/cli/src/commands/certs         @javivelasco @mglagola @anatrajkovska
-/packages/client                     @rdev @styfle @TooTallNate
+/packages/cli/src/commands/env           @styfle @lucleray
-/packages/build-utils                @styfle @AndyBitz @TooTallNate
+/packages/client                         @styfle @TooTallNate
-/packages/node                       @styfle @TooTallNate @lucleray
+/packages/build-utils                    @styfle @AndyBitz @TooTallNate
-/packages/node-bridge                @styfle @TooTallNate @lucleray
+/packages/middleware                     @gdborton @javivelasco
-/packages/next                       @Timer @ijjk
+/packages/node                           @styfle @TooTallNate @lucleray
-/packages/go                         @styfle @TooTallNate
+/packages/node-bridge                    @styfle @TooTallNate @lucleray
-/packages/python                     @styfle @TooTallNate
+/packages/next                           @Timer @ijjk
-/packages/ruby                       @styfle @coetry @TooTallNate
+/packages/go                             @styfle @TooTallNate
-/packages/static-build               @styfle @AndyBitz
+/packages/python                         @styfle @TooTallNate
-/packages/routing-utils              @styfle @dav-is @ijjk
+/packages/ruby                           @styfle @TooTallNate
-/examples                                @mcsdevv @timothyis
+/packages/static-build                   @styfle @AndyBitz
+/packages/routing-utils                  @styfle @dav-is @ijjk
+/examples                                @mcsdevv
 /examples/create-react-app               @Timer
 /examples/nextjs                         @timneutkens @Timer
-/examples/hugo                           @mcsdevv @timothyis @styfle
+/examples/hugo                           @mcsdevv @styfle
-/examples/jekyll                         @mcsdevv @timothyis @styfle
+/examples/jekyll                         @mcsdevv @styfle
-/examples/zola                           @mcsdevv @timothyis @styfle
+/examples/zola                           @mcsdevv @styfle

.github/CONTRIBUTING.md

@@ -2,11 +2,11 @@
 
 When contributing to this repository, please first discuss the change you wish to make via [GitHub Discussions](https://github.com/vercel/vercel/discussions/new) with the owners of this repository before submitting a Pull Request.
 
-Please read our [code of conduct](CODE_OF_CONDUCT.md) and follow it in all your interactions with the project.
+Please read our [Code of Conduct](CODE_OF_CONDUCT.md) and follow it in all your interactions with the project.
 
 ## Local development
 
-This project is configured in a monorepo pattern where one repo contains multiple npm packages. Dependencies are installed and managed with `yarn`, not `npm` CLI.
+This project is configured in a monorepo, where one repository contains multiple npm packages. Dependencies are installed and managed with `yarn`, not `npm` CLI.
 
 To get started, execute the following:
 
@@ -16,17 +16,17 @@ yarn install
 yarn bootstrap
 yarn build
 yarn lint
-yarn test
+yarn test-unit
 ```
 
 Make sure all the tests pass before making changes.
 
 ## Verifying your change
 
-Once you are done with your changes (we even suggest doing it along the way ), make sure all the test still run by running
+Once you are done with your changes (we even suggest doing it along the way), make sure all the test still pass by running:
 
 ```
-yarn build && yarn test
+yarn test-unit
 ```
 
 from the root of the project.
@@ -50,7 +50,7 @@ Unit tests are run locally with `jest` and execute quickly because they are test
 Integration tests create deployments to your Vercel account using the `test` project name. After each test is deployed, the `probes` key is used to check if the response is the expected value. If the value doesn't match, you'll see a message explaining the difference. If the deployment failed to build, you'll see a more generic message like the following:
 
 ```
-[Error: Fetched page https://test-8ashcdlew.now.sh/root.js does not contain hello Root!. Instead it contains An error occurred with this application.
+[Error: Fetched page https://test-8ashcdlew.vercel.app/root.js does not contain hello Root!. Instead it contains An error occurred with this application.
 
     NO_STATUS_CODE_FRO Response headers:
        cache-control=s-maxage=0
@@ -64,7 +64,7 @@ Integration tests create deployments to your Vercel account using the `test` pro
       x-now-trace=iad1]
 ```
 
-In such cases you can visit the URL of the failed deployment and append `/_logs` so see the build error. In the case above, that would be https://test-8ashcdlew.now.sh/_logs
+In such cases you can visit the URL of the failed deployment and append `/_logs` so see the build error. In the case above, that would be https://test-8ashcdlew.vercel.app/_logs
 
 The logs of this deployment will contain the actual error which may help you to understand what went wrong.
 

.github/EXAMPLE_README_TEMPLATE.md

@@ -1,12 +1,12 @@
 # [Name] Example
 
-This directory is a brief example of a [Name](site-link) site that can be deployed with Vercel and zero configuration.
+This directory is a brief example of a [Name](site-link) site that can be deployed to Vercel with zero configuration.
 
 ## Deploy Your Own
 
 Deploy your own [Name] project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/example-directory)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/example-directory)
 
 ### How We Created This Example
 

.github/ISSUE_TEMPLATE/config.yml

@@ -1,4 +1,4 @@
-blank_issues_enabled: false
+blank_issues_enabled: true
 contact_links:
   - name: Bug Report
     url: https://vercel.com/support/request

.github/workflows/cancel.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 2
     steps:
-      - uses: styfle/cancel-workflow-action@0.4.1
+      - uses: styfle/cancel-workflow-action@0.9.1
         with:
           workflow_id: 849295, 849296, 849297, 849298
           access_token: ${{ github.token }}

.github/workflows/publish.yml

@@ -12,23 +12,41 @@ jobs:
     name: Publish
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/setup-go@v2
+    - name: Checkout
+      uses: actions/checkout@v1
+    - name: Check Release
+      id: check-release
+      run: |
+        tag="$(git describe --tags --exact-match 2> /dev/null || :)"
+        if [[ -z "$tag" ]];
+          then
+            echo "::set-output name=IS_RELEASE::false"
+          else
+            echo "::set-output name=IS_RELEASE::true"
+        fi
+    - name: Setup Go
+      if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
+      uses: actions/setup-go@v2
       with:
         go-version: '1.13.15'
-    - uses: actions/setup-node@v2
+    - name: Setup Node
+      if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
+      uses: actions/setup-node@v2
       with:
-        node-version: 12
+        node-version: 14
-    - uses: actions/checkout@v1
     - name: Install
+      if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
       run: yarn install --check-files --frozen-lockfile --network-timeout 1000000
     - name: Build
+      if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
       run: yarn build
       env:
         GA_TRACKING_ID: ${{ secrets.GA_TRACKING_ID }}
         SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
     - name: Publish
+      if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
       run: yarn publish-from-github
       env:
-        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        NPM_TOKEN: ${{ secrets.NPM_TOKEN_ELEVATED }}
         GA_TRACKING_ID: ${{ secrets.GA_TRACKING_ID }}
         SENTRY_DSN: ${{ secrets.SENTRY_DSN }}

.github/workflows/test-integration-cli.yml

@@ -34,7 +34,7 @@ jobs:
       - run: git diff origin/main...HEAD --name-only
       - run: yarn install --network-timeout 1000000
       - run: yarn run build
-      - run: yarn test-integration-cli --clean false
+      - run: yarn test-integration-cli
         env:
           VERCEL_TEAM_TOKEN: ${{ secrets.VERCEL_TEAM_TOKEN }}
           VERCEL_REGISTRATION_URL: ${{ secrets.VERCEL_REGISTRATION_URL }}

.github/workflows/test-integration-dev.yml

@@ -11,7 +11,7 @@ on:
 jobs:
   test:
     name: Dev
-    timeout-minutes: 60
+    timeout-minutes: 75
     strategy:
       fail-fast: false
       matrix:
@@ -37,7 +37,7 @@ jobs:
         run: curl -L -O https://github.com/gohugoio/hugo/releases/download/v0.56.0/hugo_0.56.0_macOS-64bit.tar.gz && tar -xzf hugo_0.56.0_macOS-64bit.tar.gz && mv ./hugo packages/cli/test/dev/fixtures/08-hugo/
       - run: yarn install --network-timeout 1000000
       - run: yarn run build
-      - run: yarn test-integration-dev --clean false
+      - run: yarn test-integration-dev
         env:
           VERCEL_TEAM_TOKEN: ${{ secrets.VERCEL_TEAM_TOKEN }}
           VERCEL_REGISTRATION_URL: ${{ secrets.VERCEL_REGISTRATION_URL }}

.github/workflows/test-integration-once.yml

@@ -29,7 +29,7 @@ jobs:
       - run: git diff origin/main...HEAD --name-only
       - run: yarn install --network-timeout 1000000
       - run: yarn run build
-      - run: yarn test-integration-once --clean false
+      - run: yarn test-integration-once
         env:
           VERCEL_TEAM_TOKEN: ${{ secrets.VERCEL_TEAM_TOKEN }}
           VERCEL_REGISTRATION_URL: ${{ secrets.VERCEL_REGISTRATION_URL }}

.github/workflows/test-unit.yml

@@ -36,7 +36,7 @@ jobs:
       - run: yarn run build
       - run: yarn run lint
         if: matrix.os == 'ubuntu-latest' && matrix.node == 12 # only run lint once
-      - run: yarn run test-unit --clean false
+      - run: yarn run test-unit
       - run: yarn workspace vercel run coverage
         if: matrix.os == 'ubuntu-latest' && matrix.node == 12 # only run coverage once
         env:

.gitignore

@@ -27,3 +27,4 @@ test/lib/deployment/failed-page.txt
 /public
 __pycache__
 .vercel
+.turbo

DEVELOPING_A_RUNTIME.md

@@ -9,7 +9,6 @@ A Runtime is an npm module that implements the following interface:
 interface Runtime {
   version: number;
   build: (options: BuildOptions) => Promise<BuildResult>;
-  analyze?: (options: AnalyzeOptions) => Promise<string>;
   prepareCache?: (options: PrepareCacheOptions) => Promise<CacheOutputs>;
   shouldServe?: (options: ShouldServeOptions) => Promise<boolean>;
   startDevServer?: (
@@ -49,7 +48,7 @@ export const version = 3;
 
 A **required** exported function that returns a Serverless Function.
 
-> What's a Serverless Function? Read about [Serverless Functions](https://vercel.com/docs/v2/serverless-functions/introduction) to learn more.
+> What's a Serverless Function? Read about [Serverless Functions](https://vercel.com/docs/concepts/functions/serverless-functions) to learn more.
 
 **Example:**
 
@@ -72,26 +71,6 @@ export async function build(options: BuildOptions) {
 }
 ```
 
-### `analyze()`
-
-An **optional** exported function that returns a unique fingerprint used for the
-purpose of [build
-de-duplication](https://vercel.com/docs/v2/platform/deployments#deduplication).
-If the `analyze()` function is not supplied, then a random fingerprint is
-assigned to each build.
-
-**Example:**
-
-```typescript
-import { AnalyzeOptions } from '@vercel/build-utils';
-
-export async function analyze(options: AnalyzeOptions) {
-  // Do calculations to generate a fingerprint based off the source code here…
-
-  return 'fingerprint goes here';
-}
-```
-
 ### `prepareCache()`
 
 An **optional** exported function that is executed after [`build()`](#build) is
@@ -332,7 +311,7 @@ This is an abstract enumeration type that is implemented by one of the following
 - `nodejs10.x`
 - `go1.x`
 - `java11`
-- `python3.8`
+- `python3.9`
 - `python3.6`
 - `dotnetcore2.1`
 - `ruby2.5`
@@ -398,12 +377,12 @@ This utility allows you to _scan_ the filesystem and return a [`Files`](#files)
 The following trivial example downloads everything to the filesystem, only to return it back (therefore just re-creating the passed-in [`Files`](#files)):
 
 ```js
-const { glob, download } = require('@vercel/build-utils')
+const { glob, download } = require('@vercel/build-utils');
 
 exports.build = ({ files, workPath }) => {
-  await download(files, workPath)
+  await download(files, workPath);
-  return glob('**', workPath)
+  return glob('**', workPath);
-}
+};
 ```
 
 ### `getWritableDirectory()`

LICENSE

@@ -1,190 +1,202 @@
-                             Apache License
-                       Version 2.0, January 2004
-                    https://www.apache.org/licenses/
 
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
 
-1. Definitions.
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
 
-  "License" shall mean the terms and conditions for use, reproduction,
+   1. Definitions.
-  and distribution as defined by Sections 1 through 9 of this document.
 
-  "Licensor" shall mean the copyright owner or entity authorized by
+      "License" shall mean the terms and conditions for use, reproduction,
-  the copyright owner that is granting the License.
+      and distribution as defined by Sections 1 through 9 of this document.
 
-  "Legal Entity" shall mean the union of the acting entity and all
+      "Licensor" shall mean the copyright owner or entity authorized by
-  other entities that control, are controlled by, or are under common
+      the copyright owner that is granting the License.
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
 
-  "You" (or "Your") shall mean an individual or Legal Entity
+      "Legal Entity" shall mean the union of the acting entity and all
-  exercising permissions granted by this License.
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
 
-  "Source" form shall mean the preferred form for making modifications,
+      "You" (or "Your") shall mean an individual or Legal Entity
-  including but not limited to software source code, documentation
+      exercising permissions granted by this License.
-  source, and configuration files.
 
-  "Object" form shall mean any form resulting from mechanical
+      "Source" form shall mean the preferred form for making modifications,
-  transformation or translation of a Source form, including but
+      including but not limited to software source code, documentation
-  not limited to compiled object code, generated documentation,
+      source, and configuration files.
-  and conversions to other media types.
 
-  "Work" shall mean the work of authorship, whether in Source or
+      "Object" form shall mean any form resulting from mechanical
-  Object form, made available under the License, as indicated by a
+      transformation or translation of a Source form, including but
-  copyright notice that is included in or attached to the work
+      not limited to compiled object code, generated documentation,
-  (an example is provided in the Appendix below).
+      and conversions to other media types.
 
-  "Derivative Works" shall mean any work, whether in Source or Object
+      "Work" shall mean the work of authorship, whether in Source or
-  form, that is based on (or derived from) the Work and for which the
+      Object form, made available under the License, as indicated by a
-  editorial revisions, annotations, elaborations, or other modifications
+      copyright notice that is included in or attached to the work
-  represent, as a whole, an original work of authorship. For the purposes
+      (an example is provided in the Appendix below).
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
 
-  "Contribution" shall mean any work of authorship, including
+      "Derivative Works" shall mean any work, whether in Source or Object
-  the original version of the Work and any modifications or additions
+      form, that is based on (or derived from) the Work and for which the
-  to that Work or Derivative Works thereof, that is intentionally
+      editorial revisions, annotations, elaborations, or other modifications
-  submitted to Licensor for inclusion in the Work by the copyright owner
+      represent, as a whole, an original work of authorship. For the purposes
-  or by an individual or Legal Entity authorized to submit on behalf of
+      of this License, Derivative Works shall not include works that remain
-  the copyright owner. For the purposes of this definition, "submitted"
+      separable from, or merely link (or bind by name) to the interfaces of,
-  means any form of electronic, verbal, or written communication sent
+      the Work and Derivative Works thereof.
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
 
-  "Contributor" shall mean Licensor and any individual or Legal Entity
+      "Contribution" shall mean any work of authorship, including
-  on behalf of whom a Contribution has been received by Licensor and
+      the original version of the Work and any modifications or additions
-  subsequently incorporated within the Work.
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
 
-2. Grant of Copyright License. Subject to the terms and conditions of
+      "Contributor" shall mean Licensor and any individual or Legal Entity
-  this License, each Contributor hereby grants to You a perpetual,
+      on behalf of whom a Contribution has been received by Licensor and
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      subsequently incorporated within the Work.
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
 
-3. Grant of Patent License. Subject to the terms and conditions of
+   2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
+      this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
+      copyright license to reproduce, prepare Derivative Works of,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
+      publicly display, publicly perform, sublicense, and distribute the
-  where such license applies only to those patent claims licensable
+      Work and such Derivative Works in Source or Object form.
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
 
-4. Redistribution. You may reproduce and distribute copies of the
+   3. Grant of Patent License. Subject to the terms and conditions of
-  Work or Derivative Works thereof in any medium, with or without
+      this License, each Contributor hereby grants to You a perpetual,
-  modifications, and in Source or Object form, provided that You
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  meet the following conditions:
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
 
-  (a) You must give any other recipients of the Work or
+   4. Redistribution. You may reproduce and distribute copies of the
-      Derivative Works a copy of this License; and
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
 
-  (b) You must cause any modified files to carry prominent notices
+      (a) You must give any other recipients of the Work or
-      stating that You changed the files; and
+          Derivative Works a copy of this License; and
 
-  (c) You must retain, in the Source form of any Derivative Works
+      (b) You must cause any modified files to carry prominent notices
-      that You distribute, all copyright, patent, trademark, and
+          stating that You changed the files; and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
 
-  (d) If the Work includes a "NOTICE" text file as part of its
+      (c) You must retain, in the Source form of any Derivative Works
-      distribution, then any Derivative Works that You distribute must
+          that You distribute, all copyright, patent, trademark, and
-      include a readable copy of the attribution notices contained
+          attribution notices from the Source form of the Work,
-      within such NOTICE file, excluding those notices that do not
+          excluding those notices that do not pertain to any part of
-      pertain to any part of the Derivative Works, in at least one
+          the Derivative Works; and
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
 
-  You may add Your own copyright statement to Your modifications and
+      (d) If the Work includes a "NOTICE" text file as part of its
-  may provide additional or different license terms and conditions
+          distribution, then any Derivative Works that You distribute must
-  for use, reproduction, or distribution of Your modifications, or
+          include a readable copy of the attribution notices contained
-  for any such Derivative Works as a whole, provided Your use,
+          within such NOTICE file, excluding those notices that do not
-  reproduction, and distribution of the Work otherwise complies with
+          pertain to any part of the Derivative Works, in at least one
-  the conditions stated in this License.
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
 
-5. Submission of Contributions. Unless You explicitly state otherwise,
+      You may add Your own copyright statement to Your modifications and
-  any Contribution intentionally submitted for inclusion in the Work
+      may provide additional or different license terms and conditions
-  by You to the Licensor shall be under the terms and conditions of
+      for use, reproduction, or distribution of Your modifications, or
-  this License, without any additional terms or conditions.
+      for any such Derivative Works as a whole, provided Your use,
-  Notwithstanding the above, nothing herein shall supersede or modify
+      reproduction, and distribution of the Work otherwise complies with
-  the terms of any separate license agreement you may have executed
+      the conditions stated in this License.
-  with Licensor regarding such Contributions.
 
-6. Trademarks. This License does not grant permission to use the trade
+   5. Submission of Contributions. Unless You explicitly state otherwise,
-  names, trademarks, service marks, or product names of the Licensor,
+      any Contribution intentionally submitted for inclusion in the Work
-  except as required for reasonable and customary use in describing the
+      by You to the Licensor shall be under the terms and conditions of
-  origin of the Work and reproducing the content of the NOTICE file.
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
 
-7. Disclaimer of Warranty. Unless required by applicable law or
+   6. Trademarks. This License does not grant permission to use the trade
-  agreed to in writing, Licensor provides the Work (and each
+      names, trademarks, service marks, or product names of the Licensor,
-  Contributor provides its Contributions) on an "AS IS" BASIS,
+      except as required for reasonable and customary use in describing the
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      origin of the Work and reproducing the content of the NOTICE file.
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
 
-8. Limitation of Liability. In no event and under no legal theory,
+   7. Disclaimer of Warranty. Unless required by applicable law or
-  whether in tort (including negligence), contract, or otherwise,
+      agreed to in writing, Licensor provides the Work (and each
-  unless required by applicable law (such as deliberate and grossly
+      Contributor provides its Contributions) on an "AS IS" BASIS,
-  negligent acts) or agreed to in writing, shall any Contributor be
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  liable to You for damages, including any direct, indirect, special,
+      implied, including, without limitation, any warranties or conditions
-  incidental, or consequential damages of any character arising as a
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  result of this License or out of the use or inability to use the
+      PARTICULAR PURPOSE. You are solely responsible for determining the
-  Work (including but not limited to damages for loss of goodwill,
+      appropriateness of using or redistributing the Work and assume any
-  work stoppage, computer failure or malfunction, or any and all
+      risks associated with Your exercise of permissions under this License.
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
 
-9. Accepting Warranty or Additional Liability. While redistributing
+   8. Limitation of Liability. In no event and under no legal theory,
-  the Work or Derivative Works thereof, You may choose to offer,
+      whether in tort (including negligence), contract, or otherwise,
-  and charge a fee for, acceptance of support, warranty, indemnity,
+      unless required by applicable law (such as deliberate and grossly
-  or other liability obligations and/or rights consistent with this
+      negligent acts) or agreed to in writing, shall any Contributor be
-  License. However, in accepting such obligations, You may act only
+      liable to You for damages, including any direct, indirect, special,
-  on Your own behalf and on Your sole responsibility, not on behalf
+      incidental, or consequential damages of any character arising as a
-  of any other Contributor, and only if You agree to indemnify,
+      result of this License or out of the use or inability to use the
-  defend, and hold each Contributor harmless for any liability
+      Work (including but not limited to damages for loss of goodwill,
-  incurred by, or claims asserted against, such Contributor by reason
+      work stoppage, computer failure or malfunction, or any and all
-  of your accepting any such warranty or additional liability.
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
 
-END OF TERMS AND CONDITIONS
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
 
-Copyright 2017 Vercel, Inc.
+   END OF TERMS AND CONDITIONS
 
-Licensed under the Apache License, Version 2.0 (the "License");
+   APPENDIX: How to apply the Apache License to your work.
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
 
-   https://www.apache.org/licenses/LICENSE-2.0
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
 
-Unless required by applicable law or agreed to in writing, software
+   Copyright 2017 Vercel, Inc.
-distributed under the License is distributed on an "AS IS" BASIS,
+
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   Licensed under the Apache License, Version 2.0 (the "License");
-See the License for the specific language governing permissions and
+   you may not use this file except in compliance with the License.
-limitations under the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -3,32 +3,38 @@
     <img src="https://assets.vercel.com/image/upload/v1588805858/repositories/vercel/logo.png" height="96">
     <h3 align="center">Vercel</h3>
   </a>
-  <p align="center">Develop. Preview. Ship.</p>
 </p>
 
-[![CI Status](https://github.com/vercel/vercel/actions/workflows/test-unit.yml/badge.svg)](https://github.com/vercel/vercel/actions/workflows/test-unit.yml)
+<p align="center">
-[![Join the community on GitHub Discussions](https://badgen.net/badge/join%20the%20discussion/on%20github/black?icon=github)](https://github.com/vercel/vercel/discussions)
+  Develop. Preview. Ship.
+</p>
 
-## Usage
+<p align="center">
+  <a href="https://vercel.com/docs"><strong>Documentation</strong></a> ·
+  <a href="https://vercel.com/changelog"><strong>Changelog</strong></a> ·
+  <a href="https://vercel.com/templates"><strong>Templates</strong></a> ·
+  <a href="https://vercel.com/cli"><strong>CLI</strong></a>
+</p>
+<br/>
 
-Vercel is the optimal workflow for frontend teams. All-in-one: Static and Jamstack deployment, Serverless Functions, and Global CDN.
+## Vercel
 
-Get started by [Importing a Git Project](https://vercel.com/import) and use `git push` to deploy. Alternatively, you can [install Vercel CLI](https://vercel.com/download).
+Vercel is a platform for **static sites and frontend frameworks**, built to integrate with your headless content, commerce, or database.
+
+We provide a **frictionless developer experience** to take care of the hard things: deploy instantly, scale automatically, and serve personalized content around the globe.
+
+We make it easy for frontend teams to **develop, preview, and ship** delightful user experiences, where performance is the default.
+
+## Deploy
+
+Get started by [importing a project](https://vercel.com/new) or using the [Vercel CLI](https://vercel.com/cli). Then, `git push` to deploy.
 
 ## Documentation
 
 For details on how to use Vercel, check out our [documentation](https://vercel.com/docs).
 
-## Caught a Bug?
+## Contributing
 
-1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device
+- [Code of Conduct](https://github.com/vercel/vercel/blob/main/.github/CODE_OF_CONDUCT.md)
-2. Install dependencies with `yarn install`
+- [Contributing Guidelines](https://github.com/vercel/vercel/blob/main/.github/CONTRIBUTING.md)
-3. Compile the code: `yarn build`
+- [MIT License](https://github.com/vercel/vercel/blob/main/LICENSE)
-4. Link the package to the global module directory: `cd ./packages/cli && yarn link`
-5. You can start using `vercel` anywhere inside the command line
-
-As always, you should use `yarn test-unit` to run the tests and see if your changes have broken anything.
-
-## How to Create a Release
-
-If you have write access to this repository, you can read more about how to publish a release [here](https://github.com/vercel/vercel/wiki/Creating-a-Release).

api/_lib/examples/summary.ts

@@ -2,19 +2,19 @@
  * Get example list from extracted folder
  */
 
-import { join } from 'path';
 import { lstatSync, existsSync, readdirSync } from 'fs';
 
 const exists = (path: string) => existsSync(path);
 const isDotFile = (name: string) => name.startsWith('.');
 const isDirectory = (path: string) => lstatSync(path).isDirectory();
 
-export function summary(source: string) {
+export function summary(source: string): string[] {
   if (!exists(source) || !isDirectory(source)) {
     return [];
   }
 
-  return readdirSync(source)
+  return readdirSync(source, { withFileTypes: true })
-    .filter(name => !isDotFile(name))
+    .filter(d => !isDotFile(d.name))
-    .filter(name => isDirectory(join(source, name)));
+    .filter(d => d.isDirectory())
+    .map(d => d.name);
 }

api/_lib/script/build.ts

@@ -0,0 +1,46 @@
+import fs from 'fs/promises';
+import { join } from 'path';
+import { getExampleList } from '../examples/example-list';
+import { mapOldToNew } from '../examples/map-old-to-new';
+
+const repoRoot = join(__dirname, '..', '..', '..');
+const pubDir = join(repoRoot, 'public');
+
+async function main() {
+  console.log(`Building static frontend ${repoRoot}...`);
+
+  await fs.rm(pubDir, { recursive: true, force: true });
+  await fs.mkdir(pubDir);
+
+  const examples = await getExampleList();
+  const pathListAll = join(pubDir, 'list-all.json');
+  await fs.writeFile(pathListAll, JSON.stringify(examples));
+
+  const exampleDirs = await fs.readdir(join(repoRoot, 'examples'), {
+    withFileTypes: true,
+  });
+
+  const existingExamples = exampleDirs
+    .filter(dir => dir.isDirectory())
+    .map(dir => ({
+      name: dir.name,
+      visible: true,
+      suggestions: [],
+    }));
+
+  const oldExamples = Object.keys(mapOldToNew).map(key => ({
+    name: key,
+    visible: false,
+    suggestions: mapOldToNew[key],
+  }));
+
+  const pathList = join(pubDir, 'list.json');
+  await fs.writeFile(
+    pathList,
+    JSON.stringify([...existingExamples, ...oldExamples])
+  );
+
+  console.log('Completed building static frontend.');
+}
+
+main().catch(console.error);

api/examples/list-all.ts

@@ -1,10 +0,0 @@
-import { VercelRequest, VercelResponse } from '@vercel/node';
-import { getExampleList } from '../_lib/examples/example-list';
-import { withApiHandler } from '../_lib/util/with-api-handler';
-
-export default withApiHandler(async function (
-  req: VercelRequest,
-  res: VercelResponse
-) {
-  res.status(200).json(await getExampleList());
-});

api/examples/list.ts

@@ -1,27 +0,0 @@
-import { extract } from '../_lib/examples/extract';
-import { summary } from '../_lib/examples/summary';
-import { VercelRequest, VercelResponse } from '@vercel/node';
-import { mapOldToNew } from '../_lib/examples/map-old-to-new';
-import { withApiHandler } from '../_lib/util/with-api-handler';
-
-export default withApiHandler(async function (
-  req: VercelRequest,
-  res: VercelResponse
-) {
-  await extract('https://github.com/vercel/vercel/archive/main.zip', '/tmp');
-  const exampleList = summary('/tmp/vercel-main/examples');
-
-  const existingExamples = Array.from(exampleList).map(key => ({
-    name: key,
-    visible: true,
-    suggestions: [],
-  }));
-
-  const oldExamples = Object.keys(mapOldToNew).map(key => ({
-    name: key,
-    visible: false,
-    suggestions: mapOldToNew[key],
-  }));
-
-  res.status(200).json([...existingExamples, ...oldExamples]);
-});

api/frameworks.ts

@@ -14,9 +14,6 @@ const frameworks = (_frameworks as Framework[])
       sort: undefined,
       dependency: undefined,
       defaultRoutes: undefined,
-      cachePattern: undefined,
-      devCommand: undefined,
-      buildCommand: undefined,
     };
 
     if (framework.logo) {

api/package.json

@@ -5,7 +5,7 @@
   "description": "API for the vercel/vercel repo",
   "main": "index.js",
   "scripts": {
-    "vercel-build": "yarn --cwd .. && node ../utils/run.js build all"
+    "vercel-build": "node ../utils/run.js build all"
   },
   "dependencies": {
     "@sentry/node": "5.11.1",

codecov.yml

@@ -6,3 +6,5 @@ coverage:
     project: off
     patch: off
 
+fixes:
+  - "::packages/cli/"         # move root   e.g., "path/" => "after/path/"

errors/next-legacy-routes-optimized-lambdas.md

@@ -7,7 +7,7 @@ When legacy `routes` are added in `now.json` or `vercel.json`, they cause confli
 
 #### Possible Ways to Fix It
 
-Migrate from using legacy `routes` to the new `rewrites`, `redirects`, and `headers` configurations in your `now.json` or `vercel.json` file or leverage them directly in your `next.config.js` with the built-in [custom routes support](https://github.com/zeit/next.js/issues/9081)
+Migrate from using legacy `routes` to the new `rewrites`, `redirects`, and `headers` configurations in your `now.json` or `vercel.json` file or leverage them directly in your `next.config.js` with the built-in [custom routes support](https://github.com/vercel/next.js/issues/9081)
 
 ### Useful Links
 

errors/no-single-file-deployments.md

@@ -0,0 +1,9 @@
+# No Single File Deployments
+
+#### Why This Error Occurred
+
+You attempted to create a Vercel deployment where the input is a file, rather than a directory. Previously this was allowed, however this behavior has been removed as of Vercel CLI v24.0.0 because it exposed a potential security risk if the user accidentally created a deployment from a sensitive file.
+
+#### Possible Ways to Fix It
+
+- Run the `vercel deploy` command against a directory, instead of a file.

examples/README.md

@@ -1,28 +1,6 @@
 # Vercel Examples
 
-This is the public list of examples for **Vercel**.
+To get started using any of these examples as your own project, [install Vercel](https://vercel.com/cli) and use either of the following commands in your terminal:
-
-All of these ready to deploy examples feature a frontend framework or static site, created with zero configuration using the CLI tools they provide.
-
-The `+functions` examples feature an `/api` directory as well, highlighting how to use serverless functions on top of a framework, again with zero configuration required.
-
-## What is Vercel?
-
-Vercel is a cloud platform for static frontends and serverless functions. It enables developers to host websites and web applications that deploy instantly, scale automatically, and require no supervision.
-
-## What Does this Repository Contain?
-
-This repository consists of multiple examples, created for use with the [Vercel](https://vercel.com) platform. In addition to this, it also contains:
-
-- [Code of Conduct](https://github.com/vercel/vercel/blob/master/.github/CODE_OF_CONDUCT.md) - our Code of Conduct, adapted from the [Contributor Covenant](http://contributor-covenant.org)
-- [Contributing Guidelines](https://github.com/vercel/vercel/blob/master/.github/CONTRIBUTING.md) - a guide on how to contribute to the examples repository
-- [License](https://github.com/vercel/vercel/blob/master/LICENSE) - the standard MIT license under which these examples are published
-
-We recommend familiarizing yourself with the above sections, particularly if you are looking to make a contribution.
-
-## Deploying Examples
-
-To get started using any of these examples as your own project, [install Vercel](https://vercel.com/download) and use either of the following commands in your terminal:
 
 ```sh
 vercel init                    # Pick an example in the CLI
@@ -30,7 +8,7 @@ vercel init <example>          # Create a new project from a specific <example>
 vercel init <example> <name>   # Create a new project from a specific <example> with a different folder <name>
 ```
 
-Deploying your project takes seconds and can be done with **just a single command**:
+Deploying your project can be done with **a single command**:
 
 ```sh
 vercel                         # Deploy your project with the CLI
@@ -38,29 +16,9 @@ vercel                         # Deploy your project with the CLI
 
 With the `vercel` command, your project will be built and served by Vercel, providing you with a URL that can be shared immediately.
 
-## New Examples
-
-We are continuously improving our examples based on best practices and feedback from the community. As a result, it is possible that example names will change and on occasion deprecated in favor of an improved implementation.
-
-For example, the previous `nodejs` example showed a static frontend with a Node.js API. This is illustrated in the `svelte` example. Below is a table that lists some of the most popular previous examples and the equivalent replacement:
-
-| Previous Example  | New Example                                                                              |
-| ----------------- | ---------------------------------------------------------------------------------------- |
-| **monorepo**      | [gatsby-functions](https://github.com/vercel/vercel/tree/main/examples/gatsby)           |
-| **nodejs**        | [svelte-functions](https://github.com/vercel/vercel/tree/main/examples/svelte)           |
-| **nextjs-static** | [nextjs](https://github.com/vercel/vercel/tree/main/examples/nextjs)                     |
-| **vanilla-go**    | [create-react-app](https://github.com/vercel/vercel/tree/main/examples/create-react-app) |
-| **typescript**    | [gatsby-functions](https://github.com/vercel/vercel/tree/main/examples/gatsby)           |
-
-## Migrating and Upgrading
-
-If you have an existing project you would like to deploy with Vercel, we recommend reading our guide on [migrating to Vercel and zero configuration](https://vercel.com/guides/migrate-to-vercel). By combining the guide with this repository, you will quickly be able to understand how to deploy your application.
-
-If you would like to upgrade a project to take advantage of zero configuration, you may find the [upgrade guide](https://vercel.com/guides/upgrade-to-zero-configuration) useful. The upgrade guide covers how to remove configuration from existing projects along with how to use the `/api` directory.
-
 ## How to Contribute
 
-Contributing examples should be an enjoyable experience, as such we have created a set of [contributing guidelines](https://github.com/vercel/vercel/blob/master/.github/CONTRIBUTING.md) to help you do so.
+Contributing examples should be an enjoyable experience, as such we have created a set of [contributing guidelines](https://github.com/vercel/vercel/blob/main/.github/CONTRIBUTING.md) to help you do so.
 
 The guidelines cover important information such as the requirements for new examples and where to get help if you have any questions.
 
@@ -74,10 +32,6 @@ An issue can be raised by clicking the 'Issues' tab at the top of the repository
 
 When submitting an issue, please thoroughly and concisely describe the problem you are experiencing so that we may easily understand and resolve the issue in a timely manner.
 
-## License
-
-This repository is an open source project. See the [License](https://github.com/vercel/vercel/blob/master/LICENSE).
-
 ## Get In Touch
 
 If you have any questions that are not covered by raising an issue then please get in touch with us on [GitHub Discussions](https://github.com/vercel/vercel/discussions). There you will find both members of the community and staff who are happy to help answer questions on anything Vercel related.

examples/amp/README.md

@@ -1,14 +1,14 @@
 # AMP Example
 
-This directory is a brief example of an [AMP](https://amp.dev/) site that can be deployed with Vercel and zero configuration.
+This directory is a brief example of an [AMP](https://amp.dev/) site that can be deployed to Vercel with zero configuration.
 
 ## Deploy Your Own
 
 Deploy your own AMP project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/amp)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/amp)
 
-_Live Example: https://amp.now-examples.now.sh_
+_Live Example: https://amp-template.vercel.app_
 
 ### How We Created This Example
 

examples/angular/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

examples/angular/.gitignore

@@ -1,21 +1,18 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
-# compiled output
+# Compiled output
 /dist
 /tmp
 /out-tsc
-# Only exists if Bazel was run
 /bazel-out
 
-# dependencies
+# Node
 /node_modules
-
+npm-debug.log
-# profiling files
+yarn-error.log
-chrome-profiler-events.json
-speed-measure-plugin.json
 
 # IDEs and editors
-/.idea
+.idea/
 .project
 .classpath
 .c9/
@@ -23,7 +20,7 @@ speed-measure-plugin.json
 .settings/
 *.sublime-workspace
 
-# IDE - VSCode
+# Visual Studio Code
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
@@ -31,22 +28,16 @@ speed-measure-plugin.json
 !.vscode/extensions.json
 .history/*
 
-# misc
+# Miscellaneous
-/.sass-cache
+/.angular/cache
+.sass-cache/
 /connect.lock
 /coverage
 /libpeerconnection.log
-npm-debug.log
-yarn-error.log
 testem.log
 /typings
 
-# System Files
+# System files
 .DS_Store
 Thumbs.db
-
-# Environment Variables
-.env
-.env.build
-
 .vercel

examples/angular/README.md

@@ -1,21 +1,37 @@
-![Angular Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/angular.svg)
+# Angular
 
-# Angular Example
+This directory is a brief example of an [Angular](https://angular.io/) app that can be deployed to Vercel with zero configuration.
 
-This directory is a brief example of an [Angular](https://angular.io/) app that can be deployed with Vercel and zero configuration.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.3.
 
 ## Deploy Your Own
 
 Deploy your own Angular project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/angular)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/angular&template=angular)
 
-_Live Example: https://angular.now-examples.now.sh_
+_Live Example: https://angular-now-examples.vercel.app_
 
-### How We Created This Example
+## Development server
 
-To get started with Angular, you can use the [Angular CLI](https://cli.angular.io/) to initialize the project:
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
-```shell
+## Code scaffolding
-$ ng new
+
-```
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

examples/angular/angular.json

@@ -3,9 +3,13 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "angular": {
+    "my-app": {
       "projectType": "application",
-      "schematics": {},
+      "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
@@ -13,58 +17,69 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/angular",
+            "outputPath": "dist/my-app",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": false,
+            "assets": [
-            "assets": ["src/favicon.ico", "src/assets"],
+              "src/favicon.ico",
-            "styles": ["src/styles.css"],
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
             "scripts": []
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
+              "outputHashing": "all"
-              "outputHashing": "all",
+            },
-              "sourceMap": false,
+            "development": {
-              "extractCss": true,
+              "buildOptimizer": false,
-              "namedChunks": false,
+              "optimization": false,
-              "aot": true,
+              "vendorChunk": true,
-              "extractLicenses": true,
+              "extractLicenses": false,
-              "vendorChunk": false,
+              "sourceMap": true,
-              "buildOptimizer": true,
+              "namedChunks": true
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                }
-              ]
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "angular:build"
-          },
           "configurations": {
             "production": {
-              "browserTarget": "angular:build:production"
+              "browserTarget": "my-app:build:production"
+            },
+            "development": {
+              "browserTarget": "my-app:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "angular:build"
+            "browserTarget": "my-app:build"
           }
         },
         "test": {
@@ -74,36 +89,18 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
-            "styles": ["src/styles.css"],
+              "src/favicon.ico",
-            "scripts": []
+              "src/assets"
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "styles": [
-          }
+              "src/styles.css"
-        },
+            ],
-        "e2e": {
+            "scripts": []
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "angular:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "angular:serve:production"
-            }
           }
         }
       }
     }
   },
-  "defaultProject": "angular"
+  "defaultProject": "my-app"
 }

examples/angular/e2e/src/app.e2e-spec.ts

@@ -1,28 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
-
-describe('workspace-project App', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getTitleText()).toEqual('Welcome to angular!');
-  });
-
-  afterEach(async () => {
-    // Assert that there are no errors emitted from the browser
-    const logs = await browser
-      .manage()
-      .logs()
-      .get(logging.Type.BROWSER);
-    expect(logs).not.toContain(
-      jasmine.objectContaining({
-        level: logging.Level.SEVERE,
-      } as logging.Entry)
-    );
-  });
-});

examples/angular/karma.conf.js

@@ -1,7 +1,7 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
-module.exports = function(config) {
+module.exports = function (config) {
   config.set({
     basePath: '',
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
@@ -9,16 +9,28 @@ module.exports = function(config) {
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
+      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma'),
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
-    coverageIstanbulReporter: {
+    jasmineHtmlReporter: {
-      dir: require('path').join(__dirname, './coverage/angular'),
+      suppressAll: true // removes the duplicated traces
-      reports: ['html', 'lcovonly', 'text-summary'],
+    },
-      fixWebpackSourcePaths: true,
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/my-app'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
@@ -27,6 +39,6 @@ module.exports = function(config) {
     autoWatch: true,
     browsers: ['Chrome'],
     singleRun: false,
-    restartOnFileChange: true,
+    restartOnFileChange: true
   });
 };

examples/angular/package.json

@@ -1,48 +1,37 @@
 {
-  "name": "angular",
+  "private": true,
-  "version": "0.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "dev": "ng serve --port $PORT",
     "build": "ng build",
-    "test": "ng test",
+    "watch": "ng build --watch --configuration development",
-    "lint": "ng lint",
+    "test": "ng test"
-    "e2e": "ng e2e"
   },
-  "private": true,
   "dependencies": {
-    "@angular/animations": "~8.1.0",
+    "@angular/animations": "~13.1.0",
-    "@angular/common": "~8.1.0",
+    "@angular/common": "~13.1.0",
-    "@angular/compiler": "~8.1.0",
+    "@angular/compiler": "~13.1.0",
-    "@angular/core": "~8.1.0",
+    "@angular/core": "~13.1.0",
-    "@angular/forms": "~8.1.0",
+    "@angular/forms": "~13.1.0",
-    "@angular/platform-browser": "~8.1.0",
+    "@angular/platform-browser": "~13.1.0",
-    "@angular/platform-browser-dynamic": "~8.1.0",
+    "@angular/platform-browser-dynamic": "~13.1.0",
-    "@angular/router": "~8.1.0",
+    "@angular/router": "~13.1.0",
-    "rxjs": "~6.4.0",
+    "rxjs": "~7.4.0",
-    "tslib": "^1.9.0",
+    "tslib": "^2.3.0",
-    "zone.js": "~0.9.1"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.801.0",
+    "@angular-devkit/build-angular": "~13.1.3",
-    "@angular/cli": "~8.1.0",
+    "@angular/cli": "~13.1.3",
-    "@angular/compiler-cli": "~8.1.0",
+    "@angular/compiler-cli": "~13.1.0",
-    "@angular/language-service": "~8.1.0",
+    "@types/jasmine": "~3.10.0",
-    "@types/node": "~8.9.4",
+    "@types/node": "^12.11.1",
-    "@types/jasmine": "~3.3.8",
+    "jasmine-core": "~3.10.0",
-    "@types/jasminewd2": "~2.0.3",
+    "karma": "~6.3.0",
-    "codelyzer": "^5.0.0",
+    "karma-chrome-launcher": "~3.1.0",
-    "jasmine-core": "~3.4.0",
+    "karma-coverage": "~2.1.0",
-    "jasmine-spec-reporter": "~4.2.1",
+    "karma-jasmine": "~4.0.0",
-    "karma": "~4.1.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
-    "karma-chrome-launcher": "~2.2.0",
+    "typescript": "~4.5.2"
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
-    "protractor": "~5.4.0",
-    "ts-node": "~7.0.0",
-    "tslint": "~5.15.0",
-    "typescript": "~3.4.3"
   }
 }

examples/angular/src/app/app.component.html

@@ -1,20 +1,483 @@
-<!--The content below is only a placeholder and can be replaced.-->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<div style="text-align:center">
+<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
-  <h1>
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-    Welcome to {{ title }}!
+<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
-  </h1>
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
-</div>
+<!-- * * * * * * * to get started with your project! * * * * * * * * -->
-<h2>Here are some links to help you start: </h2>
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<ul>
+
-  <li>
+<style>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+  :host {
-  </li>
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  <li>
+    font-size: 14px;
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
+    color: #333;
-  </li>
+    box-sizing: border-box;
-  <li>
+    -webkit-font-smoothing: antialiased;
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
+    -moz-osx-font-smoothing: grayscale;
-  </li>
+  }
-</ul>
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 8px 0;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .spacer {
+    flex: 1;
+  }
+
+  .toolbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    background-color: #1976d2;
+    color: white;
+    font-weight: 600;
+  }
+
+  .toolbar img {
+    margin: 0 16px;
+  }
+
+  .toolbar #twitter-logo {
+    height: 40px;
+    margin: 0 8px;
+  }
+
+  .toolbar #youtube-logo {
+    height: 40px;
+    margin: 0 16px;
+  }
+
+  .toolbar #twitter-logo:hover,
+  .toolbar #youtube-logo:hover {
+    opacity: 0.8;
+  }
+
+  .content {
+    display: flex;
+    margin: 82px auto 32px;
+    padding: 0 16px;
+    max-width: 960px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  svg.material-icons {
+    height: 24px;
+    width: auto;
+  }
+
+  svg.material-icons:not(:last-child) {
+    margin-right: 8px;
+  }
+
+  .card svg.material-icons path {
+    fill: #888;
+  }
+
+  .card-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 16px;
+  }
+
+  .card {
+    all: unset;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    background-color: #fafafa;
+    height: 40px;
+    width: 200px;
+    margin: 0 8px 16px;
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.2s ease-in-out;
+    line-height: 24px;
+  }
+
+  .card-container .card:not(:last-child) {
+    margin-right: 0;
+  }
+
+  .card.card-small {
+    height: 16px;
+    width: 168px;
+  }
+
+  .card-container .card:not(.highlight-card) {
+    cursor: pointer;
+  }
+
+  .card-container .card:not(.highlight-card):hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
+  }
+
+  .card-container .card:not(.highlight-card):hover .material-icons path {
+    fill: rgb(105, 103, 103);
+  }
+
+  .card.highlight-card {
+    background-color: #1976d2;
+    color: white;
+    font-weight: 600;
+    border: none;
+    width: auto;
+    min-width: 30%;
+    position: relative;
+  }
+
+  .card.card.highlight-card span {
+    margin-left: 60px;
+  }
+
+  svg#rocket {
+    width: 80px;
+    position: absolute;
+    left: -10px;
+    top: -24px;
+  }
+
+  svg#rocket-smoke {
+    height: calc(100vh - 95px);
+    position: absolute;
+    top: 10px;
+    right: 180px;
+    z-index: -10;
+  }
+
+  a,
+  a:visited,
+  a:hover {
+    color: #1976d2;
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: #125699;
+  }
+
+  .terminal {
+    position: relative;
+    width: 80%;
+    max-width: 600px;
+    border-radius: 6px;
+    padding-top: 45px;
+    margin-top: 8px;
+    overflow: hidden;
+    background-color: rgb(15, 15, 16);
+  }
+
+  .terminal::before {
+    content: "\2022 \2022 \2022";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 4px;
+    background: rgb(58, 58, 58);
+    color: #c2c3c4;
+    width: 100%;
+    font-size: 2rem;
+    line-height: 0;
+    padding: 14px 0;
+    text-indent: 4px;
+  }
+
+  .terminal pre {
+    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+    color: white;
+    padding: 0 1rem 1rem;
+    margin: 0;
+  }
+
+  .circle-link {
+    height: 40px;
+    width: 40px;
+    border-radius: 40px;
+    margin: 8px;
+    background-color: white;
+    border: 1px solid #eeeeee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: 1s ease-out;
+  }
+
+  .circle-link:hover {
+    transform: translateY(-0.25rem);
+    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
+  }
+
+  footer {
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    line-height: 20px;
+  }
+
+  footer a {
+    display: flex;
+    align-items: center;
+  }
+
+  .github-star-badge {
+    color: #24292e;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    padding: 3px 10px;
+    border: 1px solid rgba(27,31,35,.2);
+    border-radius: 3px;
+    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
+    margin-left: 4px;
+    font-weight: 600;
+  }
+
+  .github-star-badge:hover {
+    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
+    border-color: rgba(27,31,35,.35);
+    background-position: -.5em;
+  }
+
+  .github-star-badge .material-icons {
+    height: 16px;
+    width: 16px;
+    margin-right: 4px;
+  }
+
+  svg#clouds {
+    position: fixed;
+    bottom: -160px;
+    left: -230px;
+    z-index: -10;
+    width: 1920px;
+  }
+
+  /* Responsive Styles */
+  @media screen and (max-width: 767px) {
+    .card-container > *:not(.circle-link) ,
+    .terminal {
+      width: 100%;
+    }
+
+    .card:not(.highlight-card) {
+      height: 16px;
+      margin: 8px 0;
+    }
+
+    .card.highlight-card span {
+      margin-left: 72px;
+    }
+
+    svg#rocket-smoke {
+      right: 120px;
+      transform: rotate(-5deg);
+    }
+  }
+
+  @media screen and (max-width: 575px) {
+    svg#rocket-smoke {
+      display: none;
+      visibility: hidden;
+    }
+  }
+</style>
+
+<!-- Toolbar -->
+<div class="toolbar" role="banner">
+  <img
+    width="40"
+    alt="Angular Logo"
+    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
+  />
+  <span>Welcome</span>
+    <div class="spacer"></div>
+    <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
+      <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
+        <rect width="400" height="400" fill="none"/>
+        <path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
+      </svg>
+    </a>
+    <a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
+      <svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
+        <path d="M0 0h24v24H0V0z" fill="none"/>
+        <path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
+      </svg>
+    </a>
+</div>
+
+<div class="content" role="main">
+
+  <!-- Highlight Card -->
+  <div class="card highlight-card card-small">
+
+    <svg id="rocket" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
+      <title>Rocket Ship</title>
+      <g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
+        <circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
+        <g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
+          <path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
+          <path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
+        </g>
+      </g>
+    </svg>
+
+    <span>{{ title }} app is running!</span>
+
+    <svg id="rocket-smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
+      <title>Rocket Ship Smoke</title>
+      <path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
+    </svg>
+
+  </div>
+
+  <!-- Resources -->
+  <h2>Resources</h2>
+  <p>Here are some links to help you get started:</p>
+
+  <div class="card-container">
+    <a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
+      <span>Learn Angular</span>
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>    </a>
+
+    <a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
+      <span>CLI Documentation</span>
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+    </a>
+
+    <a class="card" target="_blank" rel="noopener" href="https://material.angular.io">
+      <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px" width="21.813" height="23.453" viewBox="0 0 21.813 23.453"><path d="M4099.584,972.736h0l-10.882,3.9,1.637,14.4,9.245,5.153,9.245-5.153,1.686-14.4Z" transform="translate(-4088.702 -972.736)" fill="#808080"/><path d="M4181.516,972.736v23.453l9.245-5.153,1.686-14.4Z" transform="translate(-4170.633 -972.736)" fill="#808080"/><path d="M4137.529,1076.127l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1058.315)" fill="#ffe0b2"/><path d="M4137.529,1051.705l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1036.757)" fill="#fff3e0"/><path d="M4137.529,1027.283l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1015.199)" fill="#fff"/></svg>
+      <span>Angular Material</span>
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+    </a>
+
+    <a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
+      <span>Angular Blog</span>
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+    </a>
+
+    <a class="card" target="_blank" rel="noopener" href="https://angular.io/devtools/">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M14.73,13.31C15.52,12.24,16,10.93,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.43,0,2.74-0.48,3.81-1.27L19.59,21L21,19.59L14.73,13.31z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5 S11.99,14,9.5,14z"/><polygon points="10.29,8.44 9.5,6 8.71,8.44 6.25,8.44 8.26,10.03 7.49,12.5 9.5,10.97 11.51,12.5 10.74,10.03 12.75,8.44"/></g></g></svg>
+      <span>Angular DevTools</span>
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+    </a>
+
+  </div>
+
+  <!-- Next Steps -->
+  <h2>Next Steps</h2>
+  <p>What do you want to do next with your app?</p>
+
+  <input type="hidden" #selection>
+
+  <div class="card-container">
+    <button class="card card-small" (click)="selection.value = 'component'" tabindex="0">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+      <span>New Component</span>
+    </button>
+
+    <button class="card card-small" (click)="selection.value = 'material'" tabindex="0">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+      <span>Angular Material</span>
+    </button>
+
+    <button class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+      <span>Add PWA Support</span>
+    </button>
+
+    <button class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+      <span>Add Dependency</span>
+    </button>
+
+    <button class="card card-small" (click)="selection.value = 'test'" tabindex="0">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+      <span>Run and Watch Tests</span>
+    </button>
+
+    <button class="card card-small" (click)="selection.value = 'build'" tabindex="0">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+      <span>Build for Production</span>
+    </button>
+  </div>
+
+  <!-- Terminal -->
+  <div class="terminal" [ngSwitch]="selection.value">
+      <pre *ngSwitchDefault>ng generate component xyz</pre>
+      <pre *ngSwitchCase="'material'">ng add @angular/material</pre>
+      <pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
+      <pre *ngSwitchCase="'dependency'">ng add _____</pre>
+      <pre *ngSwitchCase="'test'">ng test</pre>
+      <pre *ngSwitchCase="'build'">ng build</pre>
+  </div>
+
+  <!-- Links -->
+  <div class="card-container">
+    <a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
+        <title>Meetup Logo</title>
+        <path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
+      </svg>
+    </a>
+
+    <a class="circle-link" title="Join the Conversation on Discord" href="https://discord.gg/angular" target="_blank" rel="noopener">
+      <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 245 240">
+        <title>Discord Logo</title>
+        <path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/>
+        <path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/>
+      </svg>
+    </a>
+  </div>
+
+  <!-- Footer -->
+  <footer>
+      Love Angular?&nbsp;
+      <a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
+        <div class="github-star-badge">
+            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
+          Star
+        </div>
+      </a>
+      <a href="https://github.com/angular/angular" target="_blank" rel="noopener">
+        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+      </a>
+  </footer>
+
+  <svg id="clouds" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
+    <title>Gray Clouds Background</title>
+    <path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
+  </svg>
+
+</div>
+
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
 

examples/angular/src/app/app.component.spec.ts

@@ -1,31 +1,31 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(async () => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
-      declarations: [AppComponent],
+      declarations: [
+        AppComponent
+      ],
     }).compileComponents();
-  }));
+  });
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'angular'`, () => {
+  it(`should have as title 'my-app'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
-    expect(app.title).toEqual('angular');
+    expect(app.title).toEqual('my-app');
   });
 
-  it('should render title in a h1 tag', () => {
+  it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
+    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1').textContent).toContain(
+    expect(compiled.querySelector('.content span')?.textContent).toContain('my-app app is running!');
-      'Welcome to angular!'
-    );
   });
 });

examples/angular/src/app/app.component.ts

@@ -3,8 +3,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'angular';
+  title = 'my-app';
 }

examples/angular/src/app/app.module.ts

@@ -1,12 +1,16 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [
-  imports: [BrowserModule],
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
   providers: [],
-  bootstrap: [AppComponent],
+  bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule { }

examples/angular/src/environments/environment.prod.ts

@@ -1,3 +1,3 @@
 export const environment = {
-  production: true,
+  production: true
 };

examples/angular/src/environments/environment.ts

@@ -1,9 +1,9 @@
 // This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
+  production: false
 };
 
 /*
@@ -13,4 +13,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

examples/angular/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Angular</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

examples/angular/src/main.ts

@@ -8,6 +8,5 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic()
+platformBrowserDynamic().bootstrapModule(AppModule)
-  .bootstrapModule(AppModule)
   .catch(err => console.error(err));

examples/angular/src/polyfills.ts

@@ -8,8 +8,8 @@
  *      file.
  *
  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
  *
  * Learn more in https://angular.io/guide/browser-support
  */
@@ -18,16 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
@@ -35,7 +25,7 @@
  * will put import in the top of bundle, so user need to create a separate file
  * in this directory (for example: zone-flags.ts), and put the following flags
  * into that file, and then add the following code before importing zone.js.
- * import './zone-flags.ts';
+ * import './zone-flags';
  *
  * The flags allowed in zone-flags.ts are listed here.
  *
@@ -55,7 +45,8 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
+
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

examples/angular/src/test.ts

@@ -1,19 +1,25 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
+  platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(),
 );
+
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.

examples/angular/tsconfig.app.json

@@ -1,9 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "include": ["src/**/*.ts"],
+  "files": [
-  "exclude": ["src/test.ts", "src/**/*.spec.ts"]
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
 }

examples/angular/tsconfig.json

@@ -1,21 +1,32 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
-    "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2017",
-    "typeRoots": ["node_modules/@types"],
+    "module": "es2020",
-    "lib": ["es2018", "dom"]
+    "lib": [
+      "es2020",
+      "dom"
+    ]
   },
   "angularCompilerOptions": {
-    "fullTemplateTypeCheck": true,
+    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
   }
 }

examples/angular/tsconfig.spec.json

@@ -1,9 +1,18 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": ["jasmine", "node"]
+    "types": [
+      "jasmine"
+    ]
   },
-  "files": ["src/test.ts", "src/polyfills.ts"],
+  "files": [
-  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
 }

examples/blitzjs/README.md

@@ -1,14 +1,14 @@
-![Blitz Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/blitz.svg)
+# Blitz.js
 
-# Blitz.js Example
+This directory is a brief example of a [Blitz.js](https://blitzjs.com/) project that can be deployed to Vercel with zero configuration.
-
-This directory is a brief example of a [Blitz.js](https://blitzjs.com/) project that can be deployed with Vercel and zero configuration.
 
 ## Deploy Your Own
 
 Deploy your own Blitz.js project with Vercel by viewing the [documentation on deploying to Vercel](https://blitzjs.com/docs/deploy-vercel)
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/blitzjs)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/blitzjs&template=blitzjs)
+
+_Live Example: https://blitz-template.vercel.app_
 
 ### How We Created This Example
 

examples/brunch/README.md

@@ -1,14 +1,14 @@
 # Brunch Example
 
-This directory is a brief example of a [Brunch](https://brunch.io/) site that can be deployed with Vercel and zero configuration.
+This directory is a brief example of a [Brunch](https://brunch.io/) site that can be deployed to Vercel with zero configuration.
 
 ## Deploy Your Own
 
 Deploy your own Brunch project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/brunch)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/brunch&template=brunch)
 
-_Live Example: https://brunch.now-examples.now.sh_
+_Live Example: https://brunch-template.vercel.app_
 
 ### How We Created This Example
 

examples/create-react-app/.vercelignore

@@ -1 +0,0 @@
-README.md

examples/create-react-app/README.md

@@ -1,21 +1,31 @@
-![React Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/react.svg)
+# Create React App
 
-# React Example
+This directory is a brief example of a [Create React App](https://github.com/facebook/create-react-app) site that can be deployed to Vercel with zero configuration.
-
-This directory is a brief example of a [React](https://reactjs.org/) app with [Serverless Functions](https://vercel.com/docs/v2/serverless-functions/introduction) that can be deployed with Vercel and zero configuration.
 
 ## Deploy Your Own
 
-Deploy your own React project, along with Serverless Functions, with Vercel.
+Deploy your own Create React App project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/create-react-app-functions)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/create-react-app&template=create-react-app)
 
-_Live Example: https://create-react-app.now-examples.now.sh/_
+_Live Example: https://create-react-template.vercel.app/_
 
-### How We Created This Example
+## Available Scripts
 
-To get started with React, along with [Serverless Functions](https://vercel.com/docs/v2/serverless-functions/introduction), with Vercel, you can use the [Create-React-App CLI](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app) to initialize the project:
+In the project directory, you can run:
 
-```shell
+### `npm start`
-$ npx create-react-app my-app
+
-```
+Runs the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes. You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode. See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.
+
+It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.

examples/create-react-app/api/date.go

@@ -1,12 +0,0 @@
-package handler
-
-import (
-	"fmt"
-	"net/http"
-	"time"
-)
-
-func Handler(w http.ResponseWriter, r *http.Request) {
-	currentTime := time.Now().Format(time.RFC850)
-	fmt.Fprintf(w, currentTime)
-}

examples/create-react-app/go.mod

@@ -1,3 +0,0 @@
-module example-date
-
-go 1.16

examples/create-react-app/package.json

@@ -1,22 +1,36 @@
 {
-  "name": "create-react-app",
-  "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.6.1",
+    "@testing-library/jest-dom": "^5.16.1",
-    "react-dom": "^16.6.1",
+    "@testing-library/react": "^12.1.2",
-    "react-scripts": "2.1.1"
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.0",
+    "web-vitals": "^2.1.3"
   },
   "scripts": {
-    "dev": "BROWSER=none react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "browserslist": [
+  "eslintConfig": {
-    ">0.2%",
+    "extends": [
-    "not dead",
+      "react-app",
-    "not ie <= 11",
+      "react-app/jest"
-    "not op_mini all"
+    ]
-  ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }

examples/create-react-app/public/index.html

@@ -2,15 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
     <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
-      manifest.json provides metadata used when your web app is added to the
+      manifest.json provides metadata used when your web app is installed on a
-      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
@@ -22,12 +24,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Create React App + Go API</title>
+    <title>React App</title>
   </head>
   <body>
-    <noscript>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
     <div id="root"></div>
     <!--
       This HTML file is a template.

examples/create-react-app/public/manifest.json

@@ -6,6 +6,16 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
     }
   ],
   "start_url": ".",

examples/create-react-app/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

examples/create-react-app/src/App.css

@@ -1,44 +1,38 @@
-main {
+.App {
-  align-content: center;
-  box-sizing: border-box;
-  display: grid;
-  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
-    'Arial', sans-serif;
-  hyphens: auto;
-  line-height: 1.65;
-  margin: 0 auto;
-  max-width: 680px;
-  min-height: 100vh;
-  padding: 72px 0;
   text-align: center;
 }
-h1 {
+
-  font-size: 45px;
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
 }
-h2 {
+
-  margin-top: 1.5em;
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
 }
-p {
+
-  font-size: 16px;
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
 }
-a {
+
-  border-bottom: 1px solid white;
+.App-link {
-  color: #0076ff;
+  color: #61dafb;
-  cursor: pointer;
-  text-decoration: none;
-  transition: all 0.2s ease;
 }
-a:hover {
+
-  border-bottom: 1px solid #0076ff;
+@keyframes App-logo-spin {
-}
+  from {
-code,
+    transform: rotate(0deg);
-pre {
+  }
-  color: #d400ff;
+  to {
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    transform: rotate(360deg);
-    Bitstream Vera Sans Mono, Courier New, monospace, serif;
+  }
-  font-size: 0.92em;
-}
-code:before,
-code:after {
-  content: '\`';
 }

examples/create-react-app/src/App.js

@@ -1,56 +1,24 @@
-import React from 'react';
+import logo from './logo.svg';
-import { useEffect, useState } from 'react';
 import './App.css';
 
 function App() {
-  const [date, setDate] = useState(null);
-  useEffect(() => {
-    async function getDate() {
-      const res = await fetch('/api/date');
-      const newDate = await res.text();
-      setDate(newDate);
-    }
-    getDate();
-  }, []);
   return (
-    <main>
+    <div className="App">
-      <h1>Create React App + Go API</h1>
+      <header className="App-header">
-      <h2>
+        <img src={logo} className="App-logo" alt="logo" />
-        Deployed with{' '}
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
         <a
-          href="https://vercel.com/docs"
+          className="App-link"
+          href="https://reactjs.org"
           target="_blank"
-          rel="noreferrer noopener"
+          rel="noopener noreferrer"
         >
-          Vercel
+          Learn React
         </a>
-        !
+      </header>
-      </h2>
+    </div>
-      <p>
-        <a
-          href="https://github.com/vercel/vercel/tree/main/examples/create-react-app"
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          This project
-        </a>{' '}
-        was bootstrapped with{' '}
-        <a href="https://facebook.github.io/create-react-app/">
-          Create React App
-        </a>{' '}
-        and contains three directories, <code>/public</code> for static assets,{' '}
-        <code>/src</code> for components and content, and <code>/api</code>{' '}
-        which contains a serverless <a href="https://golang.org/">Go</a>{' '}
-        function. See{' '}
-        <a href="/api/date">
-          <code>api/date</code> for the Date API with Go
-        </a>
-        .
-      </p>
-      <br />
-      <h2>The date according to Go is:</h2>
-      <p>{date ? date : 'Loading date...'}</p>
-    </main>
   );
 }
 

examples/create-react-app/src/App.test.js

@@ -1,9 +1,8 @@
-import React from 'react';
+import { render, screen } from '@testing-library/react';
-import ReactDOM from 'react-dom';
 import App from './App';
 
-it('renders without crashing', () => {
+test('renders learn react link', () => {
-  const div = document.createElement('div');
+  render(<App />);
-  ReactDOM.render(<App />, div);
+  const linkElement = screen.getByText(/learn react/i);
-  ReactDOM.unmountComponentAtNode(div);
+  expect(linkElement).toBeInTheDocument();
 });

examples/create-react-app/src/index.css

@@ -1,14 +1,13 @@
 body {
   margin: 0;
-  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }

examples/create-react-app/src/index.js

@@ -2,11 +2,16 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
+import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
 
-// If you want your app to work offline and load faster, you can change
+// If you want to start measuring performance in your app, pass a function
-// unregister() to register() below. Note this comes with some pitfalls.
+// to log results (for example: reportWebVitals(console.log))
-// Learn more about service workers: https://bit.ly/CRA-PWA
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-serviceWorker.unregister();
+reportWebVitals();

examples/create-react-app/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

examples/create-react-app/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

examples/create-react-app/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

examples/custom-build/.gitignore

@@ -1,6 +0,0 @@
-.now
-node_modules
-
-# Environment Variables
-.env
-.env.build

examples/custom-build/README.md

@@ -1,19 +0,0 @@
-# Custom Build Example
-
-This directory is a brief example of using a Custom Build script that can be deployed with Vercel and zero configuration.
-
-## Deploy Your Own
-
-Deploy your own Custom Built project with Vercel.
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/custom-build)
-
-_Live Example: https://custom-build.now-examples.now.sh_
-
-### How We Created This Example
-
-To get started deploying a Custom Built project with Vercel, you can use the [Vercel CLI](https://vercel.com/download) to initialize the project:
-
-```shell
-$ vercel init custom-build
-```

examples/custom-build/package.json

@@ -1,5 +0,0 @@
-{
-  "scripts": {
-    "build": "rm -rf public && mkdir public && echo 'Custom Build' > ./public/index.html"
-  }
-}

examples/docusaurus-2/README.md

@@ -1,12 +1,14 @@
-# Docusaurus Example
+# Docusaurus 2
 
-This directory is a brief example of a [Docusaurus](https://v2.docusaurus.io) site that can be deployed with Vercel and zero configuration.
+This directory is a brief example of a [Docusaurus](https://v2.docusaurus.io) site that can be deployed to Vercel with zero configuration.
 
 ## Deploy Your Own
 
 Deploy your own Docusaurus project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/docusaurus-2)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/docusaurus-2&template=docusaurus-2)
+
+_Live Example: https://docusaurus-2-template.vercel.app_
 
 ### How We Created This Example
 

examples/docusaurus/README.md

@@ -1,16 +1,16 @@
-![Docusaurus Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/docusaurus.svg)
+![Docusaurus Logo](https://github.com/vercel/vercel/blob/main/packages/frameworks/logos/docusaurus.svg)
 
 # Docusaurus Example
 
-This directory is a brief example of a [Docusaurus](https://docusaurus.io/) site that can be deployed with Vercel and zero configuration.
+This directory is a brief example of a [Docusaurus](https://docusaurus.io/) site that can be deployed to Vercel with zero configuration.
 
 ## Deploy Your Own
 
 Deploy your own Docusaurus project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/docusaurus)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/docusaurus&template=docusaurus)
 
-_Live Example: https://docusaurus.now-examples.now.sh_
+_Live Example: https://docusaurus-template.vercel.app_
 
 ### How We Created This Example
 

examples/dojo/README.md

@@ -1,12 +1,12 @@
 # Dojo Example
 
-This directory is a brief example of a [Dojo](https://dojo.io) site that can be deployed with Vercel and zero configuration.
+This directory is a brief example of a [Dojo](https://dojo.io) site that can be deployed to Vercel with zero configuration.
 
 ## Deploy Your Own
 
 Deploy your own Dojo project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/dojo)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/dojo&template=dojo)
 
 ### How We Created This Example
 

examples/eleventy/.eleventy.js

@@ -1,91 +1,136 @@
-const { DateTime } = require('luxon');
+const { DateTime } = require("luxon");
-const fs = require('fs');
+const fs = require("fs");
-const pluginRss = require('@11ty/eleventy-plugin-rss');
+const pluginRss = require("@11ty/eleventy-plugin-rss");
-const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
+const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const pluginNavigation = require("@11ty/eleventy-navigation");
+const markdownIt = require("markdown-it");
+const markdownItAnchor = require("markdown-it-anchor");
 
 module.exports = function(eleventyConfig) {
+  // Copy the `img` and `css` folders to the output
+  eleventyConfig.addPassthroughCopy("img");
+  eleventyConfig.addPassthroughCopy("css");
+
+  // Add plugins
   eleventyConfig.addPlugin(pluginRss);
   eleventyConfig.addPlugin(pluginSyntaxHighlight);
-  eleventyConfig.setDataDeepMerge(true);
+  eleventyConfig.addPlugin(pluginNavigation);
 
-  eleventyConfig.addLayoutAlias('post', 'layouts/post.njk');
+  // Alias `layout: post` to `layout: layouts/post.njk`
+  eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
 
-  eleventyConfig.addFilter('readableDate', dateObj => {
+  eleventyConfig.addFilter("readableDate", dateObj => {
-    return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat(
+    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat("dd LLL yyyy");
-      'dd LLL yyyy'
-    );
   });
 
   // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
-  eleventyConfig.addFilter('htmlDateString', dateObj => {
+  eleventyConfig.addFilter('htmlDateString', (dateObj) => {
-    return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat('yyyy-LL-dd');
+    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd');
   });
 
   // Get the first `n` elements of a collection.
-  eleventyConfig.addFilter('head', (array, n) => {
+  eleventyConfig.addFilter("head", (array, n) => {
-    if (n < 0) {
+    if(!Array.isArray(array) || array.length === 0) {
+      return [];
+    }
+    if( n < 0 ) {
       return array.slice(n);
     }
 
     return array.slice(0, n);
   });
 
-  eleventyConfig.addCollection('tagList', require('./_11ty/getTagList'));
+  // Return the smallest number argument
+  eleventyConfig.addFilter("min", (...numbers) => {
+    return Math.min.apply(null, numbers);
+  });
 
-  eleventyConfig.addPassthroughCopy('img');
+  function filterTagList(tags) {
-  eleventyConfig.addPassthroughCopy('css');
+    return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1);
+  }
 
-  /* Markdown Plugins */
+  eleventyConfig.addFilter("filterTagList", filterTagList)
-  let markdownIt = require('markdown-it');
+
-  let markdownItAnchor = require('markdown-it-anchor');
+  // Create an array of all tags
-  let options = {
+  eleventyConfig.addCollection("tagList", function(collection) {
+    let tagSet = new Set();
+    collection.getAll().forEach(item => {
+      (item.data.tags || []).forEach(tag => tagSet.add(tag));
+    });
+
+    return filterTagList([...tagSet]);
+  });
+
+  // Customize Markdown library and settings:
+  let markdownLibrary = markdownIt({
     html: true,
     breaks: true,
-    linkify: true,
+    linkify: true
-  };
+  }).use(markdownItAnchor, {
-  let opts = {
+    permalink: markdownItAnchor.permalink.ariaHidden({
-    permalink: true,
+      placement: "after",
-    permalinkClass: 'direct-link',
+      class: "direct-link",
-    permalinkSymbol: '#',
+      symbol: "#",
-  };
+      level: [1,2,3,4],
-
+    }),
-  eleventyConfig.setLibrary(
+    slugify: eleventyConfig.getFilter("slug")
-    'md',
+  });
-    markdownIt(options).use(markdownItAnchor, opts)
+  eleventyConfig.setLibrary("md", markdownLibrary);
-  );
 
+  // Override Browsersync defaults (used only with --serve)
   eleventyConfig.setBrowserSyncConfig({
     callbacks: {
       ready: function(err, browserSync) {
         const content_404 = fs.readFileSync('_site/404.html');
 
-        browserSync.addMiddleware('*', (req, res) => {
+        browserSync.addMiddleware("*", (req, res) => {
           // Provides the 404 content without redirect.
+          res.writeHead(404, {"Content-Type": "text/html; charset=UTF-8"});
           res.write(content_404);
           res.end();
         });
       },
     },
+    ui: false,
+    ghostMode: false
   });
 
   return {
-    templateFormats: ['md', 'njk', 'html', 'liquid'],
+    // Control which files Eleventy will process
+    // e.g.: *.md, *.njk, *.html, *.liquid
+    templateFormats: [
+      "md",
+      "njk",
+      "html",
+      "liquid"
+    ],
+
+    // Pre-process *.md files with: (default: `liquid`)
+    markdownTemplateEngine: "njk",
+
+    // Pre-process *.html files with: (default: `liquid`)
+    htmlTemplateEngine: "njk",
+
+    // -----------------------------------------------------------------
+    // If your site deploys to a subdirectory, change `pathPrefix`.
+    // Don’t worry about leading and trailing slashes, we normalize these.
 
-    // If your site lives in a different subdirectory, change this.
-    // Leading or trailing slashes are all normalized away, so don’t worry about it.
     // If you don’t have a subdirectory, use "" or "/" (they do the same thing)
-    // This is only used for URLs (it does not affect your file structure)
+    // This is only used for link URLs (it does not affect your file structure)
-    pathPrefix: '/',
+    // Best paired with the `url` filter: https://www.11ty.dev/docs/filters/url/
 
-    markdownTemplateEngine: 'liquid',
+    // You can also pass this in on the command line using `--pathprefix`
-    htmlTemplateEngine: 'njk',
+
-    dataTemplateEngine: 'njk',
+    // Optional (default is shown)
-    passthroughFileCopy: true,
+    pathPrefix: "/",
+    // -----------------------------------------------------------------
+
+    // These are all optional (defaults are shown):
     dir: {
-      input: '.',
+      input: ".",
-      includes: '_includes',
+      includes: "_includes",
-      data: '_data',
+      data: "_data",
-      output: '_site',
+      output: "_site"
-    },
+    }
   };
 };

examples/eleventy/.eleventyignore

@@ -1,2 +1 @@
 README.md
-_11ty/

examples/eleventy/.gitignore

@@ -1,4 +1,5 @@
-node_modules
+_site/
-.env
+node_modules/
-.env.build
+package-lock.json
-_site/
+
+.vercel

examples/eleventy/.nvmrc

@@ -1 +1 @@
-8
+12

examples/eleventy/404.md

@@ -3,12 +3,11 @@ layout: layouts/home.njk
 permalink: 404.html
 eleventyExcludeFromCollections: true
 ---
-
 # Content not found.
 
 Go <a href="{{ '/' | url }}">home</a>.
 
-{% comment %}
+{#
-Read more: https://www.11ty.io/docs/quicktips/not-found/
+Read more: https://www.11ty.dev/docs/quicktips/not-found/
-
+Vercel docs: https://vercel.com/guides/custom-404-page
-{% endcomment %}
+#}

examples/eleventy/LICENSE.md

@@ -0,0 +1,20 @@
+MIT License
+Copyright (c) 2022 Zach Leatherman @zachleat
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

examples/eleventy/README.md

@@ -1,21 +1,70 @@
-![Eleventy Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/eleventy.svg)
+# Eleventy
 
-# Eleventy Example
+This directory is a brief example of a [Eleventy](https://www.11ty.io/) site that can be deployed to Vercel with zero configuration.
-
-This directory is a brief example of a [Eleventy](https://www.11ty.io/) site that can be deployed with Vercel and zero configuration.
 
 ## Deploy Your Own
 
 Deploy your own Eleventy project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/eleventy)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/eleventy&template=eleventy)
 
-_Live Example: https://eleventy.now-examples.now.sh_
+_Live Example: https://eleventy-template.vercel.app_
 
-### How We Created This Example
+## Getting Started
 
-To get started with Eleventy for deployment with Vercel, you can use [npx](https://www.npmjs.com/package/npx) to initialize the project:
+### 1. Clone this Repository
 
-```shell
-$ npx degit 11ty/eleventy-base-blog my-11ty-project
 ```
+git clone https://github.com/11ty/eleventy-base-blog.git my-blog-name
+```
+
+### 2. Navigate to the directory
+
+```
+cd my-blog-name
+```
+
+Specifically have a look at `.eleventy.js` to see if you want to configure any Eleventy options differently.
+
+### 3. Install dependencies
+
+```
+npm install
+```
+
+### 4. Edit _data/metadata.json
+
+### 5. Run Eleventy
+
+```
+npx eleventy
+```
+
+Or build and host locally for local development
+```
+npx eleventy --serve
+```
+
+Or build automatically when a template changes:
+```
+npx eleventy --watch
+```
+
+Or in debug mode:
+```
+DEBUG=* npx eleventy
+```
+
+### Implementation Notes
+
+* `about/index.md` shows how to add a content page.
+* `posts/` has the blog posts but really they can live in any directory. They need only the `post` tag to be added to this collection.
+* Add the `nav` tag to add a template to the top level site navigation. For example, this is in use on `index.njk` and `about/index.md`.
+* Content can be any template format (blog posts needn’t be markdown, for example). Configure your supported templates in `.eleventy.js` -> `templateFormats`.
+	* Because `css` and `png` are listed in `templateFormats` but are not supported template types, any files with these extensions will be copied without modification to the output (while keeping the same directory structure).
+* The blog post feed template is in `feed/feed.njk`. This is also a good example of using a global data files in that it uses `_data/metadata.json`.
+* This example uses three layouts:
+  * `_includes/layouts/base.njk`: the top level HTML structure
+  * `_includes/layouts/home.njk`: the home page template (wrapped into `base.njk`)
+  * `_includes/layouts/post.njk`: the blog post template (wrapped into `base.njk`)
+* `_includes/postlist.njk` is a Nunjucks include and is a reusable component used to display a list of all the posts. `index.njk` has an example of how to use it.

examples/eleventy/_data/metadata.json

@@ -1,16 +1,21 @@
 {
   "title": "Your Blog Name",
-  "url": "https://myurl.com/",
+  "url": "https://example.com/",
+  "language": "en",
   "description": "I am writing about my experiences as a naval navel-gazer.",
   "feed": {
     "subtitle": "I am writing about my experiences as a naval navel-gazer.",
     "filename": "feed.xml",
     "path": "/feed/feed.xml",
-    "url": "https://myurl.com/feed/feed.xml",
+    "id": "https://example.com/"
-    "id": "https://myurl.com/"
+  },
+  "jsonfeed": {
+    "path": "/feed/feed.json",
+    "url": "https://example.com/feed/feed.json"
   },
   "author": {
     "name": "Your Name Here",
-    "email": "youremailaddress@example.com"
+    "email": "youremailaddress@example.com",
+    "url": "https://example.com/about-me/"
   }
 }

examples/eleventy/_includes/layouts/base.njk

@@ -3,31 +3,37 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ renderData.title or title or metadata.title }}</title>
+    <title>{{ title or metadata.title }}</title>
-    <meta name="Description" content="{{ renderData.description or description or metadata.description }}">
+    <meta name="description" content="{{ description or metadata.description }}">
     <link rel="stylesheet" href="{{ '/css/index.css' | url }}">
     <link rel="stylesheet" href="{{ '/css/prism-base16-monokai.dark.css' | url }}">
     <link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
+    <link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}">
   </head>
   <body>
     <header>
       <h1 class="home"><a href="{{ '/' | url }}">{{ metadata.title }}</a></h1>
+
+      {#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
       <ul class="nav">
-        {%- for nav in collections.nav | reverse -%}
+      {%- for entry in collections.all | eleventyNavigation %}
-        <li class="nav-item{% if nav.url == page.url %} nav-item-active{% endif %}"><a href="{{ nav.url | url }}">{{ nav.data.navtitle }}</a></li>
+        <li class="nav-item{% if entry.url == page.url %} nav-item-active{% endif %}"><a href="{{ entry.url | url }}">{{ entry.title }}</a></li>
-        {%- endfor -%}
+      {%- endfor %}
       </ul>
     </header>
 
     <main{% if templateClass %} class="{{ templateClass }}"{% endif %}>
+
+      <!-- Delete this message -->
       <div class="warning">
         <ol>
           <li>Edit the <code>_data/metadata.json</code> with your blog’s information.</li>
-          <li>(Optional) Edit <code>.eleventy.js</code> with your configuration preferences.</li>
+          <li>(Optional) Edit <code>.eleventy.js</code> with your <a href="https://www.11ty.dev/docs/config/">configuration preferences</a>.</li>
           <li>Delete this message from <code>_includes/layouts/base.njk</code>.</li>
         </ol>
-        <p><em>This is an <a href="https://www.11ty.io/">Eleventy project</a> created from the <a href="https://github.com/11ty/eleventy-base-blog"><code>eleventy-base-blog</code> repo</a>.</em></p>
+        <p><em>This is an <a href="https://www.11ty.dev/">Eleventy project</a> created from the <a href="https://github.com/11ty/eleventy-base-blog"><code>eleventy-base-blog</code> repo</a>.</em></p>
       </div>
+      <!-- Stop deleting -->
 
       {{ content | safe }}
     </main>

examples/eleventy/_includes/layouts/post.njk

@@ -4,6 +4,22 @@ templateClass: tmpl-post
 ---
 <h1>{{ title }}</h1>
 
+<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
+{%- for tag in tags | filterTagList -%}
+{%- set tagUrl %}/tags/{{ tag | slug }}/{% endset -%}
+<a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
+{%- endfor %}
+
 {{ content | safe }}
 
-<p><a href="{{ '/' | url }}">← Home</a></p>
+{%- if collections.posts %}
+{%- set nextPost = collections.posts | getNextCollectionItem(page) %}
+{%- set previousPost = collections.posts | getPreviousCollectionItem(page) %}
+{%- if nextPost or previousPost %}
+<hr>
+<ul>
+  {%- if nextPost %}<li>Next: <a href="{{ nextPost.url | url }}">{{ nextPost.data.title }}</a></li>{% endif %}
+  {%- if previousPost %}<li>Previous: <a href="{{ previousPost.url | url }}">{{ previousPost.data.title }}</a></li>{% endif %}
+</ul>
+{%- endif %}
+{%- endif %}

examples/eleventy/_includes/postslist.njk

@@ -1,13 +1,11 @@
-<ol reversed class="postlist" style="counter-reset: start-from {{ postslist.length + 1 }}">
+<ol reversed class="postlist" style="counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }}">
 {% for post in postslist | reverse %}
   <li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
     <a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
     <time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
-    {% for tag in post.data.tags %}
+    {% for tag in post.data.tags | filterTagList %}
-      {%- if tag != "posts" -%}
+      {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
-      {% set tagUrl %}/tags/{{ tag }}/{% endset %}
+      <a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
-      <a href="{{ tagUrl | url }}" class="tag">{{ tag }}</a>
-      {%- endif -%}
     {% endfor %}
   </li>
 {% endfor %}

examples/eleventy/about/index.md

@@ -1,10 +1,10 @@
 ---
 layout: layouts/post.njk
 title: About Me
-tags:
-  - nav
-navtitle: About
 templateClass: tmpl-post
+eleventyNavigation:
+  key: About Me
+  order: 3
 ---
 
 I am a person that writes stuff.

examples/eleventy/archive.njk

@@ -1,9 +1,9 @@
 ---
 layout: layouts/home.njk
-tags:
-  - nav
-navtitle: Archive
 permalink: /posts/
+eleventyNavigation:
+  key: Archive
+  order: 2
 ---
 
 <h1>Archive</h1>

examples/eleventy/css/index.css

@@ -1,6 +1,5 @@
+/* Colors */
 :root {
-  --red: #C5004A;
-  --darkred: #7F0036;
   --lightgray: #e0e0e0;
   --gray: #C0C0C0;
   --darkgray: #333;
@@ -8,14 +7,17 @@
   --blue: #082840;
   --white: #fff;
 }
+
+/* Global stylesheet */
 * {
   box-sizing: border-box;
 }
+
 html,
 body {
   padding: 0;
   margin: 0;
-  font-family: sans-serif;
+  font-family: -apple-system, system-ui, sans-serif;
   color: var(--darkgray);
   background-color: var(--white);
 }
@@ -83,6 +85,9 @@ pre {
   margin: .5em 0;
   background-color: #f6f6f6;
 }
+code {
+  word-break: break-all;
+}
 .highlight-line {
   display: block;
   padding: 0.125em 1em;
@@ -150,7 +155,11 @@ pre {
   padding: 0;
 }
 .postlist-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
   counter-increment: start-from -1;
+  line-height: 1.8;
 }
 .postlist-item:before {
   display: inline-block;
@@ -168,8 +177,11 @@ pre {
   word-spacing: -0.5px;
 }
 .postlist-link {
-  display: inline-block;
+  padding-left: .25em;
-  padding: 0.25em 0.1875em; /* 4px 3px /16 */
+  padding-right: .25em;
+  text-underline-position: from-font;
+  text-underline-offset: 0;
+  text-decoration-thickness: 1px;
 }
 .postlist-item-active .postlist-link {
   font-weight: bold;
@@ -181,21 +193,32 @@ pre {
 
 
 /* Tags */
-.tag {
+.post-tag {
-  display: inline-block;
+  display: inline-flex;
-  vertical-align: text-top;
+  align-items: center;
+  justify-content: center;
   text-transform: uppercase;
-  font-size: 0.625em; /* 10px /16 */
+  font-size: 0.75em; /* 12px /16 */
-  padding: 2px 4px;
+  padding: 0.08333333333333em 0.3333333333333em; /* 1px 4px /12 */
-  margin-left: 0.8em; /* 8px /10 */
+  margin-left: 0.6666666666667em; /* 8px /12 */
-  background-color: var(--red);
+  margin-top: 0.5em; /* 6px /12 */
-  color: var(--white);
+  margin-bottom: 0.5em; /* 6px /12 */
+  color: var(--darkgray);
+  border: 1px solid var(--gray);
   border-radius: 0.25em; /* 3px /12 */
   text-decoration: none;
+  line-height: 1.8;
 }
-a[href].tag,
+a[href].post-tag,
-a[href].tag:visited {
+a[href].post-tag:visited {
-  color: #fff;
+  color: inherit;
+}
+a[href].post-tag:hover,
+a[href].post-tag:focus {
+  background-color: var(--lightgray);
+}
+.postlist-item > .post-tag {
+  align-self: center;
 }
 
 /* Warning */

examples/eleventy/feed/feed.njk

@@ -1,12 +1,14 @@
 ---
-permalink: feed/feed.xml
+# Metadata comes from _data/metadata.json
+permalink: "{{ metadata.feed.path }}"
 eleventyExcludeFromCollections: true
 ---
 <?xml version="1.0" encoding="utf-8"?>
 <feed xmlns="http://www.w3.org/2005/Atom">
 	<title>{{ metadata.title }}</title>
 	<subtitle>{{ metadata.feed.subtitle }}</subtitle>
-	<link href="{{ metadata.feed.url }}" rel="self"/>
+	{% set absoluteUrl %}{{ metadata.feed.path | url | absoluteUrl(metadata.url) }}{% endset %}
+	<link href="{{ absoluteUrl }}" rel="self"/>
 	<link href="{{ metadata.url }}"/>
 	<updated>{{ collections.posts | rssLastUpdatedDate }}</updated>
 	<id>{{ metadata.feed.id }}</id>
@@ -14,7 +16,7 @@ eleventyExcludeFromCollections: true
 		<name>{{ metadata.author.name }}</name>
 		<email>{{ metadata.author.email }}</email>
 	</author>
-	{%- for post in collections.posts %}
+	{%- for post in collections.posts | reverse %}
 	{% set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset %}
 	<entry>
 		<title>{{ post.data.title }}</title>

examples/eleventy/feed/json.njk

@@ -0,0 +1,32 @@
+---
+# Metadata comes from _data/metadata.json
+permalink: "{{ metadata.jsonfeed.path }}"
+eleventyExcludeFromCollections: true
+---
+{
+  "version": "https://jsonfeed.org/version/1.1",
+  "title": "{{ metadata.title }}",
+  "language": "{{ metadata.language }}",
+  "home_page_url": "{{ metadata.url }}",
+  "feed_url": "{{ metadata.jsonfeed.url }}",
+  "description": "{{ metadata.description }}",
+  "author": {
+    "name": "{{ metadata.author.name }}",
+    "url": "{{ metadata.author.url }}"
+  },
+  "items": [
+    {%- for post in collections.posts | reverse %}
+    {%- set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset -%}
+    {
+      "id": "{{ absolutePostUrl }}",
+      "url": "{{ absolutePostUrl }}",
+      "title": "{{ post.data.title }}",
+      "content_html": {% if post.templateContent %}{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) | dump | safe }}{% else %}""{% endif %},
+      "date_published": "{{ post.date | rssDate }}"
+    }
+    {%- if not loop.last -%}
+    ,
+    {%- endif -%}
+    {%- endfor %}
+  ]
+}

examples/eleventy/index.njk

@@ -1,13 +1,14 @@
 ---
 layout: layouts/home.njk
-tags:
+eleventyNavigation:
-  - nav
+  key: Home
-navtitle: Home
+  order: 1
 ---
-
+{% set maxPosts = collections.posts.length | min(3) %}
-<h1>Latest 3 Posts</h1>
+<h1>Latest {% if maxPosts == 1 %}Post{% else %}{{ maxPosts }} Posts{% endif %}</h1>
 
 {% set postslist = collections.posts | head(-3) %}
+{% set postslistCounter = collections.posts | length %}
 {% include "postslist.njk" %}
 
 <p>More posts can be found in <a href="{{ '/posts/' | url }}">the archive</a>.</p>

examples/eleventy/package.json

@@ -1,12 +1,5 @@
 {
-  "name": "eleventy-base-blog",
+  "private": true,
-  "version": "5.0.0",
-  "description": "A starter repository for a blog web site using the Eleventy static site generator.",
-  "scripts": {
-    "build": "eleventy",
-    "watch": "eleventy --watch",
-    "debug": "DEBUG=* eleventy"
-  },
   "repository": {
     "type": "git",
     "url": "git://github.com/11ty/eleventy-base-blog.git"
@@ -21,12 +14,20 @@
     "url": "https://github.com/11ty/eleventy-base-blog/issues"
   },
   "homepage": "https://github.com/11ty/eleventy-base-blog#readme",
+  "scripts": {
+    "build": "eleventy",
+    "watch": "eleventy --watch",
+    "serve": "eleventy --serve",
+    "start": "eleventy --serve",
+    "debug": "DEBUG=* eleventy"
+  },
   "devDependencies": {
-    "@11ty/eleventy": "^0.9.0",
+    "@11ty/eleventy": "^1.0.0",
-    "@11ty/eleventy-plugin-rss": "^1.0.7",
+    "@11ty/eleventy-navigation": "^0.3.2",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.3",
+    "@11ty/eleventy-plugin-rss": "^1.1.2",
-    "luxon": "^1.12.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.3",
-    "markdown-it": "^8.4.2",
+    "luxon": "^2.3.0",
-    "markdown-it-anchor": "^5.0.2"
+    "markdown-it": "^12.3.2",
+    "markdown-it-anchor": "^8.4.1"
   }
 }

examples/eleventy/page-list.njk

@@ -8,8 +8,10 @@ permalink: /page-list/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber
 ---
 <table>
   <thead>
-    <th>URL</th>
+    <tr>
-    <th>Page Title</th>
+      <th>URL</th>
+      <th>Page Title</th>
+    </tr>
   </thead>
   <tbody>
 {%- for entry in entries %}

examples/eleventy/posts/firstpost.md

@@ -3,10 +3,9 @@ title: This is my first post.
 description: This is a post on My Blog about agile frameworks.
 date: 2018-05-01
 tags:
-  - another-tag
+  - another tag
 layout: layouts/post.njk
 ---
-
 Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
 
 Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
@@ -15,7 +14,7 @@ Bring to the table win-win survival strategies to ensure proactive domination. A
 
 Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
 
-```text/2-3
+``` text/2-3
 // this is a command
 function myCommand() {
 	let counter = 0;

examples/eleventy/posts/fourthpost.md

@@ -2,10 +2,9 @@
 title: This is my fourth post.
 description: This is a post on My Blog about touchpoints and circling wagons.
 date: 2018-09-30
-tags: second-tag
+tags: second tag
 layout: layouts/post.njk
 ---
-
 Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
 
 Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
@@ -13,3 +12,4 @@ Bring to the table win-win survival strategies to ensure proactive domination. A
 ## Section Header
 
 Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
+

examples/eleventy/posts/posts.json

@@ -1,3 +1,5 @@
 {
-  "tags": ["posts"]
+  "tags": [
+    "posts"
+  ]
 }

examples/eleventy/posts/secondpost.md

@@ -3,10 +3,9 @@ title: This is my second post.
 description: This is a post on My Blog about leveraging agile frameworks.
 date: 2018-07-04
 tags:
-  - number-2
+  - number 2
 layout: layouts/post.njk
 ---
-
 Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
 
 ## Section Header

examples/eleventy/posts/thirdpost.md

@@ -3,18 +3,19 @@ title: This is my third post.
 description: This is a post on My Blog about win-win survival strategies.
 date: 2018-08-24
 tags:
-  - second-tag
+  - second tag
+  - posts with two tags
 layout: layouts/post.njk
 ---
-
 Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
 
-```js/2/4
+``` js/2/4
 // this is a command
 function myCommand() {
-  let counter = 0;
+	let counter = 0;
+
+	counter++;
 
-  counter++;
 }
 
 // Test with a line break above this line.

examples/eleventy/tags-list.njk

@@ -5,6 +5,6 @@ layout: layouts/home.njk
 <h1>Tags</h1>
 
 {% for tag in collections.tagList %}
-  {% set tagUrl %}/tags/{{ tag }}/{% endset %}
+  {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
-  <a href="{{ tagUrl | url }}" class="tag">{{ tag }}</a>
+  <a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
 {% endfor %}