Fixing kitchen-sink example.

examples/kitchen-sink/apps/blog/.eslintrc.cjs

@@ -1,84 +1,4 @@
-/**
- * This is intended to be a basic starting point for linting in your app.
- * It relies on recommended configs out of the box for simplicity, but you can
- * and should modify this configuration to best suit your team's needs.
- */
-
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  root: true,
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  env: {
-    browser: true,
-    commonjs: true,
-    es6: true,
-  },
-  ignorePatterns: ["!**/.server", "!**/.client"],
-
-  // Base config
-  extends: ["eslint:recommended"],
-
-  overrides: [
-    // React
-    {
-      files: ["**/*.{js,jsx,ts,tsx}"],
-      plugins: ["react", "jsx-a11y"],
-      extends: [
-        "plugin:react/recommended",
-        "plugin:react/jsx-runtime",
-        "plugin:react-hooks/recommended",
-        "plugin:jsx-a11y/recommended",
-      ],
-      settings: {
-        react: {
-          version: "detect",
-        },
-        formComponents: ["Form"],
-        linkComponents: [
-          { name: "Link", linkAttribute: "to" },
-          { name: "NavLink", linkAttribute: "to" },
-        ],
-        "import/resolver": {
-          typescript: {},
-        },
-      },
-    },
-
-    // Typescript
-    {
-      files: ["**/*.{ts,tsx}"],
-      plugins: ["@typescript-eslint", "import"],
-      parser: "@typescript-eslint/parser",
-      settings: {
-        "import/internal-regex": "^~/",
-        "import/resolver": {
-          node: {
-            extensions: [".ts", ".tsx"],
-          },
-          typescript: {
-            alwaysTryTypes: true,
-          },
-        },
-      },
-      extends: [
-        "plugin:@typescript-eslint/recommended",
-        "plugin:import/recommended",
-        "plugin:import/typescript",
-      ],
-    },
-
-    // Node
-    {
-      files: [".eslintrc.cjs"],
-      env: {
-        node: true,
-      },
-    },
-  ],
+  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
 };

examples/kitchen-sink/apps/blog/.gitignore

@@ -1,5 +1,5 @@
 node_modules
 
-/.cache
 /build
 .env
+.vercel

examples/kitchen-sink/apps/blog/README.md

@@ -1,40 +1,38 @@
-# Welcome to Remix!
+# Remix
 
-- 📖 [Remix docs](https://remix.run/docs)
+This directory is a brief example of a [Remix](https://remix.run/docs) site that can be deployed to Vercel with zero configuration.
 
-## Development
-
-Run the dev server:
+To get started, run the Remix cli with this template
 
-```shellscript
-npm run dev
+```sh
+npx create-remix@latest --template vercel/vercel/examples/remix
 ```
 
-## Deployment
+## Deploy Your Own
 
-First, build your app for production:
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/remix&template=remix)
 
-```sh
-npm run build
-```
+_Live Example: https://remix-run-template.vercel.app_
 
-Then run the app in production mode:
+You can also deploy using the [Vercel CLI](https://vercel.com/docs/cli):
 
 ```sh
-npm start
+npm i -g vercel
+vercel
 ```
 
-Now you'll need to pick a host to deploy it to.
-
-### DIY
+## Development
 
-If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
+To run your Remix app locally, make sure your project's local dependencies are installed:
 
-Make sure to deploy the output of `npm run build`
+```sh
+npm install
+```
 
-- `build/server`
-- `build/client`
+Afterwards, start the Remix development server like so:
 
-## Styling
+```sh
+npm run dev
+```
 
-This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.
+Open up [http://localhost:5173](http://localhost:5173) and you should be ready to go!

examples/kitchen-sink/apps/blog/app/root.tsx

@@ -5,7 +5,8 @@ import {
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
-import "./tailwind.css";
+import { Analytics } from "@vercel/analytics/react";
+import "./styles.css";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -20,6 +21,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         {children}
         <ScrollRestoration />
         <Scripts />
+        <Analytics />
       </body>
     </html>
   );

examples/kitchen-sink/apps/blog/app/routes/edge.tsx

@@ -0,0 +1,15 @@
+import type { MetaFunction } from "@vercel/remix";
+
+export const config = { runtime: "edge" };
+
+export const meta: MetaFunction = () => [
+  { title: "Remix@Edge | New Remix App" },
+];
+
+export default function Edge() {
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
+      <h1>Welcome to Remix@Edge</h1>
+    </div>
+  );
+}