Skip to content

Commit 78bfde1

Browse files
committed
dynamic og and titles
1 parent 700eb86 commit 78bfde1

File tree

2 files changed

+49
-11
lines changed

2 files changed

+49
-11
lines changed

src/layouts/Layout.astro

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,23 @@ import { ViewTransitions } from "astro:transitions";
88
99
export interface Props {
1010
title: string;
11+
description?: string;
12+
image?: string;
13+
type?: "website" | "article";
14+
tags?: string[];
1115
}
1216
1317
const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
1418
15-
const resolvedImageWithDomain = new URL(
16-
"/opengraph.png",
17-
Astro.site
18-
).toString();
19+
const {
20+
title,
21+
description = "A curated collection of dev-tools and technologies from India, built to fuel software development and streamline the SDLC process. Explore hundreds of solutions that can supercharge your workflows.",
22+
image = "/opengraph.png",
23+
type = "website",
24+
tags = [],
25+
} = Astro.props;
1926
20-
const { title } = Astro.props;
27+
const resolvedImageWithDomain = new URL(image, Astro.site).toString();
2128
2229
const makeTitle = title
2330
? title + " | " + "India Dev Stack"
@@ -68,22 +75,37 @@ const makeTitle = title
6875
<ViewTransitions />
6976
<SEO
7077
title={makeTitle}
71-
description="A curated collection of dev-tools and technologies from India, built to fuel software development and streamline the SDLC process. Explore hundreds of solutions that can supercharge your workflows."
78+
description={description}
7279
canonical={canonicalURL}
7380
twitter={{
7481
creator: "@xevenbiswas",
7582
card: "summary_large_image",
83+
title: makeTitle,
84+
description: description,
85+
image: resolvedImageWithDomain,
86+
imageAlt: `${title} Screenshot`,
7687
}}
7788
openGraph={{
7889
basic: {
7990
url: canonicalURL,
80-
type: "website",
81-
title: "India Dev Stack",
91+
type: type,
92+
title: makeTitle,
8293
image: resolvedImageWithDomain,
8394
},
8495
image: {
85-
alt: "India Dev Stack Screenshot",
96+
alt: `${title} Screenshot`,
8697
},
98+
optional: {
99+
description: description,
100+
siteName: "India Dev Stack",
101+
locale: "en_US",
102+
},
103+
article:
104+
type === "article"
105+
? {
106+
tags: tags,
107+
}
108+
: undefined,
87109
}}
88110
/>
89111
</head>

src/pages/software/[slug].astro

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,25 @@ export async function getStaticPaths() {
1717
}
1818
1919
const { entry } = Astro.props;
20+
21+
const metaData = {
22+
title: `${entry.data.Name} - ${entry.data.Tagline || "Software Tool"}`,
23+
description: entry.data.Description,
24+
ogImage: entry.data.Images?.[0] || entry.data.Logo,
25+
canonical: new URL(`/software/${entry.id}`, Astro.site),
26+
data: {
27+
category: entry.data.Category,
28+
tags: entry.data.Tags,
29+
},
30+
};
2031
---
2132

22-
<Layout title={entry.data.Name}>
33+
<Layout
34+
title={metaData.title}
35+
description={metaData.description}
36+
image={metaData.ogImage}
37+
type={"article"}
38+
tags={metaData.data.tags}>
2339
<Container>
2440
<div class="mx-auto prose prose-lg mt-6 max-w-7xl">
2541
<div
@@ -58,7 +74,7 @@ const { entry } = Astro.props;
5874
<img
5975
src={entry.data.Logo}
6076
alt={entry.data.Name}
61-
class="size-10 lg:size-12 cursor-pointer hover:brightness-150 hover:saturate-150 mt-2 shadow-sm dark:shadow-orange-600 rounded-lg"
77+
class="size-8 lg:size-12 cursor-pointer hover:brightness-150 hover:saturate-150 mt-2 shadow-sm dark:shadow-orange-600 rounded-lg"
6278
/>
6379
</a>
6480
)

0 commit comments

Comments
 (0)