From b263e2d1dc8a924fc0c4066f10acf8d56359fdd7 Mon Sep 17 00:00:00 2001
From: endiliey <endiliey@gmail.com>
Date: Wed, 16 May 2018 11:47:44 +0800
Subject: [PATCH 1/7] enhance footer with social media buttons

---
 docs/api-site-config.md |  3 ++
 website/core/Footer.js  | 67 +++++++++++++++++++++++++++--------------
 website/siteConfig.js   |  1 +
 3 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/docs/api-site-config.md b/docs/api-site-config.md
index 1371271ce942..8ce061ced7ef 100644
--- a/docs/api-site-config.md
+++ b/docs/api-site-config.md
@@ -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 at the bottom of your page, provide a twitter id to follow. For example: `docusaurus`
+
 `twitterImage` - Local path to your Twitter card image (e.g., `img/myImage.png`). This image will show up on the Twitter card when your site is shared on Twitter.
 
 `useEnglishUrl` - If you do not have [translations](guides-translation.md) enabled (e.g., by having a `languages.js` file), but still want a link of the form `/docs/en/doc.html` (with the `en`), set this to `true`.
@@ -231,6 +233,7 @@ const siteConfig = {
   facebookAppId: '1615782811974223',
   facebookPixelId: '352490515235776',
   twitter: 'true',
+  twitterId: 'docusaurus',
   twitterImage: 'img/docusaurus.png',
   ogImage: 'img/docusaurus.png',
 };
diff --git a/website/core/Footer.js b/website/core/Footer.js
index 540305f05a3c..4c13b0bca19a 100644
--- a/website/core/Footer.js
+++ b/website/core/Footer.js
@@ -8,21 +8,51 @@ const PropTypes = require('prop-types');
 
 const React = require('react');
 
