docs(web): add sponsoring

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",

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>
     );

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',

website/static/css/custom.css

@@ -21,3 +21,7 @@
 
 @media only screen and (min-width: 1500px) {
 }
+
+#buymeacoffee {
+    height: 50px;
+}