feat(changelog): Remove /changelog basepath

The base path will be very confusing and also technically limiting in the future because it is hosted on `changelog.sentry.io`. Let's just host the changelog on `/` and remap stuff to `sentry.io/changelog` via nginx when `changelog.sentry.io` is accessed.

- Remove base path
- Add assets back and fix their locations by using relative paths rather than absolute pointers to the docs
- Use Image component for images

apps/changelog/src/app/changelog/header.tsx → apps/changelog/src/app/(changelog)/header.tsx

@@ -1,21 +1,24 @@
-export default function Header({ loading }: { loading?: boolean }) {
+import heroImage from '../../../public/img/hero.png';
+import Image from 'next/image';
+
+export default function Header({loading}: {loading?: boolean}) {
   return (
     <div className="w-full mx-auto h-96 relative bg-darkPurple">
       <div className="relative w-full lg:max-w-7xl mx-auto px-4 lg:px-8 pt-8 grid grid-cols-12 items-center">
         {/* this needs to be a plain <img> next/image doesn't work here because of redirects we do */}
         {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
+        <Image
           className={`justify-self-center col-span-10 hidden lg:block ${
-            loading ? "animate-fade-in-left" : ""
+            loading ? 'animate-fade-in-left' : ''
           }`}
-          src="https://docs.sentry.io/changelog/assets/hero.png"
-          alt="Sentry Changelog"
+          src={heroImage}
+          alt="Sentry Changelog Illustration"
           height={273}
           width={450}
         />
         <div
           className={`relative col-span-12 mt-32 lg:absolute lg:w-96 lg:right-1/4 lg:-bottom-2 ${
-            loading ? "animate-fade-in-right" : ""
+            loading ? 'animate-fade-in-right' : ''
           }`}
         >
           <h1 className="justify-self-center text-white font-bold text-4xl text-center lg:text-left mb-2">
@@ -31,8 +34,7 @@ export default function Header({ loading }: { loading?: boolean }) {
             >
               @SentryChangelog
             </a>
-            &nbsp;to stay up to date on everything from product updates to SDK
-            changes.
+            &nbsp;to stay up to date on everything from product updates to SDK changes.
           </h2>
         </div>
       </div>

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

@@ -0,0 +1,29 @@
+import 'prism-sentry/index.css';
+import styles from './layout.module.css';
+
+import {Fragment, ReactNode} from 'react';
+import type {Metadata} from 'next';
+import NextTopLoader from 'nextjs-toploader';
+import {Navbar} from '@/client/components/navbar';
+
+export const metadata: Metadata = {
+  title: {template: '%s | Sentry Changelog', default: 'Changelog'},
+  openGraph: {
+    images: '/img/hero.png',
+  },
+};
+
+export default function ChangelogLayout({children}: {children: ReactNode}) {
+  return (
+    <Fragment>
+      <NextTopLoader color="#8d5494" />
+      <div className={styles.changelogContent}>
+        <Navbar />
+        <div className="bg-gray-100">{children}</div>
+        <div className="w-full mx-auto h-16 relative bg-darkPurple">
+          <div className="footer-top-right-down-slope absolute w-full -top-1 h-10 bg-gray-200" />
+        </div>
+      </div>
+    </Fragment>
+  );
+}

apps/changelog/src/app/layout.tsx

@@ -1,39 +1,32 @@
-import "./globals.css";
+import './globals.css';
 
-import { Theme } from "@radix-ui/themes";
-import type { Metadata } from "next";
-import { Rubik } from "next/font/google";
-import Script from "next/script";
+import {Theme} from '@radix-ui/themes';
+import type {Metadata} from 'next';
+import {Rubik} from 'next/font/google';
+import Script from 'next/script';
 
 const rubik = Rubik({
-  weight: ["400", "500", "700"],
-  style: ["normal", "italic"],
-  subsets: ["latin"],
-  variable: "--font-rubik",
+  weight: ['400', '500', '700'],
+  style: ['normal', 'italic'],
+  subsets: ['latin'],
+  variable: '--font-rubik',
 });
 
 export const metadata: Metadata = {
-  title: "Home",
+  title: 'Home',
   icons: {
     icon:
-      process.env.NODE_ENV === "production"
-        ? "/favicon.ico"
-        : "/favicon_localhost.png",
+      process.env.NODE_ENV === 'production' ? '/favicon.ico' : '/favicon_localhost.png',
   },
-  metadataBase: new URL("https://docs.sentry.io/"),
   openGraph: {
-    images: "https://docs.sentry.io/changelog/assets/og.png",
+    images: '/img/og.png',
   },
   other: {
-    "zd-site-verification": "ocu6mswx6pke3c6qvozr2e",
+    'zd-site-verification': 'ocu6mswx6pke3c6qvozr2e',
   },
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
     <html lang="en">
       <body className={`${rubik.variable} text-darkPurple`}>

apps/changelog/src/client/components/articleFooter/styles.module.css

@@ -1,5 +1,5 @@
 .footer-wrapper {
   background:
-    url('/changelog/assets/squiggle.png') 0px 0px / 300px 300px,
+    url('/img/squiggle.png') 0px 0px / 300px 300px,
     linear-gradient(315deg, rgb(24, 13, 28) 0.57%, rgb(69, 38, 80) 100%) 0% 0% / cover;
 }

apps/changelog/src/server/remark-component-spacing.ts

@@ -1,9 +1,9 @@
-import type { Root } from "mdast";
-import type { Plugin } from "unified";
-import type { Node } from "unist";
-import { visit } from "unist-util-visit";
+import type {Root} from 'mdast';
+import type {Plugin} from 'unified';
+import type {Node} from 'unist';
+import {visit} from 'unist-util-visit';
 
-const affectedComponents = ["PlatformIdentifier"];
+const affectedComponents = ['PlatformIdentifier'];
 
 const remarkComponentSpacing: Plugin<void[], Root> = function () {
   return (tree, _file) => {
@@ -15,19 +15,19 @@ const remarkComponentSpacing: Plugin<void[], Root> = function () {
           // If the component is followed by text starting with a space, turn it
           // into a no-break space character (unicode 00A0). Otherwise MDX
           // removes the space, leading to smushed text.
-          if (node.type === "text" && node.value && node.value[0] === " ") {
+          if (node.type === 'text' && node.value && node.value[0] === ' ') {
             node.value = `\u00A0${node.value.substring(1)}`;
           }
         }
         componentNode = componentNodeParent = undefined;
       } else if (
         // @ts-expect-error TODO(lforst): leftover from migration
-        node.type === "mdxJsxTextElement" &&
+        node.type === 'mdxJsxTextElement' &&
         // @ts-expect-error TODO(lforst): leftover from migration
-        affectedComponents.includes(node.name ?? "")
+        affectedComponents.includes(node.name ?? '')
       ) {
         componentNode = node;
-        // @ts-expect-error TODO(lforst): leftover from migration
+        // @ts-ignore TODO(lforst): leftover from migration
         componentNodeParent = parent;
       }
     });