big donate button on homepage, small OC icon in socials

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" width="14px" height="14px" viewBox="0 0 14 14"><path d="M 7,1 C 3.6862915,1 1,3.686292 1,7 c 0,3.313708 2.6862915,6 6,6 1.2698255,0 2.4472377,-0.394558 3.416941,-1.06764 L 8.8632814,10.378084 C 8.3110136,10.683293 7.6756458,10.857319 7,10.857319 4.8697587,10.857319 3.1426809,9.130241 3.1426809,7 3.1426809,4.869759 4.8697587,3.142681 7,3.142681 c 0.6756458,0 1.3110136,0.174026 1.8632814,0.479235 L 10.416941,2.06764 C 9.4472377,1.394558 8.2698255,1 7,1 Z m 4.93236,2.583059 -1.554276,1.55366 c 0.267058,0.483234 0.433793,1.029899 0.471217,1.611636 0.0053,0.08311 0.008,0.167189 0.008,0.251645 0,0.675646 -0.174026,1.311014 -0.479235,1.863281 l 1.554276,1.55366 C 12.605442,9.447238 13,8.269825 13,7 13,5.730175 12.605442,4.552762 11.93236,3.583059 Z"/></svg>',
+        },
+        link: 'https://opencollective.com/fakerjs',
+        ariaLabel: 'Open Collective',
+      },
     ],
 
     algolia:
@@ -137,8 +144,7 @@ const config: UserConfig<DefaultTheme.Config> = {
           },
 
     footer: {
-      message:
-        'Released under the MIT License. <br/><a target="_blank" href="https://opencollective.com/fakerjs">❤️ Support Faker on OpenCollective.</a>',
+      message: 'Released under the MIT License.',
       copyright: 'Copyright © 2022-present Faker.',
     },
 
@@ -175,10 +181,6 @@ const config: UserConfig<DefaultTheme.Config> = {
           },
         ],
       },
-      {
-        text: 'Donate',
-        link: 'https://opencollective.com/fakerjs',
-      },
       {
         text: currentVersion,
         items: [

docs/.vitepress/theme/index.css

@@ -74,3 +74,29 @@ table td ul li {
 .dark .VPHero .action:not(:last-child) a.VPButton.alt {
   color: var(--vp-button-brand-text) !important;
 }
+
+.opencollective {
+  margin-top: 48px;
+  display: flex;
+  justify-content: center;
+}
+
+.opencollective a {
+  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,7 @@ features:
     title: Localization
     details: Pick a locale to generate realistic looking Names, Addresses, and Phone Numbers.
 ---
+
+<div class="opencollective">
+  <a target="_blank" href="https://opencollective.com/fakerjs">Support Faker on OpenCollective</a>
+</div>