fix(blog): update utm handling

Author: mhartington

apps/blog/src/app/(blog)/layout.tsx

@@ -52,7 +52,7 @@ export function baseOptions() {
           },
           {
             text: "Prisma Partners",
-            url: "/partners",
+            url: "https://www.prisma.io/partners",
             icon: "fa-regular fa-lightbulb",
           },
           {
@@ -90,7 +90,7 @@ export function baseOptions() {
         ],
       },
       {
-        url: "/docs",
+        url: "https://www.prisma.io/docs",
         text: "Docs",
       },
       {

apps/blog/src/components/utm-persistence.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect } from "react";
 import { usePathname, useRouter } from "next/navigation";
+import { BLOG_PREFIX } from "@/lib/url";
 import {
   clearStoredUtmParams,
   CONSOLE_HOST,
@@ -75,12 +76,16 @@ export function UtmPersistence() {
       }
 
       const nextHref = `${targetUrl.pathname}${targetUrl.search}${targetUrl.hash}`;
+      const nextInternalHref =
+        targetUrl.pathname === BLOG_PREFIX
+          ? `/${targetUrl.search}${targetUrl.hash}`
+          : `${targetUrl.pathname.replace(new RegExp(`^${BLOG_PREFIX}`), "")}${targetUrl.search}${targetUrl.hash}`;
       const isModifiedClick =
         event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
 
       if (isInternalLink && anchor.target !== "_blank" && !isModifiedClick) {
         event.preventDefault();
-        router.push(nextHref);
+        router.push(nextInternalHref);
         return;
       }
 

apps/site/src/app/changelog/[...slug]/page.tsx

@@ -35,7 +35,7 @@ export default async function ReleaseNotesPage({
   const toc = (page.data.toc as TOCItem[] | undefined) ?? [];
 
   return (
-    <main className="flex-1 w-full max-w-249 mx-auto px-4 py-8 z-1 mt-12">
+    <main className="flex-1 w-full max-w-249 mx-auto px-4 py-8 z-1">
       <div className="w-full px-4 z-1 mx-auto md:grid md:grid-cols-[1fr_180px] mt-4 md:mt-22 gap-12 max-w-257">
         <div className="post-contents w-full">
           {/* Title + meta */}
@@ -46,7 +46,7 @@ export default async function ReleaseNotesPage({
             >
               ← Back to Changelog
             </Link>
-            <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
+            <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-left mt-0 font-sans-display text-foreground-neutral">
               {page.data.title}
             </h1>
             <div className="text-sm flex gap-2 items-center text-foreground-neutral mb-4">

apps/site/src/app/changelog/page.tsx

@@ -28,22 +28,27 @@ export default async function ChangelogPage() {
   );
 
   return (
-    <main className="flex-1 w-full max-w-249 mx-auto px-4 py-8 z-1">
-      <section className="pt-20 pb-12 mt-10">
-        <p className="m-0 flex items-center justify-center gap-2 text-sm font-semibold uppercase tracking-[1.8px] text-foreground-ppg">
-          <i className="fa-regular fa-sparkles" aria-hidden />
-          Changelog
-        </p>
-        <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
-          The Latest News from Prisma
-        </h1>
-        <p className="m-0 max-w-[640px] mx-auto text-center text-base text-foreground-neutral-weak md:text-lg">
-          Here you’ll find all improvements and updates we’ve made to our
-          products.
-        </p>
-      </section>
+    <main className="flex-1 w-full z-1 bg-background-default">
+      <div className="hero -mt-24 pt-40 flex items-end justify-center px-4 relative">
+        <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-ppg)_0%,var(--color-background-default)_100%)] opacity-20" />
+        <section className="content relative z-2 flex flex-col gap-8 pb-12">
+          <div className="flex flex-col gap-4 items-center text-center">
+            <div className="flex items-center gap-2 text-foreground-ppg-weak uppercase tracking-widest text-sm font-sans-display font-black">
+              <i className="fa-regular fa-sparkles" aria-hidden />
+              <span>Changelog</span>
+            </div>
+            <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-4xl mx-auto">
+              The Latest News from Prisma
+            </h1>
+          </div>
+          <p className="m-0 max-w-[640px] mx-auto text-center text-base text-foreground-neutral md:text-lg">
+            Here you’ll find all improvements and updates we’ve made to our
+            products.
+          </p>
+        </section>
+      </div>
 
-      <section>
+      <section className="max-w-249 mx-auto px-4 py-8">
         <div className="grid gap-6 mt-12 grid-cols-1">
           {entriesWithPreview.map(({ entry, summary }) => {
             const tags = entry.data.tags ?? [];