Default post image and meta tags

ashsmith · Sep 12, 2023 · a71793e · a71793e
1 parent a111d11
commit a71793e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 25 deletions.
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -8,14 +8,18 @@ export default function Card({ post }: { post: Post }) {
   return (
     <div className="bg-white rounded-lg overflow-hidden ring-1 ring-slate-900/5 flex p-1 mb-3 md:p-8 md:mb-5">
       <div className="relative z-10 overflow-hidden flex-none -m-1 mr-2 md:-m-8 md:mr-8 w-32 md:w-64 h-auto bg-slate-100">
-        {post.mainImage && (
+        {post.mainImage ? (
           <Image
             className="absolute max-w-none object-scale-down object-center w-2 md:w-full"
             src={urlForImage(post.mainImage).width(300).height(200).url()}
             width={300}
             height={200}
             alt=""
           />
+        ) : (
+          <div className="bg-gradient-to-r from-cyan-500 to-blue-500 flex items-center justify-center w-full h-full">
+            <p className="text-white text-center p-5">{post.title}</p>
+            </div>
         )}
       </div>
       <div className="min-w-0 py-0.5 pr-5">

diff --git a/src/pages/api/fallbackImage.tsx b/src/pages/api/fallbackImage.tsx
@@ -10,32 +10,10 @@ export default async function handler(req: NextRequest) {
   const title = searchParams.get('title')
   const width = parseInt(searchParams.get('w')) || 500
   const height = parseInt(searchParams.get('h')) || 300
-  if (!title) {
-    return new ImageResponse(<>{'Visit with "?username=vercel"'}</>, {
-      width,
-      height,
-    })
-  }
-
   return new ImageResponse(
     (
-      <div
-        style={{
-          fontSize: 20,
-          color: 'black',
-          background: '#f6f6f6',
-          textAlign: 'center',
-          width: '100%',
-          height: '100%',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          display: 'flex',
-        }}
-      >
-        <p style={{ textAlign: 'center', padding: 10 }}>
-          {title.substring(0, 100)}
-        </p>
+      <div className="bg-gradient-to-r from-cyan-500 to-blue-500 flex items-center justify-center w-full h-full">
+        {title && <p className="text-white text-center p-5">{title}</p>}
       </div>
     ),
     {

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,4 +1,5 @@
 import type { GetStaticProps, InferGetStaticPropsType } from 'next'
+import Head from 'next/head'
 import Image from 'next/image'
 import { useLiveQuery } from 'next-sanity/preview'
 
@@ -43,6 +44,13 @@ export default function IndexPage(
   const [posts] = useLiveQuery<Post[]>(props.posts, postsQuery)
   return (
     <Container>
+    <Head>
+      <title>Ash Smith - Senior Software Engineer. Bath, UK</title>
+      <meta
+        name="description"
+        content="Senior Software Engineer. Bath, UK"
+      />
+    </Head>
       <div className="bg-white rounded-lg overflow-hidden md:ring-1 ring-slate-900/5 flex p-1 md:p-8 mb-5">
         <div className="relative z-10 hidden flex-none overflow-hidden -m-8 mr-2 md:mr-8 w-24 md:w-64 h-auto items-center inline-flex md:block">
           <Image

diff --git a/src/pages/post/[slug].tsx b/src/pages/post/[slug].tsx
@@ -1,5 +1,6 @@
 import { PortableText } from '@portabletext/react'
 import type { GetStaticProps, InferGetStaticPropsType } from 'next'
+import Head from 'next/head'
 import Image from 'next/image'
 import { useLiveQuery } from 'next-sanity/preview'
 
@@ -54,6 +55,20 @@ export default function ProjectSlugRoute(
 
   return (
     <Container>
+    <Head>
+      <title>{post.title}</title>
+      <meta name="description" content={post.title} />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta
+        name="og:image"
+        content={`https://3nrgyfm9aj.execute-api.eu-west-1.amazonaws.com/dev/hello?name=${encodeURI(
+          post.title,
+        )}`}
+      />
+      <meta name="og:title" content={post.title} />
+      <meta name="twitter:site" content="@ashsmithco" />
+      <meta name="twitter:creator" content="@ashsmithco" />
+    </Head>
       <section className="post">
         {post.mainImage && (
           <Image