From 532e515b5586f4b5dce1f95795fe840e28b4273a Mon Sep 17 00:00:00 2001
From: Ian Hunt-Isaak <ianhuntisaak@gmail.com>
Date: Wed, 29 Oct 2025 15:49:02 -0400
Subject: [PATCH 1/4] fix open graph url verification + add more info

---
 src/components/layout.js | 27 ++++++++++++++++++++++++++-
 src/pages/blog/[id].js   |  5 +++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/layout.js b/src/components/layout.js
index aa216cfd0..3dab32415 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -12,6 +12,11 @@ export const Layout = ({
   children,
   url = 'https://xarray.dev',
   enableBanner = false,
+  type = 'website',
+  imageWidth,
+  imageHeight,
+  publishedTime,
+  authors,
 }) => {
   const bannerTitle = 'Check out the latest blog post:'
   // The first link will be the main description for the banner
@@ -41,6 +46,8 @@ export const Layout = ({
 
   // Construct the full card URL
   const fullCardUrl = card.startsWith('http') ? card : `${baseUrl}${card}`
+  // Construct the full URL for og:url
+  const fullUrl = url.startsWith('http') ? url : `${baseUrl}${url}`
 
   return (
     <>
@@ -50,12 +57,30 @@ export const Layout = ({
         <meta property='og:title' content={title} />
         <meta property='og:description' content={description} />
         <meta property='og:image' content={fullCardUrl} />
-        <meta property='og:url' content={url} />
+        {imageWidth && <meta property='og:image:width' content={imageWidth} />}
+        {imageHeight && (
+          <meta property='og:image:height' content={imageHeight} />
+        )}
+        <meta property='og:url' content={fullUrl} />
+        <meta property='og:type' content={type} />
+        {type === 'article' && publishedTime && (
+          <meta property='article:published_time' content={publishedTime} />
+        )}
+        {type === 'article' &&
+          authors &&
+          authors.map((author) => (
+            <meta
+              key={author.github}
+              property='article:author'
+              content={`https://github.com/${author.github}`}
+            />
+          ))}
         <meta name='twitter:title' content={title} />
         <meta name='twitter:description' content={description} />
         <meta name='twitter:image' content={fullCardUrl} />
         <meta name='twitter:card' content='summary_large_image' />
         <meta name='twitter:site' content='@xarray_dev' />
+        <link rel='canonical' href={fullUrl} />
         <link
           rel='icon'
           type='image/png'
diff --git a/src/pages/blog/[id].js b/src/pages/blog/[id].js
index ce077d9ac..80acaca78 100644
--- a/src/pages/blog/[id].js
+++ b/src/pages/blog/[id].js
@@ -38,6 +38,11 @@ export default function Post({ source, frontmatter, postId }) {
       card={`/cards/${postId}.png`}
       description={frontmatter.summary}
       url={`/blog/${postId}`}
+      type='article'
+      imageWidth='2560'
+      imageHeight='1440'
+      publishedTime={date.toISOString()}
+      authors={frontmatter.authors}
     >
       <Box as={'section'}>
         <Container maxW='container.lg' py={10}>

From a5fc6248ef5f80f66d67870c6811720e065461dc Mon Sep 17 00:00:00 2001
From: Ian Hunt-Isaak <ianhuntisaak@gmail.com>
Date: Wed, 29 Oct 2025 15:53:36 -0400
Subject: [PATCH 2/4] differentiate canonical URL on PR previews

---
 src/components/layout.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/layout.js b/src/components/layout.js
index 3dab32415..7dd1750b2 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -44,9 +44,15 @@ export const Layout = ({
     ? process.env.NEXT_PUBLIC_SITE_URL
     : process.env.URL || 'http://localhost:3000'
 
+  // Canonical URL always points to production for SEO
+  const canonicalBaseUrl = 'https://xarray.dev'
+  const canonicalUrl = url.startsWith('http')
+    ? url
+    : `${canonicalBaseUrl}${url}`
+
   // Construct the full card URL
   const fullCardUrl = card.startsWith('http') ? card : `${baseUrl}${card}`
-  // Construct the full URL for og:url
+  // Construct the full URL for og:url (can use preview URL)
   const fullUrl = url.startsWith('http') ? url : `${baseUrl}${url}`
 
   return (
@@ -80,7 +86,7 @@ export const Layout = ({
         <meta name='twitter:image' content={fullCardUrl} />
         <meta name='twitter:card' content='summary_large_image' />
         <meta name='twitter:site' content='@xarray_dev' />
-        <link rel='canonical' href={fullUrl} />
+        <link rel='canonical' href={canonicalUrl} />
         <link
           rel='icon'
           type='image/png'

From 85227210ed4ee3f17bd669f8a4391e9b8bb984a9 Mon Sep 17 00:00:00 2001
From: Ian Hunt-Isaak <ianhuntisaak@gmail.com>
Date: Wed, 29 Oct 2025 16:00:54 -0400
Subject: [PATCH 3/4] maybe fix open graph images?

---
 netlify.toml | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/netlify.toml b/netlify.toml
index 209622093..f14fd21e1 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -18,15 +18,11 @@
   status = 404
 
 # Environment variables for different deploy contexts
+# Note: Netlify automatically provides URL and DEPLOY_PRIME_URL
+# We don't need to set NEXT_PUBLIC_SITE_URL for previews since our code falls back to process.env.URL
 [context.production.environment]
   NEXT_PUBLIC_SITE_URL = "https://xarray.dev"
 
-[context.deploy-preview.environment]
-  NEXT_PUBLIC_SITE_URL = "$DEPLOY_PRIME_URL"
-
-[context.branch-deploy.environment]
-  NEXT_PUBLIC_SITE_URL = "$DEPLOY_PRIME_URL"
-
 # Headers for security
 [[headers]]
   for = "/*"

From b7006dba02a28e84ce480e01f24d9f26d8175822 Mon Sep 17 00:00:00 2001
From: Ian Hunt-Isaak <ianhuntisaak@gmail.com>
Date: Fri, 31 Oct 2025 12:11:28 -0400
Subject: [PATCH 4/4] another attempt at URL stuff

---
 netlify.toml             | 10 ++++------
 src/components/layout.js |  8 +++-----
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/netlify.toml b/netlify.toml
index f14fd21e1..6eb19aed4 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,6 +1,7 @@
 [build]
   publish = ".next"
-  command = "npm run build"
+  # Use DEPLOY_PRIME_URL for previews, fallback to production URL
+  command = "NEXT_PUBLIC_SITE_URL=${DEPLOY_PRIME_URL:-https://xarray.dev} npm run build"
 
 [build.environment]
   NODE_VERSION = "20"
@@ -17,11 +18,8 @@
   to = "/404.html"
   status = 404
 
-# Environment variables for different deploy contexts
-# Note: Netlify automatically provides URL and DEPLOY_PRIME_URL
-# We don't need to set NEXT_PUBLIC_SITE_URL for previews since our code falls back to process.env.URL
-[context.production.environment]
-  NEXT_PUBLIC_SITE_URL = "https://xarray.dev"
+# Environment variables set via build command above
+# DEPLOY_PRIME_URL is automatically provided by Netlify
 
 # Headers for security
 [[headers]]
diff --git a/src/components/layout.js b/src/components/layout.js
index 7dd1750b2..f707364f7 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -39,10 +39,8 @@ export const Layout = ({
   //   </Link>
   //)
 
-  // Determine the base URL based on the environment
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL
-    ? process.env.NEXT_PUBLIC_SITE_URL
-    : process.env.URL || 'http://localhost:3000'
+  // Base URL is set via build command (DEPLOY_PRIME_URL for previews, production URL otherwise)
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
 
   // Canonical URL always points to production for SEO
   const canonicalBaseUrl = 'https://xarray.dev'
@@ -52,7 +50,7 @@ export const Layout = ({
 
   // Construct the full card URL
   const fullCardUrl = card.startsWith('http') ? card : `${baseUrl}${card}`
-  // Construct the full URL for og:url (can use preview URL)
+  // Construct the full URL for og:url (uses preview URL in previews, production in prod)
   const fullUrl = url.startsWith('http') ? url : `${baseUrl}${url}`
 
   return (