Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(blog): author header social icons #10222

Merged
merged 40 commits into from
Jul 12, 2024
Merged

feat(blog): author header social icons #10222

merged 40 commits into from
Jul 12, 2024

Conversation

OzakIOne
Copy link
Contributor

@OzakIOne OzakIOne commented Jun 17, 2024

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/

CleanShot 2024-07-12 at 09 56 31

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:

Docs:

Related issues/PRs

Fix #10136

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Jun 17, 2024
Copy link

netlify bot commented Jun 17, 2024

[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...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

github-actions bot commented Jun 17, 2024

⚡️ 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

Copy link

github-actions bot commented Jun 17, 2024

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

Copy link
Collaborator

@slorber slorber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 slorber marked this pull request as draft June 20, 2024 14:52
Copy link
Collaborator

@slorber slorber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

website/blog/authors.yml Show resolved Hide resolved
packages/docusaurus-plugin-content-blog/src/authors.ts Outdated Show resolved Hide resolved
packages/docusaurus-plugin-content-blog/src/authors.ts Outdated Show resolved Hide resolved
packages/docusaurus-plugin-content-blog/src/authors.ts Outdated Show resolved Hide resolved
github: Joi.string(),
linkedin: Joi.string(),
stackoverflow: Joi.string(),
}).custom(normalizeSocials, 'Normalize social media URLs'),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: new feature This PR adds a new API or behavior.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants