feat: client component (#83)

suyalcinkaya · Apr 10, 2024 · a944973 · a944973
1 parent 4eb7602
commit a944973
Show file tree

Hide file tree

Showing 36 changed files with 109 additions and 74 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -5,7 +5,8 @@
     "prettier",
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
-    "plugin:import/recommended"
+    "plugin:import/recommended",
+    "plugin:tailwindcss/recommended"
   ],
   "env": {
     "node": true,

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -53,12 +53,13 @@
     "autoprefixer": "^10.4.16",
     "cssnano": "^6.1.1",
     "cssnano-preset-advanced": "^6.1.1",
-    "eslint": "^9.0.0",
+    "eslint": "^8.50.0",
     "eslint-config-next": "^14.1.4",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-tailwindcss": "^3.15.1",
     "next-unused": "^0.0.6",
     "postcss": "^8.4.31",
     "prettier": "^3.0.3",

diff --git a/src/app/[slug]/opengraph-image.js b/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/fonts'
+import { getRegularFont, getBoldFont } from '@/lib/fonts'
 import { sharedTitle, sharedImage } from '@/app/shared-metadata'
 
 export const runtime = 'edge'
@@ -15,9 +15,9 @@ export const contentType = sharedImage.type
 
 export default async function Image({ params }) {
   const { slug } = params
-  const [seoData = {}, mediumFontData, boldFontData] = await Promise.all([
+  const [seoData = {}, regularFontData, boldFontData] = await Promise.all([
     getPageSeo(slug),
-    getMediumFont(),
+    getRegularFont(),
     getBoldFont()
   ])
   const { seo: { title, description, ogImageTitle, ogImageSubtitle } = {} } = seoData
@@ -67,7 +67,7 @@ export default async function Image({ params }) {
       fonts: [
         {
           name: 'SF Pro',
-          data: mediumFontData,
+          data: regularFontData,
           style: 'normal',
           weight: 500
         },

diff --git a/src/app/[slug]/page.js b/src/app/[slug]/page.js
@@ -56,13 +56,14 @@ export async function generateMetadata({ params }) {
   if (!seoData) return null
 
   const {
-    seo: { title, description }
+    seo: { title, description, keywords }
   } = seoData
   const siteUrl = `/${slug}`
 
   return {
     title,
     description,
+    keywords,
     openGraph: {
       title,
       description,

diff --git a/src/app/bookmarks/[slug]/opengraph-image.js b/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/fonts'
+import { getRegularFont, 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, mediumFontData, boldFontData] = await Promise.all([getBookmarks(), getMediumFont(), getBoldFont()])
+  const [bookmarks, regularFontData, boldFontData] = await Promise.all([getBookmarks(), getRegularFont(), getBoldFont()])
   const currentBookmark = bookmarks.find((bookmark) => bookmark.slug === slug)
   if (!currentBookmark) return null
 
@@ -47,7 +47,7 @@ export default async function Image({ params }) {
       fonts: [
         {
           name: 'SF Pro',
-          data: mediumFontData,
+          data: regularFontData,
           style: 'normal',
           weight: 500
         },

diff --git a/src/app/bookmarks/[slug]/page.js b/src/app/bookmarks/[slug]/page.js
@@ -66,6 +66,13 @@ export async function generateMetadata({ params }) {
   return {
     title: seoTitle,
     description: seoDescription,
+    keywords: [
+      currentBookmark.title,
+      'bookmarks',
+      `${currentBookmark.title} bookmarks`,
+      'collection',
+      `${currentBookmark.title} collection`
+    ],
     openGraph: {
       title: seoTitle,
       description: seoDescription,

diff --git a/src/app/bookmarks/opengraph-image.js b/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/fonts'
+import { getRegularFont, getBoldFont } from '@/lib/fonts'
 import { sharedImage } from '@/app/shared-metadata'
 
 export const runtime = 'edge'
@@ -14,9 +14,9 @@ export const size = {
 export const contentType = sharedImage.type
 
 export default async function Image() {
-  const [seoData = {}, mediumFontData, boldFontData] = await Promise.all([
+  const [seoData = {}, regularFontData, boldFontData] = await Promise.all([
     getPageSeo('bookmarks'),
-    getMediumFont(),
+    getRegularFont(),
     getBoldFont()
   ])
   const { seo: { title, description, ogImageTitle, ogImageSubtitle } = {} } = seoData
@@ -49,7 +49,7 @@ export default async function Image() {
       fonts: [
         {
           name: 'SF Pro',
-          data: mediumFontData,
+          data: regularFontData,
           style: 'normal',
           weight: 500
         },

diff --git a/src/app/journey/opengraph-image.js b/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/fonts'
+import { getRegularFont, getBoldFont } from '@/lib/fonts'
 import { sharedImage } from '@/app/shared-metadata'
 
 export const runtime = 'edge'
@@ -14,9 +14,9 @@ export const size = {
 export const contentType = sharedImage.type
 
 export default async function Image() {
-  const [seoData = {}, mediumFontData, boldFontData] = await Promise.all([
+  const [seoData = {}, regularFontData, boldFontData] = await Promise.all([
     getPageSeo('journey'),
-    getMediumFont(),
+    getRegularFont(),
     getBoldFont()
   ])
   const { seo: { title, description, ogImageTitle, ogImageSubtitle } = {} } = seoData
@@ -49,7 +49,7 @@ export default async function Image() {
       fonts: [
         {
           name: 'SF Pro',
-          data: mediumFontData,
+          data: regularFontData,
           style: 'normal',
           weight: 500
         },

diff --git a/src/app/journey/page.js b/src/app/journey/page.js
@@ -46,13 +46,13 @@ export default async function Journey() {
                       <div key={`data_${itemIndex}_log_${logIndex}`} className="relative flex pb-8 last:pb-0">
                         {logIndex !== item.logs.length - 1 && (
                           <div className="absolute inset-0 flex w-6 items-center justify-center">
-                            <div className="pointer-events-none h-full w-px border-l-[1px] border-gray-200"></div>
+                            <div className="pointer-events-none h-full w-px border-l border-gray-200"></div>
                           </div>
                         )}
-                        <div className="z-0 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-black align-middle text-white">
+                        <div className="z-0 flex size-6 shrink-0 items-center justify-center rounded-full bg-black align-middle text-white">
                           <PlusIcon size={16} />
                         </div>
-                        <div className="flex-grow pl-8">
+                        <div className="grow pl-8">
                           <JourneyCard {...log} index={logIndex} />
                         </div>
                       </div>

diff --git a/src/app/layout.js b/src/app/layout.js
@@ -25,12 +25,12 @@ export default async function RootLayout({ children }) {
   preloadGetAllPosts(isEnabled)
 
   return (
-    <html lang="en" className={`${GeistSans.variable} ${jetbrainsMono.variable}`} suppressHydrationWarning>
-      <body suppressHydrationWarning>
+    <html lang="en" className={`${GeistSans.variable} ${jetbrainsMono.variable}`}>
+      <body>
         {/* eslint-disable-next-line react/no-unknown-property */}
         <main vaul-drawer-wrapper="" className="min-h-screen bg-white">
           {isEnabled && (
-            <div className="absolute bottom-0 left-0 right-0 z-50 flex h-12 w-full items-center justify-center bg-green-500 text-center text-sm font-medium text-white">
+            <div className="absolute inset-x-0 bottom-0 z-50 flex h-12 w-full items-center justify-center bg-green-500 text-center text-sm font-medium text-white">
               <div className="flex items-center gap-2">
                 <EyeIcon size={16} />
                 <span>Draft mode is enabled</span>

diff --git a/src/app/opengraph-image.js b/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/fonts'
+import { getRegularFont, getBoldFont } from '@/lib/fonts'
 import { sharedTitle, sharedDescription, sharedImage } from '@/app/shared-metadata'
 
 export const runtime = 'edge'
@@ -19,7 +19,7 @@ export const contentType = sharedImage.type
 } */
 
 export default async function Image() {
-  const [mediumFontData, boldFontData] = await Promise.all([getMediumFont(), getBoldFont()])
+  const [regularFontData, boldFontData] = await Promise.all([getRegularFont(), getBoldFont()])
 
   return new ImageResponse(
     (
@@ -52,7 +52,7 @@ export default async function Image() {
       fonts: [
         {
           name: 'SF Pro',
-          data: mediumFontData,
+          data: regularFontData,
           style: 'normal',
           weight: 500
         },

diff --git a/src/app/workspace/opengraph-image.js b/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/fonts'
+import { getRegularFont, getBoldFont } from '@/lib/fonts'
 import { sharedImage } from '@/app/shared-metadata'
 
 export const runtime = 'edge'
@@ -14,9 +14,9 @@ export const size = {
 export const contentType = sharedImage.type
 
 export default async function Image() {
-  const [seoData = {}, mediumFontData, boldFontData] = await Promise.all([
+  const [seoData = {}, regularFontData, boldFontData] = await Promise.all([
     getPageSeo('workspace'),
-    getMediumFont(),
+    getRegularFont(),
     getBoldFont()
   ])
   const { seo: { title, description, ogImageTitle, ogImageSubtitle } = {} } = seoData
@@ -52,7 +52,7 @@ export default async function Image() {
       fonts: [
         {
           name: 'SF Pro',
-          data: mediumFontData,
+          data: regularFontData,
           style: 'normal',
           weight: 500
         },

diff --git a/src/app/writing/[slug]/opengraph-image.js b/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/fonts'
+import { getRegularFont, getBoldFont } from '@/lib/fonts'
 import { sharedImage } from '@/app/shared-metadata'
 
 export const runtime = 'edge'
@@ -15,9 +15,9 @@ export const contentType = sharedImage.type
 
 export default async function Image({ params }) {
   const { slug } = params
-  const [seoData, mediumFontData, boldFontData] = await Promise.all([
+  const [seoData, regularFontData, boldFontData] = await Promise.all([
     getWritingSeo(slug),
-    getMediumFont(),
+    getRegularFont(),
     getBoldFont()
   ])
   if (!seoData) return null
@@ -38,7 +38,7 @@ export default async function Image({ params }) {
       fonts: [
         {
           name: 'SF Pro',
-          data: mediumFontData,
+          data: regularFontData,
           style: 'normal',
           weight: 500
         },

diff --git a/src/app/writing/[slug]/page.js b/src/app/writing/[slug]/page.js
@@ -6,6 +6,7 @@ import { RichText } from '@/components/contentful/rich-text'
 import { PageTitle } from '@/components/page-title'
 import { FloatingHeader } from '@/components/floating-header'
 import { WritingViews } from '@/components/writing-views'
+import { ClientOnly } from '@/components/client-only'
 import { getPost, getWritingSeo, getAllPostSlugs } from '@/lib/contentful'
 import { getDateTimeFormat, isDevelopment } from '@/lib/utils'
 
@@ -66,7 +67,7 @@ export default async function WritingSlug({ params }) {
             <PageTitle
               title={title}
               subtitle={
-                <time dateTime={postDate} className="text-gray-400" suppressHydrationWarning>
+                <time dateTime={postDate} className="text-gray-400">
                   {dateString}
                 </time>
               }
@@ -76,7 +77,9 @@ export default async function WritingSlug({ params }) {
           </article>
         </div>
       </ScrollArea>
-      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd, null, 2) }} />
+      <ClientOnly>
+        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd, null, 2) }} />
+      </ClientOnly>
     </>
   )
 }
@@ -88,7 +91,7 @@ export async function generateMetadata({ params }) {
 
   const {
     date,
-    seo: { title, description },
+    seo: { title, description, keywords },
     sys: { firstPublishedAt, publishedAt: updatedAt }
   } = seoData
 
@@ -100,6 +103,7 @@ export async function generateMetadata({ params }) {
   return {
     title,
     description,
+    keywords,
     openGraph: {
       title,
       description,

diff --git a/src/app/writing/opengraph-image.js b/src/app/writing/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/fonts'
+import { getRegularFont, getBoldFont } from '@/lib/fonts'
 import { sharedImage } from '@/app/shared-metadata'
 
 export const runtime = 'edge'
@@ -14,9 +14,9 @@ export const size = {
 export const contentType = sharedImage.type
 
 export default async function Image() {
-  const [seoData = {}, mediumFontData, boldFontData] = await Promise.all([
+  const [seoData = {}, regularFontData, boldFontData] = await Promise.all([
     getPageSeo('writing'),
-    getMediumFont(),
+    getRegularFont(),
     getBoldFont()
   ])
   const { seo: { title, description, ogImageTitle, ogImageSubtitle } = {} } = seoData
@@ -50,7 +50,7 @@ export default async function Image() {
       fonts: [
         {
           name: 'SF Pro',
-          data: mediumFontData,
+          data: regularFontData,
           style: 'normal',
           weight: 500
         },

diff --git a/src/assets/fonts/Geist-Medium.otf b/src/assets/fonts/Geist-Medium.otf
diff --git a/src/assets/fonts/Geist-Regular.otf b/src/assets/fonts/Geist-Regular.otf
diff --git a/src/assets/fonts/Geist-Regular.woff2 b/src/assets/fonts/Geist-Regular.woff2
diff --git a/src/components/bookmark-list.jsx b/src/components/bookmark-list.jsx
@@ -75,12 +75,12 @@ export const BookmarkList = ({ initialData, id }) => {
         })}
       </div>
       {data.length > 0 ? (
-        <div className="mt-8 flex min-h-[4rem] items-center justify-center text-sm lg:mt-12">
+        <div className="mt-8 flex min-h-16 items-center justify-center text-sm lg:mt-12">
           {!isReachingEnd ? (
             <>
               {isLoading ? (
                 <div
-                  className="inline-block h-4 w-4 animate-spin rounded-full border-[2px] border-current border-t-transparent text-black"
+                  className="inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent text-black"
                   role="status"
                   aria-label="loading"
                 >

diff --git a/src/components/client-only.js b/src/components/client-only.js
@@ -0,0 +1,15 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+const emptySubscribe = () => () => {}
+
+export function ClientOnly({ fallback = null, children }) {
+  const isServer = useSyncExternalStore(
+    emptySubscribe,
+    () => false,
+    () => true
+  )
+
+  return isServer ? <>{fallback}</> : <>{children}</>
+}