Publish Stable

- @vercel/build-utils@2.13.0

.eslintignore

@@ -1,40 +1,17 @@
 node_modules
 dist
 examples
-
+packages/*/test/fixtures
-# gatsby-plugin-now
-packages/gatsby-plugin-now/test/fixtures
-
-# build-utils
-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
 packages/cli/src/util/dev/templates/*.ts
-
-# client
 packages/client/tests/fixtures
 packages/client/lib
-
-# next
-packages/next/test/fixtures
-
-# node
 packages/node/src/bridge.ts
-packages/node/test/fixtures
+packages/node-bridge/bridge.js
-
+packages/node-bridge/launcher.js
-# node-bridge
+packages/middleware/src/entries.js
-packages/node-bridge/bridge.*
-
-# static-build
-packages/static-build/test/fixtures
-packages/static-build/test/build-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/EXAMPLE_README_TEMPLATE.md

@@ -6,7 +6,7 @@ This directory is a brief example of a [Name](site-link) site that can be deploy
 
 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-dev.yml

@@ -11,7 +11,7 @@ on:
 jobs:
   test:
     name: Dev
-    timeout-minutes: 60
+    timeout-minutes: 75
     strategy:
       fail-fast: false
       matrix:

.gitignore

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

DEVELOPING_A_RUNTIME.md

@@ -332,7 +332,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 +398,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

@@ -11,9 +11,13 @@
 
 ## Usage
 
-Vercel is the optimal workflow for frontend teams. All-in-one: Static and Jamstack deployment, Serverless Functions, and Global CDN.
+Vercel is a platform for **static sites and frontend frameworks**, built to integrate with your headless content, commerce, or database.
 
-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).
+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.
+
+Get started by [Importing a Git Project](https://vercel.com/new) and use `git push` to deploy. Alternatively, you can [install Vercel CLI](https://vercel.com/cli).
 
 ## Documentation
 

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/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/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

@@ -14,9 +14,9 @@ Vercel is a cloud platform for static frontends and serverless functions. It ena
 
 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)
+- [Code of Conduct](https://github.com/vercel/vercel/blob/main/.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
+- [Contributing Guidelines](https://github.com/vercel/vercel/blob/main/.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
+- [License](https://github.com/vercel/vercel/blob/main/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.
 
@@ -60,7 +60,7 @@ If you would like to upgrade a project to take advantage of zero configuration,
 
 ## 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.
 
@@ -76,7 +76,7 @@ When submitting an issue, please thoroughly and concisely describe the problem y
 
 ## License
 
-This repository is an open source project. See the [License](https://github.com/vercel/vercel/blob/master/LICENSE).
+This repository is an open source project. See the [License](https://github.com/vercel/vercel/blob/main/LICENSE).
 
 ## Get In Touch
 

examples/amp/README.md

@@ -6,7 +6,7 @@ This directory is a brief example of an [AMP](https://amp.dev/) site that can be
 
 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_
 

examples/angular/README.md

@@ -1,4 +1,4 @@
-![Angular Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/angular.svg)
+![Angular Logo](https://github.com/vercel/vercel/blob/main/packages/frameworks/logos/angular.svg)
 
 # Angular Example
 
@@ -8,7 +8,7 @@ This directory is a brief example of an [Angular](https://angular.io/) app that
 
 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_
 

examples/angular/package.json

@@ -12,37 +12,38 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~8.1.0",
+    "@angular/animations": "^8.1.0",
-    "@angular/common": "~8.1.0",
+    "@angular/common": "^8.1.0",
-    "@angular/compiler": "~8.1.0",
+    "@angular/core": "^8.1.0",
-    "@angular/core": "~8.1.0",
+    "@angular/forms": "^8.1.0",
-    "@angular/forms": "~8.1.0",
+    "@angular/platform-browser": "^8.1.0",
-    "@angular/platform-browser": "~8.1.0",
+    "@angular/platform-browser-dynamic": "^8.1.0",
-    "@angular/platform-browser-dynamic": "~8.1.0",
+    "@angular/router": "^8.1.0",
-    "@angular/router": "~8.1.0",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.801.0",
+    "@angular-devkit/build-angular": "^12.2.2",
-    "@angular/cli": "~8.1.0",
+    "@angular/cli": "^12.2.2",
-    "@angular/compiler-cli": "~8.1.0",
+    "@angular/compiler": "^12.2.2",
+    "@angular/compiler-cli": "^12.2.2",
     "@angular/language-service": "~8.1.0",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "codelyzer": "^5.0.0",
-    "jasmine-core": "~3.4.0",
+    "glob-parent": "^5.1.2",
+    "jasmine-core": "^3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
+    "karma": "^6.3.4",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~2.0.1",
     "karma-jasmine-html-reporter": "^1.4.0",
-    "protractor": "~5.4.0",
+    "protractor": "^7.0.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.15.0",
-    "typescript": "~3.4.3"
+    "typescript": "^4.2.4"
   }
 }

examples/blitzjs/README.md

@@ -1,4 +1,4 @@
-![Blitz Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/blitz.svg)
+![Blitz Logo](https://github.com/vercel/vercel/blob/main/packages/frameworks/logos/blitz.svg)
 
 # Blitz.js Example
 
@@ -8,7 +8,7 @@ This directory is a brief example of a [Blitz.js](https://blitzjs.com/) project
 
 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)
 
 ### How We Created This Example
 

examples/brunch/README.md

@@ -6,7 +6,7 @@ This directory is a brief example of a [Brunch](https://brunch.io/) site that ca
 
 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_
 

examples/create-react-app/README.md

@@ -1,4 +1,4 @@
-![React Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/react.svg)
+![React Logo](https://github.com/vercel/vercel/blob/main/packages/frameworks/logos/react.svg)
 
 # React Example
 
@@ -8,7 +8,7 @@ This directory is a brief example of a [React](https://reactjs.org/) app with [S
 
 Deploy your own React project, along with Serverless Functions, 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-functions&template=create-react-app)
 
 _Live Example: https://create-react-app.now-examples.now.sh/_
 

examples/create-react-app/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "react": "^16.6.1",
     "react-dom": "^16.6.1",
-    "react-scripts": "2.1.1"
+    "react-scripts": "^4.0.3"
   },
   "scripts": {
     "dev": "BROWSER=none react-scripts start",

examples/custom-build/README.md

@@ -6,7 +6,7 @@ This directory is a brief example of using a Custom Build script that can be dep
 
 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)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/custom-build)
 
 _Live Example: https://custom-build.now-examples.now.sh_
 

examples/docusaurus-2/README.md

@@ -6,7 +6,7 @@ This directory is a brief example of a [Docusaurus](https://v2.docusaurus.io) si
 
 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)
 
 ### How We Created This Example
 

examples/docusaurus/README.md

@@ -1,4 +1,4 @@
-![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
 
@@ -8,7 +8,7 @@ This directory is a brief example of a [Docusaurus](https://docusaurus.io/) site
 
 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_
 

examples/dojo/README.md

@@ -6,7 +6,7 @@ This directory is a brief example of a [Dojo](https://dojo.io) site that can be
 
 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/README.md

@@ -1,4 +1,4 @@
-![Eleventy Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/eleventy.svg)
+![Eleventy Logo](https://github.com/vercel/vercel/blob/main/packages/frameworks/logos/eleventy.svg)
 
 # Eleventy Example
 
@@ -8,7 +8,7 @@ This directory is a brief example of a [Eleventy](https://www.11ty.io/) site tha
 
 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_
 

examples/ember/README.md

@@ -1,4 +1,4 @@
-![Ember Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/ember.svg)
+![Ember Logo](https://github.com/vercel/vercel/blob/main/packages/frameworks/logos/ember.svg)
 
 # Ember Example
 
@@ -8,7 +8,7 @@ This directory is a brief example of an [Ember](https://emberjs.com/) app that c
 
 Deploy your own Ember project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/ember)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/ember&template=ember)
 
 _Live Example: https://ember.now-examples.now.sh_
 

examples/gatsby/README.md

@@ -1,4 +1,4 @@
-![Gatsby Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/gatsby.svg)
+![Gatsby Logo](https://github.com/vercel/vercel/blob/main/packages/frameworks/logos/gatsby.svg)
 
 # Gatsby Example
 
@@ -8,7 +8,7 @@ This directory is a brief example of a [Gatsby](https://www.gatsbyjs.org/) app w
 
 Deploy your own Gatsby project, along with Serverless Functions, with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/gatsby)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/gatsby&template=gatsby)
 
 _Live Example: https://gatsby.now-examples.now.sh_
 

examples/gridsome/README.md

@@ -1,4 +1,4 @@
-![Gridsome Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/gridsome.svg)
+![Gridsome Logo](https://github.com/vercel/vercel/blob/main/packages/frameworks/logos/gridsome.svg)
 
 # Gridsome Example
 
@@ -8,7 +8,7 @@ This directory is a brief example of a [Gridsome](https://gridsome.org/) app tha
 
 Deploy your own Gridsome project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/gridsome)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/gridsome&template=gridsome)
 
 _Live Example: https://gridsome.now-examples.now.sh_
 

examples/hexo/README.md

@@ -1,4 +1,4 @@
-![Hexo Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/hexo.svg)
+![Hexo Logo](https://github.com/vercel/vercel/blob/main/packages/frameworks/logos/hexo.svg)
 
 # Hexo Example
 
@@ -8,7 +8,7 @@ This directory is a brief example of a [Hexo](https://hexo.io/) site that can be
 
 Deploy your own Hexo project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/hexo)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/hexo&template=hexo)
 
 _Live Example: https://hexo.now-examples.now.sh_
 

examples/hugo/README.md

@@ -6,7 +6,7 @@ This directory is a brief example of a [Hugo](https://gohugo.io/) app that can b
 
 Deploy your own Hugo project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/hugo)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/hugo&template=hugo)
 
 _Live Example: https://hugo.now-examples.now.sh_
 

examples/ionic-angular/README.md

@@ -6,7 +6,7 @@ This directory is a brief example of an [Ionic Angular](https://ionicframework.c
 
 Deploy your own Ionic 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/ionic-angular)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/ionic-angular&template=ionic-angular)
 
 _Live Example: https://ionic-angular.now-examples.now.sh_
 

examples/ionic-react/readme.md

@@ -6,7 +6,7 @@ This directory is a brief example of an [Ionic React](https://ionicframework.com
 
 Deploy your own Ionic React project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/ionic-react)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/ionic-react&template=ionic-react)
 
 _Live Example: https://ionic-react.now-examples.now.sh_
 

examples/jekyll/README.md

@@ -6,7 +6,7 @@ This directory is a brief example of a [Jekyll](https://jekyllrb.com/) site that
 
 Deploy your own Jekyll project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/jekyll)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/jekyll&template=jekyll)
 
 _Live Example: https://jekyll.now-examples.now.sh_
 

examples/middleman/README.md

@@ -6,7 +6,7 @@ This directory is a brief example of a [Middleman](https://middlemanapp.com/) si
 
 Deploy your own Middleman project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/middleman)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/middleman&template=middleman)
 
 _Live Example: https://middleman.now-examples.now.sh_
 

examples/nextjs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/nextjs/README.md

@@ -29,6 +29,6 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
 
 ## Deploy on Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/nextjs/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+}

examples/nextjs/package.json

@@ -1,15 +1,20 @@
 {
   "name": "nextjs",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
-    "next": "10.x",
+    "next": "12.0.1",
-    "react": "17.x",
+    "react": "17.0.2",
-    "react-dom": "17.x"
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "eslint": "7.32.0",
+    "eslint-config-next": "11.1.0"
   }
 }

examples/nextjs/pages/api/hello.js

@@ -1,6 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
-export default (req, res) => {
+export default function handler(req, res) {
-  res.statusCode = 200
+  res.status(200).json({ name: 'John Doe' })
-  res.json({ name: 'John Doe' })
 }

examples/nextjs/pages/index.js

@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import Image from 'next/image'
 import styles from '../styles/Home.module.css'
 
 export default function Home() {
@@ -6,6 +7,7 @@ export default function Home() {
     <div className={styles.container}>
       <Head>
         <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
@@ -21,12 +23,12 @@ export default function Home() {
 
         <div className={styles.grid}>
           <a href="https://nextjs.org/docs" className={styles.card}>
-            <h3>Documentation &rarr;</h3>
+            <h2>Documentation &rarr;</h2>
             <p>Find in-depth information about Next.js features and API.</p>
           </a>
 
           <a href="https://nextjs.org/learn" className={styles.card}>
-            <h3>Learn &rarr;</h3>
+            <h2>Learn &rarr;</h2>
             <p>Learn about Next.js in an interactive course with quizzes!</p>
           </a>
 
@@ -34,15 +36,15 @@ export default function Home() {
             href="https://github.com/vercel/next.js/tree/master/examples"
             className={styles.card}
           >
-            <h3>Examples &rarr;</h3>
+            <h2>Examples &rarr;</h2>
             <p>Discover and deploy boilerplate example Next.js projects.</p>
           </a>
 
           <a
-            href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
             className={styles.card}
           >
-            <h3>Deploy &rarr;</h3>
+            <h2>Deploy &rarr;</h2>
             <p>
               Instantly deploy your Next.js site to a public URL with Vercel.
             </p>
@@ -57,7 +59,9 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           Powered by{' '}
-          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
+          <span className={styles.logo}>
+            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+          </span>
         </a>
       </footer>
     </div>

examples/nextjs/styles/Home.module.css

@@ -5,6 +5,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  height: 100vh;
 }
 
 .main {
@@ -25,14 +26,11 @@
   align-items: center;
 }
 
-.footer img {
-  margin-left: 0.5rem;
-}
-
 .footer a {
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-grow: 1;
 }
 
 .title a {
@@ -82,7 +80,6 @@
 
 .card {
   margin: 1rem;
-  flex-basis: 45%;
   padding: 1.5rem;
   text-align: left;
   color: inherit;
@@ -90,6 +87,7 @@
   border: 1px solid #eaeaea;
   border-radius: 10px;
   transition: color 0.15s ease, border-color 0.15s ease;
+  width: 45%;
 }
 
 .card:hover,
@@ -99,7 +97,7 @@
   border-color: #0070f3;
 }
 
-.card h3 {
+.card h2 {
   margin: 0 0 1rem 0;
   font-size: 1.5rem;
 }
@@ -112,6 +110,7 @@
 
 .logo {
   height: 1em;
+  margin-left: 0.5rem;
 }
 
 @media (max-width: 600px) {

examples/nuxtjs/.gitignore

@@ -80,11 +80,15 @@ dist
 
 # IDE / Editor
 .idea
-.editorconfig
 
 # Service worker
 sw.*
 
-# Mac OSX
+# macOS
 .DS_Store
+
+# Vim swap files
+*.swp
+
+# Vercel
 .vercel

examples/nuxtjs/.vercelignore

@@ -1 +1,4 @@
 README.md
+.nuxt
+node_modules
+*.log

examples/nuxtjs/README.md

@@ -6,9 +6,9 @@ This directory is a brief example of a [Nuxt.js](https://nuxtjs.org) app that ca
 
 Deploy your own Nuxt.js project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/nuxtjs)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/nuxtjs&template=nuxtjs)
 
-_Live Example: https://nuxtjs.now-examples.now.sh_
+_Live Example: https://nuxtjs.now-examples.vercel.app/_
 
 ### How We Created This Example
 
@@ -17,5 +17,3 @@ To get started with Nuxt.js deployed with Vercel, you can use the [Create-Nuxt-A
 ```shell
 $ npx create-nuxt-app my-app
 ```
-
-> The only change made is to amend the output directory in `nuxt.config.js` to `"/public"`.

examples/nuxtjs/assets/README.md

@@ -1,7 +0,0 @@
-# ASSETS
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

examples/nuxtjs/components/Logo.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="VueToNuxtLogo">
-    <div class="Triangle Triangle--two" />
-    <div class="Triangle Triangle--one" />
-    <div class="Triangle Triangle--three" />
-    <div class="Triangle Triangle--four" />
-  </div>
-</template>
-
-<style>
-.VueToNuxtLogo {
-  display: inline-block;
-  animation: turn 2s linear forwards 1s;
-  transform: rotateX(180deg);
-  position: relative;
-  overflow: hidden;
-  height: 180px;
-  width: 245px;
-}
-
-.Triangle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-}
-
-.Triangle--one {
-  border-left: 105px solid transparent;
-  border-right: 105px solid transparent;
-  border-bottom: 180px solid #41b883;
-}
-
-.Triangle--two {
-  top: 30px;
-  left: 35px;
-  animation: goright 0.5s linear forwards 3.5s;
-  border-left: 87.5px solid transparent;
-  border-right: 87.5px solid transparent;
-  border-bottom: 150px solid #3b8070;
-}
-
-.Triangle--three {
-  top: 60px;
-  left: 35px;
-  animation: goright 0.5s linear forwards 3.5s;
-  border-left: 70px solid transparent;
-  border-right: 70px solid transparent;
-  border-bottom: 120px solid #35495e;
-}
-
-.Triangle--four {
-  top: 120px;
-  left: 70px;
-  animation: godown 0.5s linear forwards 3s;
-  border-left: 35px solid transparent;
-  border-right: 35px solid transparent;
-  border-bottom: 60px solid #fff;
-}
-
-@keyframes turn {
-  100% {
-    transform: rotateX(0deg);
-  }
-}
-
-@keyframes godown {
-  100% {
-    top: 180px;
-  }
-}
-
-@keyframes goright {
-  100% {
-    left: 70px;
-  }
-}
-</style>

examples/nuxtjs/components/README.md

@@ -1,7 +0,0 @@
-# COMPONENTS
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-The components directory contains your Vue.js Components.
-
-_Nuxt.js doesn't supercharge these components._

examples/nuxtjs/components/Tutorial.vue

@@ -0,0 +1,46 @@
+<!-- Please remove this file from your project -->
+<template>
+  <div class="relative flex items-top justify-center min-h-screen bg-gray-100 sm:items-center sm:pt-0">
+    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+    <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
+      <a class="flex justify-center pt-8 sm:pt-0" href="https://nuxtjs.org" target="_blank">
+        <svg width="218" height="45" viewBox="0 0 159 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M55.5017 6.81866H60.1727L70.0719 22.9912V6.81866H74.3837V29.7345H69.7446L59.8135 13.5955V29.7345H55.5017V6.81866Z" fill="#003543" /> <path d="M93.657 29.7344H89.6389V27.1747C88.7241 28.9761 86.8628 29.9904 84.5113 29.9904C80.7869 29.9904 78.3684 27.3059 78.3684 23.4423V13.2339H82.3865V22.5976C82.3865 24.8566 83.7594 26.4276 85.8171 26.4276C88.0712 26.4276 89.6389 24.6598 89.6389 22.2377V13.2339H93.657V29.7344Z" fill="#003543" /> <path d="M107.64 29.7344L103.784 24.2342L99.9291 29.7344H95.6492L101.596 21.1242L96.1074 13.2339H100.485L103.784 17.9821L107.051 13.2339H111.461L105.94 21.1242L111.886 29.7344H107.64Z" fill="#003543" /> <path d="M120.053 8.25848V13.2339H124.627V16.6063H120.053V24.7974C120.053 25.0725 120.162 25.3363 120.356 25.531C120.55 25.7257 120.813 25.8353 121.087 25.8357H124.627V29.728H121.98C118.386 29.728 116.035 27.6323 116.035 23.9687V16.6095H112.801V13.2339H114.83C115.776 13.2339 116.327 12.6692 116.327 11.7349V8.25848H120.053Z" fill="#003543" /> <path d="M134.756 24.5446V6.81866H139.066V23.1864C139.066 27.6067 136.943 29.7345 133.349 29.7345H128.332V25.8421H133.461C133.804 25.8421 134.134 25.7054 134.377 25.4621C134.619 25.2188 134.756 24.8888 134.756 24.5446Z" fill="#003543" /> <path d="M141.649 22.0409H145.799C146.029 24.6006 147.728 26.2308 150.472 26.2308C152.923 26.2308 154.623 25.2501 154.623 23.2199C154.623 18.3085 142.331 21.7129 142.331 12.9395C142.334 9.17515 145.568 6.55945 150.215 6.55945C155.05 6.55945 158.317 9.34153 158.516 13.6306H154.388C154.193 11.6341 152.632 10.2918 150.207 10.2918C147.953 10.2918 146.548 11.3397 146.548 12.9427C146.548 18.0173 159 14.2226 159 23.1576C159 27.4131 155.504 30 150.474 30C145.279 30 141.882 26.8563 141.654 22.0441" fill="#003543" /> <path d="M24.7203 29.704H41.1008C41.6211 29.7041 42.1322 29.5669 42.5828 29.3061C43.0334 29.0454 43.4075 28.6704 43.6675 28.2188C43.9275 27.7672 44.0643 27.2549 44.0641 26.7335C44.0639 26.2121 43.9266 25.6999 43.6662 25.2485L32.6655 6.15312C32.4055 5.70162 32.0315 5.32667 31.581 5.06598C31.1305 4.8053 30.6195 4.66805 30.0994 4.66805C29.5792 4.66805 29.0682 4.8053 28.6177 5.06598C28.1672 5.32667 27.7932 5.70162 27.5332 6.15312L24.7203 11.039L19.2208 1.48485C18.9606 1.03338 18.5864 0.658493 18.1358 0.397853C17.6852 0.137213 17.1741 0 16.6538 0C16.1336 0 15.6225 0.137213 15.1719 0.397853C14.7213 0.658493 14.3471 1.03338 14.0868 1.48485L0.397874 25.2485C0.137452 25.6999 0.000226653 26.2121 2.8053e-07 26.7335C-0.000226092 27.2549 0.136554 27.7672 0.396584 28.2188C0.656614 28.6704 1.03072 29.0454 1.48129 29.3061C1.93185 29.5669 2.44298 29.7041 2.96326 29.704H13.2456C17.3195 29.704 20.3239 27.9106 22.3912 24.4118L27.4102 15.7008L30.0986 11.039L38.1667 25.0422H27.4102L24.7203 29.704ZM13.0779 25.0374L5.9022 25.0358L16.6586 6.36589L22.0257 15.7008L18.4322 21.9401C17.0593 24.2103 15.4996 25.0374 13.0779 25.0374Z" fill="#00DC82" /></svg>
+      </a>
+      <div class="mt-8 bg-white overflow-hidden shadow sm:rounded-lg p-6">
+        <h2 class="text-2xl leading-7 font-semibold">
+          Welcome to your Nuxt Application
+        </h2>
+        <p class="mt-3 text-gray-600">
+          We recommend you take a look at the <a href="https://nuxtjs.org" target="_blank" class="text-green-500 hover:underline">Nuxt documentation</a>, whether you are new or have previous experience with the framework.<br>
+        </p>
+        <p class="mt-4 pt-4 text-gray-800 border-t border-dashed">
+          To get started, remove <code class="bg-gray-100 text-sm p-1 rounded border">components/Tutorial.vue</code> and start coding in <code class="bg-gray-100 text-sm p-1 rounded border">pages/index.vue</code>. Have fun!
+        </p>
+      </div>
+      <div class="flex justify-center pt-4 space-x-2">
+        <a href="https://github.com/nuxt/nuxt.js" target="_blank"><svg
+          class="w-6 h-6 text-gray-600 hover:text-gray-800"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          aria-hidden="true"
+          role="img"
+          width="32"
+          height="32"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 24 24"
+        ><path d="M12 2.247a10 10 0 0 0-3.162 19.487c.5.088.687-.212.687-.475c0-.237-.012-1.025-.012-1.862c-2.513.462-3.163-.613-3.363-1.175a3.636 3.636 0 0 0-1.025-1.413c-.35-.187-.85-.65-.013-.662a2.001 2.001 0 0 1 1.538 1.025a2.137 2.137 0 0 0 2.912.825a2.104 2.104 0 0 1 .638-1.338c-2.225-.25-4.55-1.112-4.55-4.937a3.892 3.892 0 0 1 1.025-2.688a3.594 3.594 0 0 1 .1-2.65s.837-.262 2.75 1.025a9.427 9.427 0 0 1 5 0c1.912-1.3 2.75-1.025 2.75-1.025a3.593 3.593 0 0 1 .1 2.65a3.869 3.869 0 0 1 1.025 2.688c0 3.837-2.338 4.687-4.563 4.937a2.368 2.368 0 0 1 .675 1.85c0 1.338-.012 2.413-.012 2.75c0 .263.187.575.687.475A10.005 10.005 0 0 0 12 2.247z" fill="currentColor" /></svg></a>
+        <a href="https://twitter.com/nuxt_js" target="_blank"><svg
+          class="w-6 h-6 text-gray-600 hover:text-gray-800"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          aria-hidden="true"
+          role="img"
+          width="32"
+          height="32"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 24 24"
+        ><path d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23z" fill="currentColor" /></svg></a>
+      </div>
+    </div>
+  </div>
+</template>

examples/nuxtjs/layouts/README.md

@@ -1,7 +0,0 @@
-# LAYOUTS
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains your Application Layouts.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

examples/nuxtjs/layouts/default.vue

@@ -1,55 +0,0 @@
-<template>
-  <div>
-    <nuxt />
-  </div>
-</template>
-
-<style>
-html {
-  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, sans-serif;
-  font-size: 16px;
-  word-spacing: 1px;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  box-sizing: border-box;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-  margin: 0;
-}
-
-.button--green {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #3b8070;
-  color: #3b8070;
-  text-decoration: none;
-  padding: 10px 30px;
-}
-
-.button--green:hover {
-  color: #fff;
-  background-color: #3b8070;
-}
-
-.button--grey {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #35495e;
-  color: #35495e;
-  text-decoration: none;
-  padding: 10px 30px;
-  margin-left: 15px;
-}
-
-.button--grey:hover {
-  color: #fff;
-  background-color: #35495e;
-}
-</style>

examples/nuxtjs/middleware/README.md

@@ -1,8 +0,0 @@
-# MIDDLEWARE
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains your application middleware.
-Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

examples/nuxtjs/nuxt.config.js

@@ -1,44 +1,30 @@
 export default {
-  mode: 'spa',
+  // Target: https://go.nuxtjs.dev/config-target
-  /*
+  target: 'static',
-   ** Headers of the page
+
-   */
+  // Global App headers: https://go.nuxtjs.dev/config-head
   head: {
-    title: process.env.npm_package_name || '',
+    title: 'My Nuxt Application',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       {
         hid: 'description',
         name: 'description',
-        content: process.env.npm_package_description || '',
+        content: 'This is an awesome description of my Nuxt app',
       },
     ],
     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
   },
