Clean up navbar and add GH star counter (#20)

docusaurus.config.js

@@ -110,12 +110,12 @@ const config = {
           //     },
           //   ],
           // },
+          // TODO: replace href with opentf repo once it's public
           {
-            // TODO: replace href with opentf repo once it's public
-            // TODO: replace icon github-button
-            href: "https://github.com/opentffoundation/manifesto",
+            type: "custom-github-stars-navbar-item",
             position: "right",
-            className: "header-github-link",
+            ghRepoUrl: "https://github.com/opentffoundation/manifesto",
+            buttonLabel: "Star",
           },
           {
             href: "https://twitter.com/opentforg",
@@ -131,7 +131,7 @@ const config = {
           {
             label: "Support Us",
             to: "https://github.com/opentffoundation/manifesto",
-            className: "bg-brand px-6 py-3 mx-3 hover:text-white",
+            className: "bg-brand px-6 py-3 hover:text-white",
             position: "right",
           },
         ],

package.json

@@ -26,6 +26,7 @@
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-github-btn": "^1.4.0",
     "striptags": "^3.2.0",
     "tailwindcss": "^3.3.3",
     "typescript": "^4.7.4"

src/components/GitHubStarsNavbarItem/index.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import GitHubButton from "react-github-btn";
+
+type GitHubStartNavbarItemProps = {
+  ghRepoUrl: string;
+  buttonLabel: string;
+};
+
+export default function GitHubStartNavbarItem({
+  ghRepoUrl,
+  buttonLabel,
+}: GitHubStartNavbarItemProps) {
+  return (
+    <div className="flex items-center [&_span]:flex">
+      <GitHubButton
+        href={ghRepoUrl}
+        data-color-scheme="no-preference: dark_high_contrast; light: light; dark: dark_high_contrast;"
+        data-size="large"
+        data-show-count="true"
+        aria-label="Star opentffoundation/manifesto on GitHub"
+      >
+        {buttonLabel}
+      </GitHubButton>
+    </div>
+  );
+}

src/components/Supporters/index.tsx

@@ -57,14 +57,12 @@ export default function Supporters() {
   const groupedSupporters = groupSupportersByType(supporters);
   const types = Object.keys(groupedSupporters);
 
-  const truncatedSupporters = showAll ? supporters : supporters.slice(0, 5);
-
   return (
     <section className="py-12 mx-auto container items-center flex flex-col">
       <h3 className="text-center text-3xl md:text-5xl font-bold mb-4 md:mb-7">
         Supporters
       </h3>
-      <ol className="inline-flex" role="list">
+      <ol className="inline-flex flex-wrap justify-center" role="list">
         {types.map((type, index) => (
           <SupporterType
             key={type}

src/css/custom.css

@@ -15,6 +15,11 @@ html[data-theme="dark"] {
   --ifm-background-color: theme("colors.dark1");
   --ifm-navbar-background-color: transparent;
   --ifm-heading-font-family: theme("fontFamily.sans");
+  --ifm-navbar-item-padding-horizontal: 0;
+}
+
+.navbar__items {
+  @apply gap-6;
 }
 
 .list-none::-webkit-details-marker {
@@ -30,6 +35,11 @@ html[data-theme="dark"] {
   @apply px-6 md:px-0 container mx-auto;
 }
 
+.navbar__logo,
+.navbar__brand {
+  margin: 0;
+}
+
 .navbar--fixed-top {
   position: static;
 }

src/theme/NavbarItem/ComponentTypes.js

@@ -0,0 +1,7 @@
+import ComponentTypes from "@theme-original/NavbarItem/ComponentTypes";
+import GitHubStarsNavbarItem from "@site/src/components/GitHubStarsNavbarItem";
+
+export default {
+  ...ComponentTypes,
+  "custom-github-stars-navbar-item": GitHubStarsNavbarItem,
+};