feat: implement optimizations (#75)

package.json

@@ -41,6 +41,7 @@
     "react-intersection-observer": "^9.5.2",
     "react-tweet": "^3.2.0",
     "react-wrap-balancer": "^1.1.0",
+    "server-only": "^0.0.1",
     "sonner": "^1.4.3",
     "sugar-high": "^0.6.0",
     "tailwind-merge": "^2.2.1",

src/app/[slug]/opengraph-image.js

@@ -2,7 +2,7 @@ import { ImageResponse } from 'next/og'
 
 import { OpenGraphImage } from '@/components/og-image'
 import { getPageSeo } from '@/lib/contentful'
-import { getMediumFont, getBoldFont } from '@/lib/utils'
+import { getMediumFont, getBoldFont } from '@/lib/fonts'
 import { sharedTitle, sharedImage } from '@/app/shared-metadata'
 
 export const runtime = 'edge'
@@ -15,9 +15,12 @@ export const contentType = sharedImage.type
 
 export default async function Image({ params }) {
   const { slug } = params
-  const {
-    seo: { title, description, ogImageTitle, ogImageSubtitle }
-  } = (await getPageSeo(slug)) ?? {}
+  const [seoData = {}, mediumFontData, boldFontData] = await Promise.all([
+    getPageSeo(slug),
+    getMediumFont(),
+    getBoldFont()
+  ])
+  const { seo: { title, description, ogImageTitle, ogImageSubtitle } = {} } = seoData
 
   let icon = null
   switch (slug) {
@@ -64,13 +67,13 @@ export default async function Image({ params }) {
       fonts: [
         {
           name: 'SF Pro',
-          data: await getMediumFont(),
+          data: mediumFontData,
           style: 'normal',
           weight: 500
         },
         {
           name: 'SF Pro',
-          data: await getBoldFont(),
+          data: boldFontData,
           style: 'normal',
           weight: 600
         }

src/app/actions.js

@@ -9,7 +9,7 @@ export async function submitBookmark(formData) {
   const cookieStore = cookies()
 
   // Fake promise to simulate submitting the form
-  await new Promise((resolve) => setTimeout(resolve, 3000))
+  await new Promise((resolve) => setTimeout(resolve, 2000))
 
   const formSubmissionCountCookie = cookieStore.get(BOOKMARK_SUBMISSION_COUNT_COOKIE_NAME)
   if (formSubmissionCountCookie?.value >= MAX_BOOKMARK_SUBMISSIONS_PER_DAY) {
@@ -27,7 +27,7 @@ export async function submitBookmark(formData) {
         },
         body: JSON.stringify({
           fields: {
-            URL: new URL(formData.url).origin,
+            URL: formData.url,
             Email: formData.email,
             Date: new Date().toISOString(),
             Type: formData.type || 'Other'

src/app/api/revalidate/route.js

@@ -3,7 +3,7 @@ import { revalidatePath } from 'next/cache'
 import { CONTENT_TYPES } from '@/lib/constants'
 
 export const runtime = 'edge'
-export const dynamic = 'auto'
+export const dynamic = 'auto' // https://www.reddit.com/r/nextjs/comments/14iu6td/revalidatepath_not_updating_generatestaticparams/
 
 const secret = `${process.env.NEXT_REVALIDATE_SECRET}`
 

src/app/bookmarks/[slug]/opengraph-image.js

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og'
 
 import { OpenGraphImage } from '@/components/og-image'
-import { getMediumFont, getBoldFont } from '@/lib/utils'
+import { getMediumFont, getBoldFont } from '@/lib/fonts'
 import { getBookmarks } from '@/lib/raindrop'
 import { sharedImage } from '@/app/shared-metadata'
 
@@ -15,7 +15,7 @@ export const contentType = sharedImage.type
 
 export default async function Image({ params }) {
   const { slug } = params
-  const bookmarks = await getBookmarks()
+  const [bookmarks, mediumFontData, boldFontData] = await Promise.all([getBookmarks(), getMediumFont(), getBoldFont()])
   const currentBookmark = bookmarks.find((bookmark) => bookmark.slug === slug)
   if (!currentBookmark) return null
 
@@ -47,13 +47,13 @@ export default async function Image({ params }) {
       fonts: [
         {
           name: 'SF Pro',
-          data: await getMediumFont(),
+          data: mediumFontData,
           style: 'normal',
           weight: 500
         },
         {
           name: 'SF Pro',
-          data: await getBoldFont(),
+          data: boldFontData,
           style: 'normal',
           weight: 600
         }

src/app/bookmarks/[slug]/page.js

@@ -6,7 +6,7 @@ import { PageTitle } from '@/components/page-title'
 import { FloatingHeader } from '@/components/floating-header'
 import { LoadingSpinner } from '@/components/loading-spinner'
 import { BookmarkList } from '@/components/bookmark-list.jsx'
-import { getBookmark, getBookmarkItems, getBookmarks } from '@/lib/raindrop'
+import { getBookmarkItems, getBookmarks } from '@/lib/raindrop'
 import { sortByProperty } from '@/lib/utils'
 
 export async function generateStaticParams() {
@@ -16,17 +16,15 @@ export async function generateStaticParams() {
 
 async function fetchData(slug) {
   const bookmarks = await getBookmarks()
-  const sortedBookmarks = sortByProperty(bookmarks, 'title')
   const currentBookmark = bookmarks.find((bookmark) => bookmark.slug === slug)
   if (!currentBookmark) notFound()
 
-  const bookmark = await getBookmark(currentBookmark._id)
-  if (!bookmark) notFound()
+  const sortedBookmarks = sortByProperty(bookmarks, 'title')
   const bookmarkItems = await getBookmarkItems(currentBookmark._id)
 
   return {
     bookmarks: sortedBookmarks,
-    currentBookmark: bookmark.item,
+    currentBookmark,
     bookmarkItems
   }
 }

src/app/bookmarks/opengraph-image.js

@@ -2,7 +2,7 @@ import { ImageResponse } from 'next/og'
 
 import { OpenGraphImage } from '@/components/og-image'
 import { getPageSeo } from '@/lib/contentful'
-import { getMediumFont, getBoldFont } from '@/lib/utils'
+import { getMediumFont, getBoldFont } from '@/lib/fonts'
 import { sharedImage } from '@/app/shared-metadata'
 
 export const runtime = 'edge'
@@ -14,9 +14,12 @@ export const size = {
 export const contentType = sharedImage.type
 
 export default async function Image() {
-  const {
-    seo: { title, description, ogImageTitle, ogImageSubtitle }
-  } = (await getPageSeo('bookmarks')) ?? {}
+  const [seoData = {}, mediumFontData, boldFontData] = await Promise.all([
+    getPageSeo('bookmarks'),
+    getMediumFont(),
+    getBoldFont()
+  ])
+  const { seo: { title, description, ogImageTitle, ogImageSubtitle } = {} } = seoData
 
   return new ImageResponse(
     (
@@ -46,13 +49,13 @@ export default async function Image() {
       fonts: [
         {
           name: 'SF Pro',
-          data: await getMediumFont(),
+          data: mediumFontData,
           style: 'normal',
           weight: 500
         },
         {
           name: 'SF Pro',
-          data: await getBoldFont(),
+          data: boldFontData,
           style: 'normal',
           weight: 600
         }

src/app/journey/opengraph-image.js

@@ -2,7 +2,7 @@ import { ImageResponse } from 'next/og'
 
 import { OpenGraphImage } from '@/components/og-image'
 import { getPageSeo } from '@/lib/contentful'
-import { getMediumFont, getBoldFont } from '@/lib/utils'
+import { getMediumFont, getBoldFont } from '@/lib/fonts'
 import { sharedImage } from '@/app/shared-metadata'
 
 export const runtime = 'edge'
@@ -14,10 +14,12 @@ export const size = {
 export const contentType = sharedImage.type
 
 export default async function Image() {
-  const seoData = (await getPageSeo('journey')) ?? {}
-  const {
-    seo: { title, description, ogImageTitle, ogImageSubtitle }
-  } = seoData
+  const [seoData = {}, mediumFontData, boldFontData] = await Promise.all([
+    getPageSeo('journey'),
+    getMediumFont(),
+    getBoldFont()
+  ])
+  const { seo: { title, description, ogImageTitle, ogImageSubtitle } = {} } = seoData
 
   return new ImageResponse(
     (
@@ -47,13 +49,13 @@ export default async function Image() {
       fonts: [
         {
           name: 'SF Pro',
-          data: await getMediumFont(),
+          data: mediumFontData,
           style: 'normal',
           weight: 500
         },
         {
           name: 'SF Pro',
-          data: await getBoldFont(),
+          data: boldFontData,
           style: 'normal',
           weight: 600
         }

src/app/opengraph-image.js

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og'
 
 import { OpenGraphImage } from '@/components/og-image'
-import { getMediumFont, getBoldFont } from '@/lib/utils'
+import { getMediumFont, getBoldFont } from '@/lib/fonts'
 import { sharedTitle, sharedDescription, sharedImage } from '@/app/shared-metadata'
 
 export const runtime = 'edge'
@@ -19,6 +19,8 @@ export const contentType = sharedImage.type
 } */
 
 export default async function Image() {
+  const [mediumFontData, boldFontData] = await Promise.all([getMediumFont(), getBoldFont()])
+
   return new ImageResponse(
     (
       <OpenGraphImage
@@ -50,13 +52,13 @@ export default async function Image() {
       fonts: [
         {
           name: 'SF Pro',
-          data: await getMediumFont(),
+          data: mediumFontData,
           style: 'normal',
           weight: 500
         },
         {
           name: 'SF Pro',
-          data: await getBoldFont(),
+          data: boldFontData,
           style: 'normal',
           weight: 600
         }

src/app/page.js

@@ -12,12 +12,12 @@ import { getSortedPosts } from '@/lib/utils'
 
 async function fetchData() {
   const allPosts = await getAllPosts()
-  return { allPosts }
+  const sortedPosts = getSortedPosts(allPosts)
+  return { sortedPosts }
 }
 
 export default async function Home() {
-  const { allPosts } = await fetchData()
-  const sortedPosts = getSortedPosts(allPosts)
+  const { sortedPosts } = await fetchData()
 
   return (
     <ScrollArea className="flex flex-col" hasScrollTitle>

src/app/workspace/opengraph-image.js

@@ -2,7 +2,7 @@ import { ImageResponse } from 'next/og'
 
 import { OpenGraphImage } from '@/components/og-image'
 import { getPageSeo } from '@/lib/contentful'
-import { getMediumFont, getBoldFont } from '@/lib/utils'
+import { getMediumFont, getBoldFont } from '@/lib/fonts'
 import { sharedImage } from '@/app/shared-metadata'
 
 export const runtime = 'edge'
@@ -14,10 +14,12 @@ export const size = {
 export const contentType = sharedImage.type
 
 export default async function Image() {
-  const seoData = (await getPageSeo('workspace')) ?? {}
-  const {
-    seo: { title, description, ogImageTitle, ogImageSubtitle }
-  } = seoData
+  const [seoData = {}, mediumFontData, boldFontData] = await Promise.all([
+    getPageSeo('workspace'),
+    getMediumFont(),
+    getBoldFont()
+  ])
+  const { seo: { title, description, ogImageTitle, ogImageSubtitle } = {} } = seoData
 
   return new ImageResponse(
     (
@@ -50,13 +52,13 @@ export default async function Image() {
       fonts: [
         {
           name: 'SF Pro',
-          data: await getMediumFont(),
+          data: mediumFontData,
           style: 'normal',
           weight: 500
         },
         {
           name: 'SF Pro',
-          data: await getBoldFont(),
+          data: boldFontData,
           style: 'normal',
           weight: 600
         }

src/app/workspace/page.js

@@ -38,8 +38,7 @@ export default async function Workspace() {
             />
             <EmptyPlaceholder />
           </div>
-
-          <div className="mt-2 overflow-hidden rounded-lg border md:mt-8">
+          <div className="mt-2 overflow-hidden rounded-lg border bg-white md:mt-8">
             <Table>
               <TableHeader>
                 <TableRow>

src/app/writing/[slug]/opengraph-image.js

@@ -2,7 +2,7 @@ import { ImageResponse } from 'next/og'
 
 import { OpenGraphImage } from '@/components/og-image'
 import { getWritingSeo } from '@/lib/contentful'
-import { getMediumFont, getBoldFont } from '@/lib/utils'
+import { getMediumFont, getBoldFont } from '@/lib/fonts'
 import { sharedImage } from '@/app/shared-metadata'
 
 export const runtime = 'edge'
@@ -15,9 +15,12 @@ export const contentType = sharedImage.type
 
 export default async function Image({ params }) {
   const { slug } = params
-  const seoData = await getWritingSeo(slug)
+  const [seoData, mediumFontData, boldFontData] = await Promise.all([
+    getWritingSeo(slug),
+    getMediumFont(),
+    getBoldFont()
+  ])
   if (!seoData) return null
-
   const {
     seo: { title, ogImageTitle, ogImageSubtitle }
   } = seoData
@@ -35,13 +38,13 @@ export default async function Image({ params }) {
       fonts: [
         {
           name: 'SF Pro',
-          data: await getMediumFont(),
+          data: mediumFontData,
           style: 'normal',
           weight: 500
         },
         {
           name: 'SF Pro',
-          data: await getBoldFont(),
+          data: boldFontData,
           style: 'normal',
           weight: 600
         }

src/app/writing/layout.js

@@ -8,12 +8,12 @@ import { getSortedPosts } from '@/lib/utils'
 
 async function fetchData() {
   const allPosts = await getAllPosts()
-  return { allPosts }
+  const sortedPosts = getSortedPosts(allPosts)
+  return { sortedPosts }
 }
 
 export default async function WritingLayout({ children }) {
-  const { allPosts } = await fetchData()
-  const sortedPosts = getSortedPosts(allPosts)
+  const { sortedPosts } = await fetchData()
 
   return (
     <>