From 8bfa5188a50ddd3d121a2942d8ff6a571aa1056c Mon Sep 17 00:00:00 2001
From: Daniel Griesser <daniel.griesser.86@gmail.com>
Date: Wed, 21 Feb 2024 10:56:30 +0100
Subject: [PATCH] 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
---
 app/changelog/globals.css            |  4 ++++
 app/changelog/header.tsx             |  6 ++----
 app/changelog/layout.tsx             |  3 ++-
 next.config.js                       | 17 +++++++++++++----
 src/components/changelog/article.tsx | 15 +++++----------
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/app/changelog/globals.css b/app/changelog/globals.css
index 5a21f3c3fc908..cc1d4b8d9e167 100644
--- a/app/changelog/globals.css
+++ b/app/changelog/globals.css
@@ -4,6 +4,10 @@
 @tailwind components;
 @tailwind utilities;
 
+
+#changelogcontent {
+  font-family: var(--font-rubik);
+}
 .radix-themes {
   --cursor-button: pointer;
 }
diff --git a/app/changelog/header.tsx b/app/changelog/header.tsx
index 6a32238f284eb..8c3355bbdb092 100644
--- a/app/changelog/header.tsx
+++ b/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}
diff --git a/app/changelog/layout.tsx b/app/changelog/layout.tsx
index 4efff430ef4f6..86122ed98c466 100644
--- a/app/changelog/layout.tsx
+++ b/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">
diff --git a/next.config.js b/next.config.js
index b634578a39d33..d3ceda722b220 100644
--- a/next.config.js
+++ b/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,
 
diff --git a/src/components/changelog/article.tsx b/src/components/changelog/article.tsx
index f1918989a651f..d7e023cc267a3 100644
--- a/src/components/changelog/article.tsx
+++ b/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>