-
-
Notifications
You must be signed in to change notification settings - Fork 8.5k
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
Conversation
✅ [V2]
To edit notification comments on pull requests, go to your Netlify site configuration. |
⚡️ Lighthouse report for the deploy preview of this PR
|
Size Change: +6.65 kB (+0.36%) Total Size: 1.85 MB
ℹ️ View Unchanged
|
packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Author/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Author/index.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this 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)
packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Author/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Author/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Author/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Author/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Author/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Author/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Author/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Author/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/Icon/Socials/Github/index.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this 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
github: Joi.string(), | ||
linkedin: Joi.string(), | ||
stackoverflow: Joi.string(), | ||
}).custom(normalizeSocials, 'Normalize social media URLs'), |
There was a problem hiding this comment.
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.
Motivation
Blog post authors (inline or
authors.yml
) can declare social platforms: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:
Docs:
Related issues/PRs
Fix #10136