diff --git a/packages/docusaurus-playground/docs/community.mdx b/packages/docusaurus-playground/docs/community.mdx index f1e2431..071664b 100644 --- a/packages/docusaurus-playground/docs/community.mdx +++ b/packages/docusaurus-playground/docs/community.mdx @@ -2,41 +2,48 @@ title: Join the community --- -import { Community } from '../../logos-docusaurus-theme/src/client/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 fe88b7e..1a15b06 100644 --- a/packages/docusaurus-playground/src/pages/index.mdx +++ b/packages/docusaurus-playground/src/pages/index.mdx @@ -11,7 +11,13 @@ import { Showcase, HeroInfo, Box, + Grid, + ProfileCard, ProfileCards, + Roadmap, + SectionHeader, + TimelineItem, + ShowcaseCard, } from '../components/mdx' @@ -89,80 +95,248 @@ import { href="/about/team" target="_self" /> - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + "RAILGUN contributors selected Waku to run its relayer network as an early-stage but promising product of the privacy-centric status.im ecosystem. We have not been disappointed. The developers are extremely professional and responsive, and continue to strive to understand and meet our needs as a communication layer for relaying private transactions.", + }, + { + name: 'The Graph', + logo: '/showcase/the-graph-mark-black.svg', + logoDark: '/showcase/the-graph-mark-white.svg', + description: + `"Our experience with Waku has been transformative, proving to be a valuable tool that reveals the potential of peer-to-peer communication technologies. We are excited to continue using Waku's advanced features and contribute to the growth of Graphcast and the broader Graph ecosystem."`, + } + ]} + /> + + Build on Waku + + + + + + + + + + + + + "RAILGUN contributors selected Waku to run its relayer network as an + early-stage but promising product of the privacy-centric{' '} + + status.im + {' '} + ecosystem. We have not been disappointed. The developers are + extremely professional and responsive, and continue to strive to + understand and meet our needs as a communication layer for relaying + private transactions." + + } + /> + + + + + + + Build on Waku + + 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 new file mode 100644 index 0000000..74a2604 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx @@ -0,0 +1,148 @@ +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, { useRef } from 'react' +import { lsdUtils } from '../../../lib/lsd.utils' +import { GridItem } from './GridItem' + +export type GridProps = React.ComponentProps & {} + +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} +
+ + ) +} + +Grid.Item = GridItem + +type GridBreakpointProps = { + cols?: number + wrap?: boolean + gap?: string | number +} + +const GridRoot = styled.div<{ + xs?: GridBreakpointProps + sm?: GridBreakpointProps + md?: GridBreakpointProps + lg?: GridBreakpointProps + xl?: GridBreakpointProps +}>` + width: 100%; + + .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) => { + if (!props[key]) return null + + const bp = props[key] as GridBreakpointProps + + return lsdUtils.responsive( + props.theme as any, + key, + 'up', + )(css` + ${typeof bp.cols !== 'undefined' && + ` + --grid-cols: ${bp.cols}; + `} + + ${typeof bp.gap !== 'undefined' && + ` + --grid-gap: ${bp.gap}; + `} + + ${(typeof bp.wrap === 'undefined' || bp.wrap === true) && + 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 && + 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/Grid/GridItem.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/GridItem.tsx new file mode 100644 index 0000000..0a1423a --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/GridItem.tsx @@ -0,0 +1,40 @@ +import clsx from 'clsx' +import React from 'react' +import styled from '@emotion/styled' +import { THEME_BREAKPOINTS } from '@acid-info/lsd-react' +import { lsdUtils } from '../../../lib/lsd.utils' +import { css } from '@emotion/react' + +export type GridItemProps = React.ComponentProps & {} + +export const GridItem: React.FC = ({ children, ...props }) => { + return ( + + {children} + + ) +} + +const Root = styled.div<{ + xs?: number + sm?: number + md?: number + lg?: number + xl?: number +}>` + ${(props) => + THEME_BREAKPOINTS.map((key) => { + if (!props[key]) return null + + const bp = props[key] as number + + return lsdUtils.responsive( + props.theme as any, + key, + 'up', + )(css` + grid-column: span ${bp}; + flex-basis: calc(100% / var(--grid-cols) * ${bp}); + `) + })} +` diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/index.ts new file mode 100644 index 0000000..97e0682 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/index.ts @@ -0,0 +1,2 @@ +export * from './Grid' +export * from './GridItem' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss similarity index 82% rename from packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.scss rename to packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss index 108967c..cefd173 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss @@ -7,14 +7,7 @@ --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 { +.mdx-profile-card { display: flex; flex-direction: column; justify-content: space-between; @@ -98,17 +91,7 @@ } @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 { + .mdx-profile-card { flex: 0 0 var(--mobile-width); width: var(--mobile-width); height: var(--mobile-height); diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx new file mode 100644 index 0000000..685bee1 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx @@ -0,0 +1,94 @@ +import { Button, Typography } from '@acid-info/lsd-react' +import Link from '@docusaurus/Link' +import React from 'react' +import { IconAvatar, IconDiscordWhite, IconGithub } from '../../Icon' +import './ProfileCard.scss' +import clsx from 'clsx' + +export type ProfileCardProps = React.HTMLProps & { + imgSrc?: string + name?: string + githubUsername?: string + githubLink?: string + discordUsername?: string + discordLink?: string +} + +export const ProfileCard: React.FC = ({ + imgSrc, + name, + githubUsername, + githubLink, + discordUsername, + discordLink, + ...props +}) => { + return ( +
+
+ {typeof imgSrc === 'undefined' ? ( + + ) : ( + {typeof + )} + + {name} + +
+ +
+ {githubUsername && githubLink && ( + + + + )} + + {discordUsername && discordLink && ( + + + + )} +
+
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/index.ts new file mode 100644 index 0000000..c197ad4 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/index.ts @@ -0,0 +1 @@ +export * from './ProfileCard' 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/Showcase/Showcase.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss index 2f88216..d2a38c2 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss @@ -1,51 +1,2 @@ -@use '../../../css/utils'; -@use '../../../css/lsd'; - .mdx-showcase { - width: 100%; - overflow: hidden; - display: grid; - grid-template-columns: repeat(var(--columns), 1fr); - gap: 1rem; -} - -.mdx-showcase__item { - border-top: 1px solid rgb(var(--lsd-border-primary)); -} - -.mdx-showcase__item-inner { - padding: 24px 8px; -} - -.mdx-showcase__item-logo { -} - -.mdx-showcase__item-name { - margin-top: 1rem; -} - -.mdx-showcase__item-description { - border-top: 1px solid rgb(var(--lsd-border-primary)); - margin-top: 24px; - padding-top: 16px; -} - -@include utils.responsive('lg', 'down') { - .mdx-showcase { - grid-template-columns: repeat(2, 1fr); - gap: 1.5rem 1rem; - } - - .mdx-showcase__item-name { - @include lsd.typography('h6'); - } - - .mdx-showcase__item-description { - margin-top: 1rem; - } - - .mdx-showcase__item-logo { - width: 34px; - height: auto; - } } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx index 5c9f5e4..19f4d4b 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx @@ -1,71 +1,31 @@ -import { Typography } from '@acid-info/lsd-react' -import ThemedImage from '@theme/ThemedImage' import clsx from 'clsx' import React from 'react' -import { makeStyle } from '../../../lib/makeStyle' +import { Grid, GridProps, ShowcaseCard, ShowcaseCardProps } from '..' import './Showcase.scss' -export type ShowcaseItem = { - name: React.ReactNode - logo?: string - logoDark?: string - description: React.ReactNode -} - -export type ShowcaseProps = Omit< - React.HTMLAttributes, - 'title' -> & { - items: ShowcaseItem[] - columns?: number +export type ShowcaseProps = GridProps & { + items: ShowcaseCardProps[] } export const Showcase: React.FC = ({ items = [], - columns = 4, - style = {}, className, - children, ...props }) => { return ( -
{items.map((item, index) => { return ( -
-
- {item?.logo && item?.logoDark && ( - - )} - - {item.name} - - - {item.description} - -
-
+ + + ) })} -
+ ) } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss new file mode 100644 index 0000000..408ab2c --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss @@ -0,0 +1,43 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-showcase-card { + border-top: 1px solid rgb(var(--lsd-border-primary)); +} + +.mdx-showcase-card__inner { + padding: 24px 8px; +} + +.mdx-showcase-card__logo { +} + +.mdx-showcase-card__name { + margin-top: 1rem; +} + +.mdx-showcase-card__description { + border-top: 1px solid rgb(var(--lsd-border-primary)); + margin-top: 24px; + padding-top: 16px; +} + +@include utils.responsive('lg', 'down') { + .mdx-showcase { + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem 1rem; + } + + .mdx-showcase-card__name { + @include lsd.typography('h6'); + } + + .mdx-showcase-card__description { + margin-top: 1rem; + } + + .mdx-showcase-card__logo { + width: 34px; + height: auto; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx new file mode 100644 index 0000000..864160c --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx @@ -0,0 +1,56 @@ +import { Typography } from '@acid-info/lsd-react' +import ThemedImage from '@theme/ThemedImage' +import clsx from 'clsx' +import React from 'react' +import './ShowcaseCard.scss' + +export type ShowcaseCardProps = Omit< + React.HTMLAttributes, + 'title' +> & { + logoSrc?: string + logoSrcDark?: string + name: React.ReactNode + description: React.ReactNode +} + +export const ShowcaseCard: React.FC = ({ + name, + logoSrc, + logoSrcDark, + description, + className, + children, + ...props +}) => { + return ( +
+
+ {(logoSrc || logoSrcDark) && ( + + )} + + {name} + + + {description} + +
+
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/index.ts new file mode 100644 index 0000000..866f04e --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/index.ts @@ -0,0 +1 @@ +export * from './ShowcaseCard' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/SocialCard/SocialCard.scss similarity index 54% rename from packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.scss rename to packages/logos-docusaurus-theme/src/client/components/mdx/SocialCard/SocialCard.scss index ec0a088..f210c94 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SocialCard/SocialCard.scss @@ -1,23 +1,7 @@ @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 { +.mdx-social-card { display: flex; flex-direction: column; justify-content: space-between; @@ -25,15 +9,21 @@ padding: 1rem; border: 1px solid rgb(var(--lsd-border-primary)); min-height: 144px; + + text-decoration: none !important; } -.mdx-community__row { +.mdx-social-card:hover { + text-decoration: underline !important; +} + +.mdx-social-card__row { display: flex; justify-content: space-between; width: 100%; } -.mdx-community__logo { +.mdx-social-card__logo { width: 40px !important; height: 40px !important; @@ -43,15 +33,5 @@ } } -.mdx-community__external-link { -} - -.mdx-community__label { - text-align: center; -} - -@include utils.responsive('lg', 'down') { - .mdx-community { - grid-template-columns: 1fr; - } +.mdx-social-card__description { } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SocialCard/SocialCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/SocialCard/SocialCard.tsx new file mode 100644 index 0000000..19e73e2 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SocialCard/SocialCard.tsx @@ -0,0 +1,49 @@ +import { Typography } from '@acid-info/lsd-react' +import ThemedImage from '@theme/ThemedImage' +import clsx from 'clsx' +import React from 'react' +import { IconExternalLink } from '../../Icon' +import './SocialCard.scss' + +export type SocialCardProps = React.HTMLProps & { + logoSrc?: string + logoSrcDark?: string + description?: React.ReactNode +} + +export const SocialCard: React.FC = ({ + title, + logoSrc, + logoSrcDark, + description, + ...props +}) => { + return ( + +
+ {(logoSrc || logoSrcDark) && ( + + )} + +
+ + {description} + + + ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SocialCard/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/SocialCard/index.ts new file mode 100644 index 0000000..4596142 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SocialCard/index.ts @@ -0,0 +1 @@ +export * from './SocialCard' 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 0e5d815..2fbe625 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts @@ -1,9 +1,9 @@ export * from './Box' export * from './CallToActionButton' export * from './CallToActionSection' -export * from './Community' export * from './DocMetadata' export * from './FeatureList' +export * from './Grid' export * from './Hero' export * from './HeroAction' export * from './HeroActions' @@ -11,9 +11,13 @@ export * from './HeroDescription' export * from './HeroInfo' export * from './HeroModel' export * from './HeroTitle' -export * from './PoweredBy' -export * from './ScrollToBottom' -export * from './Showcase' -export * from './Roadmap' export * from './HeroVideo' -export * from './ProfileCards' +export * from './PoweredBy' +export * from './ProfileCard' +export * from './Roadmap' +export * from './ScrollToBottom' +export * from './SectionHeader' +export * from './Showcase' +export * from './ShowcaseCard' +export * from './SocialCard' +export * from './TimelineItem' diff --git a/packages/logos-docusaurus-theme/src/client/lib/lsd.utils.ts b/packages/logos-docusaurus-theme/src/client/lib/lsd.utils.ts new file mode 100644 index 0000000..d753b6a --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/lib/lsd.utils.ts @@ -0,0 +1,102 @@ +import { + Breakpoints, + Theme, + THEME_BREAKPOINTS, + TypographyVariants, +} from '@acid-info/lsd-react' +import { css, SerializedStyles } from '@emotion/react' + +export class LsdUtils { + private _breakpoints: Record< + string, + Record + > = {} + + private getBreakpoints = (theme: Theme) => { + if (this._breakpoints[theme.name]) { + return this._breakpoints[theme.name] + } + + const breakpoints: (typeof this._breakpoints)[string] = {} + for (let i = 0; i < THEME_BREAKPOINTS.length; i++) { + const name = THEME_BREAKPOINTS[i]! + const breakpoint = theme.breakpoints[name] + const next = theme.breakpoints[THEME_BREAKPOINTS[i + 1]!] + + const min = breakpoint.width + const max = next ? next.width - 1 : Number.MAX_SAFE_INTEGER + + breakpoints[name] = { + min, + max, + } + } + + this._breakpoints[theme.name] = breakpoints + + return breakpoints + } + + private getBreakpoint = (theme: Theme, breakpoint: Breakpoints) => { + const breakpoints = this.getBreakpoints(theme) + return breakpoints![breakpoint] + } + + breakpoints = (exclude: Breakpoints[] = []) => + THEME_BREAKPOINTS.filter((b) => !exclude.find((b2) => b2 === b)) + + typography = (variant: TypographyVariants | 'subtitle3', important = false) => + variant === 'subtitle3' + ? ` + font-size: 12px !important; + font-weight: 400 !important; + line-height: 16px !important; + ` + : ` + font-size: var(--lsd-${variant}-fontSize)${important ? '!important' : ''}; + font-weight: var(--lsd-${variant}-fontWeight)${ + important ? '!important' : '' + }; + line-height: var(--lsd-${variant}-lineHeight)${ + important ? '!important' : '' + }; + ` + + breakpoint = ( + theme: Theme, + breakpoint: Breakpoints, + func: 'exact' | 'up' | 'down' | 'between' = 'up', + next?: Breakpoints, + ) => { + const { min, max } = this.getBreakpoint(theme, breakpoint)! + + let media = `@media ` + + if (func === 'up') { + media += `(min-width: ${min}px)` + } else if (func === 'down') media += `(max-width: ${max}px)` + else if (func === 'between' && !!next) { + const nextBreakpoint = this.getBreakpoint(theme, next) + media += `(min-width: ${min}px) and (max-width: ${ + nextBreakpoint!.min - 1 + }px)` + } else media += `(min-width: ${min}px) and (max-width: ${max}px)` + + return `${media}` + } + + responsive = ( + theme: Theme, + breakpoint: Breakpoints, + func: 'exact' | 'up' | 'down' = 'up', + ) => { + const media = lsdUtils.breakpoint(theme, breakpoint, func) + return (styles: SerializedStyles) => css` + ${media} { + ${styles} + } + ` + } +} + +export const lsdUtils = new LsdUtils()