feat: improvements (#88)

suyalcinkaya · Apr 21, 2024 · 5fb616a · 5fb616a
1 parent 6bfa8d9
commit 5fb616a
Show file tree

Hide file tree

Showing 22 changed files with 150 additions and 114 deletions.
diff --git a/src/app/[slug]/opengraph-image.js → src/app/[slug]/og.png/route.js b/src/app/[slug]/opengraph-image.js → src/app/[slug]/og.png/route.js
@@ -1,19 +1,26 @@
 import { ImageResponse } from 'next/og'
 
 import { OpenGraphImage } from '@/components/og-image'
-import { getPageSeo } from '@/lib/contentful'
+import { getPageSeo, getAllPageSlugs } from '@/lib/contentful'
 import { getRegularFont, getBoldFont } from '@/lib/fonts'
-import { sharedTitle, sharedImage } from '@/app/shared-metadata'
+import { sharedMetadata } from '@/app/shared-metadata'
 
-export const runtime = 'edge'
-export const alt = sharedTitle
 export const size = {
-  width: sharedImage.width,
-  height: sharedImage.height
+  width: sharedMetadata.ogImage.width,
+  height: sharedMetadata.ogImage.height
 }
-export const contentType = sharedImage.type
 
-export default async function Image({ params }) {
+export async function generateStaticParams() {
+  const allPages = await getAllPageSlugs()
+
+  return allPages
+    .filter((page) => !page.hasCustomPage) // filter out pages that have custom pages, e.g. /journey
+    .map((page) => ({
+      slug: page.slug
+    }))
+}
+
+export async function GET(_, { params }) {
   const { slug } = params
   const [seoData = {}, regularFontData, boldFontData] = await Promise.all([
     getPageSeo(slug),

diff --git a/src/app/[slug]/page.js b/src/app/[slug]/page.js
@@ -67,7 +67,8 @@ export async function generateMetadata({ params }) {
     openGraph: {
       title,
       description,
-      url: siteUrl
+      url: siteUrl,
+      images: siteUrl + '/og.png'
     },
     alternates: {
       canonical: siteUrl

diff --git a/src/app/actions.js b/src/app/actions.js
@@ -32,7 +32,8 @@ export async function submitBookmark(formData) {
             Date: new Date().toISOString(),
             Type: formData.type || 'Other'
           }
-        })
+        }),
+        signal: AbortSignal.timeout(5000)
       }
     )
 

diff --git a/src/app/api/increment-views/route.js b/src/app/api/increment-views/route.js
@@ -2,8 +2,6 @@ import { NextResponse } from 'next/server'
 
 import supabase from '@/lib/supabase/private'
 
-export const runtime = 'edge'
-
 export async function POST(request) {
   const searchParams = request.nextUrl.searchParams
   const slug = searchParams.get('slug')

diff --git a/src/app/bookmarks/[slug]/opengraph-image.js → src/app/bookmarks/[slug]/og.png/route.js b/src/app/bookmarks/[slug]/opengraph-image.js → src/app/bookmarks/[slug]/og.png/route.js
@@ -1,21 +1,27 @@
 import { ImageResponse } from 'next/og'
 
 import { OpenGraphImage } from '@/components/og-image'
-import { getRegularFont, getBoldFont } from '@/lib/fonts'
 import { getBookmarks } from '@/lib/raindrop'
-import { sharedImage } from '@/app/shared-metadata'
+import { getRegularFont, getBoldFont } from '@/lib/fonts'
+import { sharedMetadata } from '@/app/shared-metadata'
 
-export const runtime = 'edge'
-export const alt = 'Bookmarks'
 export const size = {
-  width: sharedImage.width,
-  height: sharedImage.height
+  width: sharedMetadata.ogImage.width,
+  height: sharedMetadata.ogImage.height
+}
+
+export async function generateStaticParams() {
+  const bookmarks = await getBookmarks()
+  return bookmarks.map((bookmark) => ({ slug: bookmark.slug }))
 }
-export const contentType = sharedImage.type
 
-export default async function Image({ params }) {
+export async function GET(_, { params }) {
   const { slug } = params
-  const [bookmarks, regularFontData, boldFontData] = await Promise.all([getBookmarks(), getRegularFont(), getBoldFont()])
+  const [bookmarks, regularFontData, boldFontData] = await Promise.all([
+    getBookmarks(),
+    getRegularFont(),
+    getBoldFont()
+  ])
   const currentBookmark = bookmarks.find((bookmark) => bookmark.slug === slug)
   if (!currentBookmark) return null
 

diff --git a/src/app/bookmarks/[slug]/page.js b/src/app/bookmarks/[slug]/page.js
@@ -76,7 +76,8 @@ export async function generateMetadata({ params }) {
     openGraph: {
       title: seoTitle,
       description: seoDescription,
-      url: siteUrl
+      url: siteUrl,
+      images: siteUrl + '/og.png'
     },
     alternates: {
       canonical: siteUrl

diff --git a/src/app/bookmarks/layout.js b/src/app/bookmarks/layout.js
@@ -3,6 +3,7 @@ import { Suspense } from 'react'
 import { SideMenu } from '@/components/side-menu'
 import { ScreenLoadingSpinner } from '@/components/screen-loading-spinner'
 import { ListItem } from '@/components/list-item'
+import { Toaster } from '@/components/ui/sonner'
 import { getBookmarks } from '@/lib/raindrop'
 import { sortByProperty } from '@/lib/utils'
 
@@ -19,25 +20,34 @@ export default async function BookmarksLayout({ children }) {
   const { bookmarks } = await fetchData()
 
   return (
-    <div className="flex w-full">
-      <SideMenu title="Bookmarks" bookmarks={bookmarks} isInner>
-        <Suspense fallback={<ScreenLoadingSpinner />}>
-          <div className="flex flex-col gap-1 text-sm">
-            {bookmarks?.map((bookmark) => {
-              return (
-                <ListItem
-                  key={bookmark._id}
-                  path={`/bookmarks/${bookmark.slug}`}
-                  title={bookmark.title}
-                  description={`${bookmark.count} bookmarks`}
-                />
-              )
-            })}
-          </div>
-        </Suspense>
-      </SideMenu>
-      <div className="lg:bg-grid flex-1">{children}</div>
-    </div>
+    <>
+      <div className="flex w-full">
+        <SideMenu title="Bookmarks" bookmarks={bookmarks} isInner>
+          <Suspense fallback={<ScreenLoadingSpinner />}>
+            <div className="flex flex-col gap-1 text-sm">
+              {bookmarks?.map((bookmark) => {
+                return (
+                  <ListItem
+                    key={bookmark._id}
+                    path={`/bookmarks/${bookmark.slug}`}
+                    title={bookmark.title}
+                    description={`${bookmark.count} bookmarks`}
+                  />
+                )
+              })}
+            </div>
+          </Suspense>
+        </SideMenu>
+        <div className="lg:bg-grid flex-1">{children}</div>
+      </div>
+      <Toaster
+        closeButton
+        richColors
+        toastOptions={{
+          duration: 5000
+        }}
+      />
+    </>
   )
 }
 

diff --git a/src/app/bookmarks/opengraph-image.js b/src/app/bookmarks/opengraph-image.js
@@ -3,15 +3,14 @@ import { ImageResponse } from 'next/og'
 import { OpenGraphImage } from '@/components/og-image'
 import { getPageSeo } from '@/lib/contentful'
 import { getRegularFont, getBoldFont } from '@/lib/fonts'
-import { sharedImage } from '@/app/shared-metadata'
+import { sharedMetadata } from '@/app/shared-metadata'
 
-export const runtime = 'edge'
 export const alt = 'Bookmarks'
 export const size = {
-  width: sharedImage.width,
-  height: sharedImage.height
+  width: sharedMetadata.ogImage.width,
+  height: sharedMetadata.ogImage.height
 }
-export const contentType = sharedImage.type
+export const contentType = sharedMetadata.ogImage.type
 
 export default async function Image() {
   const [seoData = {}, regularFontData, boldFontData] = await Promise.all([

diff --git a/src/app/icon.js b/src/app/icon.js
@@ -1,6 +1,5 @@
 import { ImageResponse } from 'next/og'
 
-export const runtime = 'edge'
 export const size = {
   width: 32,
   height: 32

diff --git a/src/app/journey/opengraph-image.js b/src/app/journey/opengraph-image.js
@@ -3,15 +3,14 @@ import { ImageResponse } from 'next/og'
 import { OpenGraphImage } from '@/components/og-image'
 import { getPageSeo } from '@/lib/contentful'
 import { getRegularFont, getBoldFont } from '@/lib/fonts'
-import { sharedImage } from '@/app/shared-metadata'
+import { sharedMetadata } from '@/app/shared-metadata'
 
-export const runtime = 'edge'
 export const alt = 'Journey'
 export const size = {
-  width: sharedImage.width,
-  height: sharedImage.height
+  width: sharedMetadata.ogImage.width,
+  height: sharedMetadata.ogImage.height
 }
-export const contentType = sharedImage.type
+export const contentType = sharedMetadata.ogImage.type
 
 export default async function Image() {
   const [seoData = {}, regularFontData, boldFontData] = await Promise.all([

diff --git a/src/app/layout.js b/src/app/layout.js
@@ -6,12 +6,12 @@ import { JetBrains_Mono } from 'next/font/google'
 import { SpeedInsights } from '@vercel/speed-insights/next'
 import { EyeIcon } from 'lucide-react'
 
+import { TailwindIndicator } from '@/components/tailwind-indicator'
 import { SideMenu } from '@/components/side-menu'
 import { MenuContent } from '@/components/menu-content'
-import { Toaster } from '@/components/ui/sonner'
 import { preloadGetAllPosts } from '@/lib/contentful'
 import { PROFILES } from '@/lib/constants'
-import { sharedTitle, sharedDescription } from '@/app/shared-metadata'
+import { sharedMetadata } from '@/app/shared-metadata'
 
 const jetbrainsMono = JetBrains_Mono({
   subsets: ['latin'],
@@ -25,7 +25,7 @@ export default async function RootLayout({ children }) {
   preloadGetAllPosts(isEnabled)
 
   return (
-    <html lang="en" className={`${GeistSans.variable} ${jetbrainsMono.variable}`}>
+    <html lang="en" className={`${GeistSans.variable} ${jetbrainsMono.variable}`} suppressHydrationWarning>
       <body>
         {/* eslint-disable-next-line react/no-unknown-property */}
         <main vaul-drawer-wrapper="" className="min-h-screen bg-white">
@@ -44,14 +44,8 @@ export default async function RootLayout({ children }) {
             <div className="flex flex-1">{children}</div>
           </div>
         </main>
+        <TailwindIndicator />
         <SpeedInsights />
-        <Toaster
-          closeButton
-          richColors
-          toastOptions={{
-            duration: 5000
-          }}
-        />
         <Script
           src="https://unpkg.com/@tinybirdco/flock.js"
           data-host="https://api.tinybird.co"
@@ -70,20 +64,21 @@ export const metadata = {
     follow: true
   },
   title: {
-    template: `%s — ${sharedTitle}`,
-    default: sharedTitle
+    default: sharedMetadata.title,
+    template: `%s — ${sharedMetadata.title}`
   },
-  description: sharedDescription,
+  description: sharedMetadata.description,
+  keywords: ['Onur Şuyalçınkaya', 'Onur Suyalcinkaya', 'onur dev', 'onur.dev'],
   openGraph: {
     title: {
-      template: `%s — ${sharedTitle}`,
-      default: sharedTitle
+      default: sharedMetadata.title,
+      template: `%s — ${sharedMetadata.title}`
     },
-    description: sharedDescription,
-    alt: sharedTitle,
+    description: sharedMetadata.description,
+    alt: sharedMetadata.title,
     type: 'website',
-    url: '/',
-    siteName: sharedTitle,
+    url: 'https://onur.dev',
+    siteName: sharedMetadata.title,
     locale: 'en_IE'
   },
   alternates: {

diff --git a/src/app/opengraph-image.js b/src/app/opengraph-image.js
@@ -2,15 +2,14 @@ import { ImageResponse } from 'next/og'
 
 import { OpenGraphImage } from '@/components/og-image'
 import { getRegularFont, getBoldFont } from '@/lib/fonts'
-import { sharedTitle, sharedDescription, sharedImage } from '@/app/shared-metadata'
+import { sharedMetadata } from '@/app/shared-metadata'
 
-export const runtime = 'edge'
-export const alt = sharedTitle
+export const alt = sharedMetadata.title
 export const size = {
-  width: sharedImage.width,
-  height: sharedImage.height
+  width: sharedMetadata.ogImage.width,
+  height: sharedMetadata.ogImage.height
 }
-export const contentType = sharedImage.type
+export const contentType = sharedMetadata.ogImage.type
 
 /* export const getImage = async () => {
   const response = await fetch(new URL('@/assets/me.jpg', import.meta.url))
@@ -24,8 +23,8 @@ export default async function Image() {
   return new ImageResponse(
     (
       <OpenGraphImage
-        title={sharedTitle}
-        description={sharedDescription}
+        title={sharedMetadata.title}
+        description={sharedMetadata.description}
         icon={
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/src/app/shared-metadata.js b/src/app/shared-metadata.js
@@ -1,7 +1,10 @@
-export const sharedTitle = 'Onur Şuyalçınkaya'
-export const sharedDescription = 'Software Engineer, DJ, writer, and minimalist, based in Amsterdam, The Netherlands'
-export const sharedImage = {
-  width: 1200,
-  height: 630,
-  type: 'image/png'
+export const sharedMetadata = {
+  title: 'Onur Şuyalçınkaya',
+  description: 'Software Engineer, DJ, writer, and minimalist, based in Amsterdam, The Netherlands',
+  url: 'https://onur.dev',
+  ogImage: {
+    width: 1200,
+    height: 630,
+    type: 'image/png'
+  }
 }
diff --git a/src/app/workspace/opengraph-image.js b/src/app/workspace/opengraph-image.js
@@ -3,15 +3,14 @@ import { ImageResponse } from 'next/og'
 import { OpenGraphImage } from '@/components/og-image'
 import { getPageSeo } from '@/lib/contentful'
 import { getRegularFont, getBoldFont } from '@/lib/fonts'
-import { sharedImage } from '@/app/shared-metadata'
+import { sharedMetadata } from '@/app/shared-metadata'
 
-export const runtime = 'edge'
 export const alt = 'Workspace'
 export const size = {
-  width: sharedImage.width,
-  height: sharedImage.height
+  width: sharedMetadata.ogImage.width,
+  height: sharedMetadata.ogImage.height
 }
-export const contentType = sharedImage.type
+export const contentType = sharedMetadata.ogImage.type
 
 export default async function Image() {
   const [seoData = {}, regularFontData, boldFontData] = await Promise.all([

diff --git a/src/app/writing/[slug]/opengraph-image.js → src/app/writing/[slug]/og.png/route.js b/src/app/writing/[slug]/opengraph-image.js → src/app/writing/[slug]/og.png/route.js
@@ -1,19 +1,21 @@
 import { ImageResponse } from 'next/og'
 
 import { OpenGraphImage } from '@/components/og-image'
-import { getWritingSeo } from '@/lib/contentful'
+import { getWritingSeo, getAllPostSlugs } from '@/lib/contentful'
 import { getRegularFont, getBoldFont } from '@/lib/fonts'
-import { sharedImage } from '@/app/shared-metadata'
+import { sharedMetadata } from '@/app/shared-metadata'
 
-export const runtime = 'edge'
-export const alt = 'Writing'
 export const size = {
-  width: sharedImage.width,
-  height: sharedImage.height
+  width: sharedMetadata.ogImage.width,
+  height: sharedMetadata.ogImage.height
 }
-export const contentType = sharedImage.type
 
-export default async function Image({ params }) {
+export async function generateStaticParams() {
+  const allPosts = await getAllPostSlugs()
+  return allPosts.map((post) => ({ slug: post.slug }))
+}
+
+export async function GET(_, { params }) {
   const { slug } = params
   const [seoData, regularFontData, boldFontData] = await Promise.all([
     getWritingSeo(slug),

diff --git a/src/app/writing/[slug]/page.js b/src/app/writing/[slug]/page.js
@@ -112,7 +112,8 @@ export async function generateMetadata({ params }) {
       ...(updatedAt && {
         modifiedTime
       }),
-      url: siteUrl
+      url: siteUrl,
+      images: siteUrl + '/og.png'
     },
     alternates: {
       canonical: siteUrl