closes #7

docusaurus.config.js

@@ -6,9 +6,9 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula')
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: 'My Site',
-  tagline: 'Dinosaurs are cool',
-  url: 'https://your-docusaurus-test-site.com',
+  title: 'Codex',
+  tagline: 'Codex is building a Decentralized Durability Engine',
+  url: 'https://codex.storage',
   baseUrl: '/',
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
@@ -16,8 +16,8 @@ const config = {
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
-  organizationName: 'facebook', // Usually your GitHub org/user name.
-  projectName: 'docusaurus', // Usually your repo name.
+  organizationName: 'status-im', // Usually your GitHub org/user name.
+  projectName: 'codex-nim', // Usually your repo name.
 
   // Even if you don't use internalization, you can use this field to set useful
   // metadata like html lang. For example, if your site is Chinese, you may want
@@ -61,7 +61,7 @@ const config = {
       navbar: {
         title: '',
         logo: {
-          alt: 'My Site Logo',
+          alt: 'Codex',
           src: 'img/logo.svg',
         },
         items: [
@@ -78,49 +78,28 @@ const config = {
         ],
       },
       footer: {
-        style: 'dark',
+        logo: {
+          alt: 'Codex',
+          src: 'img/logo.svg',
+          href: '/',
+          width: 22,
+        },
         links: [
-          {
-            title: 'Docs',
-            items: [
-              {
-                label: 'Tutorial',
-                to: '/docs/intro',
-              },
-            ],
-          },
           {
             title: 'Community',
             items: [
-              {
-                label: 'Stack Overflow',
-                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
-              },
               {
                 label: 'Discord',
-                href: 'https://discordapp.com/invite/docusaurus',
+                href: 'docusaurus',
               },
               {
                 label: 'Twitter',
-                href: 'https://twitter.com/docusaurus',
-              },
-            ],
-          },
-          {
-            title: 'More',
-            items: [
-              {
-                label: 'Blog',
-                to: '/blog',
-              },
-              {
-                label: 'GitHub',
-                href: 'https://github.com/facebook/docusaurus',
+                href: 'docusaurus',
               },
             ],
           },
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
+        copyright: `Codex, ${new Date().getFullYear()}`,
       },
       prism: {
         theme: lightCodeTheme,

src/components/Icon/SocialmediaLink.tsx

@@ -7,17 +7,11 @@ import {
   IconStatus,
   IconTelegram,
 } from './Icon'
+import { ECommunityProviders } from '@site/src/types/ui.types'
 
 type TProps = {
   handler: string
-  provider:
-    | 'discord'
-    | 'twitter'
-    | 'linkedin'
-    | 'status'
-    | 'github'
-    | 'discourse'
-    | 'telegram'
+  provider: ECommunityProviders
 }
 
 export const SocialMediaItem = (props: TProps): JSX.Element => {

src/components/mdx/TeamList/TeamList.tsx

@@ -1,23 +1,23 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import clsx from 'clsx'
 import styles from './style.module.scss'
 import { useTeam } from '@site/src/lib/team.utils'
 import { ELogosTeamNames } from '@site/src/types/team'
-import { IconDiscord, IconGithub, IconStatus } from '../../Icon'
 import { SocialMediaItem } from '../../Icon/SocialmediaLink'
+import { ECommunityProviders } from '@site/src/types/ui.types'
 
 type TProps = {
   children: React.ReactNode
 }
 
-export const TeamList = ({ children }: TProps): JSX.Element => {
+export const TeamList = (props: TProps): JSX.Element => {
   const team = useTeam('codex' as ELogosTeamNames)
 
   return (
     <section className={styles.TeamList}>
       <div className={styles.TeamListContainer}>
         {team.map((member, index) => (
-          <div className={clsx('', styles.memberCard)}>
+          <div className={clsx('', styles.memberCard)} key={`mc-${index}`}>
             <div className={clsx('', styles.memberCardImage)}>
               <img
                 src={member['photo-path']}
@@ -36,19 +36,19 @@ export const TeamList = ({ children }: TProps): JSX.Element => {
                 {member.contact.github && (
                   <SocialMediaItem
                     handler={member.contact.github}
-                    provider={'github'}
+                    provider={ECommunityProviders.github}
                   />
                 )}
                 {member.contact.status && (
                   <SocialMediaItem
                     handler={member.contact.status}
-                    provider={'status'}
+                    provider={ECommunityProviders.status}
                   />
                 )}
                 {member.contact.discord && (
                   <SocialMediaItem
                     handler={member.contact.discord}
-                    provider={'discord'}
+                    provider={ECommunityProviders.discord}
                   />
                 )}
               </div>

src/css/custom.css

@@ -143,13 +143,10 @@
   --ifm-card-horizontal-spacing: var(--ifm-spacing-horizontal);
   --ifm-card-vertical-spacing: var(--ifm-spacing-vertical);
 
-  --ifm-toc-padding-vertical: 0.5rem;
-  --ifm-toc-padding-horizontal: 0.5rem;
-  --ifm-dropdown-font-weight: var(--ifm-font-weight-semibold);
-  --ifm-footer-link-horizontal-spacing: 0.5rem;
-  --ifm-footer-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 2);
+  --ifm-footer-link-horizontal-spacing: 0;
+  --ifm-footer-padding-horizontal: 0;
   --ifm-footer-padding-vertical: calc(var(--ifm-spacing-vertical) * 2);
-  --ifm-footer-logo-max-width: min(30rem, 90vw);
+  --ifm-footer-background-color: transparent;
 
   --ifm-menu-link-padding-horizontal: 0.75rem;
   --ifm-menu-link-padding-vertical: 0.375rem;
@@ -234,3 +231,7 @@
 small {
   font-size: var(--ifm-h6-font-size);
 }
+
+.footer__logo {
+  margin: 0 !important;
+}

src/theme/Footer/Layout/index.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import clsx from 'clsx'
+import type { Props } from '@theme/Footer/Layout'
+
+import styles from './style.module.scss'
+import { useThemeConfig } from '@docusaurus/theme-common'
+import { SocialMediaItem } from '@site/src/components/Icon/SocialmediaLink'
+import {
+  globalStore,
+  selectHiddenSidebar,
+} from '@site/src/containers/GlobalStore'
+import { FooterLinkItem } from '@docusaurus/theme-common/src/utils/useThemeConfig'
+import { ECommunityProviders } from '@site/src/types/ui.types'
+
+export default function FooterLayout(props: Props): JSX.Element {
+  const { logo, copyright } = props
+  const {
+    footer: { links = [] },
+  } = useThemeConfig()
+  const hiddenSidebar = globalStore.useSelector(selectHiddenSidebar)
+
+  //TODO why?
+  //ts-ignore
+  const communityLinks = (links as FooterLinkItem[])
+    .filter((l) => l && l.title === 'Community')
+    .flatMap((l) => l.items)
+
+  return (
+    <footer className={clsx('footer', styles.footer)}>
+      <div className={'row'}>
+        <div
+          className={clsx(
+            'col',
+            hiddenSidebar ? 'col--7' : 'col--5',
+            styles.footerContentWrapper,
+            hiddenSidebar ? styles.withSidebarHide : '',
+          )}
+        >
+          <div className={styles.footerContent}>
+            {(logo || copyright) && (
+              <div className={styles.lockup}>
+                {logo && <div className={styles.footerLogoWrapper}>{logo}</div>}
+                <span className={'sub5'}>{copyright}</span>
+              </div>
+            )}
+            <div className={styles.communityLinksWrapper}>
+              <div className={styles.communityLinks}>
+                {communityLinks.map(
+                  (link: FooterLinkItem, i) =>
+                    link.href && (
+                      <SocialMediaItem
+                        handler={link.href}
+                        provider={
+                          link.label.toLowerCase() as ECommunityProviders
+                        }
+                      />
+                    ),
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

src/theme/Footer/Layout/style.module.scss

@@ -0,0 +1,59 @@
+.footer {
+  display: flex;
+
+  > div {
+    width: calc(100% - calc(2 * var(--ifm-spacing-horizontal)));
+  }
+
+  .footerContentWrapper {
+    opacity: 0.3;
+    margin: 0 !important;
+    padding: 0 var(--ifm-spacing-horizontal);
+    --footer-left: calc(
+      min(var(--doc-sidebar-width), var(--doc-sidebar-max-width)) +
+        calc(1 * var(--ifm-spacing-horizontal))
+    );
+    transform: translateX(var(--footer-left));
+
+    will-change: transform;
+    transition: transform var(--ifm-transition-fast) ease,
+      flex var(--ifm-transition-fast) ease;
+
+    &.withSidebarHide {
+      --footer-left: var(--ifm-spacing-horizontal);
+    }
+
+    .footerContent {
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      justify-content: space-between;
+      flex-grow: 1;
+
+      .communityLinks,
+      .lockup {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .lockup {
+        display: flex;
+        align-items: center;
+      }
+
+      .footerLogoWrapper {
+        a {
+          opacity: 1 !important;
+          display: flex;
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 997px) {
+  .footerContentWrapper {
+    //max-width: 75% !important;
+  }
+}

src/types/ui.types.ts

@@ -0,0 +1,9 @@
+export enum ECommunityProviders {
+  'discord' = 'discord',
+  'twitter' = 'twitter',
+  'linkedin' = 'linkedin',
+  'status' = 'status',
+  'github' = 'github',
+  'discourse' = 'discourse',
+  'telegram' = 'telegram',
+}