Add canonical links to marketing pages

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

@@ -1,6 +1,6 @@
 import { conform, useForm } from '@conform-to/react'
 import { getFieldsetConstraint, parse } from '@conform-to/zod'
-import { json, redirect, type DataFunctionArgs, type V2_MetaFunction } from '@remix-run/node'
+import { type LinksFunction, json, redirect, type DataFunctionArgs, type V2_MetaFunction } from '@remix-run/node'
 import { Link, useFetcher } from '@remix-run/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '~/components/error-boundary.tsx'
@@ -24,6 +24,10 @@ const forgotPasswordSchema = z.object({
 	usernameOrEmail: z.union([emailSchema, usernameSchema]),
 })
 
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: `https://andrecasal.com/forgot-password` }]
+}
+
 export async function action({ request }: DataFunctionArgs) {
 	const formData = await request.formData()
 	const submission = parse(formData, {

app/routes/_auth+/forgot-password_.verify.tsx

@@ -1,6 +1,6 @@
 import { conform, useForm } from '@conform-to/react'
 import { getFieldsetConstraint, parse } from '@conform-to/zod'
-import { json, redirect, type DataFunctionArgs, type V2_MetaFunction } from '@remix-run/node'
+import { type LinksFunction, json, redirect, type DataFunctionArgs, type V2_MetaFunction } from '@remix-run/node'
 import { Form, Link, useActionData, useFormAction, useLoaderData, useNavigation } from '@remix-run/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '~/components/error-boundary.tsx'
@@ -22,6 +22,10 @@ const verifySchema = z.object({
 	[forgotPasswordOTPQueryParam]: z.string().min(6).max(6),
 })
 
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: `https://andrecasal.com/forgot-password/verify` }]
+}
+
 export async function loader({ request }: DataFunctionArgs) {
 	const params = new URL(request.url).searchParams
 	if (!params.has(forgotPasswordOTPQueryParam)) {

app/routes/_auth+/login.tsx

@@ -1,4 +1,4 @@
-import { json, type DataFunctionArgs, type V2_MetaFunction } from '@remix-run/node'
+import { type LinksFunction, json, type DataFunctionArgs, type V2_MetaFunction } from '@remix-run/node'
 import { useLoaderData, useSearchParams } from '@remix-run/react'
 import { GeneralErrorBoundary } from '~/components/error-boundary.tsx'
 import { Spacer } from '~/components/spacer.tsx'
@@ -27,6 +27,10 @@ export async function loader({ request }: DataFunctionArgs) {
 	)
 }
 
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: `https://andrecasal.com/login` }]
+}
+
 export const meta: V2_MetaFunction = () => {
 	return [{ title: 'Login to André Casal' }]
 }

app/routes/_auth+/onboarding.tsx

@@ -1,6 +1,6 @@
 import { conform, useForm } from '@conform-to/react'
 import { getFieldsetConstraint, parse } from '@conform-to/zod'
-import { json, redirect, type DataFunctionArgs, type V2_MetaFunction } from '@remix-run/node'
+import { type LinksFunction, json, redirect, type DataFunctionArgs, type V2_MetaFunction } from '@remix-run/node'
 import { Form, useActionData, useFormAction, useLoaderData, useNavigation, useSearchParams } from '@remix-run/react'
 import { safeRedirect } from 'remix-utils/safe-redirect'
 import { z } from 'zod'
