feat: add canonical URLs

Author: kitsonk

components/Header.tsx

@@ -2,11 +2,13 @@ import { Head } from "$fresh/runtime.ts";
 
 export default function Header({
   title = "tswhy‽",
+  canonical,
   description = "A community effort to enrich TypeScript diagnostics.",
   keywords = ["typescript", "diagnostics"],
   ogImage,
 }: {
   title?: string;
+  canonical?: string;
   description?: string;
   keywords?: string[];
   ogImage?: URL;
@@ -50,6 +52,10 @@ export default function Header({
         <meta property="og:locale" content="en_AU" />
 
         <meta name="keywords" content={keywords.join(", ")} />
+
+        {canonical && (
+          <link rel="canonical" href={`https://tswhy.com${canonical}`} />
+        )}
       </Head>
       <a href="/">
         <img

routes/contributing.tsx

@@ -20,6 +20,7 @@ export default async function Contributing() {
       <div class="p-4 mx-auto max-w-screen-xl">
         <Header
           title="tswhy? - Contributing"
+          canonical="/contributing"
           description="Information on integrating to tswhy‽"
         />
         <article class="rounded-lg bg-gray-100 dark:bg-gray-800 my-4 p-8">

routes/edit/ts[code].tsx

@@ -18,6 +18,7 @@ export default async function EditPage(
         <div class="p-4 mx-auto max-w-screen-xl">
           <Header
             title={`Edit ${diagnosticData.codeText}`}
+            canonical={`/edit/ts${code}`}
           />
           <main>
             <Editor diagnosticData={diagnosticData} />

routes/index.tsx

@@ -13,7 +13,7 @@ export default function Home() {
   return (
     <>
       <div class="p-4 mx-auto max-w-screen-xl">
-        <Header />
+        <Header canonical="/" />
         <main>
           <div class="m-4 space-y-2">
             <p>

routes/integrating.tsx

@@ -20,6 +20,7 @@ export default async function Contributing() {
       <div class="p-4 mx-auto max-w-screen-xl">
         <Header
           title="tswhy? - Contributing"
+          canonical="/integrating"
           description="Information on contributing changes to tswhy‽"
         />
         <article class="rounded-lg bg-gray(100 dark:800) my-4 p-8">

routes/propose.tsx

@@ -75,7 +75,7 @@ export default function Proposal(
   return (
     <>
       <div class="p-4 mx-auto max-w-screen-xl">
-        <Header />
+        <Header canonical="/propose" />
         <main>
           <div class="rounded-lg bg-gray-100 dark:bg-gray-800 my-4 p-4">
             <h2 class="text-2xl font-header">Proposed</h2>

routes/ts[code].tsx

@@ -30,6 +30,7 @@ export default function DiagnosticPage(
           title={`${diagnosticData.codeText}: ${
             interpolate(diagnosticData.title, params)
           }`}
+          canonical={`/ts${diagnosticData.code}`}
           description={diagnosticData.documentation ??
             interpolate(diagnosticData.title, params)}
           ogImage={toOgImageUrl(diagnosticData, params)}