Start getting Jest working

.github/CODEOWNERS

@@ -1,17 +1,23 @@
 # Documentation
 # https://help.github.com/en/articles/about-code-owners
 
-*                                        @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood
-/.github/workflows                       @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood @ijjk
-/packages/cli/src/commands/domains       @mglagola @anatrajkovska
-/packages/cli/src/commands/certs         @mglagola @anatrajkovska
-/packages/cli/src/commands/env           @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood
-/packages/fs-detectors                   @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood @agadzik @chloetedder
-/packages/middleware                     @gdborton @vercel/edge-function
-/packages/node-bridge                    @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood @ijjk
-/packages/next                           @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood @ijjk
-/packages/routing-utils                  @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood @ijjk
-/packages/edge                           @vercel/edge-function
+*                                        @TooTallNate @EndangeredMassa @styfle
+/.github/workflows                       @TooTallNate @EndangeredMassa @styfle @ijjk
+/packages/frameworks                     @TooTallNate @EndangeredMassa @styfle @AndyBitz
+/packages/cli/src/commands/domains       @javivelasco @mglagola @anatrajkovska
+/packages/cli/src/commands/certs         @javivelasco @mglagola @anatrajkovska
+/packages/cli/src/commands/env           @styfle @lucleray
+/packages/client                         @TooTallNate @EndangeredMassa @styfle
+/packages/build-utils                    @TooTallNate @EndangeredMassa @styfle @AndyBitz
+/packages/middleware                     @gdborton @javivelasco
+/packages/node                           @TooTallNate @EndangeredMassa @styfle
+/packages/node-bridge                    @TooTallNate @EndangeredMassa @styfle @ijjk
+/packages/next                           @TooTallNate @ijjk
+/packages/go                             @TooTallNate @EndangeredMassa @styfle
+/packages/python                         @TooTallNate @EndangeredMassa @styfle
+/packages/ruby                           @TooTallNate @EndangeredMassa @styfle
+/packages/static-build                   @TooTallNate @EndangeredMassa @styfle @AndyBitz
+/packages/routing-utils                  @TooTallNate @EndangeredMassa @styfle @ijjk
 /examples                                @leerob
 /examples/create-react-app               @Timer
 /examples/nextjs                         @timneutkens @ijjk @styfle

.github/CONTRIBUTING.md

@@ -13,7 +13,6 @@ To get started, execute the following:
 ```
 git clone https://github.com/vercel/vercel
 cd vercel
-corepack enable
 yarn install
 yarn bootstrap
 yarn build

.github/workflows/cancel.yml

@@ -0,0 +1,17 @@
+name: Cancel
+on:
+  push:
+    branches:
+    - '**'
+    - '!main'
+
+jobs:
+  cancel:
+    name: 'Cancel Previous Runs'
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+    steps:
+      - uses: styfle/cancel-workflow-action@0.9.1
+        with:
+          workflow_id: test.yml, test-integration-cli.yml, test-unit.yml
+          access_token: ${{ github.token }}

.github/workflows/cron-update-next.yml

@@ -1,25 +0,0 @@
-name: Cron Update Next
-
-on:
-  # Run every 4 hours https://crontab.guru/every-4-hours
-  schedule:
-    - cron: '0 */4 * * *'
-
-jobs:
-  create-pull-request:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        # 0 means fetch all commits so we can commit and push in the script below
-        with:
-          fetch-depth: 0
-      - name: Create Pull Request
-        uses: actions/github-script@v6
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-        # See https://github.com/actions/github-script#run-a-separate-file-with-an-async-function
-        with:
-          script: |
-            const script = require('./utils/update-next.js')
-            await script({ github, context })

.github/workflows/publish.yml

@@ -7,20 +7,13 @@ on:
     tags:
     - '!*'
 
-env:
-  TURBO_REMOTE_ONLY: 'true'
-  TURBO_TEAM: 'vercel'
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-
 jobs:
   publish:
     name: Publish
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v3
-      with:
-        fetch-depth: 0
+      uses: actions/checkout@v1
     - name: Check Release
       id: check-release
       run: |
@@ -33,16 +26,14 @@ jobs:
         fi
     - name: Setup Go
       if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
-      uses: actions/setup-go@v3
+      uses: actions/setup-go@v2
       with:
         go-version: '1.13.15'
     - name: Setup Node
       if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
-      uses: actions/setup-node@v3
-      timeout-minutes: 5 # See https://github.com/actions/cache/issues/810
+      uses: actions/setup-node@v2
       with:
         node-version: 14
-        cache: 'yarn'
     - name: Install
       if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
       run: yarn install --check-files --frozen-lockfile --network-timeout 1000000

.github/workflows/required-pr-label.yml

@@ -1,26 +0,0 @@
-name: Required PR Label
-on:
-  pull_request:
-    types: [opened, labeled, unlabeled, synchronize]
-jobs:
-  label:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check PR Labels
-        uses: actions/github-script@v6
-        with:
-          script: |
-            let missing = false;
-            const labels = context.payload.pull_request.labels.map(l => l.name);
-            if (labels.filter(l => l.startsWith('area:')).length === 0) {
-              console.error('::error::Missing label: Please add at least one "area" label.');
-              missing = true;
-            }
-            if (labels.filter(l => l.startsWith('semver:')).length !== 1) {
-              console.error('::error::Missing label: Please add exactly one "semver" label.');
-              missing = true;
-            }
-            if (missing) {
-              process.exit(1);
-            }
-            console.log('::notice::Success: This pull request has correct labels, thanks!');

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

@@ -8,15 +8,6 @@ on:
     - '!*'
   pull_request:
 
-env:
-  TURBO_REMOTE_ONLY: 'true'
-  TURBO_TEAM: 'vercel'
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
-
 jobs:
   test:
     name: CLI
@@ -28,20 +19,28 @@ jobs:
         node: [14]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 2
-      - uses: actions/setup-go@v3
+      - name: Conditionally set remote env
+        if: github.event.pull_request.head.repo.full_name == github.repository
+        run: |
+            echo "TURBO_REMOTE_ONLY=true" >> $GITHUB_ENV
+            echo "TURBO_TEAM=vercel" >> $GITHUB_ENV
+            echo "TURBO_TOKEN=${{ secrets.TURBO_TOKEN }}" >> $GITHUB_ENV
+      - uses: actions/setup-go@v2
         with:
           go-version: '1.13.15'
-      - uses: actions/setup-node@v3
-        timeout-minutes: 5 # See https://github.com/actions/cache/issues/810
+      - uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
-          cache: 'yarn'
-      - run: yarn install --network-timeout 1000000 --frozen-lockfile
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 100
+      - run: git --version
+      - run: git fetch origin main --depth=100
+      - run: git fetch origin ${{ github.ref }} --depth=100
+      - run: git diff origin/main...HEAD --name-only
+      - run: yarn install --network-timeout 1000000
       - run: yarn run build
       - run: yarn test-integration-cli
         env:
-          VERCEL_TEST_TOKEN: ${{ secrets.VERCEL_TEST_TOKEN }}
-          VERCEL_TEST_REGISTRATION_URL: ${{ secrets.VERCEL_TEST_REGISTRATION_URL }}
+          VERCEL_TEAM_TOKEN: ${{ secrets.VERCEL_TEAM_TOKEN }}
+          VERCEL_REGISTRATION_URL: ${{ secrets.VERCEL_REGISTRATION_URL }}

.github/workflows/test-unit.yml

@@ -8,15 +8,6 @@ on:
     - '!*'
   pull_request:
 
-env:
-  TURBO_REMOTE_ONLY: 'true'
-  TURBO_TEAM: 'vercel'
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
-
 jobs:
   test:
     name: Unit
@@ -28,18 +19,26 @@ jobs:
         node: [14]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/setup-go@v3
+      - name: Conditionally set remote env
+        if: github.event.pull_request.head.repo.full_name == github.repository
+        run: |
+            echo "TURBO_REMOTE_ONLY=true" >> $GITHUB_ENV
+            echo "TURBO_TEAM=vercel" >> $GITHUB_ENV
+            echo "TURBO_TOKEN=${{ secrets.TURBO_TOKEN }}" >> $GITHUB_ENV
+      - uses: actions/setup-go@v2
         with:
           go-version: '1.13.15'
-      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v2
         with:
-            fetch-depth: 2
-      - uses: actions/setup-node@v3
-        timeout-minutes: 5 # See https://github.com/actions/cache/issues/810
+          node-version: ${{ matrix.node }}
+      - uses: actions/checkout@v2
         with:
-            node-version: ${{ matrix.node }}
-            cache: 'yarn'
-      - run: yarn install --network-timeout 1000000 --frozen-lockfile
+          fetch-depth: 100
+      - run: git --version
+      - run: git fetch origin main --depth=100
+      - run: git fetch origin ${{ github.ref }} --depth=100
+      - run: git diff origin/main...HEAD --name-only
+      - run: yarn install --network-timeout 1000000
       - run: yarn run build
       - run: yarn run lint
         if: matrix.os == 'ubuntu-latest' && matrix.node == 14 # only run lint once

.github/workflows/test.yml

@@ -10,13 +10,6 @@ on:
 
 env:
   NODE_VERSION: '14'
-  TURBO_REMOTE_ONLY: 'true'
-  TURBO_TEAM: 'vercel'
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
 
 jobs:
   setup:
@@ -24,32 +17,21 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       tests: ${{ steps['set-tests'].outputs['tests'] }}
-      dplUrl: ${{ steps.waitForTarball.outputs.url }}
     steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 2
-      - uses: actions/setup-go@v3
-        with:
-          go-version: '1.13.15'
-      - uses: actions/setup-node@v3
-        timeout-minutes: 5 # See https://github.com/actions/cache/issues/810
+      - uses: actions/checkout@v2
+      - run: git --version
+      - run: git fetch origin main
+      - uses: actions/setup-node@v2
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'yarn'
-      - run: yarn install --network-timeout 1000000 --frozen-lockfile
+      - run: yarn install --network-timeout 1000000
       - id: set-tests
         run: |
           TESTS_ARRAY=$(node utils/chunk-tests.js $SCRIPT_NAME)
           echo "Files to test:"
           echo "$TESTS_ARRAY"
           echo "::set-output name=tests::$TESTS_ARRAY"
-      - uses: patrickedqvist/wait-for-vercel-preview@ae34b392ef30297f2b672f9afb3c329bde9bd487
-        id: waitForTarball
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          max_timeout: 360
-          check_interval: 5
 
   test:
     timeout-minutes: 120
@@ -63,14 +45,19 @@ jobs:
       matrix:
         include: ${{ fromJson(needs.setup.outputs['tests']) }}
     steps:
-      - uses: actions/checkout@v3
+      - name: Conditionally set remote env
+        if: github.event.pull_request.head.repo.full_name == github.repository
+        run: |
+            echo "TURBO_REMOTE_ONLY=true" >> $GITHUB_ENV
+            echo "TURBO_TEAM=vercel" >> $GITHUB_ENV
+            echo "TURBO_TOKEN=${{ secrets.TURBO_TOKEN }}" >> $GITHUB_ENV
+      - uses: actions/checkout@v2
         with:
           fetch-depth: 2
-      - uses: actions/setup-go@v3
+      - uses: actions/setup-go@v2
         with:
           go-version: '1.13.15'
-      - uses: actions/setup-node@v3
-        timeout-minutes: 5 # See https://github.com/actions/cache/issues/810
+      - uses: actions/setup-node@v2
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'yarn'
@@ -82,16 +69,15 @@ jobs:
       - run: yarn install --network-timeout 1000000
 
       - name: Build ${{matrix.packageName}} and all its dependencies
-        run: node utils/gen.js && node_modules/.bin/turbo run build --cache-dir=".turbo" --scope=${{matrix.packageName}} --include-dependencies --no-deps
+        run: yarn turbo run build --cache-dir=".turbo" --scope=${{matrix.packageName}} --include-dependencies --no-deps
         env:
           FORCE_COLOR: '1'
       - name: Test ${{matrix.packageName}}
-        run: node utils/gen.js && node_modules/.bin/turbo run test --cache-dir=".turbo" --scope=${{matrix.packageName}} --no-deps -- ${{ join(matrix.testPaths, ' ') }}
+        run: node_modules/.bin/turbo run test --cache-dir=".turbo" --scope=${{matrix.packageName}} --no-deps -- ${{ join(matrix.testPaths, ' ') }}
         shell: bash
         env:
-          VERCEL_CLI_VERSION: ${{ needs.setup.outputs.dplUrl }}/tarballs/vercel.tgz
-          VERCEL_TEST_TOKEN: ${{ secrets.VERCEL_TEST_TOKEN }}
-          VERCEL_TEST_REGISTRATION_URL: ${{ secrets.VERCEL_TEST_REGISTRATION_URL }}
+          VERCEL_TEAM_TOKEN: ${{ secrets.VERCEL_TEAM_TOKEN }}
+          VERCEL_REGISTRATION_URL: ${{ secrets.VERCEL_REGISTRATION_URL }}
           FORCE_COLOR: '1'
 
   conclusion:

.gitignore

@@ -28,4 +28,3 @@ test/lib/deployment/failed-page.txt
 __pycache__
 .vercel
 .turbo
-turbo-cache-key.json

.kodiak.toml

@@ -1,7 +1,7 @@
 version = 1
 
 [merge]
-automerge_label = ["pr: automerge"]
+automerge_label = ["semver-major","semver-minor","semver-patch"]
 blacklist_title_regex = "^WIP.*"
 blacklist_labels = ["work in progress"]
 method = "squash"

DEVELOPING_A_RUNTIME.md

@@ -1,9 +1,7 @@
 # Runtime Developer Reference
 
 The following page is a reference for how to create a Runtime by implementing
-the Runtime API interface. It's a way to add support for a new programming language to Vercel.
-
-> Note: If you're the author of a web framework, please use the [Build Output API](https://vercel.com/docs/build-output-api/v3) instead to make your framework compatible with Vercel.
+the Runtime API interface.
 
 A Runtime is an npm module that implements the following interface:
 
@@ -63,6 +61,9 @@ export async function build(options: BuildOptions) {
   const lambda = createLambda(/* … */);
   return {
     output: lambda,
+    watch: [
+      // Dependent files to trigger a rebuild in `vercel dev` go here…
+    ],
     routes: [
       // If your Runtime needs to define additional routing, define it here…
     ],
@@ -112,8 +113,7 @@ export async function shouldServe(options: ShouldServeOptions) {
 }
 ```
 
