From 2fd004dcd99c09fc8eae423c24b31313568f039f Mon Sep 17 00:00:00 2001 From: Caleb Jasik Date: Mon, 23 Aug 2021 15:08:20 -0500 Subject: [PATCH] Add a `titleClosure` to the `HeadSEO.astro` component (#1140) * Testing out adding a `titleClosure` to the `HeadSEO.astro` component I think the api needs a bit of improvement, but the basic idea is you can pass this in to a published astro component for specifying how you want it to format your title! * Refactor to make it pretty * Rename the `titleClosure()` prop to `formatTitle()` to be more clear * Use title, with site title as the fallback (#1143) See og:title guidance (https://developers.facebook.com/docs/sharing/webmasters/) Co-authored-by: Jonathan Neal --- docs/src/components/HeadSEO.astro | 10 +++-- docs/src/layouts/MainLayout.astro | 3 +- yarn.lock | 62 ++++++++++++++++++++++++++++++- 3 files changed, 69 insertions(+), 6 deletions(-) diff --git a/docs/src/components/HeadSEO.astro b/docs/src/components/HeadSEO.astro index 5553eb2d0..be6b016c7 100644 --- a/docs/src/components/HeadSEO.astro +++ b/docs/src/components/HeadSEO.astro @@ -5,8 +5,10 @@ export interface Props { site: any, canonicalURL: URL | string, }; -const { content = {}, canonicalURL } = Astro.props; -const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title; +const { + content = {}, + canonicalURL, + } = Astro.props; const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src; const canonicalImageSrc = new URL(imageSrc, Astro.site); const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt; @@ -15,7 +17,7 @@ const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt; - + @@ -27,7 +29,7 @@ const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt; - + diff --git a/docs/src/layouts/MainLayout.astro b/docs/src/layouts/MainLayout.astro index bfee61cd9..45eab6d0f 100644 --- a/docs/src/layouts/MainLayout.astro +++ b/docs/src/layouts/MainLayout.astro @@ -12,13 +12,14 @@ const { content = {} } = Astro.props; const currentPage = Astro.request.url.pathname; const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`; const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${currentFile}`; +const formatTitle = (content, SITE) => content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title; --- - {content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title} + {formatTitle(content, SITE)}