Add social links to navigation bar

Signed-off-by: Sergey Fedorov <[email protected]>
replica-io · Feb 19, 2024 · 1d57a87 · 1d57a87
1 parent dd144cb
commit 1d57a87
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 4 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -6,7 +6,11 @@ import { themes as prismThemes } from 'prism-react-renderer';
 const lightCodeTheme = prismThemes.github;
 const darkCodeTheme = prismThemes.dracula;
 
+const sponsorUrl = 'https://github.com/sponsors/replica-io';
 const gitHubUrl = 'https://github.com/replica-io/replica-io';
+const discordUrl = 'https://discordapp.com/invite/CzPfN75URD';
+const twitterUrl = 'https://x.com/Replica_IO';
+const youtubeUrl = 'https://www.youtube.com/@Replica_IO';
 const siteGitHubUrl = 'https://github.com/replica-io/replica-io.github.io';
 const siteLicense = {
   name: "Creative Commons Attribution 4.0 International",
@@ -91,10 +95,40 @@ const config = {
             to: 'blog',
             label: 'Blog',
           },
+          {
+            to: sponsorUrl,
+            'aria-label': 'Sponsor',
+            html: '<i class="fa-regular fa-heart" style="color: #c96198;" /i>',
+            position: 'right',
+            className: 'navbar-icon',
+          },
           {
             href: gitHubUrl,
-            label: 'GitHub',
+            'aria-label': 'GitHub',
+            html: '<i class="fa-brands fa-github" /i>',
+            position: 'right',
+            className: 'navbar-icon',
+          },
+          {
+            href: discordUrl,
+            'aria-label': 'Discord',
+            html: '<i class="fa-brands fa-discord" /i>',
+            position: 'right',
+            className: 'navbar-icon',
+          },
+          {
+            href: twitterUrl,
+            'aria-label': 'Twitter / X',
+            html: '<i class="fa-brands fa-x-twitter" /i>',
+            position: 'right',
+            className: 'navbar-icon',
+          },
+          {
+            href: youtubeUrl,
+            'aria-label': 'YouTube',
+            html: '<i class="fa-brands fa-youtube" /i>',
             position: 'right',
+            className: 'navbar-icon',
           },
         ],
       },
@@ -106,11 +140,11 @@ const config = {
             items: [
               {
                 label: 'Discord',
-                href: 'https://discordapp.com/invite/CzPfN75URD',
+                href: discordUrl,
               },
               {
                 label: 'Twitter / X',
-                href: 'https://x.com/Replica_IO',
+                href: twitterUrl,
               },
             ],
           },
@@ -123,7 +157,7 @@ const config = {
               },
               {
                 label: 'YouTube',
-                href: 'https://www.youtube.com/@Replica_IO',
+                href: youtubeUrl,
               },
             ],
           },

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -7,3 +7,7 @@
 }
 
 @import '~@fortawesome/fontawesome-free/css/all.css';
+
+.navbar-icon {
+  font-size: 24px;
+}