Migrate next batch of articles to new metadata system

zackproser · Feb 12, 2024 · 2bd8fb0 · 2bd8fb0
1 parent 17a5a23
commit 2bd8fb0
Show file tree

Hide file tree

Showing 20 changed files with 104 additions and 378 deletions.
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 
 

diff --git a/src/app/blog/catfacts-golang/page.mdx b/src/app/blog/catfacts-golang/page.mdx
@@ -3,31 +3,18 @@ import { Button } from '@/components/Button'
 import Image from 'next/image'
 import catfactsBlog from '@/images/catfacts-screens/catfacts-blog.webp'
 
-import { generateOgUrl } from '@/utils/ogUrl'
+import { createMetadata } from '@/utils/createMetadata'
 
-export const meta = {
+export const metadata = createMetadata({
     author: "Zachary Proser", 
     date: "2019-10-20", 
     title: "CatFacts rewrite in Golang", 
     description: "A ridiculously over-engineered CatFacts prank written in Golang and deployed via Kubernetes",
     image: catfactsBlog
-}
-
-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={catfactsBlog} alt="Catfacts blog" />
 

diff --git a/src/app/blog/chatgpt-4-and-codeium-are-my-favorite-stack/page.mdx b/src/app/blog/chatgpt-4-and-codeium-are-my-favorite-stack/page.mdx
@@ -11,31 +11,18 @@ import aiDirectEnhancement from '@/images/ai-direct-enhancement.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: '2023-10-10',
   title: 'ChatGPT4 and Codeium are still my favorite dev assistant stack', 
   description: 'As of October 10th, 2023, ChatGPT4 and Codeium are still my favorite AI-assisted dev tool stack. Here is why',
   image: myFavoriteAIStack
-}
-
-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={myFavoriteAIStack} alt="As of October 10th, 2023, ChatGPT4 and Codeium are all I need to make excellent progress and have fun doing it" />
 <figcaption>As of October 10th, 2023, ChatGPT4 and Codeium are all I need to make excellent progress and have fun doing it.</figcaption>
@@ -132,7 +119,6 @@ when to raise its hand to point out something that's going to cause the build to
 
 <ConsultingCTA />
 
-
 We're not quite there yet, but all of the base ingredients to create this experience are. 
 
 Indeed, many different companies both large and small are sprinting full-tilt toward this experience, as I've written about recently, but there's still quite a way to go until these tools present uniformly smooth experiences to their end users: 

diff --git a/src/app/blog/chatgpt-4-experiment-ai-development/page.mdx b/src/app/blog/chatgpt-4-experiment-ai-development/page.mdx
@@ -8,31 +8,18 @@ import pairingSocials from '@/images/chatgpt4-screens/ChatGPT4-pairing-socials.w
 import aiSupport from '@/images/ai-support.webp'
 import aiSupport2 from '@/images/ai-support-2.webp'
 
-import { generateOgUrl } from '@/utils/ogUrl'
+import { createMetadata } from '@/utils/createMetadata'
 
-export const meta = {
+export const metadata = createMetadata({
   author: 'Zachary Proser',
   date: '2023-04-10',
   title: 'Can ChatGPT-4 and GitHub Copilot help me produce a more complete side project more quickly?', 
   description: 'As a Senior Software Engineer, I&apos;m always looking for ways to refine my skills and optimize my workflow. This weekend, I experimented with integrating ChatGPT-4 into my developer toolkit alongside GitHub Copilot, which I&apos;ve been using for several months. The goal? To see if these AI-powered tools could help me complete a side project more quickly. ',
   image: aiSupport2
-}
-
-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={aiSupport2} alt="Requesting AI support!" />
 <figcaption>Chat GPT-4 pointing out one of my bugs while I work</figcaption>

diff --git a/src/app/blog/codeium-review/page.mdx b/src/app/blog/codeium-review/page.mdx
@@ -8,31 +8,17 @@ import Link from 'next/link'
 
 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: "2023-05-29",
   title: "Codeium with Neovim for A.I. powered code-completion: so far so good",
   description: "Generally unimpressed with GitHub's Copilot (not Copilot X), I gave the alternative, Codeium a shot.",
   image: codeiumExample,
-}
-
-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} />
 
 ## Codeium is a GitHub Copilot alternative that I'm trying out 
 

diff --git a/src/app/blog/codeium-vs-chatgpt/page.mdx b/src/app/blog/codeium-vs-chatgpt/page.mdx
@@ -11,31 +11,18 @@ import projectBasedLearning from '@/images/project-based-learning.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-2-02",
     title: "Codeium vs ChatGPT", 
     description: "What's the difference between Codeium and ChatGPT and which should you use?",
     image: codeiumVsChatGPT 
-}
-
-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/glossary-of-tech-phrases/page.mdx b/src/app/blog/glossary-of-tech-phrases/page.mdx
@@ -7,31 +7,17 @@ import { Newsletter } from '@/components/Newsletter'
 import Image from 'next/image'
 import Link from 'next/link'
 
