Top bar github & openapi (windmill-labs#511)

hcourdent · web-flow · commit 58f6061cf744 · 2024-02-12T19:33:16.000+01:00
* Top bar github &amp; openapi

* Added discord &amp; github logo to mobile
diff --git a/src/landing/LandingHeader.jsx b/src/landing/LandingHeader.jsx
@@ -4,13 +4,19 @@ import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import classNames from 'classnames';
 import { useColorMode } from '@docusaurus/theme-common';
-import { SiDiscord } from 'react-icons/si';
+import { SiDiscord, SiGithub } from 'react-icons/si';
 import { motion } from 'framer-motion';
 import ThemeToggleButton from './ThemeToggleButton';
 import SearchBarWrapper from '../theme/SearchBar';
 import Banner from './Banner';
 
 const resources = [
+	{
+		name: 'OpenAPI',
+		description: 'Explore our API specs.',
+		href: 'https://app.windmill.dev/openapi.html',
+		newtab: true
+	},
 	{
 		name: 'Changelog',
 		description: 'See the latest changes to Windmill.',
@@ -100,12 +106,6 @@ export default function LandingHeader() {
 						>
 							Hub
 						</a>
-						<a
-							href="https://app.windmill.dev/openapi.html"
-							className="font-medium text-gray-500 hover:text-gray-900 !no-underline dark:text-gray-200 dark:hover:text-gray-300"
-						>
-							OpenAPI
-						</a>
 
 						<Popover className="relative">
 							{({ open }) => (
@@ -138,23 +138,25 @@ export default function LandingHeader() {
 										<Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-xs -translate-x-1/2 transform px-2 sm:px-0">
 											<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
 												<div className="relative grid gap-6 bg-white dark:bg-gray-800 px-5 py-6 sm:gap-8 sm:p-8">
-													{resources.map((resource) => (
-														<a
-															key={resource.name}
-															href={resource.href}
-															className="-m-3 block rounded-md p-3 hover:bg-gray-50 dark:hover:bg-gray-700 !no-underline"
-														>
-															<p className="font-medium text-gray-900 dark:text-gray-100">
-																{resource.name}
-															</p>
-															<p className="mt-1 text-sm text-gray-500 dark:text-gray-300">
-																{resource.description}
-															</p>
-														</a>
-													))}
+												{resources.map((resource) => (
+													<a
+													key={resource.name}
+													href={resource.href}
+													className="-m-3 block rounded-md p-3 hover:bg-gray-50 dark:hover:bg-gray-700 !no-underline"
+													target={resource.newtab ? "_blank" : undefined}
+													rel={resource.newtab ? "noopener noreferrer" : undefined}
+													>
+													<p className="font-medium text-gray-900 dark:text-gray-100">
+														{resource.name}
+													</p>
+													<p className="mt-1 text-sm text-gray-500 dark:text-gray-300">
+														{resource.description}
+													</p>
+													</a>
+												))}
 												</div>
 											</div>
-										</Popover.Panel>
+											</Popover.Panel>
 									</Transition>
 								</>
 							)}
@@ -166,14 +168,26 @@ export default function LandingHeader() {
 
 						<ThemeToggleButton colorMode={colorMode} setColorMode={setColorMode} />
 
+						<a
+							href="https://github.com/windmill-labs/windmill"
+							data-analytics='"github"'
+							onClick={() => window.plausible('github')}
+							className="rounded-full hover:bg-indigo-200 dark:hover:bg-indigo-400 p-2"
+							target="_blank"
+							>
+							<SiGithub className="h-5 w-5 dark:text-white text-gray-800" />
+						</a>
+
 						<a
 							href="https://discord.com/invite/V7PM2YHsPB"
 							data-analytics='"discord"'
 							onClick={() => window.plausible('discord')}
-							className=" rounded-full hover:bg-indigo-200 dark:hover:bg-indigo-400 p-2"
-						>
+							className="rounded-full hover:bg-indigo-200 dark:hover:bg-indigo-400 p-2"
+							target="_blank"
+							>
 							<SiDiscord className="h-5 w-5 dark:text-white text-gray-800" />
 						</a>
+
 						<a
 							href="https://www.windmill.dev/book-demo"
 							data-analytics='"schedule-demo"'
@@ -248,7 +262,31 @@ export default function LandingHeader() {
 										</a>
 									))}
 								</div>
-								<div className="mt-6">
+								<div className="mt-6 flex justify-center items-center space-x-4 mb-4">
+									<a
+										href="https://github.com/windmill-labs/windmill"
+										data-analytics='"github"'
+										onClick={() => window.plausible('github')}
+										className="rounded-full hover:bg-indigo-200 dark:hover:bg-indigo-400 p-2"
+										target="_blank"
+										rel="noopener noreferrer"
+									>
+										<SiGithub className="h-5 w-5 dark:text-white text-gray-800" />
+									</a>
+
+									<a
+										href="https://discord.com/invite/V7PM2YHsPB"
+										data-analytics='"discord"'
+										onClick={() => window.plausible('discord')}
+										className="rounded-full hover:bg-indigo-200 dark:hover:bg-indigo-400 p-2"
+										target="_blank"
+										rel="noopener noreferrer"
+									>
+										<SiDiscord className="h-5 w-5 dark:text-white text-gray-800" />
+									</a>
+									</div>
+
+									<div className="mt-6">
 									<a
 										href="https://www.windmill.dev/book-demo"
 										data-analytics='"schedule-demo"'
