Merge pull request #345 from zackproser/fix-metadata

Fix metadata
zackproser · Feb 12, 2024 · f25cc43 · f25cc43
2 parents b6af4c2 + 489fe27
commit f25cc43
Show file tree

Hide file tree

Showing 93 changed files with 547 additions and 1,632 deletions.
diff --git a/public/subtle-stripes.webp b/public/subtle-stripes.webp
diff --git a/public/zachary-proser.webp b/public/zachary-proser.webp
diff --git a/public/zack.png b/public/zack.png
diff --git a/public/zack.webp b/public/zack.webp
diff --git a/src/app/api/og/route.tsx b/src/app/api/og/route.tsx
@@ -14,11 +14,11 @@ export async function GET(request: NextRequest) {
   const image = searchParams.get('image') || searchParams.get('amp;image');
   const description = searchParams.get('description') || searchParams.get('amp;description');
 
-  const profileImageData = await fetch(new URL('/public/zack.webp', import.meta.url)).then(
+  const profileImageData = await fetch(new URL('/public/zack.png', import.meta.url)).then(
     (res) => res.arrayBuffer(),
   );
 
-  const fallBackImageURL = new URL('/public/zack-proser-dev-advocate.webp', import.meta.url);
+  const fallBackImageURL = new URL('/public/zack-proser-dev-advocate.png', import.meta.url);
   const ultimateURL = image ? new URL(`${process.env.NEXT_PUBLIC_SITE_URL}${image} `) : fallBackImageURL;
 
   let postImageData;
@@ -36,7 +36,7 @@ export async function GET(request: NextRequest) {
     <div
       tw="flex flex-col w-full h-full bg-emerald-900"
       style={{
-        backgroundImage: 'linear-gradient(to bottom, rgba(45, 211, 12, 0.6), rgba(2, 91, 48, 0.4)), url(https://zackproser.com/alum.webp)'
+        backgroundImage: 'linear-gradient(to bottom, rgba(45, 211, 12, 0.6), rgba(2, 91, 48, 0.4)), url(https://zackproser.com/alum.png)'
       }}
     >
       <div tw="flex flex-col md:flex-row w-full">
@@ -56,14 +56,18 @@ export async function GET(request: NextRequest) {
       <div
         tw="bg-slate-900 bg-opacity-50 border-1 border-white flex w-full"
         style={{
-          backgroundImage: `linear-gradient(to right, rgba(31, 97, 141, 0.8), rgba(15, 23, 42, 0.8)), url(https://zackproser.com/subtle-stripes.webp)`
+          backgroundImage: `linear-gradient(to right, rgba(31, 97, 141, 0.8), rgba(15, 23, 42, 0.8)), url(https://zackproser.com/subtle-stripes.png)`
         }}
       >
         <div tw="flex flex-col md:flex-row w-full pt-8 px-4 md:items-center justify-between p-4">
           <div tw="flex flex-col">
-            <h2 tw="pl-2 text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
+
+            <h2 tw="pl-2 text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left whitespace-normal break-words"
+              style={{ maxWidth: '600px' }}
+            >
               <span tw="text-white font-extrabold">{title}</span>
             </h2>
+
             {description && (
               <p tw="pl-2 text-1xl sm:text-2xl font-extrabold tracking-tight text-white text-left break-words"
                 style={{ maxWidth: '600px' }}
@@ -89,5 +93,3 @@ export async function GET(request: NextRequest) {
     </div>
   )
 }
-
-
diff --git a/src/app/blog/2023-wins/page.mdx b/src/app/blog/2023-wins/page.mdx
@@ -3,7 +3,6 @@ import { Button } from '@/components/Button'
 import Image from 'next/image'
 
 import shipLikeCrazy from '@/images/ship-like-crazy.webp'
-import pausingToReflect from '@/images/pausing-to-reflect.webp'
 import a16z2 from '@/images/a16z-2.webp'
 import a16z11 from '@/images/a16z-11.webp'
 import emailOctopusStats from '@/images/email-octopus-stats.webp'
@@ -18,37 +17,23 @@ import initToWinIt from '@/images/init-to-win-it.webp'
 
 import ConsultingCTA from '@/components/ConsultingCTA'
 
-import { generateOgUrl } from '@/utils/ogUrl'
+import { createMetadata } from '@/utils/createMetadata'
 
-export const meta = {
+export const metadata = createMetadata({
     author: "Zachary Proser", 
     date: "2024-01-08",
     title: "Keep Calm and Ship Like Crazy: My 2023 Wins and Lessons",
     description: "I had a lot of growth and success to celebrate professionally in 2023",
     image: shipLikeCrazy
-}
-
-export const metadata = {
-  openGraph: {
-    title: meta.title,
-    description: meta.description,
-    url: "${process.env.NEXT_PUBLIC_SITE_URL}", 
-    siteName: "Zack Proser portfolio",
-    images: [
-      {
-        url: `${generateOgUrl(meta)}`,
-      }
-    ]
-  }
-}
-
-export default (props) => <ArticleLayout meta={meta} {...props} />
+});
+
+export default (props) => <ArticleLayout metadata={metadata} {...props} />
 
 --- 
 
 ## Catching a breath
 
-<Image src={pausingToReflect} alt="I'm pausing to reflect" />
+<Image src={shipLikeCrazy} alt="I'm pausing to reflect" />
 
 I want to reflect on what I accomplished last year and what I consider my biggest wins: 
 

diff --git a/src/app/blog/a16z-sf-dec-2023-ai-apps-production/page.mdx b/src/app/blog/a16z-sf-dec-2023-ai-apps-production/page.mdx
@@ -3,6 +3,8 @@ import { Button } from '@/components/Button'
 import Image from 'next/image'
 import { Tweet } from 'react-tweet'
 
+import { createMetadata } from '@/utils/createMetadata'
+
 import a16z1 from '@/images/a16z-1.webp'
 import a16z2 from '@/images/a16z-2.webp'
 import a16z3 from '@/images/a16z-3.webp'
@@ -15,31 +17,17 @@ import a16z9 from '@/images/a16z-9.webp'
 import a16z10 from '@/images/a16z-10.webp'
 import a16z11 from '@/images/a16z-11.webp'
 
-import { generateOgUrl } from '@/utils/ogUrl'
 
-export const meta = {
+export const metadata = createMetadata({
     author: "Zachary Proser", 
     date: "2023-12-6",
-    title: "Talk @ a16z: Navigating from Jupyter Notebooks to production", 
+    title: "Talk @ a16z: Taking AI applications to Production", 
     description: "I introduced the new Pinecone AWS Reference Architecture with Pulumi and explained infrastructure as code",
     image: a16z1
-}
-
-export const metadata = {
-  openGraph: {
-    title: meta.title,
-    description: meta.description,
-    url: "${process.env.NEXT_PUBLIC_SITE_URL}", 
-    siteName: "Zack Proser portfolio",
-    images: [
-      {
-        url: `${generateOgUrl(meta)}`,
-      }
-    ]
-  }
-}
-
-export default (props) => <ArticleLayout meta={meta} {...props} />
+});
+
+
+export default (props) => <ArticleLayout metadata={metadata} {...props} />
 
 --- 
 

diff --git a/src/app/blog/api-cicd-pulumi-github/page.mdx b/src/app/blog/api-cicd-pulumi-github/page.mdx
@@ -16,31 +16,17 @@ import pulumiPreview from '@/images/pulumi-pr-preview.webp'
 
 import ConsultingCTA from '@/components/ConsultingCTA'
 
-import { generateOgUrl } from '@/utils/ogUrl'
+import { createMetadata } from '@/utils/createMetadata'
 
-export const meta = {
+export const metadata = createMetadata({
     author: "Zachary Proser", 
     date: "2024-01-01",
     title: "A Blueprint for Modern API Development: Repositories developers want to work on", 
     description: "Developer delight === project velocity ?",
     image: developerDelight
-}
-
-export const metadata = {
-  openGraph: {
-    title: meta.title,
-    description: meta.description,
-    url: "${process.env.NEXT_PUBLIC_SITE_URL}", 
-    siteName: "Zack Proser portfolio",
-    images: [
-      {
-        url: `${generateOgUrl(meta)}`,
-      }
-    ]
-  }
-}
-
-export default (props) => <ArticleLayout meta={meta} {...props} />
+})
+
+export default (props) => <ArticleLayout metadata={metadata} {...props} />
 
 --- 
 

diff --git a/src/app/blog/article-react-lambda-pipeline/page.mdx b/src/app/blog/article-react-lambda-pipeline/page.mdx
@@ -3,35 +3,21 @@ import Image from 'next/image'
 import { Button } from '@/components/Button'
 import reactLambdaPipeline from '@/images/lambda-ci-cd.webp'
 
-import { generateOgUrl } from '@/utils/ogUrl'
+import { createMetadata } from '@/utils/createMetadata'
 
-export const meta = {
+export const metadata = createMetadata({
     author: "Zachary Proser", 
     date: "2021-04-05", 
     title: "How to build a React.js and Lambda app with Git push continuous deployment", 
     description: "An open-source example repository and technical deep-dive on using AWS SAM, Golang, CodePipeline and CloudFormation to automate continuous delivery.",
     href: "https://zackproser.substack.com/p/how-to-build-a-reactjs-and-lambda",
     image: reactLambdaPipeline
-}
+})
 
-export const metadata = {
-  openGraph: {
-    title: meta.title,
-    description: meta.description,
-    url: "${process.env.NEXT_PUBLIC_SITE_URL}", 
-    siteName: "Zack Proser portfolio",
-    images: [
-      {
-        url: `${generateOgUrl(meta)}`,
-      }
-    ]
-  }
-}
+export default (props) => <ArticleLayout metadata={metadata} {...props} />
 
-export default (props) => <ArticleLayout meta={meta} {...props} />
+<Image src={metadata.image} alt={metadata.title} />
 
-<Image src={meta.image} alt={meta.title} />
-
-<Button href={meta.href}>Read the article</Button>
+<Button href={metadata.href}>Read the article</Button>
 
 
diff --git a/src/app/blog/autogit-introduction/page.mdx b/src/app/blog/autogit-introduction/page.mdx
@@ -8,31 +8,17 @@ import autogitStashedChangesGif from '@/images/autogit-stashed-changes.gif'
 
 import Image from 'next/image'
 
-import { generateOgUrl } from '@/utils/ogUrl'
+import { createMetadata } from '@/utils/createMetadata'
 
-export const meta = {
+export const metadata = {
   author: "Zachary Proser",
   date: "2023-05-15",
   title: "Autogit - never forget to pull the latest changes again",
   description: "Autogit is an open source shell script that you can wire up to your `cd` command to ensure you always have the latest code, branches, and remotes when you open up a local git repository.",
   image: autogitGif,
 }
 
-export const metadata = {
-  openGraph: {
-    title: meta.title,
-    description: meta.description,
-    url: "${process.env.NEXT_PUBLIC_SITE_URL}", 
-    siteName: "Zack Proser portfolio",
-    images: [
-      {
-        url: `${generateOgUrl(meta)}`,
-      }
-    ]
-  }
-}
-
-export default (props) => <ArticleLayout meta={meta} {...props} />
+export default (props) => <ArticleLayout metadata={metadata} {...props} />
 
 Even experienced programmers make mistakes - lately I've been forgetting to git pull on my local repos when working quickly, leading my poor colleague Max to have to Slack me messages like this while we're on pair-coding calls:
 

diff --git a/src/app/blog/automations-project/page.mdx b/src/app/blog/automations-project/page.mdx
@@ -11,31 +11,17 @@ import autopullrequestExample from '@/images/autopullrequest-example.webp'
 
 import Image from 'next/image'
 
-import { generateOgUrl } from '@/utils/ogUrl'
+import { createMetadata } from '@/utils/createMetadata'
 
-export const meta = {
+export const metadata = createMetadata({
   author: "Zachary Proser",
   date: "2023-05-24",
   title: "Automations - shell scripts leveraging OpenAI to make your developer workflow buttery smooth and way more fun",
   description: "I have open sourced my automations project, which is a collection of shell scripts that automatically handle git operations, provide local code reviews, pull requests, and more!",
   image: automationsGif,
-}
-
-export const metadata = {
-  openGraph: {
-    title: meta.title,
-    description: meta.description,
-    url: "${process.env.NEXT_PUBLIC_SITE_URL}", 
-    siteName: "Zack Proser portfolio",
-    images: [
-      {
-        url: `${generateOgUrl(meta)}`,
-      }
-    ]
-  }
-}
-
-export default (props) => <ArticleLayout meta={meta} {...props} />
+})
+
+export default (props) => <ArticleLayout metadata={metadata} {...props} />
 
 <Image src={automationsGif} alt="Automations open source project" />
 

diff --git a/src/app/blog/bitwarden-cli-tokens/page.mdx b/src/app/blog/bitwarden-cli-tokens/page.mdx
@@ -1,31 +1,17 @@
 import { ArticleLayout } from '@/components/ArticleLayout'
 import { Button } from '@/components/Button'
 
-import { generateOgUrl } from '@/utils/ogUrl'
+import { createMetadata } from '@/utils/createMetadata'
 
-export const meta = {
+export const metadata = createMetadata({
     author: "Zachary Proser", 
     date: "2022-10-27", 
     title: "How to securely store secrets in BitWarden CLI and load them into your shell when needed", 
     description: "A tutorial on how to write and use shell functions to fetch your tokens from the BitWarden CLI with one command. ",
     href: "https://blog.gruntwork.io/how-to-securely-store-secrets-in-bitwarden-cli-and-load-them-into-your-zsh-shell-when-needed-f12d4d040df"
-}
+})
 
-export const metadata = {
-  openGraph: {
-    title: meta.title,
-    description: meta.description,
-    url: "${process.env.NEXT_PUBLIC_SITE_URL}", 
-    siteName: "Zack Proser portfolio",
-    images: [
-      {
-        url: `${generateOgUrl(meta)}`,
-      }
-    ]
-  }
-}
+export default (props) => <ArticleLayout metadata={metadata} {...props} />
 
-export default (props) => <ArticleLayout meta={meta} {...props} />
-
-<Button href={meta.href}>Read the article</Button>
+<Button href={metadata.href}>Read the article</Button>
 
diff --git a/src/app/blog/bubbletea-state-machine/page.mdx b/src/app/blog/bubbletea-state-machine/page.mdx
@@ -5,31 +5,17 @@ import simpleStepsGif from '@/images/stages.gif'
 import elmArchitecture from '@/images/elm-architecture.svg'
 import bubbleteaStagesGif from '@/images/bubbletea-stages.gif'
 
-import { generateOgUrl } from '@/utils/ogUrl'
+import { createMetadata } from '@/utils/createMetadata'
 
-export const meta = {
+export const metadata = createMetadata({
  author: "Zachary Proser",
  date: "2023-04-25", 
  title: "The Bubbletea (TUI) State Machine pattern",
  description: "Combining a lightweight state machine plus the Bubbletea charm library leads to a very powerful pattern for tooling that needs to orchestrate slow or expensive steps.",
  image: bubbleteaStagesGif,
-}
-
-export const metadata = {
-  openGraph: {
-    title: meta.title,
-    description: meta.description,
-    url: "${process.env.NEXT_PUBLIC_SITE_URL}", 
-    siteName: "Zack Proser portfolio",
-    images: [
-      {
-        url: `${generateOgUrl(meta)}`,
-      }
-    ]
-  }
-}
+})
 
-export default (props) => <ArticleLayout meta={meta} {...props} />
+export default (props) => <ArticleLayout metadata={metadata} {...props} />
 
 ## A powerful pattern for CLI's that orchestrate complex deployments or workflows