2983 align headers on all sites (#490)

# Docs updates should not be submitted in this repository Our doc site content is being automatically updated from [Wing](https://github.com/winglang/wing) repository docs folder. Please submit any changes to the docs as a PR [here](https://github.com/winglang/wing/pulls)
winglang · Jul 2, 2023 · 9424d80 · 9424d80 · vercel · Jul 2, 2023
1 parent 01597e9
commit 9424d80
Show file tree

Hide file tree

Showing 10 changed files with 234 additions and 31 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -145,35 +145,57 @@ const config = {
         searchPagePath: 'search',
       },
       navbar: {
-        title: "Wing",
+        title: "",
         logo: {
           alt: "Wing Logo",
-          src: "../img/logo-black.png",
-          srcDark: "../img/logo-turq.png",
+          src: "../img/wing-logo.svg",
+          srcDark: "../img/wing-logo-dark.svg",
           href: "https://winglang.io",
           target: "_self",
         },
         items: [
+          {
+            href: "https://www.winglang.io/docs/start-here/installation",
+            position: "left",
+            label: "Install",
+            className: "header-text-link",
+          },
+          {
+            href: "https://play.winglang.io/",
+            position: "left",
+            label: "Playground",
+            className: "header-text-link",
+          },
           {
             to: "docs",
             position: "left",
             label: "Docs",
+            className: "header-text-link",
           },
           {
-            to: 'blog',
-            label: 'Blog',
-            position: 'left',
+            href: "https://www.winglang.io/community",
+            label: "Community",
+            position: "left",
+            className: "header-text-link",
           },
           {
             to: "contributing",
             label: "Contributing",
             position: "left",
+            className: "header-text-link",
+          },
+          {
+            to: 'blog',
+            label: 'Blog',
+            position: 'left',
+            className: "header-text-link",
+          },
+          {
+            href: "https://www.winglang.io/contact",
+            label: 'Contact',
+            position: 'left',
+            className: "header-text-link",
           },
-          // {
-          //   type: "docsVersionDropdown",
-          //   position: "right",
-          //   dropdownActiveClassDisabled: true,
-          // },
           {
             href: slackUrl,
             "aria-label": "Slack server",
@@ -186,7 +208,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.tsx b/src/components/NavbarItems/GithubButton.tsx
@@ -0,0 +1,43 @@
+import React, {useState, useEffect} 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>
+  );
+}
+
+export const GitHubButton = () => {
+  const [stars, setStars] = useState('0');
+  const [watchersCount, setWatchersCount] = useState(0);
+
+  useEffect(() => {
+    const getStarsCount = async () => {
+      const res = await fetch('https://api.github.com/repos/winglang/wing');
+      const data = await res.json();
+      setWatchersCount(data.watchers_count);
+    };
+    getStarsCount();
+  }, []);
+
+  useEffect(() => {
+      const stars = watchersCount.toString();
+      const starsK = stars.length > 3 ?
+        `${stars.slice(0, -3)}.${stars.slice(-3, -2)}k` : stars;
+      setStars(starsK);
+  }, [watchersCount]);
+
+  return (
+    <div className="navbar__item nav-git-button">
+      <a href="https://github.com/winglang/wing" target="_blank" className="nav-git">
+        <GithubIcon />
+        <div>Star us</div>
+        <div className="line-sep"></div>
+        <div>⭐️ {stars}</div>
+      </a>
+    </div>
+  );
+}
+
+export default GitHubButton;
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -20,6 +20,7 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --ifm-font-family-base: 'IBM Plex Sans', sans-serif;
   --doc-sidebar-width: 250px !important;
+  --ifm-navbar-height: 80px;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -117,14 +118,60 @@ button.navbar__toggle {
 }
 
 .navbar__logo {
-  height: 1.5rem;
-  margin-right: 0.25rem;
+  height: 24px;
+  width: 88px;
+  margin-right: 0px;
+}
+
+.navbar__brand {
+  margin-right: 40px;
+}
+
+.navbar--fixed-top {
+  align-items: center;
+  padding: 0px 32px;
+  background-color: white;
+}
+html[data-theme='dark'] .navbar--fixed-top {
+  background-color: #121414;
 }
 
+.header-text-link svg[class^='iconExternalLink'] {
+  display: none;
+}
 
+.header-text-link {
+  padding: 8px 24px;
+  font-size: 17px;
+  line-height: 20px;
+  font-weight: 400;
+  align-items: center;
+}
 
-.navbar__link:hover {
+html[data-theme='dark'] .header-text-link {
+  color: #f1f0f1;
+}
+
+@media (min-width: 992px) and (max-width: 1380px) {
+  .header-text-link {
+      padding: 8px 12px;
+      font-size: 16px;
+  }
+  .navbar__brand {
+    margin-right: 16px;
+  }
+}
+
+.header-text-link:hover {
   color: var(--ifm-color-primary-lightest);
+  background-color: #f2f2f2;
+  border-radius: 8px;
+}
+
+html[data-theme='dark'] .header-text-link:hover {
+  color: var(--ifm-color-primary-lightest);
+  background-color: #272828;
+  border-radius: 8px;
 }
 
 .menu__link {
@@ -149,29 +196,23 @@ button.navbar__toggle {
 }
 
 .header-slack-link:before {
-  background: url("https://cdn.bfldr.com/5H442O3W/at/pl546j-7le8zk-7i2nrx/Slack_Mark_Monochrome_Black.svg?auto=webp&format=png&width=24&height=24 ") no-repeat;
+  background: url("../../static/img/slack.svg") no-repeat;
   content: "";
   display: flex;
-  height: 24px;
+  height: 26px;
   width: 24px;
+  color: #334155;
 }
 
 html[data-theme='dark'] .header-slack-link:before {
-  background: url("https://cdn.bfldr.com/5H442O3W/at/pl546j-7le8zk-j7mis/Slack_Mark_Monochrome_White.svg?auto=webp&format=png&width=24&height=24") no-repeat;
-  content: "";
-  display: flex;
-  height: 24px;
-  width: 24px;
+  background: url("../../static/img/slack-dark.svg") no-repeat;
+  color: #2bd5c1;
 }
 
 html[data-theme='dark'] .navbar__title {
   color: #2ad5c1;
 }
 
-.header-github-link {
-  margin-right: 1rem;
-}
-
 .header-github-link svg[class^='iconExternalLink'] {
   display: none;
 }
@@ -185,15 +226,63 @@ html[data-theme='dark'] .navbar__title {
   width: 24px;
   height: 24px;
   display: flex;
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-  no-repeat;
+  background: url("../../static/img/github-logo.svg") no-repeat;
 }
 
 html[data-theme='dark'] .header-github-link:before {
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-  no-repeat;
+  background: url("../../static/img/github-logo-dark.svg") no-repeat;
 }
 
 .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;
+  display: flex;
+  color: #1C1E21;
+  border: 1px solid #cbd5e1;
+}
+
+.nav-git-mobile {
+  display: none;
+}
+
+@media (max-width: 1200px) {
+  .nav-git-button {
+    display: none;
+  }
+}
+
+@media (min-width: 1040px) and (max-width: 1200px) {
+  .nav-git-mobile {
+    display: flex;
+  }
+}
+
+.nav-git:hover {
+  color: #1f70bf;
+  text-decoration: none;
+}
+
+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,
+};
diff --git a/static/img/github-logo-dark.svg b/static/img/github-logo-dark.svg
diff --git a/static/img/github-logo.svg b/static/img/github-logo.svg
diff --git a/static/img/slack-dark.svg b/static/img/slack-dark.svg
diff --git a/static/img/slack.svg b/static/img/slack.svg