-  /*
+  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-   ** Customize the progress-bar color
-   */
-  loading: { color: '#fff' },
-  /*
-   ** Global CSS
-   */
-  css: [],
-  /*
-   ** Plugins to load before mounting the App
-   */
   plugins: [],
-  /*
+
-   ** Nuxt.js modules
+  // Auto import components: https://go.nuxtjs.dev/config-components
-   */
+  components: true,
-  modules: [],
+
-  /*
+  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
-   ** Build configuration
+  buildModules: [],
-   */
+
-  build: {
+  // Modules: https://go.nuxtjs.dev/config-modules
-    /*
+  modules: []
-     ** You can extend webpack config here
-     */
-    extend(config, ctx) {},
-  },
 };

examples/nuxtjs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxtjs",
   "version": "1.0.0",
-  "description": "My astonishing Nuxt.js project",
+  "description": "My astonishing Nuxt App",
   "author": "msweeneydev",
   "private": true,
   "scripts": {
@@ -10,9 +10,8 @@
     "start": "nuxt start"
   },
   "dependencies": {
-    "nuxt": "^2.0.0"
+    "core-js": "^3.15.0",
+    "nuxt": "^2.15.7"
   },
-  "devDependencies": {
+  "devDependencies": {}
-    "nodemon": "^2.0.7"
-  }
 }

