Incorporate new Epic-Stack template updates like Remix v2.3.1 (#117)

* epic v2.3: NEW .env.example; csrf security

* epic v2.3: NEW .env.example; csrf security

* Comment about potentially unneccesary & readme

Co-authored-by: plocket <[email protected]>
Co-authored-by: Gavin Kimball <[email protected]>
Co-authored-by: Clayton Schneider <[email protected]>
Co-authored-by: Jeff Korenstein <[email protected]>
Co-authored-by: Tai <[email protected]>
Co-authored-by: Tai Phuong <[email protected]>

---------

Co-authored-by: plocket <[email protected]>
Co-authored-by: Gavin Kimball <[email protected]>
Co-authored-by: Clayton Schneider <[email protected]>
Co-authored-by: Jeff Korenstein <[email protected]>
Co-authored-by: Tai <[email protected]>

.github/workflows/heat-stack.yml

@@ -24,7 +24,7 @@ permissions:
 jobs:
   lint:
     name: ⬣ ESLint
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v3
@@ -50,7 +50,7 @@ jobs:
 
   typecheck:
     name: ʦ TypeScript
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v3
@@ -73,7 +73,7 @@ jobs:
 
   vitest:
     name: ⚡ Vitest pyodide.test.ts
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v3
@@ -100,7 +100,7 @@ jobs:
   # playwright tests work great but slight jank/inconsistency passing, and not used yet, so disabling for now
   # playwright:
   #   name: 🎭 Playwright
-  #   runs-on: ubuntu-latest
+  #   runs-on: ubuntu-22.04
   #   timeout-minutes: 60
   #   steps:
   #     - name: ⬇️ Checkout repo

.gitignore

@@ -5,3 +5,8 @@ node_modules
 
 # Easy way to create temporary files/folders that won't accidentally be added to git
 *.local.*
+
+#local temporary folders
+heat-app
+venv
+heat-tmp

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "bradlc.vscode-tailwindcss",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "prisma.prisma",
+    "qwtel.sqlite-viewer",
+    "yoavbls.pretty-ts-errors",
+    "github.vscode-github-actions"
+  ]
+}

heat-stack/.env.example

@@ -3,6 +3,7 @@ DATABASE_PATH="./prisma/data.db"
 DATABASE_URL="file:./data.db?connection_limit=1"
 CACHE_DATABASE_PATH="./other/cache.db"
 SESSION_SECRET="super-duper-s3cret"
+HONEYPOT_SECRET="super-duper-s3cret"
 INTERNAL_COMMAND_TOKEN="some-made-up-token"
 RESEND_API_KEY="re_blAh_blaHBlaHblahBLAhBlAh"
 SENTRY_DSN="your-dsn"

heat-stack/README.md

@@ -17,6 +17,7 @@ npm install
 npm run dev
 ```
 
+
 ### Set up in a new GitHub CodingSpace:
 
 ```
@@ -30,6 +31,9 @@ npm run dev
 
 If you have the node version manager (`nvm`), then `nvm use 18` avoids engine error with node v19+ or newer which is default. nvm is preinstalled in coding spaces.
 
+
+In Coding Spaces VSCode always go to hamburger menu -> File-> untick AutoSave. For a pic, see https://stackoverflow.com/a/76659316/14144258
+
 ### Under special circumstances:
 
 Assume you don't need to, but if the version of pyodide changes run:

heat-stack/app/components/error-boundary.tsx

@@ -1,9 +1,10 @@
 import {
+	type ErrorResponse,
 	isRouteErrorResponse,
 	useParams,
 	useRouteError,
 } from '@remix-run/react'
