diff --git a/docusaurus.config.js b/docusaurus.config.js index 9eb1801..38a674b 100644 --- a/docusaurus.config.js +++ b/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, diff --git a/src/components/Icon/SocialmediaLink.tsx b/src/components/Icon/SocialmediaLink.tsx index 23f1b5e..d26aab7 100644 --- a/src/components/Icon/SocialmediaLink.tsx +++ b/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 => { diff --git a/src/components/mdx/TeamList/TeamList.tsx b/src/components/mdx/TeamList/TeamList.tsx index ab29b89..14c2b80 100644 --- a/src/components/mdx/TeamList/TeamList.tsx +++ b/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 (
{team.map((member, index) => ( -
+
{ {member.contact.github && ( )} {member.contact.status && ( )} {member.contact.discord && ( )}
diff --git a/src/css/custom.css b/src/css/custom.css index 1d3c3f2..0305bee 100644 --- a/src/css/custom.css +++ b/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; +} diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx new file mode 100644 index 0000000..6ea2ba9 --- /dev/null +++ b/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 ( + + ) +} diff --git a/src/theme/Footer/Layout/style.module.scss b/src/theme/Footer/Layout/style.module.scss new file mode 100644 index 0000000..33a4b42 --- /dev/null +++ b/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; + } +} diff --git a/src/types/ui.types.ts b/src/types/ui.types.ts new file mode 100644 index 0000000..ea1b66b --- /dev/null +++ b/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', +}