Continue porting posts over to the new metadata system

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

Hide file tree

Showing 15 changed files with 73 additions and 254 deletions.
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'
@@ -28,13 +27,13 @@ export const metadata = createMetadata({
     image: shipLikeCrazy
 });
 
-export default (props) => <ArticleLayout meta={metadata} {...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 meta={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/building-nuxt-portfolio/page.mdx b/src/app/blog/building-nuxt-portfolio/page.mdx
@@ -1,35 +1,21 @@
 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: "2014-01-01",
   title: "Building the ultimate portfolio site with Nuxt.js and Netlify.",
   description: "A technical deep dive on building a portfolio site that is beautiful, blazing fast and 100% SEO optimized",
   href: "https://itnext.io/building-the-ultimate-portfolio-site-with-nuxt-js-and-netlify-beautiful-blazing-fast-100-seod-102913a60cfd?sk=796ec0cdf5ab4325f66a8dde48df1eff"
-}
-
-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} />
 
 ## Note - this article is pretty old at this point!
 
-<Button href={meta.href}>Read the article</Button>
+<Button href={metadata.href}>Read the article</Button>
 
 
 
diff --git a/src/app/blog/canyonrunner-html5-game/page.mdx b/src/app/blog/canyonrunner-html5-game/page.mdx
@@ -15,31 +15,17 @@ import multipleEndings from '@/images/canyonrunner-screens/CanyonRunner-Two-Diff
 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: "2019-02-28",
   title: "CanyonRunner - a complete HTML5 game",
   description: "I open sourced my first HTML5 game as a resource for other developers working with Phaser.js or wanting to build their own game",
   image: canyonRunnerBlog,
-}
-
-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} />
 
 <Link
   href="https://canyonrunner.pages.dev">

diff --git a/src/app/blog/catfacts/page.mdx b/src/app/blog/catfacts/page.mdx
@@ -5,31 +5,17 @@ import Link from 'next/link'
 import catfactsBlog from '@/images/catfacts-screens/catfacts-blog.webp'
 import catfactsScreenshot from '@/images/catfacts-screens/catfacts.webp'
 
-import { generateOgUrl } from '@/utils/ogUrl'
+import { createMetadata } from '@/utils/createMetadata'
 
-export const meta = {
+export const metadata = createMetadata({
     author: "Zachary Proser",
     date: "2018-01-08",
     title: "CatFacts in Node.js",
     description: "PICK UP THE PHONE - ITS CATFACTS!",
     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="pick up the phone - it's CATFACTS"/>