fix(seo): ignore pages from the sitemap and prepare config

Author: kentcdodds

app/routes/_auth+/forgot-password.tsx

@@ -1,5 +1,6 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import * as E from '@react-email/components'
 import {
 	json,
@@ -19,6 +20,10 @@ import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { EmailSchema, UsernameSchema } from '#app/utils/user-validation.ts'
 import { prepareVerification } from './verify.server.ts'
 
+export const handle: SEOHandle = {
+	getSitemapEntries: () => null,
+}
+
 const ForgotPasswordSchema = z.object({
 	usernameOrEmail: z.union([EmailSchema, UsernameSchema]),
 })
@@ -163,7 +168,7 @@ export default function ForgotPasswordRoute() {
 								status={
 									forgotPassword.state === 'submitting'
 										? 'pending'
-										: form.status ?? 'idle'
+										: (form.status ?? 'idle')
 								}
 								type="submit"
 								disabled={forgotPassword.state !== 'idle'}

app/routes/_auth+/login.tsx

@@ -1,5 +1,6 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import {
 	json,
 	type ActionFunctionArgs,
@@ -23,6 +24,10 @@ import { useIsPending } from '#app/utils/misc.tsx'
 import { PasswordSchema, UsernameSchema } from '#app/utils/user-validation.ts'
 import { handleNewSession } from './login.server.ts'
 
+export const handle: SEOHandle = {
+	getSitemapEntries: () => null,
+}
+
 const LoginFormSchema = z.object({
 	username: UsernameSchema,
 	password: PasswordSchema,
@@ -158,7 +163,7 @@ export default function LoginPage() {
 							<div className="flex items-center justify-between gap-6 pt-3">
 								<StatusButton
 									className="w-full"
-									status={isPending ? 'pending' : form.status ?? 'idle'}
+									status={isPending ? 'pending' : (form.status ?? 'idle')}
 									type="submit"
 									disabled={isPending}
 								>

app/routes/_auth+/reset-password.tsx

@@ -1,5 +1,6 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import {
 	json,
 	redirect,
@@ -16,6 +17,10 @@ import { useIsPending } from '#app/utils/misc.tsx'
 import { PasswordAndConfirmPasswordSchema } from '#app/utils/user-validation.ts'
 import { verifySessionStorage } from '#app/utils/verification.server.ts'
 
+export const handle: SEOHandle = {
+	getSitemapEntries: () => null,
+}
+
 export const resetPasswordUsernameSessionKey = 'resetPasswordUsername'
 
 const ResetPasswordSchema = PasswordAndConfirmPasswordSchema
@@ -119,7 +124,7 @@ export default function ResetPasswordPage() {
 
 					<StatusButton
 						className="w-full"
-						status={isPending ? 'pending' : form.status ?? 'idle'}
+						status={isPending ? 'pending' : (form.status ?? 'idle')}
 						type="submit"
 						disabled={isPending}
 					>

app/routes/_auth+/signup.tsx

@@ -1,5 +1,6 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import * as E from '@react-email/components'
 import {
 	json,
@@ -24,6 +25,10 @@ import { useIsPending } from '#app/utils/misc.tsx'
 import { EmailSchema } from '#app/utils/user-validation.ts'
 import { prepareVerification } from './verify.server.ts'
 
+export const handle: SEOHandle = {
+	getSitemapEntries: () => null,
+}
+
 const SignupSchema = z.object({
 	email: EmailSchema,
 })
@@ -158,7 +163,7 @@ export default function SignupRoute() {
 					<ErrorList errors={form.errors} id={form.errorId} />
 					<StatusButton
 						className="w-full"
-						status={isPending ? 'pending' : form.status ?? 'idle'}
+						status={isPending ? 'pending' : (form.status ?? 'idle')}
 						type="submit"
 						disabled={isPending}
 					>

app/routes/_auth+/verify.tsx

@@ -1,5 +1,6 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import { type ActionFunctionArgs } from '@remix-run/node'
 import { Form, useActionData, useSearchParams } from '@remix-run/react'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
@@ -12,6 +13,10 @@ import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
 import { validateRequest } from './verify.server.ts'
 
+export const handle: SEOHandle = {
+	getSitemapEntries: () => null,
+}
+
 export const codeQueryParam = 'code'
 export const targetQueryParam = 'target'
 export const typeQueryParam = 'type'
@@ -122,7 +127,7 @@ export default function VerifyRoute() {
 						/>
 						<StatusButton
 							className="w-full"
-							status={isPending ? 'pending' : form.status ?? 'idle'}
+							status={isPending ? 'pending' : (form.status ?? 'idle')}
 							type="submit"
 							disabled={isPending}
 						>

docs/seo.md

@@ -15,23 +15,32 @@ Here are two quick examples of how to customize the sitemap on a per-route basis
 from the `@nasa-gcn/remix-seo` docs:
 
 ```tsx
-// routes/blog/$blogslug.tsx
+// routes/blog/_layout.tsx
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import { serverOnly$ } from 'vite-env-only/macros'
 
 export const handle: SEOHandle = {
-	getSitemapEntries: async (request) => {
+	getSitemapEntries: serverOnly$(async (request) => {
 		const blogs = await db.blog.findMany()
 		return blogs.map((blog) => {
 			return { route: `/blog/${blog.slug}`, priority: 0.7 }
 		})
-	},
+	}),
 }
 ```
 
+Note the use of
+[`vite-env-only/macros`](https://github.com/pcattori/vite-env-only). This is
+because `handle` is a route export object that goes in both the client as well
+as the server, but our sitemap function should only be run on the server. So we
+use `vite-env-only/macros` to make sure the function is removed for the client
+build. Support for this is pre-configured in the `vite.config.ts` file.
+
 ```tsx
 // in your routes/url-that-doesnt-need-sitemap
-import { SEOHandle } from '@nasa-gcn/remix-seo'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
 
-export let loader = ({ request }: LoaderFunctionArgs) => {
+export async function loader({ request }: LoaderFunctionArgs) {
 	/**/
 }