-If this function is not defined, Vercel CLI will use the [default
-implementation](https://github.com/vercel/vercel/blob/52994bfe26c5f4f179bdb49783ee57ce19334631/packages/now-build-utils/src/should-serve.ts).
+If this function is not defined, Vercel CLI will use the [default implementation](https://github.com/vercel/vercel/blob/52994bfe26c5f4f179bdb49783ee57ce19334631/packages/now-build-utils/src/should-serve.ts).
 
 ### `startDevServer()`
 
@@ -187,8 +187,7 @@ If you need to share state between those steps, use the filesystem.
 
 ### Directory and Cache Lifecycle
 
-When a new build is created, we pre-populate the `workPath` supplied to `analyze` with the results of the `prepareCache` step of the
-previous build.
+When a new build is created, we pre-populate the `workPath` supplied to `analyze` with the results of the `prepareCache` step of the previous build.
 
 The `analyze` step can modify that directory, and it will not be re-created when it's supplied to `build` and `prepareCache`.
 
@@ -196,77 +195,6 @@ The `analyze` step can modify that directory, and it will not be re-created when
 
 The env and secrets specified by the user as `build.env` are passed to the Runtime process. This means you can access user env via `process.env` in Node.js.
 
-### Supporting Large Environment
-
-We provide the ability to support more than 4KB of environment (up to 64KB) by way of
-a Lambda runtime wrapper that is added to every Lambda function we create. These are
-supported by many of the existing Lambda runtimes, but custom runtimes may require
-additional work.
-
-The following Lambda runtime families have built-in support for the runtime wrapper:
-
-- `nodejs`
-- `python` (>= 3.8)
-- `ruby`
-- `java11`
-- `java8.al2` (not `java8`)
-- `dotnetcore`
-
-If a custom runtime is based on one of these Lambda runtimes, large environment
-support will be available without further configuration. Custom runtimes based on
-other Lambda runtimes, including those that provide the runtime via `provided` and
-`provided.al2`, must implement runtime wrapper support and indicate it via the
-`supportsWrapper` flag when calling [`createLambda`](#createlambda()).
-
-To add support for runtime wrappers to a custom runtime, first check the value of the
-`AWS_LAMBDA_EXEC_WRAPPER` environment variable in the bootstrap script. Its value is
-the path to the wrapper executable.
-
-The wrapper must be passed the path to the runtime as well as any parameters that the
-runtime requires. This is most easily done in a small `bootstrap` script.
-
-In this simple `bash` example, the runtime is called directly if
-`AWS_LAMBDA_EXEC_WRAPPER` has no value, otherwise the wrapper is called with the
-runtime command as parameters.
-
-```bash
-#!/bin/bash
-
-exec $AWS_LAMBDA_EXEC_WRAPPER path/to/runtime param1 param2
-```
-
-If the `bootstrap` file is not a launcher script, but the entrypoint of the runtime
-itself, replace the bootstrap process with the wrapper. Pass the path and parameters
-of the executing file, ensuring the `AWS_LAMBDA_EXEC_WRAPPER` environment variable is
-set to blank.
-
-This `bash` example uses `exec` to replace the running bootstrap process with the
-wrapper, passing its own path and parameters.
-
-```bash
-#!/bin/bash
-
-if [[ -n $AWS_LAMBDA_EXEC_WRAPPER ]]
-  __WRAPPER=$AWS_LAMBDA_EXEC_WRAPPER
-  AWS_LAMBDA_EXEC_WRAPPER=""
-  exec $__WRAPPER "$0" "${@}"
-fi
-
-# start the actual runtime functionality
-```
-
-Note that unsetting the variable may not have the desired effect due to the way
-Lambda spawns runtime processes. It is better to explicitly set it to blank.
-
-The best way to replace the existing bootstrap process is with the
-[`execve`](https://www.man7.org/linux/man-pages/man2/execve.2.html) syscall.
-This is achieved by using `exec` in `bash` to replace the running process with the wrapper,
-maintaining the same PID and environment.
-
-Once support for runtime wrappers is included, ensure `supportsWrapper` is set to
-`true` in the call to [`createLambda`](#createlambda()). This will inform the build
-process to enable large environment support for this runtime.
-
 ### Utilities as peerDependencies
 
 When you publish your Runtime to npm, make sure to not specify `@vercel/build-utils` (as seen below in the API definitions) as a dependency, but rather as part of `peerDependencies`.
@@ -374,14 +302,13 @@ This is a [class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refere
 - `handler: String` path to handler file and (optionally) a function name it exports
 - `runtime: LambdaRuntime` the name of the lambda runtime
 - `environment: Object` key-value map of handler-related (aside of those passed by user) environment variables
-- `supportsWrapper: Boolean` set to true to indicate that Lambda runtime wrappers are supported by this runtime
 
 ### `LambdaRuntime`
 
 This is an abstract enumeration type that is implemented by one of the following possible `String` values:
 
-- `nodejs16.x`
 - `nodejs14.x`
+- `nodejs12.x`
 - `go1.x`
 - `java11`
 - `python3.9`

README.md

@@ -19,9 +19,11 @@
 
 ## Vercel
 
-Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.
+Vercel is a platform for **static sites and frontend frameworks**, built to integrate with your headless content, commerce, or database.
 
-We enable teams to iterate quickly and develop, preview, and ship delightful user experiences. Vercel has zero-configuration support for 35+ frontend frameworks and integrates with your headless content, commerce, or database of choice.
+We provide a **frictionless developer experience** to take care of the hard things: deploy instantly, scale automatically, and serve personalized content around the globe.
+
+We make it easy for frontend teams to **develop, preview, and ship** delightful user experiences, where performance is the default.
 
 ## Deploy
 
@@ -33,6 +35,6 @@ For details on how to use Vercel, check out our [documentation](https://vercel.c
 
 ## Contributing
 
-- [Code of Conduct](./.github/CODE_OF_CONDUCT.md)
-- [Contributing Guidelines](./.github/CONTRIBUTING.md)
-- [Apache 2.0 License](./LICENSE)
+- [Code of Conduct](https://github.com/vercel/vercel/blob/main/.github/CODE_OF_CONDUCT.md)
+- [Contributing Guidelines](https://github.com/vercel/vercel/blob/main/.github/CONTRIBUTING.md)
+- [MIT License](https://github.com/vercel/vercel/blob/main/LICENSE)

api/_lib/script/build.ts

@@ -1,5 +1,6 @@
 import fs from 'fs/promises';
 import { join, dirname } from 'path';
+import execa from 'execa';
 import { getExampleList } from '../examples/example-list';
 import { mapOldToNew } from '../examples/map-old-to-new';
 
@@ -12,18 +13,6 @@ async function main() {
   await fs.rm(pubDir, { recursive: true, force: true });
   await fs.mkdir(pubDir);
 
-  await fs.cp(
-    join(repoRoot, 'packages', 'frameworks', 'logos'),
-    join(pubDir, 'framework-logos'),
-    { recursive: true, force: true }
-  );
-
-  await fs.cp(
-    join(repoRoot, 'packages', 'fs-detectors', 'logos'),
-    join(pubDir, 'monorepo-logos'),
-    { recursive: true, force: true }
-  );
-
   const examples = await getExampleList();
   const pathListAll = join(pubDir, 'list-all.json');
   await fs.writeFile(pathListAll, JSON.stringify(examples));
@@ -52,6 +41,10 @@ async function main() {
     JSON.stringify([...existingExamples, ...oldExamples])
   );
 
+  const { stdout: sha } = await execa('git', ['rev-parse', '--short', 'HEAD'], {
+    cwd: repoRoot,
+  });
+
   const tarballsDir = join(pubDir, 'tarballs');
   const packagesDir = join(repoRoot, 'packages');
   const packages = await fs.readdir(packagesDir);
@@ -62,21 +55,12 @@ async function main() {
       'utf-8'
     );
     const packageJson = JSON.parse(packageJsonRaw);
-    const files = await fs.readdir(fullDir);
-    const tarballName = files.find(f => /^vercel-.+\.tgz$/.test(f));
-    if (!tarballName) {
-      throw new Error(
-        `Expected vercel-*.tgz in ${fullDir} but found ${JSON.stringify(
-          files,
-          null,
-          2
-        )}`
-      );
-    }
-    const srcTarballPath = join(fullDir, tarballName);
+    const tarballName = `${packageJson.name
+      .replace('@', '')
+      .replace('/', '-')}-v${packageJson.version}-${sha.trim()}.tgz`;
     const destTarballPath = join(tarballsDir, `${packageJson.name}.tgz`);
     await fs.mkdir(dirname(destTarballPath), { recursive: true });
-    await fs.copyFile(srcTarballPath, destTarballPath);
+    await fs.copyFile(join(fullDir, tarballName), destTarballPath);
   }
 
   console.log('Completed building static frontend.');

api/frameworks.ts

@@ -16,6 +16,10 @@ const frameworks = (_frameworks as Framework[])
       defaultRoutes: undefined,
     };
 
+    if (framework.logo) {
+      framework.logo = `https://res.cloudinary.com/zeit-inc/image/fetch/${framework.logo}`;
+    }
+
     return framework;
   });
 

api/package.json

@@ -5,7 +5,8 @@
   "description": "API for the vercel/vercel repo",
   "main": "index.js",
   "scripts": {
-    "//TODO": "We should add this pkg to yarn workspaces"
+    "//TODO": "We should add this pkg to yarn workspaces",
+    "vercel-build": "cd .. && yarn install && yarn vercel-build"
   },
   "dependencies": {
     "@sentry/node": "5.11.1",
@@ -16,7 +17,7 @@
     "unzip-stream": "0.3.0"
   },
   "devDependencies": {
-    "@types/node": "14.18.33",
+    "@types/node": "13.1.4",
     "@types/node-fetch": "2.5.4",
     "@vercel/node": "1.9.0",
     "typescript": "3.9.6"

errors/deployment-error.md

@@ -1,13 +0,0 @@
-# Deployment failed
-
-## Why This Error Occurred
-
-When deploying this project, there was not a successful deployment into the `READY` state.
-
-## How to Fix It
-
-This is a generic error to catch problems in the deployment. The error is likely to vary depending on the deployment and the conditions at the time.
-
-Try looking in the logs for information about the deployment and the failure, this could be done at (vercel.com)[https://vercel.com]. You can also use the `vc logs` command to display the build logs for the deployment.
-
-This might not be a permanent error and retrying the deployment might also resolve it.

examples/astro/.gitignore

@@ -18,4 +18,3 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
-.vercel

examples/astro/.vercelignore

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

examples/astro/README.md

@@ -1,16 +1,10 @@
-# Astro
+# Welcome to [Astro](https://astro.build)
 
-This directory is a brief example of an [Astro](https://astro.build/) site that can be deployed to Vercel with zero configuration.
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/starter)
 
-## Deploy Your Own
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
 
-Deploy your own Astro project with Vercel.
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/astro&template=astro)
-
-_Live Example: https://astro-template.vercel.app_
-
-## Project Structure
+## 🚀 Project Structure
 
 Inside of your Astro project, you'll see the following folders and files:
 
@@ -32,15 +26,17 @@ There's nothing special about `src/components/`, but that's where we like to put
 
 Any static assets, like images, can be placed in the `public/` directory.
 
-## Commands
+## 🧞 Commands
 
 All commands are run from the root of the project, from a terminal:
 
-| Command                | Action                                             |
-| :--------------------- | :------------------------------------------------- |
-| `npm install`          | Installs dependencies                              |
-| `npm run dev`          | Starts local dev server at `localhost:3000`        |
-| `npm run build`        | Build your production site to `./dist/`            |
-| `npm run preview`      | Preview your build locally, before deploying       |
-| `npm run astro ...`    | Run CLI commands like `astro add`, `astro preview` |
-| `npm run astro --help` | Get help using the Astro CLI                       |
+| Command           | Action                                       |
+| :---------------- | :------------------------------------------- |
+| `npm install`     | Installs dependencies                        |
+| `npm run dev`     | Starts local dev server at `localhost:3000`  |
+| `npm run build`   | Build your production site to `./dist/`      |
+| `npm run preview` | Preview your build locally, before deploying |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://github.com/withastro/astro) or jump into our [Discord server](https://astro.build/chat).

examples/astro/package.json

@@ -1,14 +1,14 @@
 {
+  "name": "@example/basics",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro build",
-    "preview": "astro preview",
-    "astro": "astro"
+    "preview": "astro preview"
   },
   "devDependencies": {
-    "astro": "^1.0.0-rc.8",
-    "web-vitals": "^3.0.0"
+    "astro": "^1.0.0-beta.20"
   }
 }

examples/astro/src/components/Card.astro

@@ -1,76 +0,0 @@
----
-export interface Props {
-	title: string;
-	body: string;
-	href: string;
-}
-
-const { href, title, body } = Astro.props as Props;
----
-
-<li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
-</li>
-<style>
-	:root {
-		--link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%);
-	}
-
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 0.15rem;
-		background-image: var(--link-gradient);
-		background-size: 400%;
-		border-radius: 0.5rem;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: 1em 1.3em;
-		border-radius: 0.35rem;
-		color: var(--text-color);
-		background-color: white;
-		opacity: 0.8;
-	}
-
-	h2 {
-		margin: 0;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-
-	p {
-		margin-top: 0.75rem;
-		margin-bottom: 0;
-	}
-
-	h2 span {
-		display: inline-block;
-		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-	}
-
-	.link-card:is(:hover, :focus-within) h2 {
-		color: #4f39fa;
-	}
-
-	.link-card:is(:hover, :focus-within) h2 span {
-		will-change: transform;
-		transform: translateX(2px);
-	}
-</style>

examples/astro/src/components/Layout.astro

@@ -0,0 +1,55 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props as Props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width">
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+	<title>{title}</title>
+</head>
+<body>
+	<slot />
+</body>
+</html>
+
+<style>
+  :root {
+    --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
+		--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem); 
+    --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
+
+    --color-text: hsl(12, 5%, 4%);
+    --color-bg: hsl(10, 21%, 95%);
+  }
+
+  html {
+    font-family: system-ui, sans-serif;
+    font-size: var(--font-size-base);
+    color: var(--color-text);
+    background-color: var(--color-bg);
+  }
+
+  body {
+    margin: 0;
+  }
+
+  :global(h1) {
+    font-size: var(--font-size-xl);
+  }
+
+  :global(h2) {
+    font-size: var(--font-size-lg);
+  }
+
+  :global(code) {
+    font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+			Bitstream Vera Sans Mono, Courier New, monospace;
+  }
+</style>

examples/astro/src/env.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="astro/client" />
-
-interface ImportMetaEnv {
-	readonly PUBLIC_VERCEL_ANALYTICS_ID: string;
-}
-
-interface ImportMeta {
-	readonly env: ImportMetaEnv;
-}

examples/astro/src/layouts/Layout.astro

@@ -1,69 +0,0 @@
----
-export interface Props {
-	title: string;
-}
-
-const { title } = Astro.props as Props;
----
-
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
-		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
-		<script>
-			import { webVitals } from "../lib/vitals";
-
-			let analyticsId = import.meta.env.PUBLIC_VERCEL_ANALYTICS_ID;
-
-			if (analyticsId) {
-				webVitals({
-					path: location.pathname,
-					params: location.search,
-					analyticsId,
-				});
-			}
-		</script>
-	</head>
-	<body>
-		<slot />
-	</body>
-</html>
-<style>
-	:root {
-		--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
-		--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
-		--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
-
-		--color-text: hsl(12, 5%, 4%);
-		--color-bg: hsl(10, 21%, 95%);
-		--color-border: hsl(17, 24%, 90%);
-	}
-
-	html {
-		font-family: system-ui, sans-serif;
-		font-size: var(--font-size-base);
-		color: var(--color-text);
-		background-color: var(--color-bg);
-	}
-
-	body {
-		margin: 0;
-	}
-
-	:global(h1) {
-		font-size: var(--font-size-xl);
-	}
-
-	:global(h2) {
-		font-size: var(--font-size-lg);
-	}
-
-	:global(code) {
-		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-			Bitstream Vera Sans Mono, Courier New, monospace;
-	}
-</style>

examples/astro/src/lib/vitals.js

@@ -1,66 +0,0 @@
-import { onCLS, onFCP, onFID, onLCP, onTTFB } from "web-vitals";
-
-const vitalsUrl = "https://vitals.vercel-analytics.com/v1/vitals";
-
-function getConnectionSpeed() {
-	return "connection" in navigator &&
-		navigator["connection"] &&
-		"effectiveType" in navigator["connection"]
-		? // @ts-ignore
-			navigator["connection"]["effectiveType"]
-		: "";
-}
-
-/**
- * @param {import("web-vitals").Metric} metric
- * @param {{ params: { [s: string]: any; } | ArrayLike<any>; path: string; analyticsId: string; debug: boolean; }} options
- */
-export function sendToAnalytics(metric, options) {
-	const page = Object.entries(options.params).reduce(
-		(acc, [key, value]) => acc.replace(value, `[${key}]`),
-		options.path
-	);
-
-	const body = {
-		dsn: options.analyticsId,
-		id: metric.id,
-		page,
-		href: location.href,
-		event_name: metric.name,
-		value: metric.value.toString(),
-		speed: getConnectionSpeed(),
-	};
-
-	if (options.debug) {
-		console.log("[Analytics]", metric.name, JSON.stringify(body, null, 2));
-	}
-
-	const blob = new Blob([new URLSearchParams(body).toString()], {
-		// This content type is necessary for `sendBeacon`
-		type: "application/x-www-form-urlencoded",
-	});
-	if (navigator.sendBeacon) {
-		navigator.sendBeacon(vitalsUrl, blob);
-	} else
-		fetch(vitalsUrl, {
-			body: blob,
-			method: "POST",
-			credentials: "omit",
-			keepalive: true,
-		});
-}
-
-/**
- * @param {any} options
- */
-export function webVitals(options) {
-	try {
-		onFID((metric) => sendToAnalytics(metric, options));
-		onTTFB((metric) => sendToAnalytics(metric, options));
-		onLCP((metric) => sendToAnalytics(metric, options));
-		onCLS((metric) => sendToAnalytics(metric, options));
-		onFCP((metric) => sendToAnalytics(metric, options));
-	} catch (err) {
-		console.error("[Analytics]", err);
-	}
-}

examples/astro/src/pages/index.astro

@@ -1,52 +1,81 @@
 ---
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
+import Layout from '../components/Layout.astro';
 ---
 
 <Layout title="Welcome to Astro.">
 	<main>
 		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
-		<p class="instructions">
-			Check out the <code>src/pages</code> directory to get started.<br />
-			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
-		</p>
+		<p class="instructions"><strong>Your first mission:</strong> tweak this message to try our hot module reloading. Check the <code>src/pages</code> directory!</p>
 		<ul role="list" class="link-card-grid">
-			<Card
-				href="https://docs.astro.build/"
-				title="Documentation"
-				body="Learn how Astro works and explore the official API docs."
-			/>
-			<Card
-				href="https://astro.build/integrations/"
-				title="Integrations"
-				body="Supercharge your project with new frameworks and libraries."
-			/>
-			<Card
-				href="https://astro.build/themes/"
-				title="Themes"
-				body="Explore a galaxy of community-built starter themes."
-			/>
-			<Card
-				href="https://astro.build/chat/"
-				title="Chat"
-				body="Come say hi to our amazing Discord community. ❤️"
-			/>
+			<li class="link-card">
+				<a href="https://astro.build/integrations/">
+					<h2>Integrations <span>&rarr;</span></h2>
+					<p>Add component frameworks, Tailwind, Partytown, and more!</p>
+				</a>
+			</li>
+			<li class="link-card">
+				<a href="https://astro.build/themes/">
+					<h2>Themes <span>&rarr;</span></h2>
+					<p>Explore a galaxy of community-built starters.</p>
+				</a>
+			</li>
+			<li class="link-card">
+				<a href="https://docs.astro.build/">
+					<h2>Docs <span>&rarr;</span></h2>
+					<p>Learn our complete feature set and explore the API.</p>
+				</a>
+			</li>
+			<li class="link-card">
+				<a href="https://astro.build/chat/">
+					<h2>Chat <span>&rarr;</span></h2>
+					<p>
+						Ask, contribute, and have fun on our community Discord
+						<svg
+							class="heart"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 512 512"
+							width="16"
+							height="16"
+							fill="currentColor"
+						>
+							<title>heart</title>
+							<path d="M256 448l-30.164-27.211C118.718 322.442 48 258.61 48 179.095 48 114.221 97.918 64 162.4 64c36.399 0 70.717 16.742 93.6 43.947C278.882 80.742 313.199 64 349.6 64 414.082 64 464 114.221 464 179.095c0 79.516-70.719 143.348-177.836 241.694L256 448z" />
+						</svg>
+					</p>
+				</a>
+			</li>
 		</ul>
 	</main>
 </Layout>
 
 <style>
 	:root {
-		--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
+		--color-border: hsl(17, 24%, 90%);
+		--astro-gradient: linear-gradient(0deg,#4F39FA, #DA62C4);
+		--link-gradient: linear-gradient(45deg, #4F39FA, #DA62C4 30%, var(--color-border) 60%);
+		--night-sky-gradient: linear-gradient(0deg, #392362 -33%, #431f69 10%, #30216b 50%, #1f1638 100%);
 	}
 
-	h1 {
-		margin: 2rem 0;
+	h2 {
+		margin: 0;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	h2 span {
+		display: inline-block;
+		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	code {
+		font-size: 0.875em;
+		border: 0.1em solid var(--color-border);
+		border-radius: 4px;
+		padding: 0.15em 0.25em;
 	}
 
 	main {
 		margin: auto;
-		padding: 1em;
+    padding: 1em;
 		max-width: 60ch;
 	}
 
@@ -54,7 +83,7 @@ import Card from '../components/Card.astro';
 		font-weight: 900;
 		background-image: var(--astro-gradient);
 		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
+  	-webkit-text-fill-color: transparent;
 		background-size: 100% 200%;
 		background-position-y: 100%;
 		border-radius: 0.4rem;
@@ -62,8 +91,7 @@ import Card from '../components/Card.astro';
 	}
 
 	@keyframes pulse {
-		0%,
-		100% {
+		0%, 100% {
 			background-position-y: 0%;
 		}
 		50% {
@@ -72,25 +100,75 @@ import Card from '../components/Card.astro';
 	}
 
 	.instructions {
-		line-height: 1.6;
-		margin: 1rem 0;
-		background: #4f39fa;
-		padding: 1rem;
+		line-height: 1.8;
+		margin-bottom: 2rem;
+		background-image: var(--night-sky-gradient);
+		padding: 1.5rem;
 		border-radius: 0.4rem;
 		color: var(--color-bg);
 	}
 
-	.instructions code {
-		font-size: 0.875em;
-		border: 0.1em solid var(--color-border);
-		border-radius: 4px;
-		padding: 0.15em 0.25em;
-	}
-
 	.link-card-grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
 		gap: 1rem;
 		padding: 0;
 	}
+
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 0.15rem;
+		background-image: var(--link-gradient);
+		background-size: 400%;
+		border-radius: 0.5rem;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: 1em 1.3em;
+		border-radius: 0.35rem;
+		color: var(--text-color);
+		background-color: white;
+		opacity: 0.8;
+	}
+
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+	}
+
+	.link-card:is(:hover, :focus-within) h2 {
+		color: #4F39FA;
+	}
+
+	.link-card:is(:hover, :focus-within) h2 span {
+		transform: translateX(2px);
+	}
+
+	.heart {
+		display: inline-block;
+		color: #DA62C4;
+		animation: heartbeat 3s ease-in-out infinite;
+	}
+
+	@keyframes heartbeat {
+		0%,
+		50%,
+		100% {
+			transform: scale(1);
+		}
+		5% {
+			transform: scale(1.125);
+		}
+		10% {
+			transform: scale(1.05);
+		}
+		15% {
+			transform: scale(1.25);
+		}
+	}
 </style>

examples/astro/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    // Enable top-level await, and other modern ESM features.
+    "target": "ESNext",
+    "module": "ESNext",
+    // Enable node-style module resolution, for things like npm package imports.
+    "moduleResolution": "node",
+    // Enable JSON imports.
+    "resolveJsonModule": true,
+    // Enable stricter transpilation for better output.
+    "isolatedModules": true,
+    // Add type definitions for our Vite runtime.
+    "types": ["vite/client"]
+  }
+}

examples/docusaurus-2/README.md

@@ -15,5 +15,5 @@ _Live Example: https://docusaurus-2-template.vercel.app_
 To get started with Docusaurus on Vercel, you can use the [Docusaurus CLI](https://v2.docusaurus.io/docs/installation#scaffold-project-website) to initialize the project:
 
 ```shell
-npx create-docusaurus@latest my-website classic
+$ npx @docusaurus/init@next init my-website classic
 ```

examples/docusaurus-2/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
-};

examples/docusaurus-2/blog/2019-05-28-hola.md

@@ -1,11 +1,10 @@
 ---
-slug: first-blog-post
-title: First Blog Post
-authors:
-  name: Gao Wei
-  title: Docusaurus Core Team
-  url: https://github.com/wgao19
-  image_url: https://github.com/wgao19.png
+id: hola
+title: Hola
+author: Gao Wei
+author_title: Docusaurus Core Team
+author_url: https://github.com/wgao19
+author_image_url: https://avatars1.githubusercontent.com/u/2055384?v=4
 tags: [hola, docusaurus]
 ---
 

examples/docusaurus-2/blog/2019-05-29-hello-world.md

@@ -0,0 +1,17 @@
+---
+id: hello-world
+title: Hello
+author: Endilie Yacop Sucipto
+author_title: Maintainer of Docusaurus
+author_url: https://github.com/endiliey
+author_image_url: https://avatars1.githubusercontent.com/u/17883920?s=460&v=4
+tags: [hello, docusaurus]
+---
+
+Welcome to this blog. This blog is created with [**Docusaurus 2 alpha**](https://v2.docusaurus.io/).
+
+<!--truncate-->
+
+This is a test post.
+
+A whole bunch of other information.

examples/docusaurus-2/blog/2019-05-29-long-blog-post.md

@@ -1,44 +0,0 @@
----
-slug: long-blog-post
-title: Long Blog Post
-authors: endi
-tags: [hello, docusaurus]
----
-
-This is the summary of a very long blog post,
-
-Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
-
-<!--truncate-->
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

examples/docusaurus-2/blog/2019-05-30-welcome.md

@@ -0,0 +1,13 @@
+---
+id: welcome
+title: Welcome
+author: Yangshun Tay
+author_title: Front End Engineer @ Facebook
+author_url: https://github.com/yangshun
+author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4
+tags: [facebook, hello, docusaurus]
+---
+
+Blog features are powered by the blog plugin. Simply add files to the `blog` directory. It supports tags as well!
+
+Delete the whole directory if you don't want the blog features. As simple as that!

examples/docusaurus-2/blog/2021-08-01-mdx-blog-post.mdx

@@ -1,20 +0,0 @@
----
-slug: mdx-blog-post
-title: MDX Blog Post
-authors: [slorber]
-tags: [docusaurus]
----
-
-Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
-
-:::tip
-
-Use the power of React to create interactive blog posts.
-
-```js
-<button onClick={() => alert('button clicked!')}>Click me!</button>
-```
-
-<button onClick={() => alert('button clicked!')}>Click me!</button>
-
-:::

examples/docusaurus-2/blog/2021-08-26-welcome/index.md

@@ -1,25 +0,0 @@
----
-slug: welcome
-title: Welcome
-authors: [slorber, yangshun]
-tags: [facebook, hello, docusaurus]
----
-
-[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
-
-Simply add Markdown files (or folders) to the `blog` directory.
-
-Regular blog authors can be added to `authors.yml`.
-
-The blog post date can be extracted from filenames, such as:
-
-- `2019-05-30-welcome.md`
-- `2019-05-30-welcome/index.md`
-
-A blog post folder can be convenient to co-locate blog post images:
-
-![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
-
-The blog supports tags as well!
-
-**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.

examples/docusaurus-2/blog/authors.yml

@@ -1,17 +0,0 @@
-endi:
-  name: Endilie Yacop Sucipto
-  title: Maintainer of Docusaurus
-  url: https://github.com/endiliey
-  image_url: https://github.com/endiliey.png
-
-yangshun:
-  name: Yangshun Tay
-  title: Front End Engineer @ Facebook
-  url: https://github.com/yangshun
-  image_url: https://github.com/yangshun.png
-
-slorber:
-  name: Sébastien Lorber
-  title: Docusaurus maintainer
-  url: https://sebastienlorber.com
-  image_url: https://github.com/slorber.png

examples/docusaurus-2/docs/doc1.md

@@ -0,0 +1,202 @@
+---
+id: doc1
+title: Style Guide
+sidebar_label: Style Guide
+---
+
+You can write content using [GitHub-flavored Markdown syntax](https://github.github.com/gfm/).
+
+## Markdown Syntax
+
+To serve as an example page when styling markdown based Docusaurus sites.
+
+## Headers
+
+# H1 - Create the best documentation
+
+## H2 - Create the best documentation
+
+### H3 - Create the best documentation
+
+#### H4 - Create the best documentation
+
+##### H5 - Create the best documentation
+
+###### H6 - Create the best documentation
+
+---
+
+## Emphasis
+
+Emphasis, aka italics, with _asterisks_ or _underscores_.
+
+Strong emphasis, aka bold, with **asterisks** or **underscores**.
+
+Combined emphasis with **asterisks and _underscores_**.
+
+Strikethrough uses two tildes. ~~Scratch this.~~
+
+---
+
+## Lists
+
+1. First ordered list item
+1. Another item ⋅⋅\* Unordered sub-list.
+1. Actual numbers don't matter, just that it's a number ⋅⋅1. Ordered sub-list
+1. And another item.
+
+⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
+
+⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅ ⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅ ⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)
+
+- Unordered list can use asterisks
+
+* Or minuses
+
+- Or pluses
+
+---
+
+## Links
+
+[I'm an inline-style link](https://www.google.com)
+
+[I'm an inline-style link with title](https://www.google.com "Google's Homepage")
+
+[I'm a reference-style link][arbitrary case-insensitive reference text]
+
+[I'm a relative reference to a repository file](../blob/master/LICENSE)
+
+[You can use numbers for reference-style link definitions][1]
+
+Or leave it empty and use the [link text itself].
+
+URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or <http://www.example.com> and sometimes example.com (but not on Github, for example).
+
+Some text to show that the reference links can follow later.
+
+[arbitrary case-insensitive reference text]: https://www.mozilla.org
+[1]: http://slashdot.org
+[link text itself]: http://www.reddit.com
+
+---
+
+## Images
+
+Here's our logo (hover to see the title text):
+
+Inline-style: ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 1')
+
+Reference-style: ![alt text][logo]
+
+[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 2'
+
+---
+
+## Code
+
+```javascript
+var s = 'JavaScript syntax highlighting';
+alert(s);
+```
+
+```python
+s = "Python syntax highlighting"
+print(s)
+```
+
+```
+No language indicated, so no syntax highlighting.
+But let's throw in a <b>tag</b>.
+```
+
+```js {2}
+function highlightMe() {
+  console.log('This line can be highlighted!');
+}
+```
+
+---
+
+## Tables
+
+Colons can be used to align columns.
+
+| Tables        |      Are      |   Cool |
+| ------------- | :-----------: | -----: |
+| col 3 is      | right-aligned | \$1600 |
+| col 2 is      |   centered    |   \$12 |
+| zebra stripes |   are neat    |    \$1 |
+
+There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.
+
+| Markdown | Less      | Pretty     |
+| -------- | --------- | ---------- |
+| _Still_  | `renders` | **nicely** |
+| 1        | 2         | 3          |
+
+---
+
+## Blockquotes
+
+> Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.
+
+Quote break.
+
+> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can _put_ **Markdown** into a blockquote.
+
+---
+
+## Inline HTML
+
+<dl>
+  <dt>Definition list</dt>
+  <dd>Is something people use sometimes.</dd>
+
+  <dt>Markdown in HTML</dt>
+  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
+</dl>
+
+---
+
+## Line Breaks
+
+Here's a line for us to start with.
+
+This line is separated from the one above by two newlines, so it will be a _separate paragraph_.
+
+This line is also a separate paragraph, but... This line is only separated by a single newline, so it's a separate line in the _same paragraph_.
+
+---
+
+## Admonitions
+
+:::note
+
+This is a note
+
+:::
+
+:::tip
+
+This is a tip
+
+:::
+
+:::important
+
+This is important
+
+:::
+
+:::caution
+
+This is a caution
+
+:::
+
+:::warning
+
+This is a warning
+
+:::

examples/docusaurus-2/docs/doc2.md

@@ -0,0 +1,6 @@
+---
+id: doc2
+title: Document Number 2
+---
+
+This is a link to [another document.](doc3.md) This is a link to an [external page.](http://www.example.com)

examples/docusaurus-2/docs/doc3.md

@@ -0,0 +1,14 @@
+---
+id: doc3
+title: This is Document Number 3
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac euismod odio, eu consequat dui. Nullam molestie consectetur risus id imperdiet. Proin sodales ornare turpis, non mollis massa ultricies id. Nam at nibh scelerisque, feugiat ante non, dapibus tortor. Vivamus volutpat diam quis tellus elementum bibendum. Praesent semper gravida velit quis aliquam. Etiam in cursus neque. Nam lectus ligula, malesuada et mauris a, bibendum faucibus mi. Phasellus ut interdum felis. Phasellus in odio pulvinar, porttitor urna eget, fringilla lectus. Aliquam sollicitudin est eros. Mauris consectetur quam vitae mauris interdum hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+Duis et egestas libero, imperdiet faucibus ipsum. Sed posuere eget urna vel feugiat. Vivamus a arcu sagittis, fermentum urna dapibus, congue lectus. Fusce vulputate porttitor nisl, ac cursus elit volutpat vitae. Nullam vitae ipsum egestas, convallis quam non, porta nibh. Morbi gravida erat nec neque bibendum, eu pellentesque velit posuere. Fusce aliquam erat eu massa eleifend tristique.
+
+Sed consequat sollicitudin ipsum eget tempus. Integer a aliquet velit. In justo nibh, pellentesque non suscipit eget, gravida vel lacus. Donec odio ante, malesuada in massa quis, pharetra tristique ligula. Donec eros est, tristique eget finibus quis, semper non nisl. Vivamus et elit nec enim ornare placerat. Sed posuere odio a elit cursus sagittis.
+
+Phasellus feugiat purus eu tortor ultrices finibus. Ut libero nibh, lobortis et libero nec, dapibus posuere eros. Sed sagittis euismod justo at consectetur. Nulla finibus libero placerat, cursus sapien at, eleifend ligula. Vivamus elit nisl, hendrerit ac nibh eu, ultrices tempus dui. Nam tellus neque, commodo non rhoncus eu, gravida in risus. Nullam id iaculis tortor.
+
+Nullam at odio in sem varius tempor sit amet vel lorem. Etiam eu hendrerit nisl. Fusce nibh mauris, vulputate sit amet ex vitae, congue rhoncus nisl. Sed eget tellus purus. Nullam tempus commodo erat ut tristique. Cras accumsan massa sit amet justo consequat eleifend. Integer scelerisque vitae tellus id consectetur.

examples/docusaurus-2/docs/intro.md

@@ -1,47 +0,0 @@
----
-sidebar_position: 1
----
-
-# Tutorial Intro
-
-Let's discover **Docusaurus in less than 5 minutes**.
-
-## Getting Started
-
-Get started by **creating a new site**.
-
-Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
-
-### What you'll need
-
-- [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
-  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
-
-## Generate a new site
-
-Generate a new Docusaurus site using the **classic template**.
-
-The classic template will automatically be added to your project after you run the command:
-
-```bash
-npm init docusaurus@latest my-website classic
-```
-
-You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
-
-The command also installs all necessary dependencies you need to run Docusaurus.
-
-## Start your site
-
-Run the development server:
-
-```bash
-cd my-website
-npm run start
-```
-
-The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
-
-The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
-
-Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.

examples/docusaurus-2/docs/mdx.md

@@ -0,0 +1,17 @@
+---
+id: mdx
+title: Powered by MDX
+---
+
+You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
+
+export const Highlight = ({children, color}) => ( <span style={{
+      backgroundColor: color,
+      borderRadius: '2px',
+      color: '#fff',
+      padding: '0.2rem',
+    }}> {children} </span> );
+
+<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
+
+I can write **Markdown** alongside my _JSX_!

examples/docusaurus-2/docs/tutorial-basics/_category_.json

@@ -1,8 +0,0 @@
-{
-  "label": "Tutorial - Basics",
-  "position": 2,
-  "link": {
-    "type": "generated-index",
-    "description": "5 minutes to learn the most important Docusaurus concepts."
-  }
-}

examples/docusaurus-2/docs/tutorial-basics/congratulations.md

@@ -1,21 +0,0 @@
----
-sidebar_position: 6
----
-
-# Congratulations!
-
-You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
-
-Docusaurus has **much more to offer**!
-
-Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
-
-Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
-
-## What's next?
-
-- Read the [official documentation](https://docusaurus.io/).
-- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
-- Add a [search bar](https://docusaurus.io/docs/search)
-- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
-- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)

examples/docusaurus-2/docs/tutorial-basics/create-a-blog-post.md

@@ -1,34 +0,0 @@
----
-sidebar_position: 3
----
-
-# Create a Blog Post
-
-Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed...
-
-## Create your first Post
-
-Create a file at `blog/2021-02-28-greetings.md`:
-
-```md title="blog/2021-02-28-greetings.md"
----
-slug: greetings
-title: Greetings!
-authors:
-  - name: Joel Marcey
-    title: Co-creator of Docusaurus 1
-    url: https://github.com/JoelMarcey
-    image_url: https://github.com/JoelMarcey.png
-  - name: Sébastien Lorber
-    title: Docusaurus maintainer
-    url: https://sebastienlorber.com
-    image_url: https://github.com/slorber.png
-tags: [greetings]
----
-
-Congratulations, you have made your first post!
-
-Feel free to play around and edit this post as much you like.
-```
-
-A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).

examples/docusaurus-2/docs/tutorial-basics/create-a-document.md

@@ -1,55 +0,0 @@
----
-sidebar_position: 2
----
-
-# Create a Document
-
-Documents are **groups of pages** connected through:
-
-- a **sidebar**
-- **previous/next navigation**
-- **versioning**
-
-## Create your first Doc
-
-Create a Markdown file at `docs/hello.md`:
-
-```md title="docs/hello.md"
-# Hello
-
-This is my **first Docusaurus document**!
-```
-
-A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).
-
-## Configure the Sidebar
-
-Docusaurus automatically **creates a sidebar** from the `docs` folder.
-
-Add metadata to customize the sidebar label and position:
-
-```md title="docs/hello.md" {1-4}
----
-sidebar_label: 'Hi!'
-sidebar_position: 3
----
-
-# Hello
-
-This is my **first Docusaurus document**!
-```
-
-It is also possible to create your sidebar explicitly in `sidebars.js`:
-
-```js title="sidebars.js"
-module.exports = {
-  tutorialSidebar: [
-    {
-      type: 'category',
-      label: 'Tutorial',
-      // highlight-next-line
-      items: ['hello'],
-    },
-  ],
-};
-```

examples/docusaurus-2/docs/tutorial-basics/create-a-page.md

@@ -1,43 +0,0 @@
----
-sidebar_position: 1
----
-
-# Create a Page
-
-Add **Markdown or React** files to `src/pages` to create a **standalone page**:
-
-- `src/pages/index.js` → `localhost:3000/`
-- `src/pages/foo.md` → `localhost:3000/foo`
-- `src/pages/foo/bar.js` → `localhost:3000/foo/bar`
-
-## Create your first React Page
-
-Create a file at `src/pages/my-react-page.js`:
-
-```jsx title="src/pages/my-react-page.js"
-import React from 'react';
-import Layout from '@theme/Layout';
-
-export default function MyReactPage() {
-  return (
-    <Layout>
-      <h1>My React page</h1>
-      <p>This is a React page</p>
-    </Layout>
-  );
-}
-```
-
-A new page is now available at [http://localhost:3000/my-react-page](http://localhost:3000/my-react-page).
-
-## Create your first Markdown Page
-
-Create a file at `src/pages/my-markdown-page.md`:
-
-```mdx title="src/pages/my-markdown-page.md"
-# My Markdown page
-
-This is a Markdown page
-```
-
-A new page is now available at [http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page).

examples/docusaurus-2/docs/tutorial-basics/deploy-your-site.md

@@ -1,31 +0,0 @@
----
-sidebar_position: 5
----
-
-# Deploy your site
-
-Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**).
-
-It builds your site as simple **static HTML, JavaScript and CSS files**.
-
-## Build your site
-
-Build your site **for production**:
-
-```bash
-npm run build
-```
-
-The static files are generated in the `build` folder.
-
-## Deploy your site
-
-Test your production build locally:
-
-```bash
-npm run serve
-```
-
-The `build` folder is now served at [http://localhost:3000/](http://localhost:3000/).
-
-You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**).

examples/docusaurus-2/docs/tutorial-basics/markdown-features.mdx

@@ -1,146 +0,0 @@
----
-sidebar_position: 4
----
-
-# Markdown Features
-
-Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
-
-## Front Matter
-
-Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
-
-```text title="my-doc.md"
-// highlight-start
----
-id: my-doc-id
-title: My document title
-description: My document description
-slug: /my-custom-url
----
-// highlight-end
-
-## Markdown heading
-
-Markdown text with [links](./hello.md)
-```
-
-## Links
-
-Regular Markdown links are supported, using url paths or relative file paths.
-
-```md
-Let's see how to [Create a page](/create-a-page).
-```
-
-```md
-Let's see how to [Create a page](./create-a-page.md).
-```
-
-**Result:** Let's see how to [Create a page](./create-a-page.md).
-
-## Images
-
-Regular Markdown images are supported.
-
-You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
-
-```md
-![Docusaurus logo](/img/docusaurus.png)
-```
-
-![Docusaurus logo](/img/docusaurus.png)
-
-You can reference images relative to the current file as well, as shown in [the extra guides](../tutorial-extras/manage-docs-versions.md).
-
-## Code Blocks
-
-Markdown code blocks are supported with Syntax highlighting.
-
-    ```jsx title="src/components/HelloDocusaurus.js"
-    function HelloDocusaurus() {
-        return (
-            <h1>Hello, Docusaurus!</h1>
-        )
-    }
-    ```
-
-```jsx title="src/components/HelloDocusaurus.js"
-function HelloDocusaurus() {
-  return <h1>Hello, Docusaurus!</h1>;
-}
-```
-
-## Admonitions
-
-Docusaurus has a special syntax to create admonitions and callouts:
-
-    :::tip My tip
-
-    Use this awesome feature option
-
-    :::
-
-    :::danger Take care
-
-    This action is dangerous
-
-    :::
-
-:::tip My tip
-
-Use this awesome feature option
-
-:::
-
-:::danger Take care
-
-This action is dangerous
-
-:::
-
-## MDX and React Components
-
-[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**:
-
-```jsx
-export const Highlight = ({children, color}) => (
-  <span
-    style={{
-      backgroundColor: color,
-      borderRadius: '20px',
-      color: '#fff',
-      padding: '10px',
-      cursor: 'pointer',
-    }}
-    onClick={() => {
-      alert(`You clicked the color ${color} with label ${children}`)
-    }}>
-    {children}
-  </span>
-);
-
-This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
-
-This is <Highlight color="#1877F2">Facebook blue</Highlight> !
-```
-
-export const Highlight = ({children, color}) => (
-  <span
-    style={{
-      backgroundColor: color,
-      borderRadius: '20px',
-      color: '#fff',
-      padding: '10px',
-      cursor: 'pointer',
-    }}
-    onClick={() => {
-      alert(`You clicked the color ${color} with label ${children}`);
-    }}>
-    {children}
-  </span>
-);
-
-This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
-
-This is <Highlight color="#1877F2">Facebook blue</Highlight> !

examples/docusaurus-2/docs/tutorial-extras/_category_.json

@@ -1,7 +0,0 @@
-{
-  "label": "Tutorial - Extras",
-  "position": 3,
-  "link": {
-    "type": "generated-index"
-  }
-}

examples/docusaurus-2/docs/tutorial-extras/manage-docs-versions.md

@@ -1,55 +0,0 @@
----
-sidebar_position: 1
----
-
-# Manage Docs Versions
-
-Docusaurus can manage multiple versions of your docs.
-
-## Create a docs version
-
-Release a version 1.0 of your project:
-
-```bash
-npm run docusaurus docs:version 1.0
-```
-
-The `docs` folder is copied into `versioned_docs/version-1.0` and `versions.json` is created.
-
-Your docs now have 2 versions:
-
-- `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs
-- `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased docs**
-
-## Add a Version Dropdown
-
-To navigate seamlessly across versions, add a version dropdown.
-
-Modify the `docusaurus.config.js` file:
-
-```js title="docusaurus.config.js"
-module.exports = {
-  themeConfig: {
-    navbar: {
-      items: [
-        // highlight-start
-        {
-          type: 'docsVersionDropdown',
-        },
-        // highlight-end
-      ],
-    },
-  },
-};
-```
-
-The docs version dropdown appears in your navbar:
-
-![Docs Version Dropdown](./img/docsVersionDropdown.png)
-
-## Update an existing version
-
-It is possible to edit versioned docs in their respective folder:
-
-- `versioned_docs/version-1.0/hello.md` updates `http://localhost:3000/docs/hello`
-- `docs/hello.md` updates `http://localhost:3000/docs/next/hello`

examples/docusaurus-2/docs/tutorial-extras/translate-your-site.md

@@ -1,88 +0,0 @@
----
-sidebar_position: 2
----
-
-# Translate your site
-
-Let's translate `docs/intro.md` to French.
-
-## Configure i18n
-
-Modify `docusaurus.config.js` to add support for the `fr` locale:
-
-```js title="docusaurus.config.js"
-module.exports = {
-  i18n: {
-    defaultLocale: 'en',
-    locales: ['en', 'fr'],
-  },
-};
-```
-
-## Translate a doc
-
-Copy the `docs/intro.md` file to the `i18n/fr` folder:
-
-```bash
-mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
-
-cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md
-```
-
-Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French.
-
-## Start your localized site
-
-Start your site on the French locale:
-
-```bash
-npm run start -- --locale fr
-```
-
-Your localized site is accessible at [http://localhost:3000/fr/](http://localhost:3000/fr/) and the `Getting Started` page is translated.
-
-:::caution
-
-In development, you can only use one locale at a same time.
-
-:::
-
-## Add a Locale Dropdown
-
-To navigate seamlessly across languages, add a locale dropdown.
-
-Modify the `docusaurus.config.js` file:
-
-```js title="docusaurus.config.js"
-module.exports = {
-  themeConfig: {
-    navbar: {
-      items: [
-        // highlight-start
-        {
-          type: 'localeDropdown',
-        },
-        // highlight-end
-      ],
-    },
-  },
-};
-```
-
-The locale dropdown now appears in your navbar:
-
-![Locale Dropdown](./img/localeDropdown.png)
-
-## Build your localized site
-
-Build your site for a specific locale:
-
-```bash
-npm run build -- --locale fr
-```
-
-Or build your site to include all the locales at once:
-
-```bash
-npm run build
-```

examples/docusaurus-2/docusaurus.config.js

@@ -1,132 +1,103 @@
-// @ts-check
-// Note: type annotations allow type checking and IDEs autocompletion
-
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
-
-/** @type {import('@docusaurus/types').Config} */
-const config = {
+module.exports = {
   title: 'My Site',
-  tagline: 'Dinosaurs are cool',
+  tagline: 'The tagline of my site',
   url: 'https://your-docusaurus-test-site.com',
   baseUrl: '/',
-  onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
-
-  // GitHub pages deployment config.
-  // If you aren't using GitHub pages, you don't need these.
   organizationName: 'facebook', // Usually your GitHub org/user name.
   projectName: 'docusaurus', // Usually your repo name.
-
-  // Even if you don't use internalization, you can use this field to set useful
-  // metadata like html lang. For example, if your site is Chinese, you may want
-  // to replace "en" with "zh-Hans".
-  i18n: {
-    defaultLocale: 'en',
-    locales: ['en'],
+  themeConfig: {
+    navbar: {
+      title: 'My Site',
+      logo: {
+        alt: 'My Site Logo',
+        src: 'img/logo.svg',
+      },
+      links: [
+        {
+          to: 'docs/doc1',
+          activeBasePath: 'docs',
+          label: 'Docs',
+          position: 'left',
+        },
+        {to: 'blog', label: 'Blog', position: 'left'},
+        {
+          href: 'https://github.com/facebook/docusaurus',
+          label: 'GitHub',
+          position: 'right',
+        },
+      ],
+    },
+    footer: {
+      style: 'dark',
+      links: [
+        {
+          title: 'Docs',
+          items: [
+            {
+              label: 'Style Guide',
+              to: 'docs/doc1',
+            },
+            {
+              label: 'Second Doc',
+              to: 'docs/doc2',
+            },
+          ],
+        },
+        {
+          title: 'Community',
+          items: [
+            {
+              label: 'Stack Overflow',
+              href: 'https://stackoverflow.com/questions/tagged/docusaurus',
+            },
+            {
+              label: 'Discord',
+              href: 'https://discordapp.com/invite/docusaurus',
+            },
+            {
+              label: 'Twitter',
+              href: 'https://twitter.com/docusaurus',
+            },
+          ],
+        },
+        {
+          title: 'More',
+          items: [
+            {
+              label: 'Blog',
+              to: 'blog',
+            },
+            {
+              label: 'GitHub',
+              href: 'https://github.com/facebook/docusaurus',
+            },
+          ],
+        },
+      ],
+      copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
+    },
   },
-
   presets: [
     [
-      'classic',
-      /** @type {import('@docusaurus/preset-classic').Options} */
-      ({
+      '@docusaurus/preset-classic',
+      {
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
           // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
           editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+            'https://github.com/facebook/docusaurus/edit/master/website/',
         },
         blog: {
           showReadingTime: true,
           // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
           editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+            'https://github.com/facebook/docusaurus/edit/master/website/blog/',
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
         },
-      }),
+      },
     ],
   ],
-
-  themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-    ({
-      navbar: {
-        title: 'My Site',
-        logo: {
-          alt: 'My Site Logo',
-          src: 'img/logo.svg',
-        },
-        items: [
-          {
-            type: 'doc',
-            docId: 'intro',
-            position: 'left',
-            label: 'Tutorial',
-          },
-          {to: '/blog', label: 'Blog', position: 'left'},
-          {
-            href: 'https://github.com/facebook/docusaurus',
-            label: 'GitHub',
-            position: 'right',
-          },
-        ],
-      },
-      footer: {
-        style: 'dark',
-        links: [
-          {
-            title: 'Docs',
-            items: [
-              {
-                label: 'Tutorial',
-                to: '/docs/intro',
-              },
-            ],
-          },
-          {
-            title: 'Community',
-            items: [
-              {
-                label: 'Stack Overflow',
-                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
-              },
-              {
-                label: 'Discord',
-                href: 'https://discordapp.com/invite/docusaurus',
-              },
-              {
-                label: 'Twitter',
-                href: 'https://twitter.com/docusaurus',
-              },
-            ],
-          },
-          {
-            title: 'More',
-            items: [
-              {
-                label: 'Blog',
-                to: '/blog',
-              },
-              {
-                label: 'GitHub',
-                href: 'https://github.com/facebook/docusaurus',
-              },
-            ],
-          },
-        ],
-        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
-      },
-      prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
-      },
-    }),
 };
-
-module.exports = config;

examples/docusaurus-2/package.json

@@ -1,31 +1,23 @@
 {
+  "name": "docusaurus-2",
+  "version": "0.0.0",
   "private": true,
   "scripts": {
-    "docusaurus": "docusaurus",
     "start": "docusaurus start",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
-    "deploy": "docusaurus deploy",
-    "clear": "docusaurus clear",
-    "serve": "docusaurus serve",
-    "write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids"
+    "deploy": "docusaurus deploy"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.1",
-    "@docusaurus/preset-classic": "2.0.1",
-    "@mdx-js/react": "^1.6.22",
-    "clsx": "^1.2.1",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
-  },
-  "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.1"
+    "@docusaurus/core": "^2.0.0-alpha.54",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.54",
+    "classnames": "^2.2.6",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
   },
   "browserslist": {
     "production": [
-      ">0.5%",
+      ">0.2%",
       "not dead",
       "not op_mini all"
     ],
@@ -34,8 +26,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "engines": {
-    "node": ">=16.14"
   }
 }

examples/docusaurus-2/sidebars.js

@@ -1,31 +1,6 @@
-/**
- * Creating a sidebar enables you to:
- - create an ordered group of docs
- - render a sidebar for each doc of that group
- - provide next/previous navigation
-
- The sidebars can be generated from the filesystem, or explicitly defined here.
-
- Create as many sidebars as you want.
- */
-
-// @ts-check
-
-/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
-const sidebars = {
-  // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
-
-  // But you can create a sidebar manually
-  /*
-  tutorialSidebar: [
-    {
-      type: 'category',
-      label: 'Tutorial',
-      items: ['hello'],
-    },
-  ],
-   */
+module.exports = {
+  someSidebar: {
+    Docusaurus: ['doc1', 'doc2', 'doc3'],
+    Features: ['mdx'],
+  },
 };
-
-module.exports = sidebars;

examples/docusaurus-2/src/components/HomepageFeatures/index.js

@@ -1,64 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import styles from './styles.module.css';
-
-const FeatureList = [
-  {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
-      </>
-    ),
-  },
-  {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
-    description: (
-      <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
-      </>
-    ),
-  },
-  {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
-      </>
-    ),
-  },
-];
-
-function Feature({Svg, title, description}) {
-  return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
-}
-
-export default function HomepageFeatures() {
-  return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}

examples/docusaurus-2/src/components/HomepageFeatures/styles.module.css

@@ -1,11 +0,0 @@
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-}
-
-.featureSvg {
-  height: 200px;
-  width: 200px;
-}

examples/docusaurus-2/src/css/custom.css

@@ -1,3 +1,4 @@
+/* stylelint-disable docusaurus/copyright-header */
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to
@@ -6,25 +7,19 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: rgb(33, 175, 144);
+  --ifm-color-primary-darker: rgb(31, 165, 136);
+  --ifm-color-primary-darkest: rgb(26, 136, 112);
+  --ifm-color-primary-light: rgb(70, 203, 174);
+  --ifm-color-primary-lighter: rgb(102, 212, 189);
+  --ifm-color-primary-lightest: rgb(146, 224, 208);
   --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+.docusaurus-highlight-code-line {
+  background-color: rgb(72, 77, 91);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
 }

examples/docusaurus-2/src/pages/index.js

@@ -1,41 +1,97 @@
 import React from 'react';
-import clsx from 'clsx';
+import classnames from 'classnames';
+import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import styles from './styles.module.css';
 
-import styles from './index.module.css';
+const features = [
+  {
+    title: <>Easy to Use</>,
+    imageUrl: 'img/undraw_docusaurus_mountain.svg',
+    description: (
+      <>
+        Docusaurus was designed from the ground up to be easily installed and
+        used to get your website up and running quickly.
+      </>
+    ),
+  },
+  {
+    title: <>Focus on What Matters</>,
+    imageUrl: 'img/undraw_docusaurus_tree.svg',
+    description: (
+      <>
+        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
+        ahead and move your docs into the <code>docs</code> directory.
+      </>
+    ),
+  },
+  {
+    title: <>Powered by React</>,
+    imageUrl: 'img/undraw_docusaurus_react.svg',
+    description: (
+      <>
+        Extend or customize your website layout by reusing React. Docusaurus can
+        be extended while reusing the same header and footer.
+      </>
+    ),
+  },
+];
 
-function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+function Feature({imageUrl, title, description}) {
+  const imgUrl = useBaseUrl(imageUrl);
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
-          </Link>
+    <div className={classnames('col col--4', styles.feature)}>
+      {imgUrl && (
+        <div className="text--center">
+          <img className={styles.featureImage} src={imgUrl} alt={title} />
         </div>
-      </div>
-    </header>
+      )}
+      <h3>{title}</h3>
+      <p>{description}</p>
+    </div>
   );
 }
 
-export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
+function Home() {
+  const context = useDocusaurusContext();
+  const {siteConfig = {}} = context;
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
       description="Description will go into a meta tag in <head />">
-      <HomepageHeader />
+      <header className={classnames('hero hero--primary', styles.heroBanner)}>
+        <div className="container">
+          <h1 className="hero__title">{siteConfig.title}</h1>
+          <p className="hero__subtitle">{siteConfig.tagline}</p>
+          <div className={styles.buttons}>
+            <Link
+              className={classnames(
+                'button button--outline button--secondary button--lg',
+                styles.getStarted,
+              )}
+              to={useBaseUrl('docs/doc1')}>
+              Get Started
+            </Link>
+          </div>
+        </div>
+      </header>
       <main>
-        <HomepageFeatures />
+        {features && features.length && (
+          <section className={styles.features}>
+            <div className="container">
+              <div className="row">
+                {features.map((props, idx) => (
+                  <Feature key={idx} {...props} />
+                ))}
+              </div>
+            </div>
+          </section>
+        )}
       </main>
     </Layout>
   );
 }
+
+export default Home;

examples/docusaurus-2/src/pages/markdown-page.md

@@ -1,7 +0,0 @@
----
-title: Markdown page example
----
-
-# Markdown page example
-
-You don't need React to write simple standalone pages.

examples/docusaurus-2/src/pages/styles.module.css

@@ -1,3 +1,4 @@
+/* stylelint-disable docusaurus/copyright-header */
 /**
  * CSS files with the .module.css suffix will be treated as CSS modules
  * and scoped locally.
@@ -10,7 +11,7 @@
   overflow: hidden;
 }
 
-@media screen and (max-width: 996px) {
+@media screen and (max-width: 966px) {
   .heroBanner {
     padding: 2rem;
   }
@@ -21,3 +22,15 @@
   align-items: center;
   justify-content: center;
 }
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureImage {
+  height: 200px;
+  width: 200px;
+}

examples/docusaurus-2/static/img/undraw_docusaurus_mountain.svg

@@ -1,5 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1088" height="687.962" viewBox="0 0 1088 687.962">
-  <title>Easy to Use</title>
   <g id="Group_12" data-name="Group 12" transform="translate(-57 -56)">
     <g id="Group_11" data-name="Group 11" transform="translate(57 56)">
       <path id="Path_83" data-name="Path 83" d="M1017.81,560.461c-5.27,45.15-16.22,81.4-31.25,110.31-20,38.52-54.21,54.04-84.77,70.28a193.275,193.275,0,0,1-27.46,11.94c-55.61,19.3-117.85,14.18-166.74,3.99a657.282,657.282,0,0,0-104.09-13.16q-14.97-.675-29.97-.67c-15.42.02-293.07,5.29-360.67-131.57-16.69-33.76-28.13-75-32.24-125.27-11.63-142.12,52.29-235.46,134.74-296.47,155.97-115.41,369.76-110.57,523.43,7.88C941.15,276.621,1036.99,396.031,1017.81,560.461Z" transform="translate(-56 -106.019)" fill="#3f3d56"/>

examples/docusaurus-2/static/img/undraw_docusaurus_react.svg

@@ -1,5 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1041.277" height="554.141" viewBox="0 0 1041.277 554.141">
-  <title>Powered by React</title>
   <g id="Group_24" data-name="Group 24" transform="translate(-440 -263)">
     <g id="Group_23" data-name="Group 23" transform="translate(439.989 262.965)">
       <path id="Path_299" data-name="Path 299" d="M1040.82,611.12q-1.74,3.75-3.47,7.4-2.7,5.67-5.33,11.12c-.78,1.61-1.56,3.19-2.32,4.77-8.6,17.57-16.63,33.11-23.45,45.89A73.21,73.21,0,0,1,942.44,719l-151.65,1.65h-1.6l-13,.14-11.12.12-34.1.37h-1.38l-17.36.19h-.53l-107,1.16-95.51,1-11.11.12-69,.75H429l-44.75.48h-.48l-141.5,1.53-42.33.46a87.991,87.991,0,0,1-10.79-.54h0c-1.22-.14-2.44-.3-3.65-.49a87.38,87.38,0,0,1-51.29-27.54C116,678.37,102.75,655,93.85,629.64q-1.93-5.49-3.6-11.12C59.44,514.37,97,380,164.6,290.08q4.25-5.64,8.64-11l.07-.08c20.79-25.52,44.1-46.84,68.93-62,44-26.91,92.75-34.49,140.7-11.9,40.57,19.12,78.45,28.11,115.17,30.55,3.71.24,7.42.42,11.11.53,84.23,2.65,163.17-27.7,255.87-47.29,3.69-.78,7.39-1.55,11.12-2.28,66.13-13.16,139.49-20.1,226.73-5.51a189.089,189.089,0,0,1,26.76,6.4q5.77,1.86,11.12,4c41.64,16.94,64.35,48.24,74,87.46q1.37,5.46,2.37,11.11C1134.3,384.41,1084.19,518.23,1040.82,611.12Z" transform="translate(-79.34 -172.91)" fill="#f2f2f2"/>

examples/nextjs/.gitignore

@@ -26,11 +26,10 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
-.env*.local
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
 # vercel
 .vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts

examples/nextjs/package.json

@@ -1,6 +1,4 @@
 {
-  "name": "nextjs",
-  "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,10 +7,12 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "eslint": "8.27.0",
-    "eslint-config-next": "13.0.3",
-    "next": "13.0.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "next": "12.1.4",
+    "react": "18.0.0",
+    "react-dom": "18.0.0"
+  },
+  "devDependencies": {
+    "eslint": "8.12.0",
+    "eslint-config-next": "12.1.4"
   }
 }

examples/nextjs/pages/index.js

@@ -42,8 +42,6 @@ export default function Home() {
 
           <a
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
             className={styles.card}
           >
             <h2>Deploy &rarr;</h2>

examples/nextjs/styles/Home.module.css

@@ -114,16 +114,3 @@
     flex-direction: column;
   }
 }
-
-@media (prefers-color-scheme: dark) {
-  .card,
-  .footer {
-    border-color: #222;
-  }
-  .code {
-    background: #111;
-  }
-  .logo img {
-    filter: invert(1);
-  }
-}

examples/nextjs/styles/globals.css

@@ -14,13 +14,3 @@ a {
 * {
   box-sizing: border-box;
 }
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-  body {
-    color: white;
-    background: black;
-  }
-}

examples/remix/README.md

@@ -8,13 +8,6 @@ This directory is a brief example of a [Remix](https://remix.run/docs) site that
 
 _Live Example: https://remix-run-template.vercel.app_
 
-You can also deploy using the [Vercel CLI](https://vercel.com/cli):
-
-```sh
-npm i -g vercel
-vercel
-```
-
 ## Development
 
 To run your Remix app locally, make sure your project's local dependencies are installed:
@@ -30,3 +23,5 @@ 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/app/entry.client.tsx

@@ -1,22 +1,4 @@
 import { RemixBrowser } from "@remix-run/react";
-import { startTransition, StrictMode } from "react";
-import { hydrateRoot } from "react-dom/client";
+import { hydrate } from "react-dom";
 
-function hydrate() {
-  startTransition(() => {
-    hydrateRoot(
-      document,
-      <StrictMode>
-        <RemixBrowser />
-      </StrictMode>
-    );
-  });
-}
-
-if (window.requestIdleCallback) {
-  window.requestIdleCallback(hydrate);
-} else {
-  // Safari doesn't support requestIdleCallback
-  // https://caniuse.com/requestidlecallback
-  window.setTimeout(hydrate, 1);
-}
+hydrate(<RemixBrowser />, document);

examples/remix/app/entry.server.tsx

@@ -8,14 +8,14 @@ export default function handleRequest(
   responseHeaders: Headers,
   remixContext: EntryContext
 ) {
-  const markup = renderToString(
+  let markup = renderToString(
     <RemixServer context={remixContext} url={request.url} />
   );
 
   responseHeaders.set("Content-Type", "text/html");
 
   return new Response("<!DOCTYPE html>" + markup, {
-    headers: responseHeaders,
     status: responseStatusCode,
+    headers: responseHeaders,
   });
 }

examples/remix/app/root.tsx

@@ -1,34 +1,182 @@
-import type { MetaFunction } from "@remix-run/node";
+import type { LinksFunction, MetaFunction } from "@remix-run/node";
 import {
+  Link,
   Links,
   LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
+  useCatch,
 } from "@remix-run/react";
-import { Analytics } from '@vercel/analytics/react';
 
-export const meta: MetaFunction = () => ({
+import darkStylesUrl from "~/styles/dark.css";
+import globalStylesUrl from "~/styles/global.css";
+
+// https://remix.run/api/conventions#links
+export let links: LinksFunction = () => {
+  return [
+    { rel: "stylesheet", href: globalStylesUrl },
+    {
+      rel: "stylesheet",
+      href: darkStylesUrl,
+      media: "(prefers-color-scheme: dark)"
+    }
+  ];
+};
+
+// https://remix.run/api/conventions#meta
+export let meta: MetaFunction = () => ({
   charset: "utf-8",
-  title: "New Remix App",
   viewport: "width=device-width,initial-scale=1",
 });
 
+// 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/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/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>
+        {title ? <title>{title}</title> : null}
         <Meta />
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
-        <Analytics />
       </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 type { MetaFunction, LinksFunction } from "@remix-run/node";
+import { Outlet } from "@remix-run/react";
+
+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/docs/en/v1/guides/routing">
+            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-run/react";
+
+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-run/react";
+
+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,102 @@
+import type { ActionFunction } from "@remix-run/node";
+import { json, redirect } from "@remix-run/node";
+import { Form, useActionData } from "@remix-run/react";
+import { useEffect, useRef } from "react";
+
+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 type { MetaFunction } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { Link, Outlet, useCatch, useLoaderData } from "@remix-run/react";
+
+export let meta: MetaFunction = () => ({ 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,111 @@
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { Link, useCatch, useLoaderData } from "@remix-run/react";
+
+// 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,41 @@
+import type { LoaderFunction } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { Link, Outlet, useCatch, useLoaderData } from "@remix-run/react";
+
+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

@@ -1,32 +1,101 @@
+import type { MetaFunction, LoaderFunction } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { Link, useLoaderData } from "@remix-run/react";
+
+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 style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
-      <h1>Welcome to Remix</h1>
-      <ul>
-        <li>
-          <a
-            target="_blank"
-            href="https://remix.run/tutorials/blog"
-            rel="noreferrer"
-          >
-            15m Quickstart Blog Tutorial
-          </a>
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://remix.run/tutorials/jokes"
-            rel="noreferrer"
-          >
-            Deep Dive Jokes App Tutorial
-          </a>
-        </li>
-        <li>
-          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
-            Remix Docs
-          </a>
-        </li>
-      </ul>
+    <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

@@ -6,22 +6,21 @@
     "dev": "remix dev"
   },
   "dependencies": {
-    "@remix-run/node": "^1.7.5",
-    "@remix-run/react": "^1.7.5",
-    "@remix-run/vercel": "^1.7.5",
-    "@vercel/analytics": "^0.1.3",
-    "@vercel/node": "^2.4.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@remix-run/node": "^1.5.1",
+    "@remix-run/react": "^1.5.1",
+    "@remix-run/vercel": "^1.5.1",
+    "@vercel/node": "^2.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@remix-run/dev": "^1.7.5",
-    "@remix-run/eslint-config": "^1.7.5",
-    "@remix-run/serve": "^1.7.5",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "eslint": "^8.23.1",
-    "typescript": "^4.7.4"
+    "@remix-run/dev": "^1.5.1",
+    "@remix-run/eslint-config": "^1.5.1",
+    "@remix-run/serve": "^1.5.1",
+    "@types/react": "^17.0.45",
+    "@types/react-dom": "^17.0.17",
+    "eslint": "^8.15.0",
+    "typescript": "^4.6.4"
   },
   "engines": {
     "node": ">=14"

examples/remix/remix.config.js

@@ -1,4 +1,6 @@
-/** @type {import('@remix-run/dev').AppConfig} */
+/**
+ * @type {import('@remix-run/dev').AppConfig}
+ */
 module.exports = {
   serverBuildTarget: "vercel",
   // When running locally in development mode, we use the built in remix

examples/remix/remix.env.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="@remix-run/dev" />
-/// <reference types="@remix-run/node" />
+/// <reference types="@remix-run/node/globals" />

examples/remix/server.js

@@ -1,4 +1,4 @@
-import { createRequestHandler } from "@remix-run/vercel";
 import * as build from "@remix-run/dev/server-build";
+import { createRequestHandler } from "@remix-run/vercel";
 
 export default createRequestHandler({ build, mode: process.env.NODE_ENV });

examples/remix/tsconfig.json

@@ -2,16 +2,12 @@
   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2019"],
-    "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "target": "ES2019",
     "strict": true,
-    "allowJs": true,
-    "forceConsistentCasingInFileNames": true,
-    "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"]
     },