wip

winglang · Jun 30, 2023 · 5e97e5d · 5e97e5d
1 parent 5fa2231
commit 5e97e5d
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 10 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -190,11 +190,6 @@ const config = {
             position: 'left',
             className: "header-text-link",
           },
-          // {
-          //   type: "docsVersionDropdown",
-          //   position: "right",
-          //   dropdownActiveClassDisabled: true,
-          // },
           {
             href: slackUrl,
             "aria-label": "Slack server",
@@ -207,7 +202,11 @@ const config = {
             "aria-label": "Winglang Repo",
             label: " ",
             position: "right",
-            className: "header-github-link",
+            className: "header-github-link nav-git-mobile",
+          },
+          {
+            type: "custom-GitHubButton",
+            position: "right",
           },
         ],
       },

diff --git a/src/components/NavbarItems/GithubButton.js b/src/components/NavbarItems/GithubButton.js
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const GithubIcon = () => {
+  return (  
+    <svg width="24px" height="24px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fillRule="evenodd" clipRule="evenodd" d="M16 0C7.16 0 0 7.3411 0 16.4047C0 23.6638 4.58 29.795 10.94 31.9687C11.74 32.1122 12.04 31.6201 12.04 31.1894C12.04 30.7998 12.02 29.508 12.02 28.1341C8 28.8928 6.96 27.1293 6.64 26.2065C6.46 25.7349 5.68 24.279 5 23.8893C4.44 23.5818 3.64 22.823 4.98 22.8025C6.24 22.782 7.14 23.9919 7.44 24.484C8.88 26.9652 11.18 26.268 12.1 25.8374C12.24 24.7711 12.66 24.0534 13.12 23.6433C9.56 23.2332 5.84 21.8183 5.84 15.5435C5.84 13.7594 6.46 12.283 7.48 11.1347C7.32 10.7246 6.76 9.04309 7.64 6.78745C7.64 6.78745 8.98 6.35682 12.04 8.46893C13.32 8.09982 14.68 7.91527 16.04 7.91527C17.4 7.91527 18.76 8.09982 20.04 8.46893C23.1 6.33632 24.44 6.78745 24.44 6.78745C25.32 9.04309 24.76 10.7246 24.6 11.1347C25.62 12.283 26.24 13.7389 26.24 15.5435C26.24 21.8388 22.5 23.2332 18.94 23.6433C19.52 24.1559 20.02 25.1402 20.02 26.6781C20.02 28.8723 20 30.6358 20 31.1894C20 31.6201 20.3 32.1327 21.1 31.9687C27.42 29.795 32 23.6433 32 16.4047C32 7.3411 24.84 0 16 0Z" fill="currentColor"></path>
+    </svg>
+  );
+}
+
+const GitHubButton = () => {
+  const stars = "1.2";
+  return (
+    <a href="https://github.com/winglang/wing" target="_blank" className="navbar__item nav-git-button">
+      <div className="nav-git">
+        <GithubIcon />
+        <div>Star us</div>
+        <div className="line-sep"></div>
+        <div>⭐️ {stars}k</div>
+      </div>
+    </a>
+  );
+}
+
+export default GitHubButton;
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -130,6 +130,9 @@ button.navbar__toggle {
 .navbar--fixed-top {
   align-items: center;
   padding: 0px 32px;
+  background-color: white;
+}
+html[data-theme='dark'] .navbar--fixed-top {
   background-color: #121414;
 }
 
@@ -210,10 +213,6 @@ html[data-theme='dark'] .navbar__title {
   color: #2ad5c1;
 }
 
-.header-github-link {
-  margin-right: 1rem;
-}
-
 .header-github-link svg[class^='iconExternalLink'] {
   display: none;
 }
@@ -237,3 +236,52 @@ html[data-theme='dark'] .header-github-link:before {
 .footer--dark {
   --ifm-footer-background-color: #212627;
 }
+
+.nav-git {
+  grid-column-gap: 8px;
+  grid-row-gap: 8px;
+  white-space: nowrap;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 16px;
+  font-size: 15px;
+  text-decoration: none;
+  display: flex;
+  color: #1C1E21;
+  border: 1px solid #cbd5e1;
+}
+
+.nav-git-mobile {
+  display: none;
+}
+
+@media (max-width: 1070px) {
+  .nav-git-mobile {
+    display: flex;
+  }
+  .nav-git-button {
+    display: none;
+  }
+}
+
+.nav-git:hover {
+  color: #fff;
+  background-color: #2bd5c1;
+  border: 1px solid #2bd5c1;
+}
+
+html[data-theme='dark'] .nav-git {
+  color: #f1f0f1;
+  border: 1px solid #475569;
+}
+
+html[data-theme='dark'] .nav-git:hover {
+  color: #1f70bf;
+}
+
+.line-sep {
+  width: 1px;
+  height: 1.5em;
+  border-right: 1px solid #26413c
+}
diff --git a/src/theme/NavbarItem/ComponentTypes.js b/src/theme/NavbarItem/ComponentTypes.js
@@ -0,0 +1,7 @@
+import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes';
+import GitHubButton from '../../components/NavbarItems/GithubButton';
+
+export default {
+  ...ComponentTypes,
+  'custom-GitHubButton': GitHubButton,
+};