-import { type ErrorResponse } from '@remix-run/router'
+import { captureRemixErrorBoundaryError } from '@sentry/remix'
 import { getErrorMessage } from '#app/utils/misc.tsx'
 
 type StatusHandler = (info: {
@@ -25,6 +26,7 @@ export function GeneralErrorBoundary({
 	unexpectedErrorHandler?: (error: unknown) => JSX.Element | null
 }) {
 	const error = useRouteError()
+	captureRemixErrorBoundaryError(error)
 	const params = useParams()
 
 	if (typeof document !== 'undefined') {

heat-stack/app/components/forms.tsx

@@ -19,7 +19,7 @@ export function ErrorList({
 	return (
 		<ul id={id} className="flex flex-col gap-1">
 			{errorsToRender.map(e => (
-				<li key={e} className="text-[10px] text-foreground-danger">
+				<li key={e} className="text-foreground-destructive text-[10px]">
 					{e}
 				</li>
 			))}
@@ -64,7 +64,7 @@ export function TextareaField({
 	className,
 }: {
 	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
-	textareaProps: React.InputHTMLAttributes<HTMLTextAreaElement>
+	textareaProps: React.TextareaHTMLAttributes<HTMLTextAreaElement>
 	errors?: ListOfErrors
 	className?: string
 }) {

heat-stack/app/components/progress-bar.tsx

@@ -0,0 +1,63 @@
+import { useNavigation } from '@remix-run/react'
+import { useEffect, useRef, useState } from 'react'
+import { useSpinDelay } from 'spin-delay'
+import { cn } from '#app/utils/misc.tsx'
+import { Icon } from './ui/icon.tsx'
+
+function EpicProgress() {
+	const transition = useNavigation()
+	const busy = transition.state !== 'idle'
+	const delayedPending = useSpinDelay(busy, {
+		delay: 600,
+		minDuration: 400,
+	})
+	const ref = useRef<HTMLDivElement>(null)
+	const [animationComplete, setAnimationComplete] = useState(true)
+
+	useEffect(() => {
+		if (!ref.current) return
+		if (delayedPending) setAnimationComplete(false)
+
+		const animationPromises = ref.current
+			.getAnimations()
+			.map(({ finished }) => finished)
+
+		Promise.allSettled(animationPromises).then(() => {
+			if (!delayedPending) setAnimationComplete(true)
+		})
+	}, [delayedPending])
+
+	return (
+		<div
+			role="progressbar"
+			aria-hidden={delayedPending ? undefined : true}
+			aria-valuetext={delayedPending ? 'Loading' : undefined}
+			className="fixed inset-x-0 left-0 top-0 z-50 h-[0.20rem] animate-pulse"
+		>
+			<div
+				ref={ref}
+				className={cn(
+					'h-full w-0 bg-foreground duration-500 ease-in-out',
+					transition.state === 'idle' &&
+						(animationComplete
+							? 'transition-none'
+							: 'w-full opacity-0 transition-all'),
+					delayedPending && transition.state === 'submitting' && 'w-5/12',
+					delayedPending && transition.state === 'loading' && 'w-8/12',
+				)}
+			/>
+			{delayedPending && (
+				<div className="absolute flex items-center justify-center">
+					<Icon
+						name="update"
+						size="md"
+						className="m-1 animate-spin text-foreground"
+						aria-hidden
+					/>
+				</div>
+			)}
+		</div>
+	)
+}
+
+export { EpicProgress }

heat-stack/app/components/search-bar.tsx

@@ -1,4 +1,5 @@
 import { Form, useSearchParams, useSubmit } from '@remix-run/react'
+import { useId } from 'react'
 import { useDebounce, useIsPending } from '#app/utils/misc.tsx'
 import { Icon } from './ui/icon.tsx'
 import { Input } from './ui/input.tsx'
@@ -14,6 +15,7 @@ export function SearchBar({
 	autoFocus?: boolean
 	autoSubmit?: boolean
 }) {
+	const id = useId()
 	const [searchParams] = useSearchParams()
 	const submit = useSubmit()
 	const isSubmitting = useIsPending({
@@ -33,13 +35,13 @@ export function SearchBar({
 			onChange={e => autoSubmit && handleFormChange(e.currentTarget)}
 		>
 			<div className="flex-1">
-				<Label htmlFor="search" className="sr-only">
+				<Label htmlFor={id} className="sr-only">
 					Search
 				</Label>
 				<Input
 					type="search"
 					name="search"
-					id="search"
+					id={id}
 					defaultValue={searchParams.get('search') ?? ''}
 					placeholder="Search"
 					className="w-full"

heat-stack/app/components/spinner.tsx

@@ -1,3 +1,4 @@
+/* deprecated by epic stack 2.3, delete me */
 export function Spinner({ showSpinner }: { showSpinner: boolean }) {
 	return (
 		<div

heat-stack/app/components/ui/button.tsx

@@ -5,13 +5,13 @@ import * as React from 'react'
 import { cn } from '#app/utils/misc.tsx'
 
 const buttonVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors outline-none focus-visible:ring-4 focus-within:ring-4 ring-ring ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
 	{
 		variants: {
 			variant: {
-				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+				default: 'bg-primary text-primary-foreground hover:bg-primary/80',
 				destructive:
-					'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+					'bg-destructive text-destructive-foreground hover:bg-destructive/80',
 				outline:
 					'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
 				secondary:

heat-stack/app/entry.server.tsx

@@ -1,9 +1,11 @@
 import { PassThrough } from 'stream'
 import {
 	createReadableStreamFromReadable,
+	type DataFunctionArgs,
 	type HandleDocumentRequestFunction,
 } from '@remix-run/node'
 import { RemixServer } from '@remix-run/react'
+import * as Sentry from '@sentry/remix'
 import isbot from 'isbot'
 import { getInstanceInfo } from 'litefs-js'
 import { renderToPipeableStream } from 'react-dom/server'
@@ -72,6 +74,7 @@ export default async function handleRequest(...args: DocRequestArgs) {
 
 					console.error(error)
 				},
+				nonce,
 			},
 		)
 
@@ -88,3 +91,14 @@ export async function handleDataRequest(response: Response) {
 
 	return response
 }
+
+export function handleError(
+	error: unknown,
+	{ request }: DataFunctionArgs,
+): void {
+	if (error instanceof Error) {
+		Sentry.captureRemixServerException(error, 'remix.server', request)
+	} else {
+		Sentry.captureException(error)
+	}
+}

heat-stack/app/root.tsx

@@ -3,20 +3,22 @@ import fontStyleSheetUrl from './styles/font.css'
 import tailwindStyleSheetUrl from './styles/tailwind.css'
 import { Links, Scripts } from '@remix-run/react'
 import { href as iconsHref } from './components/ui/icon.tsx'
-import { DataFunctionArgs, json, type LinksFunction } from '@remix-run/node'
+import { DataFunctionArgs, HeadersFunction, json, type LinksFunction } from '@remix-run/node'
 
 import { CaseSummary } from './components/CaseSummary.tsx'
 import './App.css'
 import { useNonce } from './utils/nonce-provider.ts'
-import { makeTimings, time } from './utils/timing.server.ts'
+import { combineServerTimings, makeTimings, time } from './utils/timing.server.ts'
 import { combineHeaders, getDomainUrl } from './utils/misc.tsx'
-// import { csrf } from './utils/csrf.server.ts'
 import { getEnv } from './utils/env.server.ts'
+// Hints may not be required. Double check.
 import { getHints } from './utils/client-hints.tsx'
 import { WeatherExample } from './components/WeatherExample.tsx'
 import { Weather } from './WeatherExample.js'
 import { getUserId } from './utils/auth.server.ts'
 import { prisma } from './utils/db.server.ts'
+import { csrf } from './utils/csrf.server.ts'
+import { honeypot } from './utils/honeypot.server.ts'
 
 export const links: LinksFunction = () => {
 	return [
@@ -76,8 +78,8 @@ export async function loader({ request }: DataFunctionArgs) {
 				{ timings, type: 'find user', desc: 'find user in root' },
 		  )
 		: null
-	// const honeyProps = honeypot.getInputProps()
-	// const [csrfToken, csrfCookieHeader] = await csrf.commitToken()
+	const honeyProps = honeypot.getInputProps()
+	const [csrfToken, csrfCookieHeader] = await csrf.commitToken()
 	// Weather station data
 	const w_href: string =
 		'https://archive-api.open-meteo.com/v1/archive?latitude=52.52&longitude=13.41&daily=temperature_2m_max&timezone=America%2FNew_York&start_date=2022-01-01&end_date=2023-08-30&temperature_unit=fahrenheit'
@@ -89,24 +91,35 @@ export async function loader({ request }: DataFunctionArgs) {
 			weather: weather,
 			user: user,
 			requestInfo: {
+				/* hints may not be absolutely required, double check */
 				hints: getHints(request),
 				origin: getDomainUrl(request),
 				path: new URL(request.url).pathname,
 				userPrefs: {},
 			},
 			ENV: getEnv(),
-			// honeyProps,
-			// csrfToken,
+			honeyProps,
+			csrfToken,
 		},
 		{
 			headers: combineHeaders(
 				{ 'Server-Timing': timings.toString() },
-				// csrfCookieHeader ? { 'set-cookie': csrfCookieHeader } : null,
+				csrfCookieHeader ? { 'set-cookie': csrfCookieHeader } : null,
 			),
 		},
 	)
 }
 
+/** 
+ * Step 4 of making Server Timings 
+ * https://github.com/epicweb-dev/epic-stack/blob/main/docs/server-timing.md 
+ */
+export const headers: HeadersFunction = ({ loaderHeaders, parentHeaders }) => {
+	return {
+		'Server-Timing': combineServerTimings(parentHeaders, loaderHeaders),
+	}
+}
+
 export default function HeatStack({ env = {} }) {
 	const nonce = useNonce()
 	return (
@@ -124,7 +137,6 @@ export default function HeatStack({ env = {} }) {
 						__html: `window.ENV = ${JSON.stringify(env)}`,
 					}}
 				/>
-				<div>left{nonce}right</div>
 				<Scripts nonce={nonce} />
 			</body>
 		</html>