chore: update prettier setup

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-	"extends": ["@remix-run", "prettier"]
+  "extends": ["@remix-run", "prettier"]
 }

.prettierrc.js

@@ -0,0 +1,32 @@
+/** @type {import("prettier").Config} */
+const config = {
+	arrowParens: 'avoid',
+	bracketSameLine: false,
+	bracketSpacing: true,
+	embeddedLanguageFormatting: 'auto',
+	endOfLine: 'lf',
+	htmlWhitespaceSensitivity: 'css',
+	insertPragma: false,
+	jsxSingleQuote: false,
+	printWidth: 80,
+	proseWrap: 'always',
+	quoteProps: 'as-needed',
+	requirePragma: false,
+	semi: true,
+	singleAttributePerLine: false,
+	singleQuote: true,
+	tabWidth: 2,
+	trailingComma: 'all',
+	useTabs: true,
+	overrides: [
+		{
+			files: ['**/*.json', '**/*.md'],
+			options: {
+				useTabs: false,
+			},
+		},
+	],
+	plugins: ['prettier-plugin-tailwindcss'],
+};
+
+export default config;

README.md

@@ -38,4 +38,5 @@ npm run build && npm run test
 
 ## CI/CD
 
-The template ships a [CI workflow](./.github/workflows/ci.yml) which is triggered whenever new changes are pushed.
+The template ships a [CI workflow](./.github/workflows/ci.yml) which is
+triggered whenever new changes are pushed.

app/root.tsx

@@ -96,10 +96,10 @@ function Layout({
 		<div className="container mx-auto">
 			<div className="flex flex-col-reverse lg:flex-row">
 				<section
-					className={`flex-1 relative ${children ? 'border-t lg:border-t-0' : ''}`.trim()}
+					className={`relative flex-1 ${children ? 'border-t lg:border-t-0' : ''}`.trim()}
 				>
 					<div className="sticky top-0">
-						<div className="flex flex-col lg:min-h-screen lg:py-10 px-5 py-5">
+						<div className="flex flex-col px-5 py-5 lg:min-h-screen lg:py-10">
 							<header className="py-4">
 								<Link to="/" title="Remix">
 									<RemixLogo />
@@ -110,7 +110,7 @@ function Layout({
 								<p className="py-2">{description}</p>
 								{actionText ? (
 									<a
-										className="inline-block border hover:border-black px-4 py-2 mt-2"
+										className="mt-2 inline-block border px-4 py-2 hover:border-black"
 										href={actionLink ?? '#'}
 									>
 										{actionText}
@@ -127,7 +127,7 @@ function Layout({
 					</div>
 				</section>
 				<main className="flex-1">
-					<div className="lg:py-10 px-5 py-5">{children}</div>
+					<div className="px-5 py-5 lg:py-10">{children}</div>
 				</main>
 			</div>
 		</div>

functions/[[path]].ts

@@ -7,7 +7,7 @@ import * as build from '../build/server';
 
 export const onRequest = createPagesFunctionHandler({
 	build,
-	getLoadContext: (context) => ({
+	getLoadContext: context => ({
 		env: context.env,
 		waitUntil(promise: Promise<unknown>) {
 			context.waitUntil(promise);

package.json

@@ -1,59 +1,60 @@
 {
-	"private": true,
-	"name": "remix-cloudflare-template",
-	"type": "module",
-	"description": "All-in-one remix starter template for Cloudflare Pages",
-	"scripts": {
-		"dev": "remix vite:dev",
-		"test": "playwright test --ui",
-		"start": "wrangler pages dev ./build/client",
-		"build": "remix vite:build",
-		"cleanup": "rimraf .cache ./build",
-		"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
-		"typecheck": "tsc",
-		"prepare": "husky"
-	},
-	"dependencies": {
-		"@markdoc/markdoc": "^0.4.0",
-		"@remix-run/cloudflare": "*",
-		"@remix-run/cloudflare-pages": "*",
-		"@remix-run/react": "*",
-		"isbot": "^3.6.5",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
-	},
-	"devDependencies": {
-		"@cloudflare/workers-types": "^4.20240208.0",
-		"@octokit/types": "^12.4.0",
-		"@playwright/test": "^1.41.2",
-		"@remix-run/dev": "*",
-		"@remix-run/eslint-config": "*",
-		"@tailwindcss/typography": "^0.5.10",
-		"@types/react": "^18.2.55",
-		"@types/react-dom": "^18.2.19",
-		"autoprefixer": "^10.4.17",
-		"concurrently": "^8.2.2",
-		"cross-env": "^7.0.3",
-		"eslint": "^8.56.0",
-		"eslint-config-prettier": "^9.1.0",
-		"husky": "^9.0.10",
-		"lint-staged": "^15.2.2",
-		"miniflare": "^3.20240129.1",
-		"msw": "^2.1.7",
-		"postcss": "^8.4.35",
-		"prettier": "^3.2.5",
-		"rimraf": "^5.0.5",
-		"tailwindcss": "^3.4.1",
-		"typescript": "^5.3.3",
-		"vite": "^5.1.1",
-		"vite-tsconfig-paths": "^4.3.1",
-		"wrangler": "^3.28.1"
-	},
-	"engines": {
-		"node": ">=18"
-	},
-	"sideEffects": false,
-	"lint-staged": {
-		"*.{js,mjs,ts,tsx,css,md,yml}": "prettier --write"
-	}
+  "private": true,
+  "name": "remix-cloudflare-template",
+  "type": "module",
+  "description": "All-in-one remix starter template for Cloudflare Pages",
+  "scripts": {
+    "dev": "remix vite:dev",
+    "test": "playwright test --ui",
+    "start": "wrangler pages dev ./build/client",
+    "build": "remix vite:build",
+    "cleanup": "rimraf .cache ./build",
+    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
+    "typecheck": "tsc",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@markdoc/markdoc": "^0.4.0",
+    "@remix-run/cloudflare": "*",
+    "@remix-run/cloudflare-pages": "*",
+    "@remix-run/react": "*",
+    "isbot": "^3.6.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20240208.0",
+    "@octokit/types": "^12.4.0",
+    "@playwright/test": "^1.41.2",
+    "@remix-run/dev": "*",
+    "@remix-run/eslint-config": "*",
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "autoprefixer": "^10.4.17",
+    "concurrently": "^8.2.2",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.10",
+    "lint-staged": "^15.2.2",
+    "miniflare": "^3.20240129.1",
+    "msw": "^2.1.7",
+    "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "rimraf": "^5.0.5",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.1",
+    "vite-tsconfig-paths": "^4.3.1",
+    "wrangler": "^3.28.1"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false,
+  "lint-staged": {
+    "*.{js,mjs,ts,tsx,css,md,yml}": "prettier --write"
+  }
 }

tsconfig.json

@@ -1,24 +1,24 @@
 {
-	"include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
-	"compilerOptions": {
-		"lib": ["DOM", "DOM.Iterable", "ES2022"],
-		"isolatedModules": true,
-		"esModuleInterop": true,
-		"jsx": "react-jsx",
-		"module": "ESNext",
-		"moduleResolution": "Bundler",
-		"resolveJsonModule": true,
-		"target": "ES2022",
-		"strict": true,
-		"allowJs": true,
-		"skipLibCheck": true,
-		"forceConsistentCasingInFileNames": true,
-		"baseUrl": ".",
-		"paths": {
-			"~/*": ["./app/*"]
-		},
+  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
 
-		// Vite takes care of building everything, not tsc.
-		"noEmit": true
-	}
+    // Vite takes care of building everything, not tsc.
+    "noEmit": true
+  }
 }