From cdbe63620c59b27f0446778a82ef54460a7ea19c Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Tue, 10 Oct 2023 12:53:05 +0330 Subject: [PATCH 1/3] feat: implement universal grid refs #116 --- .../docusaurus-playground/docs/community.mdx | 70 +++++---- .../docusaurus-playground/src/pages/index.mdx | 146 ++++++++++-------- .../src/client/components/mdx/Grid/Grid.tsx | 85 ++++++++++ .../client/components/mdx/Grid/GridItem.tsx | 40 +++++ .../src/client/components/mdx/Grid/index.ts | 2 + .../mdx/ProfileCard/ProfileCard.scss | 108 +++++++++++++ .../mdx/ProfileCard/ProfileCard.tsx | 94 +++++++++++ .../components/mdx/ProfileCard/index.ts | 1 + .../components/mdx/SocialCard/SocialCard.scss | 37 +++++ .../components/mdx/SocialCard/SocialCard.tsx | 49 ++++++ .../client/components/mdx/SocialCard/index.ts | 1 + .../src/client/components/mdx/index.ts | 9 +- .../src/client/lib/lsd.utils.ts | 102 ++++++++++++ 13 files changed, 643 insertions(+), 101 deletions(-) create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/Grid/GridItem.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/Grid/index.ts create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/index.ts create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/SocialCard/SocialCard.scss create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/SocialCard/SocialCard.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/SocialCard/index.ts create mode 100644 packages/logos-docusaurus-theme/src/client/lib/lsd.utils.ts diff --git a/packages/docusaurus-playground/docs/community.mdx b/packages/docusaurus-playground/docs/community.mdx index f1e2431..7c0209d 100644 --- a/packages/docusaurus-playground/docs/community.mdx +++ b/packages/docusaurus-playground/docs/community.mdx @@ -3,40 +3,46 @@ title: Join the community --- import { Community } from '../../logos-docusaurus-theme/src/client/components/mdx' +import { SocialCard, Grid } 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..045c1f5 100644 --- a/packages/docusaurus-playground/src/pages/index.mdx +++ b/packages/docusaurus-playground/src/pages/index.mdx @@ -11,6 +11,8 @@ import { Showcase, HeroInfo, Box, + Grid, + ProfileCard, ProfileCards, } from '../components/mdx' @@ -89,72 +91,84 @@ import { href="/about/team" target="_self" /> - + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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..820dbd5 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx @@ -0,0 +1,85 @@ +import { 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 { lsdUtils } from '../../../lib/lsd.utils' +import { GridItem } from './GridItem' + +export type GridProps = React.ComponentProps & {} + +export const Grid: { Item: typeof GridItem } & React.FC = ({ + children, + ...props +}) => { + 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%; + overflow: hidden; + display: grid; + + gap: var(--grid-gap); + grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); + + ${(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) && + ` + 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; + `} + `) + })} +` 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/ProfileCard/ProfileCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss new file mode 100644 index 0000000..cefd173 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss @@ -0,0 +1,108 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +:root { + --card-height: 188px; + --mobile-width: 253px; + --mobile-height: 176px; +} + +.mdx-profile-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-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/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/SocialCard/SocialCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/SocialCard/SocialCard.scss new file mode 100644 index 0000000..f210c94 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SocialCard/SocialCard.scss @@ -0,0 +1,37 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-social-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; + + text-decoration: none !important; +} + +.mdx-social-card:hover { + text-decoration: underline !important; +} + +.mdx-social-card__row { + display: flex; + justify-content: space-between; + width: 100%; +} + +.mdx-social-card__logo { + width: 40px !important; + height: 40px !important; + + svg { + width: 40px !important; + height: 40px !important; + } +} + +.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/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts index 0e5d815..05ea378 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts @@ -4,6 +4,7 @@ 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 +12,11 @@ export * from './HeroDescription' export * from './HeroInfo' export * from './HeroModel' export * from './HeroTitle' +export * from './HeroVideo' export * from './PoweredBy' +export * from './ProfileCard' +export * from './ProfileCards' +export * from './Roadmap' export * from './ScrollToBottom' export * from './Showcase' -export * from './Roadmap' -export * from './HeroVideo' -export * from './ProfileCards' +export * from './SocialCard' 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() From 306749e98c54fd58619cfda62789348a1686a54e Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Tue, 10 Oct 2023 16:20:20 +0330 Subject: [PATCH 2/3] refactor: use the new Grid component in the Roadmap component; refs #116 --- .../docusaurus-playground/docs/community.mdx | 79 +++++------ .../docusaurus-playground/src/pages/index.mdx | 101 ++++++++++++-- .../components/mdx/Community/Community.scss | 57 -------- .../components/mdx/Community/Community.tsx | 93 ------------- .../client/components/mdx/Community/index.ts | 1 - .../src/client/components/mdx/Grid/Grid.tsx | 103 ++++++++++++--- .../mdx/ProfileCards/ProfileCards.scss | 125 ------------------ .../mdx/ProfileCards/ProfileCards.tsx | 98 -------------- .../components/mdx/ProfileCards/index.ts | 1 - .../components/mdx/Roadmap/Roadmap.scss | 91 ++----------- .../client/components/mdx/Roadmap/Roadmap.tsx | 98 +++----------- .../mdx/SectionHeader/SectionHeader.scss | 26 ++++ .../mdx/SectionHeader/SectionHeader.tsx | 40 ++++++ .../components/mdx/SectionHeader/index.ts | 1 + .../mdx/TimelineItem/TimelineItem.scss | 70 ++++++++++ .../mdx/TimelineItem/TimelineItem.tsx | 69 ++++++++++ .../components/mdx/TimelineItem/index.ts | 1 + .../src/client/components/mdx/index.ts | 4 +- 18 files changed, 446 insertions(+), 612 deletions(-) delete mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/Community/index.ts delete mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/index.ts create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/index.ts create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/index.ts 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' From 398f02557533280da77ccc5f1af0f0e98ea5f5ea Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Tue, 10 Oct 2023 16:44:55 +0330 Subject: [PATCH 3/3] refactor: use the new Grid in the Showcase component; refs #116 --- .../docusaurus-playground/src/pages/index.mdx | 87 +++++++++++++++++++ .../components/mdx/Showcase/Showcase.scss | 49 ----------- .../components/mdx/Showcase/Showcase.tsx | 60 +++---------- .../mdx/ShowcaseCard/ShowcaseCard.scss | 43 +++++++++ .../mdx/ShowcaseCard/ShowcaseCard.tsx | 56 ++++++++++++ .../components/mdx/ShowcaseCard/index.ts | 1 + .../src/client/components/mdx/index.ts | 1 + 7 files changed, 198 insertions(+), 99 deletions(-) create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/index.ts diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx index 7bc5666..1a15b06 100644 --- a/packages/docusaurus-playground/src/pages/index.mdx +++ b/packages/docusaurus-playground/src/pages/index.mdx @@ -17,6 +17,7 @@ import { Roadmap, SectionHeader, TimelineItem, + ShowcaseCard, } from '../components/mdx' @@ -253,3 +254,89 @@ import { + + + + + + "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/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/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts index db9e93f..2fbe625 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts @@ -18,5 +18,6 @@ export * from './Roadmap' export * from './ScrollToBottom' export * from './SectionHeader' export * from './Showcase' +export * from './ShowcaseCard' export * from './SocialCard' export * from './TimelineItem'