Enhance footer with Facebook and Twitter buttons #666
Conversation
|
Deploy preview for docusaurus-preview ready! Built with commit ac315a9 |
yangshun
changed the title
docs/api-site-config.md
Outdated
| @@ -154,6 +154,8 @@ h1 { | |||
|
|
|||
| `twitter` - Set this to `true` if you want a Twitter social button to appear at the bottom of your blog posts. | |||
|
|
|||
| `twitterId` - If you want a Twitter follow button in the footer, provide a twitter id to follow. For example: `docusaurus`. | |||
There was a problem hiding this comment.
Could you change this to twitterUsername instead?
There was a problem hiding this comment.
The check for whether to load the Twitter buttons script in Site.js currently only looks at config.twitter. It should be changed to config.twitter || config.twitterUsername because some people might want the follow button but not the blog post Tweet button.
website/core/Footer.js
Outdated
| {props.config.projectName} | ||
| </a> | ||
| </div> | ||
| {props.config.twitterId ? ( |
There was a problem hiding this comment.
Use && for conditional rendering -
{props.config.twitterUsername && <div> ... </div>}
|
@yangshun Thank you for the blazingly fast reply & suggestions. Changes added Test plan:
siteConfig docs
If twitter is set to false, twitter footer still works Edit: Update facebookAppId description |
website/core/Footer.js
Outdated
| const SocialFooter = props => ( | ||
| <div> | ||
| <div> | ||
| <h5>GitHub</h5> |
There was a problem hiding this comment.
I think we don't need the headings. The social buttons are pretty self-describing in my opinion. I think it looks cleaner without them.
What do you think?
There was a problem hiding this comment.
@JoelMarcey
I am not really sure. I'll let you decide 😄
Here are some A-B testing (more like A-B-C) for you
No heading
No heading with 5px top-bottom padding
With heading
There was a problem hiding this comment.
I kinda like one of the first two better 😄
But, I am going to let a real UI person decide - what do you think @yangshun ?
There was a problem hiding this comment.
The second one looks best to me! I do agree that the titles are kinda redundant, so the third is my least favorite. How do they look like on mobile?
There was a problem hiding this comment.
Simulated iphone X using the 2nd one
There was a problem hiding this comment.
That looks good to me. #2, then?
There was a problem hiding this comment.
PR commit updated using #2.
Extra thing to note is that the share dialog button won't work because the facebook app not being set to public.
App Not Setup: This app is still in development mode, and you don't have access to it.
Issue related is #625 . But after that issue is fixed, this will work as well.
I think we also need to update the doc on facebookAppId so that user will make sure to set their app to public (not development mode)
There was a problem hiding this comment.
This looks good.
@yangshun Our app id in siteConfig.js isn't working, you say?
I will let you stamp this too.
Motivation
This feature/enhancement was requested in #218 .
Have you read the Contributing Guidelines on pull requests?
Yes
Test Plan
Test 4 cases by tweaking siteConfig.js:
4.. No twitter (facebookAppId exist & twitterId does not exist)
Check updated docs for api siteconfig
docsfrom .npmignoreRun test in root folder
Related Issues
#625 Facebook share dialog won't work if app is not set to public