-import { generateOgUrl } from '@/utils/ogUrl'
+import { createMetadata } from '@/utils/createMetadata'
 
-export const meta = {
+export const metadata = createMetadata({
  author: "Zachary Proser",
  date: "2023-9-9",
  title: "Glossary of tech phrases",
  description: "If you're coming from Hacker News, I've learned that I need to spell out at the beginning that this post is partly facetious...",
  image: frustration
-}
-
-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={frustration} alt="frustration"/>
 

diff --git a/src/app/blog/how-developers-evaluate-ai-coding-tools/page.mdx b/src/app/blog/how-developers-evaluate-ai-coding-tools/page.mdx
@@ -4,33 +4,20 @@ import  Image  from 'next/image'
 import hackerEvaluation from '@/images/hacker-evaluation.webp'
 import frustratedDeveloper from '@/images/frustrated-developer.webp'
 
-import { generateOgUrl } from '@/utils/ogUrl'
+import { createMetadata } from '@/utils/createMetadata'
 
 import ConsultingCTA from '@/components/ConsultingCTA'
 
-export const meta = {
+export const metadata = createMetadata({
   author: 'Zachary Proser',
   date: '2023-10-07',
   title: 'Why your AI dev tool startup is failing with developers', 
   description: 'These common mistakes are dooming your AI-assisted developer tooling startup to failure. Don\'t make them',
   image: hackerEvaluation,
-}
-
-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={frustratedDeveloper} alt="Your crappy tools are frustrating developers because they don't work as advertised" />
 <figcaption>A frustated senior developer trying our your improperly tested dev tool for the first time</figcaption>

diff --git a/src/app/blog/how-i-keep-my-shit-together/page.mdx b/src/app/blog/how-i-keep-my-shit-together/page.mdx
@@ -19,31 +19,17 @@ import iceBath from '@/images/ice-bath.webp'
 import familyWalk from '@/images/family-walk.webp'
 import sleepingHacker from '@/images/sleeping-hacker.webp'
 
-import { generateOgUrl } from '@/utils/ogUrl'
+import { createMetadata } from '@/utils/ogUrl'
 
-export const meta = {
+export const metadata = createMetadata({
   author: "Zachary Proser",
   date: "2023-09-30",
   title: "How I keep my shit together",
   description: "Practices and protocols that keep me humming along, healthy and productive on a given day",
   image: keepingItTogether,
-}
-
-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={keepingItTogether} alt="Keeping it together" />
 

diff --git a/src/app/blog/how-to-generate-images-with-ai/page.mdx b/src/app/blog/how-to-generate-images-with-ai/page.mdx
@@ -14,33 +14,19 @@ import civitAI from '@/images/civitai.webp'
 import whyCreateAIImages from '@/images/why-create-ai-images.webp'
 import haterade from '@/images/haterade.webp'
 
-import { generateOgUrl } from '@/utils/ogUrl'
+import { createMetadata } from '@/utils/ogUrl'
 
 import ConsultingCTA from '@/components/ConsultingCTA'
 
-export const meta = {
+export const metadata = createMetadata({
   author: 'Zachary Proser',
   date: '2023-10-14',
   title: 'How to generate images with AI', 
   description: 'I have used StableDiffusion, AUTOMATIC111, DALLE and Discord bots to generate images in every style for blog posts. You can too.',
   image: aiImageGeneration,
-}
-
-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={aiImageGeneration} alt="Today we live in a golden age of AI-assisted image generation" />
 <figcaption>You can generate images using AI for free online through a variety of methods</figcaption>