Prepare domain switch for Changelog (#9152)

* Prepare domain switch for Changelog

* fix build

* Don't do it for preview envs

* fix undefined assetPrefix

* fix config

* fix build

Author: HazAT

app/changelog/globals.css

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

app/changelog/header.tsx

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

app/changelog/layout.tsx

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

next.config.js

@@ -1,8 +1,20 @@
 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: {
@@ -3145,7 +3157,7 @@ module.exports = withSentryConfig(
     // Suppresses source map uploading logs during build
     silent: true,
     org: 'sentry',
-    project: 'sentry-docs-nextjs',
+    project: 'docs',
   },
   {
     // For all available options, see:
@@ -3157,9 +3169,6 @@ 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,5 +1,4 @@
 import {ReactNode} from 'react';
-import Image from 'next/image';
 
 import Date from './date';
 import Tag from './tag';
@@ -31,15 +30,11 @@ export default function Article({
   return (
     <article className={`bg-white rounded-lg shadow-lg mb-8 ${className}`}>
       {image && (
-        <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>
+        <img
+          className="object-cover relative w-full h-64 rounded-lg rounded-b-none"
+          src={image}
+          alt={title}
+        />
       )}
       <div className="p-6">
         <h3 className="text-3xl text-primary font-semibold mb-2">{title}</h3>