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()