-const GitHubButton = props => (
-  <a
-    className="github-button" // part of the https://buttons.github.io/buttons.js script in siteConfig.js
-    href={`https://github.com/${props.config.organizationName}/${props.config.projectName}`}
-    data-icon="octicon-star"
-    data-count-href={`/${props.config.organizationName}/${props.config.projectName}/stargazers`}
-    data-show-count="true"
-    data-count-aria-label="# stargazers on GitHub"
-    aria-label="Star this project on GitHub"
-  >
-    Star
-  </a>
+const SocialFooter = props => (
+  <div>
+    <div>
+      <h5>Github</h5>
+      <a
+        className="github-button" // part of the https://buttons.github.io/buttons.js script in siteConfig.js
+        href={`https://github.com/${props.config.organizationName}/${
+          props.config.projectName
+        }`}
+        data-count-href={`/${props.config.organizationName}/${
+          props.config.projectName
+        }/stargazers`}
+        data-show-count="true"
+        data-count-aria-label="# stargazers on GitHub"
+        aria-label="Star this project on GitHub">
+        {props.config.projectName}
+      </a>
+    </div>
+    {props.config.twitterId ? (
+      <div>
+        <h5>Twitter</h5>
+        <a
+          href={`https://twitter.com/${props.config.twitterId}`}
+          className="twitter-follow-button">
+          Follow @{props.config.twitterId}
+        </a>
+      </div>
+    ) : null}
+    {props.config.facebookAppId ? (
+      <div>
+        <h5>Facebook</h5>
+        <div
+          className="fb-like"
+          data-href={props.config.url}
+          data-layout="standard"
+          data-share="true"
+          data-width="225"
+          data-show-faces="false"
+        />
+      </div>
+    ) : null}
+  </div>
 );
 
-GitHubButton.propTypes = {
+SocialFooter.propTypes = {
   config: PropTypes.object
 };
 
@@ -77,17 +107,8 @@ class Footer extends React.Component {
             >
               User Showcase
             </a>
-            <a href="https://twitter.com/docusaurus">
-              Twitter
-            </a>
-          </div>
-          <div>
-            <h5>More</h5>
-            <a href="https://github.com/facebook/docusaurus">
-              GitHub
-            </a>
-            <GitHubButton config={this.props.config} />
           </div>
+          <SocialFooter config={this.props.config} />
         </section>
 
         <a
diff --git a/website/siteConfig.js b/website/siteConfig.js
index f807ba9f95b8..ca23b9209c5e 100644
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@@ -50,6 +50,7 @@ const siteConfig = {
   gaTrackingId: 'UA-44373548-31',
   facebookAppId: '1615782811974223',
   twitter: 'true',
+  twitterId: 'docusaurus',
   ogImage: 'img/docusaurus.png',
   twitterImage: 'img/docusaurus.png',
   onPageNav: 'separate',

From 674ef16b55729a49ce07c4421cff4b5ef36a7277 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Tue, 15 May 2018 21:57:08 -0700
Subject: [PATCH 2/7] Update api-site-config.md

---
 docs/api-site-config.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api-site-config.md b/docs/api-site-config.md
index 8ce061ced7ef..d13401593d66 100644
--- a/docs/api-site-config.md
+++ b/docs/api-site-config.md
@@ -154,7 +154,7 @@ 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 at the bottom of your page, provide a twitter id to follow. For example: `docusaurus`
+`twitterId` - If you want a Twitter follow button in the footer, provide a twitter id to follow. For example: `docusaurus`.
 
 `twitterImage` - Local path to your Twitter card image (e.g., `img/myImage.png`). This image will show up on the Twitter card when your site is shared on Twitter.
 

From 24adf1a289101c262ac52be9caf12a975b008885 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Tue, 15 May 2018 21:59:43 -0700
Subject: [PATCH 3/7] Update Footer.js

---
 website/core/Footer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/core/Footer.js b/website/core/Footer.js
index 4c13b0bca19a..d23cc523689d 100644
--- a/website/core/Footer.js
+++ b/website/core/Footer.js
@@ -11,7 +11,7 @@ const React = require('react');
 const SocialFooter = props => (
   <div>
     <div>
-      <h5>Github</h5>
+      <h5>GitHub</h5>
       <a
         className="github-button" // part of the https://buttons.github.io/buttons.js script in siteConfig.js
         href={`https://github.com/${props.config.organizationName}/${

From 23da75ecbb1738d15bfd932730e1a644adf0f09e Mon Sep 17 00:00:00 2001
From: endiliey <endiliey@gmail.com>
Date: Wed, 16 May 2018 13:30:40 +0800
Subject: [PATCH 4/7] fix minor issue on social-footer

---
 docs/api-site-config.md |  4 ++--
 lib/core/Site.js        |  2 +-
 website/core/Footer.js  | 12 ++++++------
 website/siteConfig.js   |  2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/api-site-config.md b/docs/api-site-config.md
index d13401593d66..afa50c47b262 100644
--- a/docs/api-site-config.md
+++ b/docs/api-site-config.md
@@ -154,7 +154,7 @@ 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`.
+`twitterUsername` - If you want a Twitter follow button at the bottom of your page, provide a twitter username to follow. For example: `docusaurus`
 
 `twitterImage` - Local path to your Twitter card image (e.g., `img/myImage.png`). This image will show up on the Twitter card when your site is shared on Twitter.
 
@@ -233,7 +233,7 @@ const siteConfig = {
   facebookAppId: '1615782811974223',
   facebookPixelId: '352490515235776',
   twitter: 'true',
-  twitterId: 'docusaurus',
+  twitterUsername: 'docusaurus',
   twitterImage: 'img/docusaurus.png',
   ogImage: 'img/docusaurus.png',
 };
diff --git a/lib/core/Site.js b/lib/core/Site.js
index 9c151f4f0905..61032f34a5ea 100644
--- a/lib/core/Site.js
+++ b/lib/core/Site.js
@@ -111,7 +111,7 @@ class Site extends React.Component {
               }}
             />
           )}
-          {this.props.config.twitter && (
+          {(this.props.config.twitter || this.props.config.twitterUsername) && (
             <script
               dangerouslySetInnerHTML={{
                 __html: `window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));`,
diff --git a/website/core/Footer.js b/website/core/Footer.js
index d23cc523689d..7a4ae234e637 100644
--- a/website/core/Footer.js
+++ b/website/core/Footer.js
@@ -26,17 +26,17 @@ const SocialFooter = props => (
         {props.config.projectName}
       </a>
     </div>
-    {props.config.twitterId ? (
+    {props.config.twitterUsername && (
       <div>
         <h5>Twitter</h5>
         <a
-          href={`https://twitter.com/${props.config.twitterId}`}
+          href={`https://twitter.com/${props.config.twitterUsername}`}
           className="twitter-follow-button">
-          Follow @{props.config.twitterId}
+          Follow @{props.config.twitterUsername}
         </a>
       </div>
-    ) : null}
-    {props.config.facebookAppId ? (
+    )}
+    {props.config.facebookAppId && (
       <div>
         <h5>Facebook</h5>
         <div
@@ -48,7 +48,7 @@ const SocialFooter = props => (
           data-show-faces="false"
         />
       </div>
-    ) : null}
+    )}
   </div>
 );
 
diff --git a/website/siteConfig.js b/website/siteConfig.js
index ca23b9209c5e..9b570f3069f1 100644
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@@ -50,7 +50,7 @@ const siteConfig = {
   gaTrackingId: 'UA-44373548-31',
   facebookAppId: '1615782811974223',
   twitter: 'true',
-  twitterId: 'docusaurus',
+  twitterUsername: 'docusaurus',
   ogImage: 'img/docusaurus.png',
   twitterImage: 'img/docusaurus.png',
   onPageNav: 'separate',

From ec930d51b4bd00608a5abe4d26137b3878362c00 Mon Sep 17 00:00:00 2001
From: endiliey <endiliey@gmail.com>
Date: Wed, 16 May 2018 17:44:52 +0800
Subject: [PATCH 5/7] update facebookAppId description in api-site-config

---
 docs/api-site-config.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api-site-config.md b/docs/api-site-config.md
index afa50c47b262..4a628b33b650 100644
--- a/docs/api-site-config.md
+++ b/docs/api-site-config.md
@@ -93,7 +93,7 @@ customDocsPath: 'website-docs'
 
 `editUrl` - url for editing docs, usage example: `editUrl + 'en/doc1.md'`. If this field is omitted, there will be no "Edit this Doc" button for each document.
 
-`facebookAppId` - If you want Facebook Like/Share buttons at the bottom of your blog posts, provide a [Facebook application id](https://www.facebook.com/help/audiencenetwork/804209223039296), and the buttons will show up on all blog posts.
+`facebookAppId` - If you want Facebook Like/Share buttons in the footer and at the bottom of your blog posts, provide a [Facebook application id](https://www.facebook.com/help/audiencenetwork/804209223039296).
 
 `facebookPixelId` - [Facebook Pixel](https://www.facebook.com/business/a/facebook-pixel) ID to track page views.
 

From 88cfa461404da5ae5379336bcb9337df67b99545 Mon Sep 17 00:00:00 2001
From: endiliey <endiliey@gmail.com>
Date: Fri, 18 May 2018 00:10:21 +0800
Subject: [PATCH 6/7] rm heading & pad footer social button

---
 lib/static/css/main.css |  4 ++++
 website/core/Footer.js  | 10 ++++------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index ccb13b694e59..874243adc3e2 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -1826,6 +1826,10 @@ footer .copyright {
   text-align: center;
 }
 
+footer .social {
+  padding: 5px 0;
+}
+
 .entry-share {
   padding: 36px 0;
   display: block;
diff --git a/website/core/Footer.js b/website/core/Footer.js
index 7a4ae234e637..97d0ae2fceb2 100644
--- a/website/core/Footer.js
+++ b/website/core/Footer.js
@@ -10,8 +10,8 @@ const React = require('react');
 
 const SocialFooter = props => (
   <div>
-    <div>
-      <h5>GitHub</h5>
+    <h5>More</h5>
+    <div className="social">
       <a
         className="github-button" // part of the https://buttons.github.io/buttons.js script in siteConfig.js
         href={`https://github.com/${props.config.organizationName}/${
@@ -27,8 +27,7 @@ const SocialFooter = props => (
       </a>
     </div>
     {props.config.twitterUsername && (
-      <div>
-        <h5>Twitter</h5>
+      <div className="social">
         <a
           href={`https://twitter.com/${props.config.twitterUsername}`}
           className="twitter-follow-button">
@@ -37,8 +36,7 @@ const SocialFooter = props => (
       </div>
     )}
     {props.config.facebookAppId && (
-      <div>
-        <h5>Facebook</h5>
+      <div className="social">
         <div
           className="fb-like"
           data-href={props.config.url}

From ac315a9eef58868d3f0a2c5199a59a0adada27a5 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Thu, 17 May 2018 21:24:02 -0700
Subject: [PATCH 7/7] Update api-site-config.md

---
 docs/api-site-config.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api-site-config.md b/docs/api-site-config.md
index 4a628b33b650..e1fcefd83888 100644
--- a/docs/api-site-config.md
+++ b/docs/api-site-config.md
@@ -154,7 +154,7 @@ h1 {
 
 `twitter` - Set this to `true` if you want a Twitter social button to appear at the bottom of your blog posts.
 
-`twitterUsername` - If you want a Twitter follow button at the bottom of your page, provide a twitter username to follow. For example: `docusaurus`
+`twitterUsername` - If you want a Twitter follow button at the bottom of your page, provide a Twitter username to follow. For example: `docusaurus`.
 
 `twitterImage` - Local path to your Twitter card image (e.g., `img/myImage.png`). This image will show up on the Twitter card when your site is shared on Twitter.