michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add a titleClosure to the HeadSEO.astro component (#1140)

Browse source 
* 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 <jonathantneal@hotmail.com>
This commit is contained in:
Caleb Jasik 2021-08-23 15:08:20 -05:00 committed by GitHub
parent 3963cef963
commit 2fd004dcd9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 69 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
docs/src/components/HeadSEO.astro
View file

@ -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;
<link rel="canonical" href={canonicalURL}/>
<!-- OpenGraph Tags -->
<meta property="og:title" content={formattedContentTitle}/>
<meta property="og:title" content={content.title ?? SITE.title}/>
<meta property="og:type" content="article"/>
<meta property="og:url" content={canonicalURL}/>
<meta property="og:locale" content={content.ogLocale ?? OPEN_GRAPH.locale}/>
@ -27,7 +29,7 @@ const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
<!-- Twitter Tags -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content={OPEN_GRAPH.twitter}/>
<meta name="twitter:title" content={formattedContentTitle}/>
<meta name="twitter:title" content={content.title ?? SITE.title}/>
<meta name="twitter:description" content={content.description ? content.description : SITE.description}/>
<meta name="twitter:image" content={canonicalImageSrc}/>
<meta name="twitter:image:alt" content={imageAlt}/>

3
docs/src/layouts/MainLayout.astro
View file

@ -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;
---
<html dir="{content.dir ?? 'ltr'}" lang="{content.lang ?? 'en-us'}" class="initial">
<head>
<HeadCommon />
<HeadSEO {content} canonicalURL={Astro.request.canonicalURL} />
<title>{content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title}</title>
<title>{formatTitle(content, SITE)}</title>
<style>
body {
width: 100%;

62
yarn.lock
View file

@ -2501,6 +2501,66 @@ astring@^1.7.4:
globby "^11.0.3"
tar "^6.1.0"
astro@^0.18.12:
version "0.18.13"
resolved "https://registry.yarnpkg.com/astro/-/astro-0.18.13.tgz#33f8c2e7c89477fd559fbcf1adc8afc95ce48398"
integrity sha512-HWQA/C+M6Mht2Jmy6gC6Pyh4qKxQC1doMBJR9cYrCDaJs+Reyz1CkKcndI/PeJcpz3HSxAlo77sfMCXtsg8SeQ==
dependencies:
"@astrojs/markdown-support" "0.2.3"
"@astrojs/parser" "0.18.5"
"@astrojs/prism" "0.2.2"
"@astrojs/renderer-preact" "0.2.1"
"@astrojs/renderer-react" "0.2.0"
"@astrojs/renderer-svelte" "0.1.1"
"@astrojs/renderer-vue" "0.1.7"
"@babel/code-frame" "^7.12.13"
"@babel/core" "^7.14.6"
"@babel/generator" "^7.13.9"
"@babel/parser" "^7.13.15"
"@babel/traverse" "^7.13.15"
"@snowpack/plugin-postcss" "^1.4.3"
"@snowpack/plugin-sass" "^1.4.0"
acorn "^7.4.0"
astring "^1.7.4"
autoprefixer "^10.2.5"
babel-plugin-module-resolver "^4.1.0"
camel-case "^4.1.2"
cheerio "^1.0.0-rc.6"
ci-info "^3.2.0"
del "^6.0.0"
es-module-lexer "^0.4.1"
esbuild "^0.12.12"
estree-util-value-to-estree "^1.2.0"
estree-walker "^3.0.0"
fast-xml-parser "^3.19.0"
fdir "^5.0.0"
find-up "^5.0.0"
get-port "^5.1.1"
gzip-size "^6.0.0"
kleur "^4.1.4"
magic-string "^0.25.3"
mime "^2.5.2"
moize "^6.0.1"
node-fetch "^2.6.1"
path-to-regexp "^6.2.0"
picomatch "^2.2.3"
postcss "^8.2.15"
postcss-icss-keyframes "^0.2.1"
prismjs "^1.23.0"
resolve "^1.20.0"
rollup "^2.43.1"
rollup-plugin-terser "^7.0.2"
sass "^1.32.13"
semver "^7.3.5"
shorthash "^0.0.2"
slash "^4.0.0"
snowpack "^3.8.3"
string-width "^5.0.0"
supports-esm "^1.0.0"
tiny-glob "^0.2.8"
unified "^9.2.1"
yargs-parser "^20.2.7"
async-limiter@~1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
@ -9253,7 +9313,7 @@ smartwrap@^1.2.3:
wcwidth "^1.0.1"
yargs "^15.1.0"
snowpack@^3.8.6:
snowpack@^3.8.3, snowpack@^3.8.6:
version "3.8.6"
resolved "https://registry.yarnpkg.com/snowpack/-/snowpack-3.8.6.tgz#0bef5c071caef86a2f91aa5c3d5b70d0c2e2793c"
integrity sha512-EZ3Y7RtTiPvxnVFTKPfkvi2PKBrprXCvOHKWQQLBkHonf+xdtG51RiNjtrRLJeCjislAlD6OoeGHUxz76ToGHw==