feat: add social media banner (#522)

openfga · Oct 5, 2023 · ad607f1 · ad607f1
1 parent 8e80849
commit ad607f1
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 0 deletions.
diff --git a/src/components/SocialMedia/SocialMedia.module.css b/src/components/SocialMedia/SocialMedia.module.css
@@ -0,0 +1,52 @@
+.social-media-banner {
+  display: none;
+}
+
+@media only screen and (max-width: 996px) {
+  .social-media-banner {
+    display: flex;
+    justify-content: space-evenly;
+    padding: 0.625rem 2rem;
+    gap: 2rem;
+  }
+}
+
+@media only screen and (max-width: 375px) {
+  .social-media-banner {
+    gap: 1rem;
+    font-size: 0.8rem;
+  }
+}
+
+.social-media-banner-item {
+  display: flex;
+  align-items: center;
+}
+
+a.social-media-banner-item {
+  color: var(--ofga-neutral-white);
+  text-decoration: none;
+}
+
+.social-media-banner-item::before {
+  display: block;
+  content: '';
+  width: 2rem;
+  height: 2rem;
+  margin-right: 0.5rem;
+}
+
+.social-media-banner-github::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;
+}
+
+.social-media-banner-twitter::before {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M18 2.43208C17.3381 2.72358 16.627 2.92053 15.8794 3.00956C16.642 2.55577 17.2271 1.8357 17.503 0.978553C16.7895 1.39925 15.9991 1.70492 15.158 1.86879C14.4842 1.1566 13.525 0.710693 12.4627 0.710693C10.4238 0.710693 8.7701 2.35409 8.7701 4.38194C8.7701 4.66871 8.8034 4.9476 8.86523 5.21703C5.79494 5.06341 3.07505 3.602 1.25332 1.38192C0.936228 1.92551 0.753898 2.55577 0.753898 3.227C0.753898 4.50012 1.40632 5.62434 2.39646 6.28217C1.7908 6.26247 1.22162 6.09782 0.723773 5.82287V5.87014C0.723773 7.64825 1.99612 9.13172 3.68625 9.46891C3.3755 9.55242 3.04968 9.59654 2.71356 9.59654C2.47573 9.59654 2.24346 9.57448 2.01832 9.53193C2.48842 10.9894 3.85193 12.0514 5.46833 12.0798C4.20391 13.0645 2.61129 13.6515 0.881529 13.6515C0.583458 13.6515 0.289351 13.6341 0 13.6002C1.63463 14.6425 3.57527 15.2492 5.66018 15.2492C12.454 15.2492 16.168 9.6572 16.168 4.80737C16.168 4.6498 16.164 4.49066 16.1569 4.3331C16.8783 3.81471 17.5045 3.16949 17.9984 2.43445L18 2.43208Z'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
+.social-media-banner-discord::before {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M15.2601 2.15598C14.0866 1.60531 12.8404 1.20398 11.5396 0.97998C11.3759 1.26932 11.194 1.66131 11.0666 1.96931C9.68307 1.76398 8.30951 1.76398 6.94504 1.96931C6.81769 1.66131 6.62666 1.26932 6.47201 0.97998C5.16216 1.20398 3.91595 1.60531 2.7507 2.15598C0.394744 5.7213 -0.242005 9.20261 0.0763687 12.6373C1.64094 13.8039 3.15096 14.5133 4.63458 14.98C4.99844 14.476 5.32591 13.9346 5.6079 13.3653C5.07121 13.16 4.56181 12.9079 4.07061 12.6093C4.19796 12.516 4.32531 12.4133 4.44356 12.3106C7.40898 13.7013 10.6209 13.7013 13.5499 12.3106C13.6773 12.4133 13.7955 12.516 13.9229 12.6093C13.4317 12.9079 12.9223 13.16 12.3856 13.3653C12.6676 13.9346 12.9951 14.476 13.3589 14.98C14.8416 14.5133 16.3607 13.8039 17.9171 12.6373C18.3082 8.66131 17.2976 5.208 15.2601 2.15598ZM6.01723 10.5186C5.12577 10.5186 4.39806 9.68797 4.39806 8.67065C4.39806 7.65333 5.10758 6.82262 6.01723 6.82262C6.91775 6.82262 7.65454 7.65333 7.63634 8.67065C7.63634 9.68797 6.91775 10.5186 6.01723 10.5186ZM11.9945 10.5186C11.103 10.5186 10.3744 9.68797 10.3744 8.67065C10.3744 7.65333 11.0848 6.82262 11.9945 6.82262C12.895 6.82262 13.6318 7.65333 13.6136 8.67065C13.6136 9.68797 12.9041 10.5186 11.9945 10.5186Z'/%3E%3C/svg%3E")
+    no-repeat;
+}
diff --git a/src/components/SocialMedia/index.tsx b/src/components/SocialMedia/index.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { ThemeConfig } from '@docusaurus/preset-classic';
+import { NavbarItem } from '@docusaurus/theme-common';
+import type { Props } from '@theme/NavbarItem/NavbarNavLink';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import styles from './SocialMedia.module.css';
+
+const SOCIAL_MEDIA_ITEMS = ['Twitter', 'Discord', 'GitHub'];
+
+const SocialMedia: React.FC = () => {
+  const baseClassName = 'social-media-banner';
+  const { siteConfig } = useDocusaurusContext();
+  const { navbar }: ThemeConfig = siteConfig.themeConfig;
+  const navbarItems = navbar.items;
+  const filteredItems: NavbarItem[] & Props[] = navbarItems.filter(({ label }) => SOCIAL_MEDIA_ITEMS.includes(label));
+
+  return (
+    <div className={styles[baseClassName]}>
+      {filteredItems.map(({ label, to, ['aria-label']: ariaLabel }) => (
+        <Link
+          to={useBaseUrl(to as string)}
+          className={clsx(styles[baseClassName + '-item'], styles[baseClassName + '-' + label.toLowerCase()])}
+          aria-label={ariaLabel as string}
+        >
+          {label}
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export { SocialMedia };
diff --git a/src/features/LandingPage/HeroHeader/index.tsx b/src/features/LandingPage/HeroHeader/index.tsx
@@ -5,6 +5,7 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
 
 import styles from './HeroHeader.module.css';
 
+import { SocialMedia } from '@components/SocialMedia';
 import { HeroLogo } from './HeroLogo';
 import { ButtonLink } from '@components/ButtonLink';
 import { StyleGrid } from '../StyleGrid';
@@ -60,6 +61,7 @@ const HeroHeader = () => {
     <header>
       <div className="container__no-padding">
         <StyleGrid />
+        <SocialMedia />
         <div className={styles.container}>
           <div className={styles.content}>
             <h1 className={styles.heading} ref={headingRef}>