@@ -39,6 +39,10 @@ const onboardingFormSchema = z
 		}
 	})
 
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: `https://andrecasal.com/onboarding` }]
+}
+
 export async function loader({ request }: DataFunctionArgs) {
 	await requireAnonymous(request)
 	const session = await getSession(request.headers.get('cookie'))

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

@@ -1,6 +1,6 @@
 import { conform, useForm } from '@conform-to/react'
 import { getFieldsetConstraint, parse } from '@conform-to/zod'
-import { json, redirect, type DataFunctionArgs, type V2_MetaFunction } from '@remix-run/node'
+import { type LinksFunction, json, redirect, type DataFunctionArgs, type V2_MetaFunction } from '@remix-run/node'
 import { Form, useActionData, useFormAction, useLoaderData, useNavigation } from '@remix-run/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '~/components/error-boundary.tsx'
@@ -25,6 +25,10 @@ const resetPasswordSchema = z
 		path: ['confirmPassword'],
 	})
 
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: `https://andrecasal.com/reset-password` }]
+}
+
 export async function loader({ request }: DataFunctionArgs) {
 	await requireAnonymous(request)
 	const session = await getSession(request.headers.get('cookie'))

app/routes/_auth+/signup/index.tsx

@@ -1,6 +1,6 @@
 import { conform, useForm } from '@conform-to/react'
 import { getFieldsetConstraint, parse } from '@conform-to/zod'
-import { json, redirect, type DataFunctionArgs, type V2_MetaFunction } from '@remix-run/node'
+import { type LinksFunction, json, redirect, type DataFunctionArgs, type V2_MetaFunction } from '@remix-run/node'
 import { Form, useActionData, useFormAction, useNavigation } from '@remix-run/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '~/components/error-boundary.tsx'
@@ -24,6 +24,10 @@ const signupSchema = z.object({
 	email: emailSchema,
 })
 
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: `https://andrecasal.com/signup` }]
+}
+
 export async function action({ request }: DataFunctionArgs) {
 	const formData = await request.formData()
 	const submission = await parse(formData, {

app/routes/_auth+/signup_.verify.tsx

@@ -1,6 +1,6 @@
 import { conform, useForm } from '@conform-to/react'
 import { getFieldsetConstraint, parse } from '@conform-to/zod'
-import { json, redirect, type DataFunctionArgs } from '@remix-run/node'
+import { type LinksFunction, json, redirect, type DataFunctionArgs } from '@remix-run/node'
 import { Form, useActionData, useFormAction, useLoaderData, useNavigation } from '@remix-run/react'
 import { z } from 'zod'
 import { ErrorList, Field } from '~/components/forms.tsx'
@@ -19,6 +19,10 @@ const verifySchema = z.object({
 	[onboardingOTPQueryParam]: z.string().min(6).max(6),
 })
 
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: `https://andrecasal.com/signup/verify` }]
+}
+
 export async function loader({ request }: DataFunctionArgs) {
 	const params = new URL(request.url).searchParams
 	if (!params.has(onboardingOTPQueryParam)) {

app/routes/_marketing+/about.tsx

@@ -2,6 +2,11 @@ import { Container } from '~/routes/_marketing+/ui+/components/layout/container.
 import HeroAndre from './components/hero-andre.tsx'
 import { H2 } from './ui+/components/typography/h2.tsx'
 import { P } from './ui+/components/typography/p.tsx'
+import { type LinksFunction } from '@remix-run/node'
+
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: 'https://andrecasal.com/about' }]
+}
 
 export default function AboutRoute() {
 	const stats = [

app/routes/_marketing+/articles/_index.tsx

@@ -5,7 +5,7 @@ import BackgroundBlur from '../components/bg-blur.tsx'
 import { ArticlePreview } from '~/components/ArticlePreview.tsx'
 import { Button } from '~/components/ui/button.tsx'
 import { useState } from 'react'
-import { json } from '@remix-run/node'
+import { type LinksFunction, json } from '@remix-run/node'
 import { H1 } from '../ui+/components/typography/h1.tsx'
 
 /* import { post as layout } from './layout/index.tsx' */
@@ -15,6 +15,10 @@ import { post as fluidTypographyPost } from './fluid-typography-sizing-with-modu
 import { post as remixDataFlowPost } from './remix-data-flow/index.tsx'
 import { P } from '../ui+/components/typography/p.tsx'
 
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: 'https://andrecasal.com/articles' }]
+}
+
 export type Post = {
 	title: string
 	description: string
@@ -25,7 +29,7 @@ export type Post = {
 }
 
 export const loader = () => {
-	const posts: Post[] = [/* layout,  */theDarkSideOfTheGridPost, fluidSpacePost, fluidTypographyPost, remixDataFlowPost]
+	const posts: Post[] = [/* layout,  */ theDarkSideOfTheGridPost, fluidSpacePost, fluidTypographyPost, remixDataFlowPost]
 	const tags = [...new Set(posts.map(({ topics }) => topics).flat())]
 	return json({ posts, tags })
 }

app/routes/_marketing+/articles/fluid-space-sizing/index.tsx

@@ -5,6 +5,7 @@ import { type Post } from '../_index.tsx'
 import { H1 } from '../../ui+/components/typography/h1.tsx'
 import { H2 } from '../../ui+/components/typography/h2.tsx'
 import { P } from '../../ui+/components/typography/p.tsx'
+import { type LinksFunction } from '@remix-run/node'
 
 export const post: Post = {
 	title: 'Fluid Space Sizing',
@@ -15,6 +16,10 @@ export const post: Post = {
 	topics: ['Spacing', 'CSS', 'Design Systems'],
 }
 
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: `https://andrecasal.com/${post.href}` }]
+}
+
 const FluidSpaceSizing = () => {
 	return (
 		<>

app/routes/_marketing+/articles/fluid-typography-sizing-with-modular-scales/index.tsx

@@ -5,6 +5,7 @@ import { type Post } from '../_index.tsx'
 import { H1 } from '../../ui+/components/typography/h1.tsx'
 import { H2 } from '../../ui+/components/typography/h2.tsx'
 import { P } from '../../ui+/components/typography/p.tsx'
+import { type LinksFunction } from '@remix-run/node'
 
 export const post: Post = {
 	title: 'Fluid Typography Sizing and Scales',
@@ -15,6 +16,10 @@ export const post: Post = {
 	topics: ['Typography', 'CSS', 'Design Systems'],
 }
 
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: `https://andrecasal.com/${post.href}` }]
+}
+
 const FluidTypographySizingWithModularScales = () => {
 	const modularScale = `:root {
 	--base-font-size: 16px;

app/routes/_marketing+/articles/layout/index.tsx

@@ -7,6 +7,7 @@ import { H3 } from '../../ui+/components/typography/h3.tsx'
 import { Code } from '../../ui+/components/typography/code.tsx'
 import { H4 } from '../../ui+/components/typography/h4.tsx'
 import { CodeBlock } from '~/components/ui/code-block.tsx'
+import { type LinksFunction } from '@remix-run/node'
 
 export const post: Post = {
 	title: 'CSS Layout Algorithms',
@@ -17,6 +18,10 @@ export const post: Post = {
 	topics: ['CSS', 'Layout'],
 }
 
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: `https://andrecasal.com/${post.href}` }]
+}
+
 const Layout = () => {
 	return (
 		<>
@@ -232,9 +237,8 @@ const Layout = () => {
 					Inline formatting context
 				</H4>
 				<P size="xl" className="mt-8">
-					An inline formatting context only exists if all siblings in a containing block are inline-level elements, even if those elements are anonymous inline boxes.
-
-					Note, this root inline box concept effectively replaces the "anonymous inline element" concept introduced in CSS2§9.2.2.1.
+					An inline formatting context only exists if all siblings in a containing block are inline-level elements, even if those elements are anonymous inline boxes. Note, this
+					root inline box concept effectively replaces the "anonymous inline element" concept introduced in CSS2§9.2.2.1.
 				</P>
 				<P size="xl" className="mt-8">
 					Let's see how it works.

app/routes/_marketing+/articles/remix-data-flow/index.tsx

@@ -1,6 +1,6 @@
 import remixDataFlow from './remix-data-flow.png'
 import remixDataFlowDiagram from './remix-data-flow-diagram.png'
-import { type V2_MetaFunction } from '@remix-run/node'
+import { type LinksFunction, type V2_MetaFunction } from '@remix-run/node'
 import { type Post } from '../_index.tsx'
 import { H1 } from '../../ui+/components/typography/h1.tsx'
 import { P } from '../../ui+/components/typography/p.tsx'
@@ -14,6 +14,10 @@ export const post: Post = {
 	topics: ['Remix', 'Full-stack'],
 }
 
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: `https://andrecasal.com/${post.href}` }]
+}
+
 export const meta: V2_MetaFunction = () => {
 	return [{ title: post.title, description: post.description }]
 }

