chore: Bump vulnerable deps (#33915)

* Consolidate different versions of postcss. Remove @mertasan/tailwindcss-variables from ui package.

* Bump vitest in pg-meta to remove a vulnerable version of vite.

* Bump dompurify.

* Bump all octokit deps to solve 2 vulns.

* Fix warnings about destructuring json imports.

* Remove a console.log in docs.

* Fix the changelog page to use an ESM import.

* Stabilize the generate-sitemap script output.

* Try another fix for the changelog.

apps/docs/layouts/MainSkeleton.tsx

@@ -6,11 +6,11 @@ import { memo, useEffect, type PropsWithChildren, type ReactNode } from 'react'
 
 import { cn } from 'ui'
 
+import { type NavMenuSection } from '~/components/Navigation/Navigation.types'
 import DefaultNavigationMenu, {
   MenuId,
 } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import { getMenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu.utils'
-import { type NavMenuSection } from '~/components/Navigation/Navigation.types'
 import TopNavBar from '~/components/Navigation/NavigationMenu/TopNavBar'
 import { DOCS_CONTENT_CONTAINER_ID } from '~/features/ui/helpers.constants'
 import { menuState, useMenuMobileOpen } from '~/hooks/useMenuState'
@@ -381,8 +381,6 @@ function SidebarSkeleton({
 
   const mobileMenuOpen = useMenuMobileOpen()
 
-  console.log('menuName', menuName, menuId)
-
   return (
     <div className={cn('flex flex-row h-full relative', className)}>
       {!hideSideNav && (
@@ -425,4 +423,4 @@ function SidebarSkeleton({
   )
 }
 
-export { TopNavSkeleton, SidebarSkeleton }
+export { SidebarSkeleton, TopNavSkeleton }

apps/docs/package.json

@@ -38,9 +38,9 @@
     "@mdx-js/react": "^2.3.0",
     "@next/bundle-analyzer": "^14.2.3",
     "@next/mdx": "^14.2.3",
-    "@octokit/auth-app": "^6.0.3",
-    "@octokit/core": "^5.1.0",
-    "@octokit/graphql": "^7.0.2",
+    "@octokit/auth-app": "^7.0.0",
+    "@octokit/core": "^6.0.0",
+    "@octokit/graphql": "^8.0.0",
     "@octokit/plugin-paginate-graphql": "^4.0.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.0.3",

apps/www/components/Nav/DevelopersDropdown.tsx

@@ -2,10 +2,9 @@ import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 
 import { data as DevelopersData } from 'data/Developers'
-import {
-  jobsCount,
-  latestBlogPosts,
-} from '~/.contentlayer/generated/staticContent/_index.json' with { type: 'json' }
+import staticContent from '~/.contentlayer/generated/staticContent/_index.json' with { type: 'json' }
+
+const { jobsCount, latestBlogPosts } = staticContent
 
 type LinkProps = {
   text: string

apps/www/components/Nav/GitHubButton.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
 import { Button } from 'ui'
-import { githubStars } from '~/.contentlayer/generated/staticContent/_index.json' with { type: 'json' }
+import staticContent from '~/.contentlayer/generated/staticContent/_index.json' with { type: 'json' }
 import { useSendTelemetryEvent } from '~/lib/telemetry'
 
+const { githubStars } = staticContent
+
 const GitHubButton = () => {
   const kFormatter = (num: number) => {
     const kFormat = Math.floor(num / 1000)

apps/www/components/Nav/MobileMenu.tsx

@@ -1,22 +1,24 @@
-import React, { Dispatch, SetStateAction } from 'react'
+import { AnimatePresence, LazyMotion, domAnimation, m } from 'framer-motion'
 import Image from 'next/image'
 import Link from 'next/link'
-import { m, AnimatePresence, LazyMotion, domAnimation } from 'framer-motion'
+import { Dispatch, SetStateAction } from 'react'
 
-import { DEFAULT_EASE } from '~/lib/animations'
 import { Accordion, Button, TextLink } from 'ui'
+import { DEFAULT_EASE } from '~/lib/animations'
 import MenuItem from './MenuItem'
 
+import { useIsLoggedIn, useIsUserLoading } from 'common'
 import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
 import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
-import { useKey } from 'react-use'
-import { useIsLoggedIn, useIsUserLoading } from 'common'
 import { ChevronRight } from 'lucide-react'
+import { useKey } from 'react-use'
+import staticContent from '~/.contentlayer/generated/staticContent/_index.json' with { type: 'json' }
 import ProductModulesData from '~/data/ProductModules'
-import { jobsCount } from '~/.contentlayer/generated/staticContent/_index.json' with { type: 'json' }
 
 import { useSendTelemetryEvent } from '~/lib/telemetry'
 
+const { jobsCount } = staticContent
+
 interface Props {
   open: boolean
   setOpen: Dispatch<SetStateAction<boolean>>

apps/www/internals/generate-sitemap.mjs

@@ -10,7 +10,7 @@ import prettier from 'prettier'
 async function generate() {
   const prettierConfig = await prettier.resolveConfig('./.prettierrc.js')
 
-  const pages = await globby([
+  const unsortedPages = await globby([
     'pages/*.js',
     'pages/*.tsx',
     'pages/*.mdx',
@@ -31,6 +31,8 @@ async function generate() {
     '.next/server/pages/features/*.html',
   ])
 
+  const pages = unsortedPages.sort((a, b) => a.localeCompare(b))
+
   const blogUrl = 'blog'
   const caseStudiesUrl = 'case-studies'
   const customerStoriesUrl = 'customers'

apps/www/next.config.mjs

@@ -45,7 +45,20 @@ const nextConfig = {
   assetPrefix: getAssetPrefix(),
   pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
   trailingSlash: false,
-  transpilePackages: ['ui', 'ui-patterns', 'common', 'shared-data', 'icons', 'api-types'],
+  transpilePackages: [
+    'ui',
+    'ui-patterns',
+    'common',
+    'shared-data',
+    'icons',
+    'api-types',
+    // needed to make the octokit packages work in /changelog
+    '@octokit/plugin-paginate-graphql',
+  ],
+  experimental: {
+    // needed to make the octokit packages work in /changelog
+    esmExternals: 'loose',
+  },
   reactStrictMode: true,
   swcMinify: true,
   images: {
@@ -81,10 +94,16 @@ const nextConfig = {
         headers: [{ key: 'cache-control', value: 'public, max-age=86400' }],
       },
       {
-        source: "/(.*)",
-        headers: [{ 
-          key: 'Strict-Transport-Security', 
-          value: process.env.NEXT_PUBLIC_IS_PLATFORM === 'true' && process.env.VERCEL === '1' ? 'max-age=1200; includeSubDomains' : '' }],
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'Strict-Transport-Security',
+            value:
+              process.env.NEXT_PUBLIC_IS_PLATFORM === 'true' && process.env.VERCEL === '1'
+                ? 'max-age=1200; includeSubDomains'
+                : '',
+          },
+        ],
       },
     ]
   },

apps/www/package.json

@@ -22,11 +22,11 @@
     "@mdx-js/react": "^2.3.0",
     "@next/bundle-analyzer": "^14.2.3",
     "@next/mdx": "^14.2.3",
-    "@octokit/auth-app": "^6.0.3",
-    "@octokit/core": "^5.0.2",
-    "@octokit/graphql": "^7.0.2",
+    "@octokit/auth-app": "^7.0.0",
+    "@octokit/core": "^6.0.0",
+    "@octokit/graphql": "^8.0.0",
     "@octokit/plugin-paginate-graphql": "^4.0.0",
-    "@octokit/rest": "^20.0.2",
+    "@octokit/rest": "^21.0.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@supabase/supabase-js": "catalog:",
     "@vercel/og": "^0.6.2",

apps/www/pages/changelog.tsx

@@ -1,5 +1,6 @@
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/outline'
 import { createAppAuth } from '@octokit/auth-app'
+import { Octokit } from '@octokit/core'
 import { paginateGraphql } from '@octokit/plugin-paginate-graphql'
 import { Octokit as OctokitRest } from '@octokit/rest'
 import dayjs from 'dayjs'
@@ -80,7 +81,7 @@ export const getServerSideProps: GetServerSideProps = async ({ res, query }) =>
 
   // Process as of Feb. 2024:
   // create a Release each month and create a corresponding changelog discussion
-  // — we don't want to pull in both the changelog entry and the release entry
+  // — we don't want to pull in both the changelog entry and the release entry
   // — we want to ignore new releases and only show the old ones that don't have a corresponding changelog discussion
   // — so we have this list of old releases that we want to show
   const oldReleases = [
@@ -94,7 +95,6 @@ export const getServerSideProps: GetServerSideProps = async ({ res, query }) =>
 
   // uses the graphql api
   async function fetchDiscussions(owner: string, repo: string, categoryId: string, cursor: string) {
-    const { Octokit } = await import('@octokit/core')
     const ExtendedOctokit = Octokit.plugin(paginateGraphql)
     type ExtendedOctokit = InstanceType<typeof ExtendedOctokit>
 

packages/pg-meta/package.json

@@ -22,6 +22,6 @@
     "pg": "^8.13.1",
     "postgres-array": "^3.0.2",
     "typescript": "~5.5.0",
-    "vitest": "^2.1.8"
+    "vitest": "^3.0.0"
   }
 }

packages/ui/package.json

@@ -19,7 +19,6 @@
   "dependencies": {
     "@headlessui/react": "^1.7.17",
     "@hookform/resolvers": "^3.1.1",
-    "@mertasan/tailwindcss-variables": "^2.2.3",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-aspect-ratio": "^1.0.3",