From 8cdc5a10dff8df8c7b05ed9d253db44d16616b41 Mon Sep 17 00:00:00 2001
From: mingrammer <mingrammer@gmail.com>
Date: Mon, 1 Jun 2020 00:03:54 +0900
Subject: [PATCH] docs(web): add sponsoring

---
 website/core/Footer.js        |  2 +-
 website/i18n/en.json          |  3 ++-
 website/pages/en/index.js     | 15 +++++++++++++++
 website/siteConfig.js         |  1 +
 website/static/css/custom.css |  4 ++++
 5 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/website/core/Footer.js b/website/core/Footer.js
index 705188f3..8f1c1759 100644
--- a/website/core/Footer.js
+++ b/website/core/Footer.js
@@ -51,7 +51,7 @@ class Footer extends React.Component {
             <h5>More</h5>
             <iframe src="https://ghbtns.com/github-btn.html?user=mingrammer&repo=diagrams&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="170" height="30" title="Star mingrammer/diagrams on GitHub"></iframe>
           </div>
-        </section>
+          </section>
         <section className="copyright">{this.props.config.copyright}</section>
       </footer>
     );
diff --git a/website/i18n/en.json b/website/i18n/en.json
index eab1b7d1..c6232b39 100644
--- a/website/i18n/en.json
+++ b/website/i18n/en.json
@@ -61,7 +61,8 @@
       "Docs": "Docs",
       "Guides": "Guides",
       "Nodes": "Nodes",
-      "GitHub": "GitHub"
+      "GitHub": "GitHub",
+      "Sponsorship": "Sponsorship"
     },
     "categories": {
       "Getting Started": "Getting Started",
diff --git a/website/pages/en/index.js b/website/pages/en/index.js
index cc0bdcaa..117ba514 100644
--- a/website/pages/en/index.js
+++ b/website/pages/en/index.js
@@ -111,6 +111,20 @@ class Index extends React.Component {
       </div>
     );
 
+    const Sponsorship = () => (
+      <div
+        className="productShowcaseSection paddingBottom"
+        style={{textAlign: 'center'}}>
+        <h2>Sponsorship</h2>
+        <MarkdownBlock>
+          Sponsoring always helps a lot to maintain Diagrams. Thank you :)
+        </MarkdownBlock>
+        <a href="https://www.buymeacoffee.com/mingrammer" target="_blank">
+          <img id="buymeacoffee" src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee"/>
+        </a>
+      </div>
+    );
+
     const Example = () => (
       <Block>
         {[
@@ -148,6 +162,7 @@ class Index extends React.Component {
           <About />
           <Example />
           <Example2 />
+          <Sponsorship />
         </div>
       </div>
     );
diff --git a/website/siteConfig.js b/website/siteConfig.js
index aea9355c..16cce1cc 100644
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@@ -22,6 +22,7 @@ const siteConfig = {
     {doc: 'guides/diagram', label: 'Guides'},
     {doc: 'nodes/aws', label: 'Nodes'},
     {href: 'https://github.com/mingrammer/diagrams', label: 'GitHub'},
+    {href: 'https://www.buymeacoffee.com/mingrammer', label: 'Sponsoring'},
   ],
 
   headerIcon: 'img/diagrams.ico',
diff --git a/website/static/css/custom.css b/website/static/css/custom.css
index 01aa4ed3..235f6269 100644
--- a/website/static/css/custom.css
+++ b/website/static/css/custom.css
@@ -20,4 +20,8 @@
 }
 
 @media only screen and (min-width: 1500px) {
+}
+
+#buymeacoffee {
+    height: 50px;
 }
\ No newline at end of file