docs: add donate links (faker-js#2806)

Author: matthewmayer

docs/.vitepress/config.ts

@@ -125,6 +125,13 @@ const config: UserConfig<DefaultTheme.Config> = {
       { icon: 'mastodon', link: 'https://fosstodon.org/@faker_js' },
       { icon: 'twitter', link: 'https://twitter.com/faker_js' },
       { icon: 'github', link: 'https://github.com/faker-js/faker' },
+      {
+        icon: {
+          svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Open Collective</title><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c2.54 0 4.894-.79 6.834-2.135l-3.107-3.109a7.715 7.715 0 1 1 0-13.512l3.107-3.109A11.943 11.943 0 0 0 12 0zm9.865 5.166l-3.109 3.107A7.67 7.67 0 0 1 19.715 12a7.682 7.682 0 0 1-.959 3.727l3.109 3.107A11.943 11.943 0 0 0 24 12c0-2.54-.79-4.894-2.135-6.834z"/></svg>',
+        },
+        link: 'https://opencollective.com/fakerjs',
+        ariaLabel: 'Open Collective',
+      },
     ],
 
     algolia:

docs/.vitepress/theme/index.css

@@ -74,3 +74,33 @@ table td ul li {
     color: var(--vp-button-brand-text) !important;
   }
 }
+
+.opencollective {
+  margin-top: 48px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.opencollective a {
+  margin-top: 24px;
+  border-radius: 20px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+  display: inline-block;
+  border: 1px solid transparent;
+  text-align: center;
+  font-weight: 600;
+  white-space: nowrap;
+  text-decoration: none;
+
+  color: var(--vp-button-alt-text);
+  border-color: var(--vp-button-brand-bg) !important;
+  transition:
+    color 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
+}

docs/index.md

@@ -39,3 +39,8 @@ features:
     title: Localization
     details: Pick a locale to generate realistic looking Names, Addresses, and Phone Numbers.
 ---
+
+<div class="opencollective">
+  Faker is freely available to use for commercial and non-commercial purposes under the MIT license. The development of Faker is guided by an international team of volunteer maintainers. If you use Faker in your project, please consider making a one-off or recurring donation via Open Collective. 
+  <a target="_blank" href="https://opencollective.com/fakerjs">Support Faker on OpenCollective</a>
+</div>