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(theme-classic): themeConfig navbar/footer logos accept className/style + update Meta Open-Source Logo #7643

Merged
merged 11 commits into from Jun 23, 2022

Conversation

slorber
Copy link
Collaborator

@slorber slorber commented Jun 17, 2022

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

For logo customization flexibility, we should be able to provide className or inline styles directly from the theme config

This is also a good workaround for the Infima logo maxWidth being currently a bit too opinionated (see facebookincubator/infima#260)

After Infima upgrade, we can use its sensible default footer logo sizing (30rem) which should be fine for most sites

cc @zpao @yangshun

Test Plan

test on our own website + config validation unit tests

Test links

Deploy preview: https://deploy-preview-7643--docusaurus-2.netlify.app/

On desktop:

CleanShot 2022-06-17 at 14 21 35@2x

On mobile:

CleanShot 2022-06-17 at 14 21 49@2x

CleanShot 2022-06-17 at 14 22 18@2x

Related issues/PRs

facebookincubator/infima#260

#7639

@slorber slorber added the pr: new feature This PR adds a new API or behavior. label Jun 17, 2022
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Jun 17, 2022
href: 'https://opensource.fb.com',
style: {
maxWidth: '500px',
},
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

temporary, we can remove it later if we agree on something on the Infima side

Copy link
Collaborator

Choose a reason for hiding this comment

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

Why inline style, though? Why not CSS + className?

@@ -148,8 +148,11 @@ const config = {
alt: 'Meta Open Source Logo',
// This default includes a positive & negative version, allowing for
// appropriate use depending on your site's style.
src: 'img/meta_opensource_logo_negative.png',
src: '/img/meta_opensource_logo_negative.svg',
Copy link
Collaborator

Choose a reason for hiding this comment

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

Do we need this leading slash?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

no :D

With/without it's the same afaik, and historically many config elements don't have one

But I'd prefer to always have one in the future to make it more explicit it's not a relative path. Does it make sense?

Copy link
Collaborator

Choose a reason for hiding this comment

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

Absolute paths, IMO, are always relative to the domain. The fact that we automatically prepend the base URL is quite magical. But I'm fine with either since it's not strictly a relative path either.

Copy link
Collaborator Author

@slorber slorber Jun 17, 2022

Choose a reason for hiding this comment

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

yes 🤪 I know, no ideal choice there. I'd prefer to have leading / everywhere, but this is just my personal opinion, and Docusaurus v1 did not have any leading / in docs/configs either so 🤷‍♂️ . I can revert it if needed.

@yangshun you remember why historically we usually don't have any leading /?

@netlify
Copy link

netlify bot commented Jun 17, 2022

[V2]

Name Link
🔨 Latest commit 922beb5
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/62b42b6984a99200089b024b
😎 Deploy Preview https://deploy-preview-7643--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 settings.

@github-actions
Copy link

github-actions bot commented Jun 17, 2022

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟠 84 🟢 100 🟢 100 🟢 100 🟢 90 Report
/docs/installation 🟢 91 🟢 100 🟢 100 🟢 100 🟢 90 Report

@github-actions
Copy link

github-actions bot commented Jun 17, 2022

Size Change: +197 B (0%)

Total Size: 802 kB

Filename Size Change
website/build/assets/js/main.********.js 604 kB +211 B (0%)
ℹ️ View Unchanged
Filename Size Change
website/.docusaurus/globalData.json 52.6 kB 0 B
website/build/assets/css/styles.********.css 106 kB 0 B
website/build/index.html 38.9 kB -14 B (0%)

compressed-size-action

# Conflicts:
#	packages/docusaurus-theme-classic/src/theme/Logo/index.tsx
@slorber slorber merged commit 42ab07f into main Jun 23, 2022
@slorber slorber deleted the slorber/site-meta-logo branch June 23, 2022 09:22
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.

None yet

3 participants