Clean up dev console warnings (#11916)

* use esm on tailwind config to fix cjs warnings

* use next/link instead of <a>

* ignore punnycode deprecation warning

Author: a-hariti

next.config.js

@@ -88,3 +88,11 @@ module.exports = withSentryConfig(nextConfig, {
     applicationKey: 'sentry-docs',
   },
 });
+
+process.on('warning', warning => {
+  if (warning.code === 'DEP0040') {
+    // Ignore punnycode deprecation warning, we don't control its usage
+    return;
+  }
+  console.warn(warning); // Log other warnings
+});

src/components/header.tsx

@@ -3,6 +3,7 @@
 import {Fragment} from 'react';
 import {HamburgerMenuIcon} from '@radix-ui/react-icons';
 import Image from 'next/image';
+import Link from 'next/link';
 
 import SentryLogoSVG from 'sentry-docs/logos/sentry-logo-dark.svg';
 
@@ -44,7 +45,7 @@ export function Header({pathname, searchPlatforms, noSearch}: Props) {
             </label>
           </button>
         )}
-        <a
+        <Link
           href="/"
           title="Sentry error monitoring"
           className="flex flex-shrink-0 items-center lg:w-[calc(var(--sidebar-width,300px)-2rem)] text-2xl font-medium text-[var(--foreground)]"
@@ -58,7 +59,7 @@ export function Header({pathname, searchPlatforms, noSearch}: Props) {
             />
           </div>
           Docs
-        </a>
+        </Link>
         {!noSearch && (
           <div className="hidden md:flex justify-center lg:justify-start w-full px-6">
             <Search path={pathname} searchPlatforms={searchPlatforms} showChatBot />

tailwind.config.js renamed to tailwind.config.mjs

@@ -1,12 +1,14 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
+import defaultTheme from 'tailwindcss/defaultTheme';
 
+import Typography from '@tailwindcss/typography';
+import Forms from '@tailwindcss/forms';
 import {
   isolateInsideOfContainer,
   scopedPreflightStyles,
 } from 'tailwindcss-scoped-preflight';
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   darkMode: ['selector', '.dark'],
   content: ['./app/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
@@ -60,10 +62,8 @@ module.exports = {
     },
   },
   plugins: [
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/forms')({
-      strategy: 'class',
-    }),
+    Typography,
+    Forms({strategy: 'class'}),
     scopedPreflightStyles({
       // pretty minimalistic example. Same options as in the previous example are available
       isolationStrategy: isolateInsideOfContainer('.tw-app'),