feat(blog): author header social icons

[OzakIOne]

Motivation

Blog post authors (inline or authors.yml) can declare social platforms:

slorber:
  name: Sébastien Lorber
  title: Docusaurus maintainer
  url: https://sebastienlorber.com
  image_url: https://github.com/slorber.png
  socials:
    x: sebastienlorber
    github: slorber

https://deploy-preview-10222--docusaurus-2.netlify.app/blog/

We support predefined icons for x, twitter, linkedin, github and stackoverflow, and you can just pass a handle/username. It's possible to add custom platforms too, where the value is the social profile URLs.

To register a custom icons for custom platforms, you'd have to swizzle @theme/BlogPostItem/Header/Author/Socials

Test Plan

Preview + dogfood + unit tests

Test links

Demo:

• https://deploy-preview-10222--docusaurus-2.netlify.app/blog/
• http://deploy-preview-10222--docusaurus-2.netlify.app/tests/blog/

Docs:

• https://deploy-preview-10222--docusaurus-2.netlify.app/docs/blog/#global-authors
• https://deploy-preview-10222--docusaurus-2.netlify.app/docs/api/plugins/@docusaurus/plugin-content-blog/#markdown-front-matter

Related issues/PRs

Fix #10136

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	42dae65
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/6690dc875a47210008535cd7
😎 Deploy Preview	https://deploy-preview-10222--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	Report
/	🟠 65	🟢 98	🟢 96	🟢 100	Report
/docs/installation	🟠 57	🟢 97	🟢 100	🟢 100	Report
/docs/category/getting-started	🟠 75	🟢 100	🟢 100	🟠 86	Report
/blog	🟠 70	🟢 100	🟢 100	🟠 86	Report
/blog/preparing-your-site-for-docusaurus-v3	🟠 53	🟢 96	🟢 100	🟢 100	Report
/blog/tags/release	🟠 69	🟢 100	🟢 100	🟠 86	Report
/blog/tags	🟠 75	🟢 100	🟢 100	🟠 86	Report

[github-actions]

Size Change: +6.65 kB (+0.36%)

Total Size: 1.85 MB

Filename	Size	Change
website/.docusaurus/docusaurus.config.mjs	27.4 kB	+35 B (+0.13%)
website/.docusaurus/registry.js	306 kB	+2.11 kB (+0.7%)
website/.docusaurus/routes.js	203 kB	+586 B (+0.29%)
website/.docusaurus/routesChunkNames.json	131 kB	+1.06 kB (+0.82%)
website/build/assets/css/styles.********.css	113 kB	+804 B (+0.71%)
website/build/assets/js/main.********.js	909 kB	+2.05 kB (+0.23%)

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/codeTranslations.json	2 B
website/.docusaurus/globalData.json	123 kB
website/.docusaurus/i18n.json	930 B
website/.docusaurus/site-metadata.json	2.17 kB
website/build/index.html	38.1 kB

_{compressed-size-action}

[slorber]

Not sure how these social icons should display yet, but we need to discuss that.

We'd need many dogfood examples here to review, covering many distinct blog post situations: https://deploy-preview-10222--docusaurus-2.netlify.app/tests/blog/

One concern I have using React SVG components meant to be repeated on a page is the static markup duplication. It could be more optimized to use external SVGs, but let's figure that out later (see #5865)

[slorber]

Let's focus on this PR first, since we need to merge it before the authors pages feature

[slorber]

Maybe we'd want to have .unknown() to allow users to pass extra social platforms?

We could render them with 🔗 or 🌐 icon by default?

Note your type already supports extra attributes ([key: string]: string;) so validation should do it as well

And unit tests should ensure we reject things that we don't want, like {twitch: {xyz: 42}}. I think you need Joi.object().pattern() for that.