examples/nuxtjs/pages/README.md

@@ -1,6 +0,0 @@
-# PAGES
-
-This directory contains your Application Views and Routes.
-The framework reads all the `*.vue` files inside this directory and creates the router of your application.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).

examples/nuxtjs/pages/index.vue

@@ -1,72 +1,3 @@
 <template>
-  <div class="container">
+  <Tutorial/>
-    <div>
-      <logo />
-      <h1 class="title">
-        nuxtjs
-      </h1>
-      <h2 class="subtitle">
-        My astonishing Nuxt.js project
-      </h2>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/"
-          target="_blank"
-          class="button--green"
-        >
-          Documentation
-        </a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          class="button--grey"
-        >
-          GitHub
-        </a>
-      </div>
-    </div>
-  </div>
 </template>
-
-<script>
-import Logo from '~/components/Logo.vue'
-
-export default {
-  components: {
-    Logo
-  }
-}
-</script>
-
-<style>
-.container {
-  margin: 0 auto;
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.title {
-  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  display: block;
-  font-weight: 300;
-  font-size: 100px;
-  color: #35495e;
-  letter-spacing: 1px;
-}
-
-.subtitle {
-  font-weight: 300;
-  font-size: 42px;
-  color: #526488;
-  word-spacing: 5px;
-  padding-bottom: 15px;
-}
-
-.links {
-  padding-top: 15px;
-}
-</style>

examples/nuxtjs/plugins/README.md

@@ -1,7 +0,0 @@
-# PLUGINS
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).

