feat(templates,docs): add tutorial to templates (#8149)

.eslintignore

@@ -13,3 +13,4 @@ packages/remix-deno
 templates/deno
 
 packages/remix-dev/config/defaults
+templates/remix-tutorial/app/data.ts

docs/start/tutorial.md

@@ -18,7 +18,7 @@ The rest is just there for your information and deeper understanding. Let's get
 👉 **Generate a basic template**
 
 ```shellscript nonumber
-npx create-remix@latest --template ryanflorence/remix-tutorial-template
+npx create-remix@latest --template remix-run/remix/templates/remix-tutorial
 ```
 
 This uses a pretty bare-bones template but includes our css and data model, so we can focus on Remix. The [Quick Start][quickstart] can familiarize you with the basic setup of a Remix project if you'd like to learn more.

package.json

@@ -29,7 +29,7 @@
     "format": "prettier --ignore-path .eslintignore --write ./ && npm run lint:fix",
     "format:deno": "deno fmt integration/helpers/deno-template packages/remix-deno templates/deno --ignore=node_modules,build,public/build",
     "license": "node ./scripts/license.js",
-    "lint": "eslint --cache .",
+    "lint": "eslint  .",
     "lint:deno": "deno lint integration/helpers/deno-template packages/remix-deno templates/deno --ignore=node_modules,build,public/build",
     "lint:fix": "yarn lint --fix",
     "playground:new": "node ./scripts/playground/new.js",

templates/remix-tutorial/.eslintrc.js

@@ -0,0 +1,74 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+
+  // 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" },
+        ],
+      },
+    },
+
+    // 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.js"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

templates/remix-tutorial/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env

templates/remix-tutorial/README.md

@@ -0,0 +1,38 @@
+# Welcome to Remix!
+
+- [Remix Docs](https://remix.run/docs)
+
+## Development
+
+From your terminal:
+
+```sh
+npm run dev
+```
+
+This starts your app in development mode, rebuilding assets on file changes.
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
+
+Make sure to deploy the output of `remix build`
+
+- `build/`
+- `public/build/`