Add autogenerated OG Images for each post

lazarelianamonica · Feb 2, 2022 · b9bda0d · b9bda0d
1 parent 5a6e35a
commit b9bda0d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/components/TitleAndMetaTags.js b/components/TitleAndMetaTags.js
@@ -30,7 +30,8 @@ export function TitleAndMetaTags({ url, pathname, title, type, description, bann
 
   function docSearchCallback() {
     if (typeof docsearch == 'function') {
-      docsearch({ // eslint-disable-line
+      // eslint-disable-next-line
+      docsearch({
         appId: 'BPNL9VRVWI',
         apiKey: '4e224ba0c25e61356926e32048d5a110',
         indexName: 'planetscale-docs',
@@ -57,13 +58,13 @@ export function TitleAndMetaTags({ url, pathname, title, type, description, bann
       <meta name='description' content={description}></meta>
 
       <meta property='og:url' content={`${url}/${pathname}`} />
-      <meta property='og:image' content={`${url}/${banner}`} />
+      <meta property='og:image' content={banner} />
       <meta property='og:type' content={type} />
       <meta property='og:title' content={title + ' - Documentation - PlanetScale'} />
       <meta property='og:description' content={description} />
 
       <meta name='twitter:url' content={`${url}/${pathname}`} />
-      <meta name='twitter:image' content={`${url}/${banner}`} />
+      <meta name='twitter:image' content={banner} />
       <meta name='twitter:title' content={title + ' - Documentation - PlanetScale'} />
       <meta name='twitter:description' content={description} />
       <meta name='twitter:site' content='@planetscaledata' />
@@ -81,7 +82,7 @@ TitleAndMetaTags.defaultProps = {
   title: 'PlanetScale - Serverless Database for Developers',
   type: 'website',
   description: 'Start small and grow to massive scale',
-  banner: 'img/internals/social_share.png',
+  banner: 'https://docs.planetscale.com/img/internals/social_share.png',
   schemaOrgJSONLD: {
     '@context': 'http://schema.org',
     '@type': 'Organization',

diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/[category]/[post].js b/pages/[category]/[post].js
@@ -7,12 +7,17 @@ import { TitleAndMetaTags } from '../../components/TitleAndMetaTags'
 import { getAllPosts, getPostBySlug } from '../../lib/post'
 
 export default function Post({ frontmatter, body, fields }) {
+  const encodedTitle = encodeURI(frontmatter.title)
   return (
     <Layout>
       <TitleAndMetaTags
         title={frontmatter.title}
         description={frontmatter.subtitle ? frontmatter.subtitle : ''}
-        banner={frontmatter.banner ? frontmatter.banner : '/img/internals/social_share.png'}
+        banner={
+          frontmatter.banner
+            ? frontmatter.banner
+            : `https://og-image.planetscale.com/${encodedTitle}.png?theme=dark&direction=row&md=1&fontSize=100px&images=https%3A%2F%2Fog-image.planetscale.com%2Fimages%2Fps-logo-white.svg`
+        }
         pathname={`${fields.slug}`}
       />
       <MDXContent

diff --git a/pages/index.js b/pages/index.js
@@ -10,7 +10,11 @@ import { TitleAndMetaTags } from '../components/TitleAndMetaTags'
 export default function Overview() {
   return (
     <Layout>
-      <TitleAndMetaTags title='Overview' pathname='overview' />
+      <TitleAndMetaTags
+        title='Overview'
+        pathname='overview'
+        banner='https://og-image.planetscale.com/Documentation%20Overview.png?theme=dark&direction=row&md=1&fontSize=100px&images=https%3A%2F%2Fog-image.planetscale.com%2Fimages%2Fps-logo-white.svg'
+      />
 
       <h1 className='text-3xl font-semibold'>PlanetScale documentation</h1>
       <p className='mb-4 text-lg text-secondary'>