diff --git a/astro/public/img/og/articles-developers-v1.png b/astro/public/img/og/articles-developers-v1.png new file mode 100644 index 0000000000..c182a2b23b Binary files /dev/null and b/astro/public/img/og/articles-developers-v1.png differ diff --git a/astro/public/img/articles-developers.png b/astro/public/img/og/articles-developers.png similarity index 100% rename from astro/public/img/articles-developers.png rename to astro/public/img/og/articles-developers.png diff --git a/astro/public/img/og/docs-developers-v1.png b/astro/public/img/og/docs-developers-v1.png new file mode 100644 index 0000000000..a238ff9de7 Binary files /dev/null and b/astro/public/img/og/docs-developers-v1.png differ diff --git a/astro/public/img/og/quickstarts-developers-v1.png b/astro/public/img/og/quickstarts-developers-v1.png new file mode 100644 index 0000000000..dbd74de142 Binary files /dev/null and b/astro/public/img/og/quickstarts-developers-v1.png differ diff --git a/astro/src/components/Head.astro b/astro/src/components/Head.astro index 5cd5014146..1c19c9fc30 100644 --- a/astro/src/components/Head.astro +++ b/astro/src/components/Head.astro @@ -10,7 +10,7 @@ interface Props { } const { description, title, openGraphImage, canonicalUrl, searchFilters = {} } = Astro.props; -const openGraphImageUrl = openGraphImage ? new URL(openGraphImage, Astro.url): new URL("/img/articles-developers.png", Astro.url); +const openGraphImageUrl = openGraphImage ? new URL(openGraphImage, Astro.url): new URL("/img/og/articles-developers-v1.png", Astro.url); const normalizedUrl = Astro.url.toString().replace(/.html$/, ''); const hasDark = !Astro.url.pathname.startsWith('/blog'); const isProd = import.meta.env.PROD as boolean; diff --git a/astro/src/layouts/Article.astro b/astro/src/layouts/Article.astro index f266d0e58f..4d9d0b8600 100644 --- a/astro/src/layouts/Article.astro +++ b/astro/src/layouts/Article.astro @@ -7,6 +7,8 @@ import ArticleNav from '../components/nav/ArticleNav.astro'; let { frontmatter, section } = Astro.props; section = frontmatter.section ? frontmatter.section : section; +const openGraphImage = '/img/og/articles-developers-v1.png'; + const sections = [ { "title": "Authentication", @@ -130,7 +132,7 @@ if (Astro.url.pathname.startsWith("/articles/login-authentication-workflows")) { } } --- - + diff --git a/astro/src/layouts/Default.astro b/astro/src/layouts/Default.astro index 3f48c4f6eb..d8b28fd975 100644 --- a/astro/src/layouts/Default.astro +++ b/astro/src/layouts/Default.astro @@ -23,6 +23,7 @@ interface Props { headings?: any[]; icon?: string; image?: string; + openGraphImage?: string; section?: string; sections?: any[]; sideMenu?: any[]; @@ -44,6 +45,7 @@ let { icon, darkIcon, image, + openGraphImage, section, sections = [], sideMenu = [], @@ -118,7 +120,7 @@ const tocStyles = [ - + diff --git a/astro/src/layouts/Docs.astro b/astro/src/layouts/Docs.astro index 1135d53588..a5208bda1a 100644 --- a/astro/src/layouts/Docs.astro +++ b/astro/src/layouts/Docs.astro @@ -5,6 +5,9 @@ import DocsSideNav from 'src/components/side-nav/DocsSideNav.astro'; import { Category } from '../tools/docs'; let { frontmatter, headings, navContext, noSideNav } = Astro.props; + +const openGraphImage = '/img/og/docs-developers-v1.png' + let currentCat: Category = navContext.category; const breadcrumbs = []; const searchFilters: { [key: string]: string[] } = { @@ -33,6 +36,7 @@ if (frontmatter.subcategory) { cta="NONE" contribute={false} {breadcrumbs} + {openGraphImage} {searchFilters} maxTocDepth={3} {...Astro.props}> diff --git a/astro/src/layouts/Quickstart.astro b/astro/src/layouts/Quickstart.astro index f8664b55bd..d560cd1164 100644 --- a/astro/src/layouts/Quickstart.astro +++ b/astro/src/layouts/Quickstart.astro @@ -2,6 +2,8 @@ import { getCollection } from "astro:content"; import Default from "./Default.astro"; +const openGraphImage = '/img/og/quickstarts-developers-v1.png'; + const quickstarts = await getCollection("quickstarts"); import { quickstartSections } from '../pages/docs/quickstarts/quickstart-sections'; @@ -15,7 +17,7 @@ const sections = quickstartSections color: qsSection.color, })) --- - +