fix: Optimize json data when including it in the www nav (#30041)

* Add a script to separate the latest blog posts from the contentlayer json into a separate json.

* Use the new json data for the latest blog posts.

apps/www/components/Nav/DevelopersDropdown.tsx

@@ -1,13 +1,8 @@
-import React from 'react'
-import Link from 'next/link'
 import { ChevronRight } from 'lucide-react'
+import Link from 'next/link'
 
 import { data as DevelopersData } from 'data/Developers'
-import { BlogPost } from 'contentlayer/generated'
-
-type Props = {
-  blogPosts?: BlogPost[]
-}
+import blogPosts from '~/.contentlayer/generated/LatestBlogPost/_index.json' assert { type: 'json' }
 
 type LinkProps = {
   text: string
@@ -17,7 +12,7 @@ type LinkProps = {
   svg?: any
 }
 
-const DevelopersDropdown = ({ blogPosts }: Props) => (
+const DevelopersDropdown = () => (
   <div className="flex flex-col xl:flex-row">
     <div className="w-[550px] xl:w-[500px] py-8 px-8 bg-background grid gap-3 grid-cols-2">
       {DevelopersData['navigation'].map((column) => (
@@ -55,7 +50,7 @@ const DevelopersDropdown = ({ blogPosts }: Props) => (
           <ChevronRight className="h-3 w-3 transition-transform will-change-transform -translate-x-1 group-hover:translate-x-0" />
         </Link>
         <ul className="flex flex-col gap-5">
-          {blogPosts?.map((post: any) => (
+          {blogPosts?.map((post) => (
             <li key={post.title}>
               <Link
                 href={post.url}

apps/www/components/Nav/index.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react'
+import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useTheme } from 'next-themes'
+import React, { useState } from 'react'
 import { useWindowSize } from 'react-use'
 
+import { useIsLoggedIn, useIsUserLoading } from 'common'
 import { Button, buttonVariants, cn } from 'ui'
 import {
   NavigationMenu,
@@ -13,16 +14,14 @@ import {
   NavigationMenuList,
   NavigationMenuTrigger,
 } from 'ui/src/components/shadcn/ui/navigation-menu'
-import { useIsLoggedIn, useIsUserLoading } from 'common'
+
 import ScrollProgress from '~/components/ScrollProgress'
+import { getMenu } from '~/data/nav'
 import GitHubButton from './GitHubButton'
 import HamburgerButton from './HamburgerMenu'
-import MobileMenu from './MobileMenu'
 import MenuItem from './MenuItem'
+import MobileMenu from './MobileMenu'
 import RightClickBrandLogo from './RightClickBrandLogo'
-import { allBlogPosts } from 'contentlayer/generated'
-import { getMenu } from '~/data/nav'
-import { sortDates } from '~/lib/helpers'
 
 interface Props {
   hideNavbar: boolean
@@ -35,8 +34,7 @@ const Nav = (props: Props) => {
   const [open, setOpen] = useState(false)
   const isLoggedIn = useIsLoggedIn()
   const isUserLoading = useIsUserLoading()
-  const latestBlogPosts = allBlogPosts.sort(sortDates).slice(0, 2)
-  const menu = getMenu(latestBlogPosts)
+  const menu = getMenu()
 
   const isHomePage = router.pathname === '/'
   const isLaunchWeekPage = router.pathname.includes('/launch-week')

apps/www/data/nav.tsx

@@ -3,9 +3,8 @@ import ProductDropdown from '~/components/Nav/ProductDropdown'
 
 import { data as DevelopersData } from 'data/Developers'
 import SolutionsData from 'data/Solutions'
-import { BlogPost } from 'contentlayer/generated'
 
-export const getMenu = (latestBlogPosts: BlogPost[]) => ({
+export const getMenu = () => ({
   primaryNav: [
     {
       title: 'Product',
@@ -17,7 +16,7 @@ export const getMenu = (latestBlogPosts: BlogPost[]) => ({
     {
       title: 'Developers',
       hasDropdown: true,
-      dropdown: <DevelopersDropdown blogPosts={latestBlogPosts} />,
+      dropdown: <DevelopersDropdown />,
       dropdownContainerClassName: 'rounded-xl',
       subMenu: DevelopersData,
     },

apps/www/lib/helpers.tsx

@@ -44,22 +44,3 @@ export const stripEmojis = (str: string) =>
     )
     .replace(/\s+/g, ' ')
     .trim()
-
-/**
- * Fixes Safari dates sorting bug
- */
-export function sortDates(a: any, b: any, direction: 'asc' | 'desc' = 'desc') {
-  const isAsc = direction === 'asc'
-  var reg = /-|:|T|\+/ //The regex on which matches the string should be split (any used delimiter) -> could also be written like /[.:T\+]/
-  var parsed = [
-    //an array which holds the date parts for a and b
-    a.date.split(reg), //Split the datestring by the regex to get an array like [Year,Month,Day]
-    b.date.split(reg),
-  ]
-  var dates = [
-    //Create an array of dates for a and b
-    new Date(parsed[0][0], parsed[0][1], parsed[0][2]), //Constructs an date of the above parsed parts (Year,Month...
-    new Date(parsed[1][0], parsed[1][1], parsed[1][2]),
-  ]
-  return isAsc ? (dates[0] as any) - (dates[1] as any) : (dates[1] as any) - (dates[0] as any) //Returns the difference between the date (if b > a then a - b < 0)
-}

apps/www/package.json

@@ -11,7 +11,7 @@
     "lint": "next lint",
     "clean": "rimraf node_modules",
     "typecheck": "npm run content:build && tsc --noEmit",
-    "content:build": "contentlayer2 build",
+    "content:build": "contentlayer2 build && node scripts/generateLatestBlogPosts.mjs",
     "prettier": "prettier --write \"./{pages,components,lib,stores,styles,tests}/**/*.{ts,tsx,md,js,jsx,json}\"",
     "postbuild": "node ./internals/generate-sitemap.mjs"
   },

apps/www/scripts/generateLatestBlogPosts.mjs

@@ -0,0 +1,42 @@
+import { promises as fs } from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { allBlogPosts } from '../.contentlayer/generated/index.mjs'
+
+/**
+ * Fixes Safari dates sorting bug
+ */
+const sortDates = (a, b, direction = 'desc') => {
+  const isAsc = direction === 'asc'
+  var reg = /-|:|T|\+/ //The regex on which matches the string should be split (any used delimiter) -> could also be written like /[.:T\+]/
+  var parsed = [
+    //an array which holds the date parts for a and b
+    a.date.split(reg), //Split the datestring by the regex to get an array like [Year,Month,Day]
+    b.date.split(reg),
+  ]
+  var dates = [
+    //Create an array of dates for a and b
+    new Date(parsed[0][0], parsed[0][1], parsed[0][2]), //Constructs an date of the above parsed parts (Year,Month...
+    new Date(parsed[1][0], parsed[1][1], parsed[1][2]),
+  ]
+  return isAsc ? dates[0] - dates[1] : dates[1] - dates[0] //Returns the difference between the date (if b > a then a - b < 0)
+}
+
+const latestBlogPosts = allBlogPosts
+  .sort(sortDates)
+  .slice(0, 2)
+  .map(({ title, url, description }) => ({ title, url, description }))
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const folderPath = path.join(__dirname, '../.contentlayer/generated/LatestBlogPost')
+try {
+  await fs.mkdir(folderPath, { recursive: true })
+} catch (error) {
+  if (error.code !== 'EEXIST') {
+    throw error
+  }
+  // Folder already exists, continue silently
+}
+
+const filePath = path.join(__dirname, '../.contentlayer/generated/LatestBlogPost/_index.json')
+await fs.writeFile(filePath, JSON.stringify(latestBlogPosts), 'utf8')