examples/nuxtjs/static/README.md

@@ -1,11 +0,0 @@
-# STATIC
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains your static files.
-Each file inside this directory is mapped to `/`.
-Thus you'd want to delete this README.md before deploying to production.
-
-Example: `/static/robots.txt` is mapped as `/robots.txt`.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).

examples/nuxtjs/store/README.md

@@ -1,10 +0,0 @@
-# STORE
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains your Vuex Store files.
-Vuex Store option is implemented in the Nuxt.js framework.
-
-Creating a file in this directory automatically activates the option in the framework.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).

examples/parcel/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.parcel-cache
+dist
+/.pnp
+.pnp.js
+.DS_Store
+.vercel

examples/parcel/README.md

@@ -0,0 +1,34 @@
+This is a vanilla web app built with [Parcel](https://parceljs.org).
+
+## Getting Started
+
+Run the dev server:
+
+```bash
+yarn start
+# or
+npm start
+```
+
+And open [localhost:1234](http://localhost:1234) in your browser!
+
+As you make changes, you should see your app automatically update in the browser without even refreshing the page!
+
+## Learn More
+
+- [Getting started guide](https://parceljs.org/getting-started/webapp/)
+- [Documentation](https://parceljs.org/docs/)
+
+## Deploy Your Own
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/parcel&template=parcel)
+
+_Live Example: https://parcel.examples.vercel.com_
+
+### Deploying From Your Terminal
+
+You can deploy your new Parcel project with a single command from your terminal using [Vercel CLI](https://vercel.com/download):
+
+```shell
+$ vercel
+```

examples/parcel/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "parcel-app",
+  "private": true,
+  "source": "src/index.html",
+  "scripts": {
+    "start": "parcel",
+    "build": "parcel build"
+  },
+  "devDependencies": {
+    "parcel": "^2.0.0"
+  }
+}

examples/parcel/src/app.js

@@ -0,0 +1 @@
+console.log('Hello world!');

examples/parcel/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <title>My First Parcel App</title>
+    <link rel="stylesheet" href="styles.css" />
+    <script type="module" src="app.js"></script>
+  </head>
+  <body>
+    <h1>Hello, Parcel!</h1>
+    <p>This is a vanilla web app built with Parcel 2!<br>Check out the <a href="https://parceljs.org/getting-started/webapp/" target="_blank">getting started guide</a> and the <a href="https://parceljs.org/docs/" target="_blank">documentation</a> to learn more!</p>
+  </body>
+</html>

examples/parcel/src/styles.css

@@ -0,0 +1,18 @@
+body {
+  text-align: center;
+}
+
+h1 {
+  color: hotpink;
+  font-family: cursive;
+  font-size: 55px;
+}
+
+p {
+  font-family: Helvetica, Arial, sans-serif;
+  line-height: 1.5em;
+}
+
+a {
+  color: dodgerblue;
+}

examples/polymer/README.md

@@ -1,4 +1,4 @@
-![Polymer Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/polymer.svg)
+![Polymer Logo](https://github.com/vercel/vercel/blob/main/packages/frameworks/logos/polymer.svg)
 
 # Polymer Example
 
@@ -8,7 +8,7 @@ This directory is a brief example of a [Polymer](https://www.polymer-project.org
 
 Deploy your own Polymer project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/polymer)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/polymer&template=polymer)
 
 _Live Example: https://polymer.now-examples.now.sh_
 

examples/preact/README.md

@@ -1,4 +1,4 @@
-![Preact Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/preact.svg)
+![Preact Logo](https://github.com/vercel/vercel/blob/main/packages/frameworks/logos/preact.svg)
 
 # Preact Example
 
@@ -8,7 +8,7 @@ This directory is a brief example of a [Preact](https://preactjs.com/) app that
 
 Deploy your own Preact project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/preact)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/preact&template=preact)
 
 _Live Example: https://preact.now-examples.now.sh_
 

examples/redwoodjs/README.md

@@ -1,4 +1,4 @@
-![RedwoodJS Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/redwoodjs.svg)
+![RedwoodJS Logo](https://github.com/vercel/vercel/blob/main/packages/frameworks/logos/redwoodjs.svg)
 
 # RedwoodJS Example
 
@@ -8,7 +8,7 @@ This directory is a brief example of a [RedwoodJS](https://redwoodjs.com) app wi
 
 Deploy your own RedwoodJS project, along with Serverless Functions, with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/main/examples/redwoodjs)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/redwoodjs&template=redwoodjs)
 
 _Live Example: https://redwoodjs.now-examples.now.sh_
 

examples/remix/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+
+.cache
+.vercel
+.output
+
+public/build
+api/_build

examples/remix/README.md

@@ -0,0 +1,34 @@
+# Welcome to Remix!
+
+- [Remix Docs](https://remix.run/docs)
+
+## Deployment
+
+After having run the `create-remix` command and selected "Vercel" as a deployment target, you only need to [import your Git repository](https://vercel.com/new) into Vercel, and it will be deployed.
+
+If you'd like to avoid using a Git repository, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli):
+
+```sh
+npm i -g vercel
+vercel
+```
+
+It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its [Git Integration](https://vercel.com/docs/concepts/git).
+
+## Development
+
+To run your Remix app locally, make sure your project's local dependencies are installed:
+
+```sh
+npm install
+```
+
+Afterwards, start the Remix development server like so:
+
+```sh
+npm run dev
+```
+
+Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
+
+If you're used to using the `vercel dev` command provided by [Vercel CLI](https://vercel.com/cli) instead, you can also use that, but it's not needed.

examples/remix/api/index.js

@@ -0,0 +1,5 @@
+const { createRequestHandler } = require("@remix-run/vercel");
+
+module.exports = createRequestHandler({
+  build: require("./_build")
+});

examples/remix/app/entry.client.tsx

@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom";
+import { RemixBrowser } from "remix";
+
+hydrate(<RemixBrowser />, document);

examples/remix/app/entry.server.tsx

@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "remix";
+import type { EntryContext } from "remix";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  let markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders
+  });
+}

examples/remix/app/root.tsx

@@ -0,0 +1,178 @@
+import {
+  Link,
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useCatch
+} from "remix";
+import type { LinksFunction } from "remix";
+
+import globalStylesUrl from "~/styles/global.css";
+import darkStylesUrl from "~/styles/dark.css";
+
+// https://remix.run/api/app#links
+export let links: LinksFunction = () => {
+  return [
+    { rel: "stylesheet", href: globalStylesUrl },
+    {
+      rel: "stylesheet",
+      href: darkStylesUrl,
+      media: "(prefers-color-scheme: dark)"
+    }
+  ];
+};
+
+// https://remix.run/api/conventions#default-export
+// https://remix.run/api/conventions#route-filenames
+export default function App() {
+  return (
+    <Document>
+      <Layout>
+        <Outlet />
+      </Layout>
+    </Document>
+  );
+}
+
+// https://remix.run/docs/en/v1/api/conventions#errorboundary
+export function ErrorBoundary({ error }: { error: Error }) {
+  console.error(error);
+  return (
+    <Document title="Error!">
+      <Layout>
+        <div>
+          <h1>There was an error</h1>
+          <p>{error.message}</p>
+          <hr />
+          <p>
+            Hey, developer, you should replace this with what you want your
+            users to see.
+          </p>
+        </div>
+      </Layout>
+    </Document>
+  );
+}
+
+// https://remix.run/docs/en/v1/api/conventions#catchboundary
+export function CatchBoundary() {
+  let caught = useCatch();
+
+  let message;
+  switch (caught.status) {
+    case 401:
+      message = (
+        <p>
+          Oops! Looks like you tried to visit a page that you do not have access
+          to.
+        </p>
+      );
+      break;
+    case 404:
+      message = (
+        <p>Oops! Looks like you tried to visit a page that does not exist.</p>
+      );
+      break;
+
+    default:
+      throw new Error(caught.data || caught.statusText);
+  }
+
+  return (
+    <Document title={`${caught.status} ${caught.statusText}`}>
+      <Layout>
+        <h1>
+          {caught.status}: {caught.statusText}
+        </h1>
+        {message}
+      </Layout>
+    </Document>
+  );
+}
+
+function Document({
+  children,
+  title
+}: {
+  children: React.ReactNode;
+  title?: string;
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        {title ? <title>{title}</title> : null}
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+        {process.env.NODE_ENV === "development" && <LiveReload />}
+      </body>
+    </html>
+  );
+}
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="remix-app">
+      <header className="remix-app__header">
+        <div className="container remix-app__header-content">
+          <Link to="/" title="Remix" className="remix-app__header-home-link">
+            <RemixLogo />
+          </Link>
+          <nav aria-label="Main navigation" className="remix-app__header-nav">
+            <ul>
+              <li>
+                <Link to="/">Home</Link>
+              </li>
+              <li>
+                <a href="https://remix.run/docs">Remix Docs</a>
+              </li>
+              <li>
+                <a href="https://github.com/remix-run/remix">GitHub</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </header>
+      <div className="remix-app__main">
+        <div className="container remix-app__main-content">{children}</div>
+      </div>
+      <footer className="remix-app__footer">
+        <div className="container remix-app__footer-content">
+          <p>&copy; You!</p>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+function RemixLogo() {
+  return (
+    <svg
+      viewBox="0 0 659 165"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      aria-labelledby="remix-run-logo-title"
+      role="img"
+      width="106"
+      height="30"
+      fill="currentColor"
+    >
+      <title id="remix-run-logo-title">Remix Logo</title>
+      <path d="M0 161V136H45.5416C53.1486 136 54.8003 141.638 54.8003 145V161H0Z M133.85 124.16C135.3 142.762 135.3 151.482 135.3 161H92.2283C92.2283 158.927 92.2653 157.03 92.3028 155.107C92.4195 149.128 92.5411 142.894 91.5717 130.304C90.2905 111.872 82.3473 107.776 67.7419 107.776H54.8021H0V74.24H69.7918C88.2407 74.24 97.4651 68.632 97.4651 53.784C97.4651 40.728 88.2407 32.816 69.7918 32.816H0V0H77.4788C119.245 0 140 19.712 140 51.2C140 74.752 125.395 90.112 105.665 92.672C122.32 96 132.057 105.472 133.85 124.16Z" />
+      <path d="M229.43 120.576C225.59 129.536 218.422 133.376 207.158 133.376C194.614 133.376 184.374 126.72 183.35 112.64H263.478V101.12C263.478 70.1437 243.254 44.0317 205.11 44.0317C169.526 44.0317 142.902 69.8877 142.902 105.984C142.902 142.336 169.014 164.352 205.622 164.352C235.83 164.352 256.822 149.76 262.71 123.648L229.43 120.576ZM183.862 92.6717C185.398 81.9197 191.286 73.7277 204.598 73.7277C216.886 73.7277 223.542 82.4317 224.054 92.6717H183.862Z" />
+      <path d="M385.256 66.5597C380.392 53.2477 369.896 44.0317 349.672 44.0317C332.52 44.0317 320.232 51.7117 314.088 64.2557V47.1037H272.616V161.28H314.088V105.216C314.088 88.0638 318.952 76.7997 332.52 76.7997C345.064 76.7997 348.136 84.9917 348.136 100.608V161.28H389.608V105.216C389.608 88.0638 394.216 76.7997 408.04 76.7997C420.584 76.7997 423.4 84.9917 423.4 100.608V161.28H464.872V89.5997C464.872 65.7917 455.656 44.0317 424.168 44.0317C404.968 44.0317 391.4 53.7597 385.256 66.5597Z" />
+      <path d="M478.436 47.104V161.28H519.908V47.104H478.436ZM478.18 36.352H520.164V0H478.18V36.352Z" />
+      <path d="M654.54 47.1035H611.788L592.332 74.2395L573.388 47.1035H527.564L568.78 103.168L523.98 161.28H566.732L589.516 130.304L612.3 161.28H658.124L613.068 101.376L654.54 47.1035Z" />
+    </svg>
+  );
+}

examples/remix/app/routes/demos/about.tsx

@@ -0,0 +1,44 @@
+import { Outlet } from "remix";
+import type { MetaFunction, LinksFunction } from "remix";
+
+import stylesUrl from "~/styles/demos/about.css";
+
+export let meta: MetaFunction = () => {
+  return {
+    title: "About Remix"
+  };
+};
+
+export let links: LinksFunction = () => {
+  return [{ rel: "stylesheet", href: stylesUrl }];
+};
+
+export default function Index() {
+  return (
+    <div className="about">
+      <div className="about__intro">
+        <h2>About Us</h2>
+        <p>
+          Ok, so this page isn't really <em>about us</em>, but we did want to
+          show you a few more things Remix can do.
+        </p>
+        <p>
+          Did you notice that things look a little different on this page? The
+          CSS that we import in the route file and include in its{" "}
+          <code>links</code> export is only included on this route and its
+          children.
+        </p>
+        <p>
+          Wait a sec...<em>its children</em>? To understand what we mean by
+          this,{" "}
+          <a href="https://remix.run/tutorial/4-nested-routes-params">
+            read all about nested routes in the docs
+          </a>
+          .
+        </p>
+        <hr />
+        <Outlet />
+      </div>
+    </div>
+  );
+}

examples/remix/app/routes/demos/about/index.tsx

@@ -0,0 +1,17 @@
+import { Link } from "remix";
+
+export default function AboutIndex() {
+  return (
+    <div>
+      <p>
+        You are looking at the index route for the <code>/about</code> URL
+        segment, but there are nested routes as well!
+      </p>
+      <p>
+        <strong>
+          <Link to="whoa">Check out one of them here.</Link>
+        </strong>
+      </p>
+    </div>
+  );
+}

examples/remix/app/routes/demos/about/whoa.tsx

@@ -0,0 +1,20 @@
+import { Link } from "remix";
+
+export default function AboutIndex() {
+  return (
+    <div>
+      <p>
+        Whoa, this is a nested route! We render the <code>/about</code> layout
+        route component, and its <code>Outlet</code> renders our route
+        component. 🤯
+      </p>
+      <p>
+        <strong>
+          <Link to="..">
+            Go back to the <code>/about</code> index.
+          </Link>
+        </strong>
+      </p>
+    </div>
+  );
+}

examples/remix/app/routes/demos/actions.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useRef } from "react";
+import type { ActionFunction } from "remix";
+import { Form, json, useActionData, redirect } from "remix";
+
+export function meta() {
+  return { title: "Actions Demo" };
+}
+
+// When your form sends a POST, the action is called on the server.
+// - https://remix.run/api/conventions#action
+// - https://remix.run/guides/data-updates
+export let action: ActionFunction = async ({ request }) => {
+  let formData = await request.formData();
+  let answer = formData.get("answer");
+
+  // Typical action workflows start with validating the form data that just came
+  // over the network. Clientside validation is fine, but you definitely need it
+  // server side.  If there's a problem, return the the data and the component
+  // can render it.
+  if (typeof answer !== "string") {
+    return json("Come on, at least try!", { status: 400 });
+  }
+
+  if (answer !== "egg") {
+    return json(`Sorry, ${answer} is not right.`, { status: 400 });
+  }
+
+  // Finally, if the data is valid, you'll typically write to a database or send or
+  // email or log the user in, etc. It's recommended to redirect after a
+  // successful action, even if it's to the same place so that non-JavaScript workflows
+  // from the browser doesn't repost the data if the user clicks back.
+  return redirect("/demos/correct");
+};
+
+export default function ActionsDemo() {
+  // https://remix.run/api/remix#useactiondata
+  let actionMessage = useActionData<string>();
+  let answerRef = useRef<HTMLInputElement>(null);
+
+  // This form works without JavaScript, but when we have JavaScript we can make
+  // the experience better by selecting the input on wrong answers! Go ahead, disable
+  // JavaScript in your browser and see what happens.
+  useEffect(() => {
+    if (actionMessage && answerRef.current) {
+      answerRef.current.select();
+    }
+  }, [actionMessage]);
+
+  return (
+    <div className="remix__page">
+      <main>
+        <h2>Actions!</h2>
+        <p>
+          This form submission will send a post request that we handle in our
+          `action` export. Any route can export an action to handle data
+          mutations.
+        </p>
+        <Form method="post" className="remix__form">
+          <h3>Post an Action</h3>
+          <p>
+            <i>What is more useful when it is broken?</i>
+          </p>
+          <label>
+            <div>Answer:</div>
+            <input ref={answerRef} name="answer" type="text" />
+          </label>
+          <div>
+            <button>Answer!</button>
+          </div>
+          {actionMessage ? (
+            <p>
+              <b>{actionMessage}</b>
+            </p>
+          ) : null}
+        </Form>
+      </main>
+
+      <aside>
+        <h3>Additional Resources</h3>
+        <ul>
+          <li>
+            Guide:{" "}
+            <a href="https://remix.run/guides/data-writes">Data Writes</a>
+          </li>
+          <li>
+            API:{" "}
+            <a href="https://remix.run/api/conventions#action">
+              Route Action Export
+            </a>
+          </li>
+          <li>
+            API:{" "}
+            <a href="https://remix.run/api/remix#useactiondata">
+              <code>useActionData</code>
+            </a>
+          </li>
+        </ul>
+      </aside>
+    </div>
+  );
+}

examples/remix/app/routes/demos/correct.tsx

@@ -0,0 +1,3 @@
+export default function NiceWork() {
+  return <h1>You got it right!</h1>;
+}

examples/remix/app/routes/demos/params.tsx

@@ -0,0 +1,43 @@
+import { useCatch, Link, json, useLoaderData, Outlet } from "remix";
+
+export function meta() {
+  return { title: "Boundaries Demo" };
+}
+
+export default function Boundaries() {
+  return (
+    <div className="remix__page">
+      <main>
+        <Outlet />
+      </main>
+
+      <aside>
+        <h2>Click these Links</h2>
+        <ul>
+          <li>
+            <Link to=".">Start over</Link>
+          </li>
+          <li>
+            <Link to="one">
+              Param: <i>one</i>
+            </Link>
+          </li>
+          <li>
+            <Link to="two">
+              Param: <i>two</i>
+            </Link>
+          </li>
+          <li>
+            <Link to="this-record-does-not-exist">This will be a 404</Link>
+          </li>
+          <li>
+            <Link to="shh-its-a-secret">And this will be 401 Unauthorized</Link>
+          </li>
+          <li>
+            <Link to="kaboom">This one will throw an error</Link>
+          </li>
+        </ul>
+      </aside>
+    </div>
+  );
+}

examples/remix/app/routes/demos/params/$id.tsx

@@ -0,0 +1,110 @@
+import { useCatch, Link, json, useLoaderData } from "remix";
+import type { LoaderFunction, MetaFunction } from "remix";
+
+// The `$` in route filenames becomes a pattern that's parsed from the URL and
+// passed to your loaders so you can look up data.
+// - https://remix.run/api/conventions#loader-params
+export let loader: LoaderFunction = async ({ params }) => {
+  // pretend like we're using params.id to look something up in the db
+
+  if (params.id === "this-record-does-not-exist") {
+    // If the record doesn't exist we can't render the route normally, so
+    // instead we throw a 404 reponse to stop running code here and show the
+    // user the catch boundary.
+    throw new Response("Not Found", { status: 404 });
+  }
+
+  // now pretend like the record exists but the user just isn't authorized to
+  // see it.
+  if (params.id === "shh-its-a-secret") {
+    // Again, we can't render the component if the user isn't authorized. You
+    // can even put data in the response that might help the user rectify the
+    // issue! Like emailing the webmaster for access to the page. (Oh, right,
+    // `json` is just a Response helper that makes it easier to send JSON
+    // responses).
+    throw json({ webmasterEmail: "hello@remix.run" }, { status: 401 });
+  }
+
+  // Sometimes your code just blows up and you never anticipated it. Remix will
+  // automatically catch it and send the UI to the error boundary.
+  if (params.id === "kaboom") {
+    lol();
+  }
+
+  // but otherwise the record was found, user has access, so we can do whatever
+  // else we needed to in the loader and return the data. (This is boring, we're
+  // just gonna return the params.id).
+  return { param: params.id };
+};
+
+export default function ParamDemo() {
+  let data = useLoaderData();
+  return (
+    <h1>
+      The param is <i style={{ color: "red" }}>{data.param}</i>
+    </h1>
+  );
+}
+
+// https://remix.run/api/conventions#catchboundary
+// https://remix.run/api/remix#usecatch
+// https://remix.run/api/guides/not-found
+export function CatchBoundary() {
+  let caught = useCatch();
+
+  let message: React.ReactNode;
+  switch (caught.status) {
+    case 401:
+      message = (
+        <p>
+          Looks like you tried to visit a page that you do not have access to.
+          Maybe ask the webmaster ({caught.data.webmasterEmail}) for access.
+        </p>
+      );
+    case 404:
+      message = (
+        <p>Looks like you tried to visit a page that does not exist.</p>
+      );
+    default:
+      message = (
+        <p>
+          There was a problem with your request!
+          <br />
+          {caught.status} {caught.statusText}
+        </p>
+      );
+  }
+
+  return (
+    <>
+      <h2>Oops!</h2>
+      <p>{message}</p>
+      <p>
+        (Isn't it cool that the user gets to stay in context and try a different
+        link in the parts of the UI that didn't blow up?)
+      </p>
+    </>
+  );
+}
+
+// https://remix.run/api/conventions#errorboundary
+// https://remix.run/api/guides/not-found
+export function ErrorBoundary({ error }: { error: Error }) {
+  console.error(error);
+  return (
+    <>
+      <h2>Error!</h2>
+      <p>{error.message}</p>
+      <p>
+        (Isn't it cool that the user gets to stay in context and try a different
+        link in the parts of the UI that didn't blow up?)
+      </p>
+    </>
+  );
+}
+
+export let meta: MetaFunction = ({ data }) => {
+  return {
+    title: data ? `Param: ${data.param}` : "Oops...",
+  };
+};

examples/remix/app/routes/demos/params/index.tsx

@@ -0,0 +1,40 @@
+import { useCatch, Link, json, useLoaderData, Outlet } from "remix";
+import type { LoaderFunction } from "remix";
+
+export default function Boundaries() {
+  return (
+    <>
+      <h2>Params</h2>
+      <p>
+        When you name a route segment with $ like{" "}
+        <code>routes/users/$userId.js</code>, the $ segment will be parsed from
+        the URL and sent to your loaders and actions by the same name.
+      </p>
+      <h2>Errors</h2>
+      <p>
+        When a route throws and error in it's action, loader, or component,
+        Remix automatically catches it, won't even try to render the component,
+        but it will render the route's ErrorBoundary instead. If the route
+        doesn't have one, it will bubble up to the routes above it until it hits
+        the root.
+      </p>
+      <p>So be as granular as you want with your error handling.</p>
+      <h2>Not Found</h2>
+      <p>
+        (and other{" "}
+        <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#client_error_responses">
+          client errors
+        </a>
+        )
+      </p>
+      <p>
+        Loaders and Actions can throw a <code>Response</code> instead of an
+        error and Remix will render the CatchBoundary instead of the component.
+        This is great when loading data from a database isn't found. As soon as
+        you know you can't render the component normally, throw a 404 response
+        and send your app into the catch boundary. Just like error boundaries,
+        catch boundaries bubble, too.
+      </p>
+    </>
+  );
+}

examples/remix/app/routes/index.tsx

@@ -0,0 +1,100 @@
+import type { MetaFunction, LoaderFunction } from "remix";
+import { useLoaderData, json, Link } from "remix";
+
+type IndexData = {
+  resources: Array<{ name: string; url: string }>;
+  demos: Array<{ name: string; to: string }>;
+};
+
+// Loaders provide data to components and are only ever called on the server, so
+// you can connect to a database or run any server side code you want right next
+// to the component that renders it.
+// https://remix.run/api/conventions#loader
+export let loader: LoaderFunction = () => {
+  let data: IndexData = {
+    resources: [
+      {
+        name: "Remix Docs",
+        url: "https://remix.run/docs"
+      },
+      {
+        name: "React Router Docs",
+        url: "https://reactrouter.com/docs"
+      },
+      {
+        name: "Remix Discord",
+        url: "https://discord.gg/VBePs6d"
+      }
+    ],
+    demos: [
+      {
+        to: "demos/actions",
+        name: "Actions"
+      },
+      {
+        to: "demos/about",
+        name: "Nested Routes, CSS loading/unloading"
+      },
+      {
+        to: "demos/params",
+        name: "URL Params and Error Boundaries"
+      }
+    ]
+  };
+
+  // https://remix.run/api/remix#json
+  return json(data);
+};
+
+// https://remix.run/api/conventions#meta
+export let meta: MetaFunction = () => {
+  return {
+    title: "Remix Starter",
+    description: "Welcome to remix!"
+  };
+};
+
+// https://remix.run/guides/routing#index-routes
+export default function Index() {
+  let data = useLoaderData<IndexData>();
+
+  return (
+    <div className="remix__page">
+      <main>
+        <h2>Welcome to Remix!</h2>
+        <p>We're stoked that you're here. 🥳</p>
+        <p>
+          Feel free to take a look around the code to see how Remix does things,
+          it might be a bit different than what you’re used to. When you're
+          ready to dive deeper, we've got plenty of resources to get you
+          up-and-running quickly.
+        </p>
+        <p>
+          Check out all the demos in this starter, and then just delete the{" "}
+          <code>app/routes/demos</code> and <code>app/styles/demos</code>{" "}
+          folders when you're ready to turn this into your next project.
+        </p>
+      </main>
+      <aside>
+        <h2>Demos In This App</h2>
+        <ul>
+          {data.demos.map(demo => (
+            <li key={demo.to} className="remix__page__resource">
+              <Link to={demo.to} prefetch="intent">
+                {demo.name}
+              </Link>
+            </li>
+          ))}
+        </ul>
+        <h2>Resources</h2>
+        <ul>
+          {data.resources.map(resource => (
+            <li key={resource.url} className="remix__page__resource">
+              <a href={resource.url}>{resource.name}</a>
+            </li>
+          ))}
+        </ul>
+      </aside>
+    </div>
+  );
+}

examples/remix/app/styles/dark.css

@@ -0,0 +1,7 @@
+:root {
+  --color-foreground: hsl(0, 0%, 100%);
+  --color-background: hsl(0, 0%, 7%);
+  --color-links: hsl(213, 100%, 73%);
+  --color-links-hover: hsl(213, 100%, 80%);
+  --color-border: hsl(0, 0%, 25%);
+}

examples/remix/app/styles/demos/about.css

@@ -0,0 +1,26 @@
+/*
+ * Whoa whoa whoa, wait a sec...why are we overriding global CSS selectors?
+ * Isn't that kind of scary? How do we know this won't have side effects?
+ *
+ * In Remix, CSS that is included in a route file will *only* show up on that
+ * route (and for nested routes, its children). When the user navigates away
+ * from that route the CSS files linked from those routes will be automatically
+ * unloaded, making your styles much easier to predict and control.
+ *
+ * Read more about styling routes in the docs:
+ * https://remix.run/guides/styling
+ */
+
+:root {
+  --color-foreground: hsl(0, 0%, 7%);
+  --color-background: hsl(56, 100%, 50%);
+  --color-links: hsl(345, 56%, 39%);
+  --color-links-hover: hsl(345, 51%, 49%);
+  --color-border: rgb(184, 173, 20);
+  --font-body: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    Liberation Mono, Courier New, monospace;
+}
+
+.about__intro {
+  max-width: 500px;
+}

examples/remix/app/styles/global.css

@@ -0,0 +1,216 @@
+/*
+ * You can just delete everything here or keep whatever you like, it's just a
+ * quick baseline!
+ */
+:root {
+  --color-foreground: hsl(0, 0%, 7%);
+  --color-background: hsl(0, 0%, 100%);
+  --color-links: hsl(213, 100%, 52%);
+  --color-links-hover: hsl(213, 100%, 43%);
+  --color-border: hsl(0, 0%, 82%);
+  --font-body: -apple-system, "Segoe UI", Helvetica Neue, Helvetica, Roboto,
+    Arial, sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji";
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+:-moz-focusring {
+  outline: auto;
+}
+
+:focus {
+  outline: var(--color-links) solid 2px;
+  outline-offset: 2px;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}
+
+body {
+  font-family: var(--font-body);
+  line-height: 1.5;
+}
+
+a {
+  color: var(--color-links);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--color-links-hover);
+  text-decoration: underline;
+}
+
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  background-color: var(--color-border);
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+input:where([type="text"]),
+input:where([type="search"]) {
+  display: block;
+  border: 1px solid var(--color-border);
+  width: 100%;
+  font: inherit;
+  line-height: 1;
+  height: calc(1ch + 1.5em);
+  padding-right: 0.5em;
+  padding-left: 0.5em;
+  background-color: hsl(0 0% 100% / 20%);
+  color: var(--color-foreground);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.container {
+  --gutter: 16px;
+  width: 1024px;
+  max-width: calc(100% - var(--gutter) * 2);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.remix-app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-height: calc(100vh - env(safe-area-inset-bottom));
+}
+
+.remix-app > * {
+  width: 100%;
+}
+
+.remix-app__header {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.remix-app__header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.remix-app__header-home-link {
+  width: 106px;
+  height: 30px;
+  color: var(--color-foreground);
+}
+
+.remix-app__header-nav ul {
+  list-style: none;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 1.5em;
+}
+
+.remix-app__header-nav li {
+  font-weight: bold;
+}
+
+.remix-app__main {
+  flex: 1 1 100%;
+}
+
+.remix-app__footer {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.remix-app__footer-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.remix__page {
+  --gap: 1rem;
+  --space: 2rem;
+  display: grid;
+  grid-auto-rows: min-content;
+  gap: var(--gap);
+  padding-top: var(--space);
+  padding-bottom: var(--space);
+}
+
+@media print, screen and (min-width: 640px) {
+  .remix__page {
+    --gap: 2rem;
+    grid-auto-rows: unset;
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .remix__page {
+    --gap: 4rem;
+  }
+}
+
+.remix__page > main > :first-child {
+  margin-top: 0;
+}
+
+.remix__page > main > :last-child {
+  margin-bottom: 0;
+}
+
+.remix__page > aside {
+  margin: 0;
+  padding: 1.5ch 2ch;
+  border: solid 1px var(--color-border);
+  border-radius: 0.5rem;
+}
+
+.remix__page > aside > :first-child {
+  margin-top: 0;
+}
+
+.remix__page > aside > :last-child {
+  margin-bottom: 0;
+}
+
+.remix__form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+}
+
+.remix__form > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}

examples/remix/package.json

@@ -0,0 +1,29 @@
+{
+  "private": true,
+  "name": "remix-app-template",
+  "description": "",
+  "license": "",
+  "scripts": {
+    "build": "remix build",
+    "dev": "remix dev",
+    "postinstall": "remix setup node"
+  },
+  "dependencies": {
+    "@remix-run/react": "^1.0.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "remix": "^1.0.6",
+    "@remix-run/serve": "^1.0.6",
+    "@remix-run/vercel": "^1.0.6"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "^1.0.6",
+    "@types/react": "^17.0.24",
+    "@types/react-dom": "^17.0.9",
+    "typescript": "^4.1.2"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "sideEffects": false
+}