app/routes/_marketing+/articles/the-dark-side-of-the-grid/index.tsx

@@ -6,6 +6,7 @@ import { type Post } from '../_index.tsx'
 import { H1 } from '../../ui+/components/typography/h1.tsx'
 import { H2 } from '../../ui+/components/typography/h2.tsx'
 import { P } from '../../ui+/components/typography/p.tsx'
+import { type LinksFunction } from '@remix-run/node'
 
 export const post: Post = {
 	title: 'The Dark Side Of The Grid (and Flexbox)',
@@ -16,6 +17,10 @@ export const post: Post = {
 	topics: ['Accessibility', 'CSS'],
 }
 
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: `https://andrecasal.com/${post.href}` }]
+}
+
 const TheDarkSideOfTheGrid = () => {
 	const gridWithoutDense = `<div className="mt-8 grid grid-cols-3 grid-rows-3 gap-4">
 	<div className="row-end-[span_3] rounded-md bg-green-200">

app/routes/_marketing+/courses+/index.tsx

@@ -3,6 +3,11 @@ import { CoursePresentation } from '~/components/CoursePresentation.tsx'
 import { Newsletter } from '~/components/newsletter.tsx'
 import { H1 } from '../ui+/components/typography/h1.tsx'
 import { P } from '../ui+/components/typography/p.tsx'
+import { type LinksFunction } from '@remix-run/node'
+
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: 'https://andrecasal.com/courses' }]
+}
 
 const Courses = () => {
 	const courses = [

app/routes/_marketing+/courses+/mastery-for-vs-code.tsx

@@ -17,6 +17,11 @@ import { H3 } from '../ui+/components/typography/h3.tsx'
 import { H4 } from '../ui+/components/typography/h4.tsx'
 import { P } from '../ui+/components/typography/p.tsx'
 import { Span } from '../ui+/components/typography/span.tsx'
+import { type LinksFunction } from '@remix-run/node'
+
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: 'https://andrecasal.com/courses/mastery-for-vs-code' }]
+}
 
 const MasteryForVSCode = () => {
 	const features = [

app/routes/_marketing+/index.tsx

@@ -1,4 +1,4 @@
-import type { V2_MetaFunction } from '@remix-run/node'
+import type { LinksFunction, V2_MetaFunction } from '@remix-run/node'
 import HeroAndre from './components/hero-andre.tsx'
 import Brands from './components/brands.tsx'
 import { Newsletter } from '~/components/newsletter.tsx'
@@ -10,6 +10,10 @@ import { Span } from './ui+/components/typography/span.tsx'
 
 export const meta: V2_MetaFunction = () => [{ title: 'André Casal' }]
 
+export const links: LinksFunction = () => {
+	return [{ rel: 'canonical', href: 'https://andrecasal.com/' }]
+}
+
 export default function Index() {
 	const successful_businesses = [
 		{
@@ -47,7 +51,7 @@ export default function Index() {
 		},
 		{
 			name: 'Newsletter & Articles',
-			description: "Golden nuggets of (usually technical) knowledge you can read in 5 minutes. Delivered to your inbox every 2 weeks.",
+			description: 'Golden nuggets of (usually technical) knowledge you can read in 5 minutes. Delivered to your inbox every 2 weeks.',
 			icon: 'file-text',
 			link: '/articles',
 		},
@@ -61,7 +65,7 @@ export default function Index() {
 				<div className="py-24 sm:py-32">
 					<div className="mx-auto max-w-2xl lg:text-center">
 						<H2 size="3xl" align="center" className="mt-4 font-bold">
-							<span className="inline-block -rotate-1 text-brand px-2 font-bold">Successfull</span> businesses
+							<span className="inline-block -rotate-1 px-2 font-bold text-brand">Successfull</span> businesses
 						</H2>
 					</div>
 					<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
@@ -85,7 +89,7 @@ export default function Index() {
 				<div className="py-24 sm:py-32">
 					<div className="mx-auto max-w-2xl lg:text-center">
 						<H2 size="3xl" align="center" className="mt-4 font-bold">
-							Currently <span className="inline-block -rotate-1 text-brand px-2 font-bold">building</span>
+							Currently <span className="inline-block -rotate-1 px-2 font-bold text-brand">building</span>
 						</H2>
 					</div>
 					<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">