Revert "Prepare domain switch for Changelog (#9152)"

This reverts commit 8bfa518.

Author: HazAT

app/changelog/globals.css

@@ -4,10 +4,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
-#changelogcontent {
-  font-family: var(--font-rubik);
-}
 .radix-themes {
   --cursor-button: pointer;
 }

app/changelog/header.tsx

@@ -1,10 +1,12 @@
+import Image from 'next/image';
+
 export default function Header({loading}) {
   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">
-        <img
+        <Image
           className={`justify-self-center col-span-10 z-20 hidden lg:block ${loading ? 'animate-fade-in-left' : ''}`}
-          src="https://docs.sentry.io/changelog/assets/hero.png"
+          src="/changelog/assets/hero.png"
           alt="Sentry Changelog"
           height={273}
           width={450}

app/changelog/layout.tsx

@@ -13,7 +13,6 @@ const rubik = Rubik({
   weight: ['400', '500', '700'],
   style: ['normal', 'italic'],
   subsets: ['latin'],
-  variable: '--font-rubik',
 });
 
 export const metadata: Metadata = {
@@ -24,7 +23,7 @@ export default function ChangelogLayout({children}: {children: ReactNode}) {
   return (
     <Theme accentColor="violet" grayColor="sand" radius="large" scaling="95%">
       <NextTopLoader color="#8d5494" />
-      <div id="changelogcontent" className={`${rubik.variable}`}>
+      <div className={`${rubik.className}`}>
         <Navbar />
         <div className="bg-gray-100">{children}</div>
         <div className="w-full mx-auto h-16 relative bg-darkPurple">

next.config.js

@@ -1,20 +1,8 @@
 const createMDX = require('@next/mdx');
 const remarkPrism = require('remark-prism');
 
-const isProd = process.env.NODE_ENV === 'production' && !process.env.IS_PREVIEW;
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  headers() {
-    return [
-      {
-        source: '/_next/static/([^/]+/pages|chunks|runtime|css|fonts|media)/(.+)',
-        headers: [{key: 'Access-Control-Allow-Origin', value: '*'}],
-      },
-    ];
-  },
-  assetPrefix: isProd ? 'https://docs.sentry.io' : undefined,
-
   pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
 
   images: {
@@ -3157,7 +3145,7 @@ module.exports = withSentryConfig(
     // Suppresses source map uploading logs during build
     silent: true,
     org: 'sentry',
-    project: 'docs',
+    project: 'sentry-docs-nextjs',
   },
   {
     // For all available options, see:
@@ -3169,6 +3157,9 @@ module.exports = withSentryConfig(
     // Transpiles SDK to be compatible with IE11 (increases bundle size)
     transpileClientSDK: true,
 
+    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+    tunnelRoute: '/monitoring',
+
     // Hides source maps from generated client bundles
     hideSourceMaps: true,
 

src/components/changelog/article.tsx

@@ -1,4 +1,5 @@
 import {ReactNode} from 'react';
+import Image from 'next/image';
 
 import Date from './date';
 import Tag from './tag';
@@ -30,11 +31,15 @@ export default function Article({
   return (
     <article className={`bg-white rounded-lg shadow-lg mb-8 ${className}`}>
       {image && (
-        <img
-          className="object-cover relative w-full h-64 rounded-lg rounded-b-none"
-          src={image}
-          alt={title}
-        />
+        <div className="relative w-full h-64">
+          <Image
+            className="object-cover rounded-lg rounded-b-none"
+            src={image}
+            fill
+            alt={title}
+            sizes="(max-width: 768px) 100vw"
+          />
+        </div>
       )}
       <div className="p-6">
         <h3 className="text-3xl text-primary font-semibold mb-2">{title}</h3>