Skip to content

Commit 59cfa4e

Browse files
author
Predrag
authored
Add meta tags via helmet (#23)
1 parent 4736ee3 commit 59cfa4e

File tree

1 file changed

+136
-75
lines changed

1 file changed

+136
-75
lines changed

‎src/templates/CaseStudy.js‎

Lines changed: 136 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import "prismjs";
1313
import "prismjs/components/prism-python";
1414
import "prismjs/themes/prism-okaidia.css";
1515
import AuthorImages from "./AuthorImages";
16+
import { Helmet } from "react-helmet";
1617

1718
const ImageModal = () => {
1819
return (
@@ -180,94 +181,154 @@ export default function BlogPostTemplate({ data }) {
180181
}, []);
181182

182183
return (
183-
<Article isDark={false}>
184-
<div className="pt-16 lg:pt-20 relative bg-white">
185-
<article className="container relative lg:pt-20 pt-10 pb-10 lg:pb-32">
186-
<div className="announcement-body space-y-6 lg:space-y-6">
187-
<div className="space-y-8 lg:space-y-10">
188-
<img
189-
src={post.frontmatter.feature_image}
190-
alt={post.frontmatter.title}
191-
className="rounded-[20px]"
192-
/>
193-
<div className="lg:space-y-[36px] space-y-[26px]">
194-
<h1 className="heading-600-lg lg:max-w-[720px]">
195-
{post.frontmatter.title}
196-
</h1>
197-
<div className="flex flew-row mb-6">
198-
<div className="relative">
199-
<AuthorImages frontmatter={post.frontmatter} />
200-
</div>
201-
<div className="pl-3 lg:px-4 flex flex-col justify-center">
202-
<div className="flex flex-wrap text-sm lg:text-base">
203-
{post.frontmatter.authors.map((author, idx) => (
204-
<div key={author.name} className="flex items-center">
205-
{idx > 0 && <span className="mx-1">and</span>}
206-
{author.website ? (
207-
<a href={author.website} className="link-label">
208-
{author.name}
209-
</a>
210-
) : (
211-
<span className="text-midnight-600 border-midnight-600 leading-none pb-0 inline-block duration-200">
212-
{author.name}
213-
</span>
214-
)}
215-
</div>
216-
))}
184+
<>
185+
<Helmet>
186+
<title>{post.frontmatter.meta_title || post.frontmatter.title}</title>
187+
<meta
188+
name="description"
189+
content={
190+
post.frontmatter.meta_description || post.frontmatter.excerpt
191+
}
192+
/>
193+
<meta property="og:site_name" content="Datacebo" />
194+
<meta property="og:type" content="article" />
195+
<meta
196+
property="og:title"
197+
content={post.frontmatter.meta_title || post.frontmatter.title}
198+
/>
199+
<meta
200+
property="og:description"
201+
content={
202+
post.frontmatter.meta_description || post.frontmatter.excerpt
203+
}
204+
/>
205+
<meta
206+
property="og:url"
207+
content={`https://sdv.dev/community-case-studies/${post.frontmatter.slug}/`}
208+
/>
209+
<meta
210+
property="og:image"
211+
content={post.frontmatter.og_image || post.frontmatter.feature_image}
212+
/>
213+
<meta
214+
property="article:published_time"
215+
content={post.frontmatter.published_at}
216+
/>
217+
<meta
218+
property="article:modified_time"
219+
content={post.frontmatter.updated_at || post.frontmatter.published_at}
220+
/>
221+
<meta name="twitter:card" content="summary_large_image" />
222+
<meta
223+
name="twitter:title"
224+
content={post.frontmatter.twitter_title || post.frontmatter.title}
225+
/>
226+
<meta
227+
name="twitter:description"
228+
content={
229+
post.frontmatter.twitter_description ||
230+
post.frontmatter.meta_description ||
231+
post.frontmatter.excerpt
232+
}
233+
/>
234+
<meta
235+
name="twitter:image"
236+
content={
237+
post.frontmatter.twitter_image || post.frontmatter.feature_image
238+
}
239+
/>
240+
<meta name="twitter:site" content="https://twitter.com/datacebo/" />
241+
<meta name="twitter:creator" content="@datacebo" />
242+
</Helmet>
243+
<Article isDark={false}>
244+
<div className="pt-16 lg:pt-20 relative bg-white">
245+
<article className="container relative lg:pt-20 pt-10 pb-10 lg:pb-32">
246+
<div className="announcement-body space-y-6 lg:space-y-6">
247+
<div className="space-y-8 lg:space-y-10">
248+
<img
249+
src={post.frontmatter.feature_image}
250+
alt={post.frontmatter.title}
251+
className="rounded-[20px]"
252+
/>
253+
<div className="lg:space-y-[36px] space-y-[26px]">
254+
<h1 className="heading-600-lg lg:max-w-[720px]">
255+
{post.frontmatter.title}
256+
</h1>
257+
<div className="flex flew-row mb-6">
258+
<div className="relative">
259+
<AuthorImages frontmatter={post.frontmatter} />
217260
</div>
218-
<div className="flex text-xs lg:text-sm">
219-
<div className="text-midnight-600">
220-
{new Date(
221-
post.frontmatter.published_at
222-
).toLocaleDateString("en-US", {
223-
year: "numeric",
224-
month: "long",
225-
day: "numeric",
226-
})}
261+
<div className="pl-3 lg:px-4 flex flex-col justify-center">
262+
<div className="flex flex-wrap text-sm lg:text-base">
263+
{post.frontmatter.authors.map((author, idx) => (
264+
<div key={author.name} className="flex items-center">
265+
{idx > 0 && <span className="mx-1">and</span>}
266+
{author.website ? (
267+
<a href={author.website} className="link-label">
268+
{author.name}
269+
</a>
270+
) : (
271+
<span className="text-midnight-600 border-midnight-600 leading-none pb-0 inline-block duration-200">
272+
{author.name}
273+
</span>
274+
)}
275+
</div>
276+
))}
227277
</div>
228-
<div className="mx-2 text-midnight-600">|</div>
229-
<div className="text-blue-600">
230-
{post.frontmatter?.externalTag?.name}
278+
<div className="flex text-xs lg:text-sm">
279+
<div className="text-midnight-600">
280+
{new Date(
281+
post.frontmatter.published_at
282+
).toLocaleDateString("en-US", {
283+
year: "numeric",
284+
month: "long",
285+
day: "numeric",
286+
})}
287+
</div>
288+
<div className="mx-2 text-midnight-600">|</div>
289+
<div className="text-blue-600">
290+
{post.frontmatter?.externalTag?.name}
291+
</div>
231292
</div>
232293
</div>
233294
</div>
234295
</div>
235-
</div>
236296

237-
<AnnouncementBody />
297+
<AnnouncementBody />
298+
</div>
299+
<SocialDesktop post={post.frontmatter} />
238300
</div>
239-
<SocialDesktop post={post.frontmatter} />
240-
</div>
241-
</article>
242-
<ImageModal />
301+
</article>
302+
<ImageModal />
243303

244-
<div className="container max-w-7xl h-full z-0 mx-auto py-16 lg:py-24">
245-
<div className="relative py-24 lg:py-28 px-4">
246-
<div className="absolute inset-0 rounded-[20px] border border-teal-200">
247-
<GatsbyImage
248-
image={data.ctaBg.childImageSharp.gatsbyImageData}
249-
loading="eager"
250-
alt="The Synthetic Data Vault"
251-
className="h-full rounded-[20px] lg:block"
252-
imgClassName="w-full"
253-
/>
254-
</div>
255-
<div className="text-center relative z-10 text-midnight-950 space-y-6">
256-
<h2 className="heading-500-md font-medium">
257-
Let’s put synthetic data to work
258-
</h2>
304+
<div className="container max-w-7xl h-full z-0 mx-auto py-16 lg:py-24">
305+
<div className="relative py-24 lg:py-28 px-4">
306+
<div className="absolute inset-0 rounded-[20px] border border-teal-200">
307+
<GatsbyImage
308+
image={data.ctaBg.childImageSharp.gatsbyImageData}
309+
loading="eager"
310+
alt="The Synthetic Data Vault"
311+
className="h-full rounded-[20px] lg:block"
312+
imgClassName="w-full"
313+
/>
314+
</div>
315+
<div className="text-center relative z-10 text-midnight-950 space-y-6">
316+
<h2 className="heading-500-md font-medium">
317+
Let’s put synthetic data to work
318+
</h2>
259319

260-
<a
261-
href="/contact/"
262-
className="all-button inline-block bg-midnight-950 hover:bg-midnight-800 text-white"
263-
>
264-
Contact us
265-
</a>
320+
<a
321+
href="/contact/"
322+
className="all-button inline-block bg-midnight-950 hover:bg-midnight-800 text-white"
323+
>
324+
Contact us
325+
</a>
326+
</div>
266327
</div>
267328
</div>
268329
</div>
269-
</div>
270-
</Article>
330+
</Article>
331+
</>
271332
);
272333
}
273334

0 commit comments

Comments
 (0)