feat(blog): author header social icons

[OzakIOne]

Pre-flight checklist

• I have read the Contributing Guidelines on pull requests.
• If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

Prepare for blog author page and also community request #10136

Also which UI UX should we adopt for the social icons ?

• Open link in a new tab
• Keep svg logo original colors or put a docusaurus color ?
• Display the logos aside of the name or below ?
• Darkmode ?

Visual mockup

Test Plan

Preview + dogfood + unit tests

Test links

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

http://localhost:3000/tests/blog/

Related issues/PRs

Fix #10136

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	dec190e
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/6685476e01afc50008813c11
😎 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
/	🟠 76	🟢 98	🟢 96	🟢 100	Report
/docs/installation	🟠 61	🟢 97	🟢 100	🟢 100	Report
/docs/category/getting-started	🟠 75	🟢 100	🟢 100	🟠 86	Report
/blog	🟠 69	🟢 100	🟢 100	🟠 86	Report
/blog/preparing-your-site-for-docusaurus-v3	🔴 48	🟢 96	🟢 100	🟢 100	Report
/blog/tags/release	🟠 69	🟢 100	🟢 100	🟠 86	Report
/blog/tags	🟠 75	🟢 100	🟢 100	🟠 86	Report

[github-actions]

Size Change: +187 B (+0.01%)

Total Size: 1.85 MB

Filename	Size	Change
website/build/assets/css/styles.********.css	113 kB	+187 B (+0.17%)

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/codeTranslations.json	2 B
website/.docusaurus/docusaurus.config.mjs	27.3 kB
website/.docusaurus/globalData.json	123 kB
website/.docusaurus/i18n.json	930 B
website/.docusaurus/registry.js	304 kB
website/.docusaurus/routes.js	202 kB
website/.docusaurus/routesChunkNames.json	130 kB
website/.docusaurus/site-metadata.json	2.17 kB
website/build/assets/js/main.********.js	907 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.