diff --git a/packages/docusaurus-playground/docs/community.mdx b/packages/docusaurus-playground/docs/community.mdx index 7c0209d..071664b 100644 --- a/packages/docusaurus-playground/docs/community.mdx +++ b/packages/docusaurus-playground/docs/community.mdx @@ -2,47 +2,48 @@ title: Join the community --- -import { Community } from '../../logos-docusaurus-theme/src/client/components/mdx' -import { SocialCard, Grid } from '@site/src/components/mdx' +import { SocialCard, Grid, Box } from '@site/src/components/mdx' # Join the community Welcome to the Waku community! Whether you are interested in building with Waku, contributing to the network, expanding your knowledge, or staying abreast of our progress, we have something for everyone. - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx index 045c1f5..7bc5666 100644 --- a/packages/docusaurus-playground/src/pages/index.mdx +++ b/packages/docusaurus-playground/src/pages/index.mdx @@ -14,6 +14,9 @@ import { Grid, ProfileCard, ProfileCards, + Roadmap, + SectionHeader, + TimelineItem, } from '../components/mdx' @@ -96,7 +99,7 @@ import { xs={{ cols: 3, gap: '1rem', wrap: false }} md={{ cols: 4, gap: '1rem', wrap: true }} > - + - + - + - + - + - + - + - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.scss deleted file mode 100644 index ec0a088..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.scss +++ /dev/null @@ -1,57 +0,0 @@ -@use '../../../css/utils'; -@use '../../../css/lsd'; - -.mdx-community { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1rem; - margin-block: 56px; -} - -.mdx-community__link { - text-decoration: none !important; - height: fit-content; -} - -.mdx-community__link:hover { - text-decoration: underline !important; -} - -.mdx-community__card { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: flex-start; - padding: 1rem; - border: 1px solid rgb(var(--lsd-border-primary)); - min-height: 144px; -} - -.mdx-community__row { - display: flex; - justify-content: space-between; - width: 100%; -} - -.mdx-community__logo { - width: 40px !important; - height: 40px !important; - - svg { - width: 40px !important; - height: 40px !important; - } -} - -.mdx-community__external-link { -} - -.mdx-community__label { - text-align: center; -} - -@include utils.responsive('lg', 'down') { - .mdx-community { - grid-template-columns: 1fr; - } -} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.tsx deleted file mode 100644 index 28c9659..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { Typography } from '@acid-info/lsd-react' -import { useColorMode } from '@docusaurus/theme-common' -import React from 'react' -import './Community.scss' -import { - IconX, - IconDiscordWhite, - IconTelegramWhite, - IconExternalLink, - IconGithub, -} from '../../Icon' // '@logos-theme/components/Icon' doesn't work - -export enum CommunityType { - X = 'x', - Discord = 'discord', - Github = 'github', - Telegram = 'telegram', - CUSTOM = 'custom', -} - -export type CommunityItem = { - logoSrc?: string - logoSrcDark?: string - link: string - linkLabel: string - type?: CommunityType -} - -export type CommunityProps = React.HTMLProps & { - items?: CommunityItem[] -} - -export const Community: React.FC = ({ - items = [], - ...props -}) => { - const { colorMode } = useColorMode() - - const renderSocialIcon = (type: CommunityType) => { - switch (type) { - case CommunityType.X: - return - case CommunityType.Discord: - return - case CommunityType.Telegram: - return - case CommunityType.Github: - return - default: - return null - } - } - - return ( - - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Community/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/Community/index.ts deleted file mode 100644 index e8c3ff7..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Community/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Community' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx index 820dbd5..74a2604 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx @@ -1,8 +1,14 @@ -import { THEME_BREAKPOINTS } from '@acid-info/lsd-react' +import { + IconButton, + IconButtonGroup, + NavigateBeforeIcon, + NavigateNextIcon, + THEME_BREAKPOINTS, +} from '@acid-info/lsd-react' import { css } from '@emotion/react' import styled from '@emotion/styled' import clsx from 'clsx' -import React from 'react' +import React, { useRef } from 'react' import { lsdUtils } from '../../../lib/lsd.utils' import { GridItem } from './GridItem' @@ -12,9 +18,36 @@ export const Grid: { Item: typeof GridItem } & React.FC = ({ children, ...props }) => { + const ref = useRef(null) + + const scroll = (direction: -1 | 1) => { + const el = ref.current + if (!el) return + + const itemWidth = el.children[0]?.getBoundingClientRect?.()?.width ?? 236 + el.scrollTo({ + behavior: 'smooth', + left: + el.scrollLeft + + (el.getBoundingClientRect()?.width - itemWidth) * direction, + }) + } + return ( - - {children} + +
+ + + + + + + + +
+
+ {children} +
) } @@ -35,11 +68,20 @@ const GridRoot = styled.div<{ xl?: GridBreakpointProps }>` width: 100%; - overflow: hidden; - display: grid; - gap: var(--grid-gap); - grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); + .mdx-grid__scroll { + margin-bottom: 2rem; + display: flex; + flex-direction: row; + gap: 0 1rem; + } + + .mdx-grid__content { + display: grid; + gap: var(--grid-gap); + grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); + overflow: hidden; + } ${(props) => THEME_BREAKPOINTS.map((key) => { @@ -63,23 +105,44 @@ const GridRoot = styled.div<{ `} ${(typeof bp.wrap === 'undefined' || bp.wrap === true) && - ` - display: grid; - flex-wrap: unset; - overflow-x: unset; - overflow-y: unset; - scroll-snap-type: unset; + css` + .mdx-grid__scroll { + display: none; + } + .mdx-grid__content { + display: grid; + flex-wrap: unset; + overflow-x: unset; + overflow-y: unset; + scroll-snap-type: unset; + } `} ${typeof bp.wrap !== 'undefined' && bp.wrap === false && - ` - display: flex; - flex-wrap: nowrap; - overflow-x: scroll; - overflow-y: hidden; - scroll-snap-type: x mandatory; + css` + .mdx-grid__scroll { + display: flex; + } + .mdx-grid__content { + display: flex; + flex-wrap: nowrap; + overflow-x: scroll; + overflow-y: hidden; + scroll-snap-type: x mandatory; + } `} `) })} + + ${(props) => + lsdUtils.responsive( + props.theme as any, + 'sm', + 'down', + )(css` + .mdx-grid__scroll { + display: none !important; + } + `)} ` diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.scss deleted file mode 100644 index 108967c..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.scss +++ /dev/null @@ -1,125 +0,0 @@ -@use '../../../css/utils'; -@use '../../../css/lsd'; - -:root { - --card-height: 188px; - --mobile-width: 253px; - --mobile-height: 176px; -} - -.mdx-profile-cards { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 1rem; - margin-block: 80px; -} - -.mdx-profile-card__card { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: flex-start; - padding: 1rem; - border: 1px solid rgb(var(--lsd-border-primary)); - height: var(--card-height); -} - -.mdx-profile-card__profile { - display: flex; - flex-direction: column; - gap: 20px; -} - -.mdx-profile-card__avatar { - width: 40px !important; - height: 40px !important; - border-radius: 50%; - - svg { - width: 40px !important; - height: 40px !important; - - rect { - fill: unset !important; - } - } -} - -.mdx-profile-card__name { - @include lsd.typography('h4'); -} - -.mdx-profile-card__buttons { - display: flex; - flex-direction: row; - gap: 8px; - width: 100%; -} - -.mdx-profile-card__link { - text-decoration: none; - height: fit-content; - position: relative; - max-width: calc(50% - 4px); -} - -.mdx-profile-card__button { - padding: 4px 12px 4px 10px !important; - height: 28px !important; - max-width: 100% !important; - - > span { - display: flex; - gap: 12px; - align-items: center; - } - - svg { - width: 14px; - height: 14px; - } -} - -.mdx-profile-card__link__label { - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.mdx-profile-card__label { - text-align: center; -} - -@include utils.responsive('lg', 'down') { - .mdx-profile-card { - grid-template-columns: 1fr; - } -} - -@include utils.responsive('md', 'down') { - .mdx-profile-cards { - display: flex; - flex-wrap: nowrap; - overflow-x: scroll; - overflow-y: hidden; - gap: 1rem; - scroll-snap-type: x mandatory; - margin-block: 40px; - } - - .mdx-profile-card__card { - flex: 0 0 var(--mobile-width); - width: var(--mobile-width); - height: var(--mobile-height); - scroll-snap-align: start !important; - } - - .mdx-profile-card__profile { - gap: 16px; - } - - .mdx-profile-card__name { - @include lsd.typography('h6'); - } -} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.tsx deleted file mode 100644 index 41c61d1..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { Button, Typography } from '@acid-info/lsd-react' -import React from 'react' -import './ProfileCards.scss' -import { IconAvatar, IconDiscordWhite, IconGithub } from '../../Icon' // '@logos-theme/components/Icon' doesn't work -import Link from '@docusaurus/Link' - -export type ProfileCardItem = { - imgSrc?: string - name?: string - githubUsername?: string - githubLink?: string - discordUsername?: string - discordLink?: string -} - -export type ProfileCardsProps = React.HTMLProps & { - items?: ProfileCardItem[] -} - -export const ProfileCards: React.FC = ({ - items = [], - ...props -}) => { - return ( -
- {items.map((item, index) => { - return ( -
-
- {typeof item.imgSrc === 'undefined' ? ( - - ) : ( - {typeof - )} - - {item.name} - -
- -
- {item?.githubUsername && item?.githubLink && ( - - - - )} - - {item?.discordUsername && item?.discordLink && ( - - - - )} -
-
- ) - })} -
- ) -} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/index.ts deleted file mode 100644 index 3127a93..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ProfileCards' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss index e4d9f58..6f6240e 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss @@ -18,83 +18,18 @@ } } -.mdx-roadmap__actions { +.mdx-roadmap__timeline { margin-top: 7.25rem; - display: flex; - flex-direction: row; - gap: 0 1rem; -} - -.mdx-roadmap__timeline { - margin-top: 2rem; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - gap: 0 1rem; - overflow-y: scroll; - scroll-snap-type: x mandatory; + .mdx-grid-item:last-child { + .mdx-timeline-item__border { + display: none; + } + } } .mdx-roadmap__timeline-item { - width: 236px; - gap: 1rem; - flex: 0 0 auto; - display: flex; - flex-direction: column; - padding-bottom: 23px; - border-bottom: 1px solid rgb(var(--lsd-border-primary)); - scroll-snap-align: start !important; -} - -.mdx-roadmap__timeline-header { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 1rem; -} - -.mdx-roadmap__timeline-period-container { - width: 100%; - position: relative; -} - -.mdx-roadmap__timeline-border { - top: 0; - left: 0; - width: calc(100% + 1rem); - height: 50%; - position: absolute; - border-bottom: 1px solid rgb(var(--lsd-border-primary)); - z-index: -1; -} - -.mdx-roadmap__timeline-border--dashed { - border-bottom-style: dashed; -} - -.mdx-roadmap__timeline-period { - padding: 3px 12px; - display: inline-block; - border-radius: 10rem; - color: rgb(var(--lsd-text-secondary)) !important; - background-color: rgb(var(--lsd-surface-secondary)); -} - -.mdx-roadmap__timeline-item:last-child { - .mdx-roadmap__timeline-border { - display: none; - } -} - -.mdx-roadmap--top-aligned { -} - -.mdx-roadmap--bottom-aligned { - .mdx-roadmap__timeline-item { - min-height: 308px; - justify-content: space-between; - } + height: 100%; } @include utils.responsive('lg', 'down') { @@ -106,17 +41,7 @@ } } - .mdx-roadmap__actions { + .mdx-roadmap__timeline { margin-top: 4rem; } - - .mdx-roadmap__timeline-item { - width: 204px; - } -} - -@include utils.responsive('sm', 'down') { - .mdx-roadmap__scroll { - display: none; - } } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx index 1a9c6d1..9f5b4d1 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx @@ -1,28 +1,18 @@ -import { - IconButton, - IconButtonGroup, - NavigateBeforeIcon, - NavigateNextIcon, - Typography, -} from '@acid-info/lsd-react' +import { Typography } from '@acid-info/lsd-react' import clsx from 'clsx' -import React, { useRef } from 'react' +import React from 'react' +import { Grid } from '..' +import { TimelineItem, TimelineItemProps } from '../TimelineItem' import './Roadmap.scss' -export type TimelineItem = { - period: string - description: string - borderStyle?: 'solid' | 'dashed' -} - export type RoadmapProps = Omit< React.HTMLAttributes, 'title' > & { title: React.ReactNode description?: React.ReactNode - timeline?: TimelineItem[] alignment?: 'top' | 'bottom' + timeline?: Partial[] } export const Roadmap: React.FC = ({ @@ -34,21 +24,6 @@ export const Roadmap: React.FC = ({ children, ...props }) => { - const timelineRef = useRef(null) - - const scroll = (direction: -1 | 1) => { - const el = timelineRef.current - if (!el) return - - const itemWidth = el.children[0]?.getBoundingClientRect?.()?.width ?? 236 - el.scrollTo({ - behavior: 'smooth', - left: - el.scrollLeft + - (el.getBoundingClientRect()?.width - itemWidth) * direction, - }) - } - return (
= ({ )}
-
- {children &&
{children}
} -
- - - - - - - - -
-
{timeline.length > 0 && ( -
{timeline.map((item, index) => ( -
-
-
-
- - {item.period} - -
- - {`${index < 9 ? '0' : ''}${index + 1}`} - -
- + -
+ ))} -
+ )}
) diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss new file mode 100644 index 0000000..c477243 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss @@ -0,0 +1,26 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-section-header { + width: 100%; + padding-top: 24px; + border-top: 1px solid rgb(var(--lsd-border-primary)); + + display: flex; + flex-direction: row; + gap: 1rem; + + > * { + flex-basis: 50%; + } +} + +@include utils.responsive('lg', 'down') { + .mdx-section-header { + flex-direction: column; + + &__title { + @include lsd.typography('body1'); + } + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx new file mode 100644 index 0000000..93a04b8 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx @@ -0,0 +1,40 @@ +import { Typography } from '@acid-info/lsd-react' +import clsx from 'clsx' +import React from 'react' +import { Box, BoxProps } from '..' +import './SectionHeader.scss' + +export type SectionHeaderProps = Omit & { + title?: React.ReactNode + description?: React.ReactNode +} + +export const SectionHeader: React.FC = ({ + title, + description, + className, + children, + ...props +}) => { + return ( + + + {title} + + + {description && ( + + {description} + + )} + + ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/index.ts new file mode 100644 index 0000000..5c4aefd --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/index.ts @@ -0,0 +1 @@ +export * from './SectionHeader' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss new file mode 100644 index 0000000..a323a79 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss @@ -0,0 +1,70 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-timeline-item { + width: 236px; + height: 100%; + gap: 1rem; + flex: 0 0 auto; + display: flex; + flex-direction: column; + padding-bottom: 23px; + border-bottom: 1px solid rgb(var(--lsd-border-primary)); + scroll-snap-align: start !important; +} + +.mdx-timeline-item__header { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1rem; +} + +.mdx-timeline-item__period-container { + width: 100%; + position: relative; +} + +.mdx-timeline-item__border { + top: 0; + left: 0; + width: calc(100% + 1rem); + height: 50%; + position: absolute; + border-bottom: 1px solid rgb(var(--lsd-border-primary)); + z-index: -1; +} + +.mdx-timeline-item--border-dashed { + .mdx-timeline-item__border { + border-bottom-style: dashed; + } +} + +.mdx-timeline-item__period { + padding: 3px 12px; + display: inline-block; + border-radius: 10rem; + color: rgb(var(--lsd-text-secondary)) !important; + background-color: rgb(var(--lsd-surface-secondary)); +} + +.mdx-timeline-item__item:last-child { + .mdx-timeline-item__border { + display: none; + } +} + +.mdx-timeline-item--top-aligned { +} + +.mdx-timeline-item--bottom-aligned { + min-height: 308px; + justify-content: space-between; +} + +@include utils.responsive('lg', 'down') { + .mdx-timeline-item { + width: 204px; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx new file mode 100644 index 0000000..4d46e81 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx @@ -0,0 +1,69 @@ +import { Typography } from '@acid-info/lsd-react' +import clsx from 'clsx' +import React from 'react' +import './TimelineItem.scss' + +export type TimelineItemProps = Omit< + React.HTMLAttributes, + 'title' +> & { + index: React.ReactNode + alignment?: 'top' | 'bottom' + period: React.ReactNode + description: React.ReactNode + borderStyle?: 'solid' | 'dashed' | 'none' +} + +export const TimelineItem: React.FC = ({ + index, + period, + description, + alignment = 'top', + borderStyle, + className, + children, + ...props +}) => { + return ( +
+
+
+ {borderStyle !== 'none' && ( +
+ )} + + {period} + +
+ + {typeof index === 'number' + ? `${index < 9 ? '0' : ''}${index + 1}` + : index} + +
+ + {description} + +
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/index.ts new file mode 100644 index 0000000..a2adbd3 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/index.ts @@ -0,0 +1 @@ +export * from './TimelineItem' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts index 05ea378..db9e93f 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts @@ -1,7 +1,6 @@ export * from './Box' export * from './CallToActionButton' export * from './CallToActionSection' -export * from './Community' export * from './DocMetadata' export * from './FeatureList' export * from './Grid' @@ -15,8 +14,9 @@ export * from './HeroTitle' export * from './HeroVideo' export * from './PoweredBy' export * from './ProfileCard' -export * from './ProfileCards' export * from './Roadmap' export * from './ScrollToBottom' +export * from './SectionHeader' export * from './Showcase' export * from './SocialCard' +export * from './TimelineItem'