waveterm/docusaurus-og
0
0
Fork 0
mirror of https://github.com/wavetermdev/docusaurus-og.git synced 2026-08-05 13:46:35 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'topic-universal-grid'

Browse Source
This commit is contained in:
Hossein Mehrabi
2023-10-10 17:19:49 +03:30
parent 6e1890abcd e89e24d571
commit 2aadad4b1d
18 changed files with 204 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/docusaurus-playground/docs/powered-by-waku.mdx
+46
View File
@@ -0,0 +1,46 @@
---
title: Powered by Waku
---
Leap into the future with Waku! Revolutionise communication, collaboration, and connectivity. Join us and create something extraordinary!
import { AppCard, Grid } from '@site/src/components/mdx'
<Grid xs={{ cols: 1, wrap: true, gap: '0 1rem' }} lg={{ cols: 2 }}>
<Grid.Item xs={1}>
<AppCard
name="Status"
description="Waku powers many of the Status super app's features, including its private messaging."
logoSrc="/img/status-mark-black.svg"
logoSrcDark="/img/status-mark-white.svg"
link="https://status.im"
/>
</Grid.Item>
<Grid.Item xs={1}>
<AppCard
name="RAILGUN"
description="The privacy-focused DeFi protocol Railgun anonymises Ethereum transactions with Waku."
logoSrc="/img/railgun-mark-black.svg"
logoSrcDark="/img/railgun-mark-white.svg"
link="https://railgun.org"
/>
</Grid.Item>
<Grid.Item xs={1}>
<AppCard
name="The Graph"
description="Waku powers the Graphcast SDK, enabling the development of gossip-powered applications within The Graph ecosystem."
logoSrc="/img/the-graph-mark-black.svg"
logoSrcDark="/img/the-graph-mark-white.svg"
link="https://thegraph.com/"
/>
</Grid.Item>
<Grid.Item xs={1}>
<AppCard
name="XMTP"
description="Inter-blockchain account messaging protocol XMTP uses Waku to facilitate communication between nodes in its currently permissioned network."
logoSrc="/img/xmtp-mark-black.svg"
logoSrcDark="/img/xmtp-mark-white.svg"
link="https://xmtp.org"
/>
</Grid.Item>
</Grid>
packages/docusaurus-playground/static/img/logo_white.svg
+3
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

packages/docusaurus-playground/static/img/nwaku-compose-dashboard.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 286 KiB

packages/docusaurus-playground/static/img/railgun-mark-black.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.3024 18.6316C50.3024 14.5789 48.4406 10.7719 45.3377 8.19298C42.7313 5.98246 39.5043 5 35.2843 5H15.9222V11.0175H5V18.8772H35.5326V11.6316C37.3943 11.5088 39.1319 12.1228 40.6213 13.1053C42.3589 14.4561 43.2278 16.5439 43.1036 18.6316C43.1036 22.807 40.3731 26.3684 34.6638 26.3684H15.9222V54H23.3692V33.1228H32.9261L43.1036 54H52.04L40.6213 32.1404C46.5789 30.2982 50.4265 24.7719 50.3024 18.6316Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 531 B

packages/docusaurus-playground/static/img/railgun-mark-white.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.3024 18.6316C50.3024 14.5789 48.4406 10.7719 45.3377 8.19298C42.7313 5.98246 39.5043 5 35.2843 5H15.9222V11.0175H5V18.8772H35.5326V11.6316C37.3943 11.5088 39.1319 12.1228 40.6213 13.1053C42.3589 14.4561 43.2278 16.5439 43.1036 18.6316C43.1036 22.807 40.3731 26.3684 34.6638 26.3684H15.9222V54H23.3692V33.1228H32.9261L43.1036 54H52.04L40.6213 32.1404C46.5789 30.2982 50.4265 24.7719 50.3024 18.6316Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 531 B

packages/docusaurus-playground/static/img/status-mark-black.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.6479 28.7454C30.3452 28.9357 28.2754 28.1664 24.9723 28.3571C24.1531 28.4031 23.3396 28.5219 22.5412 28.7119C23.0288 22.6035 27.3519 17.26 33.2306 16.9204C36.8381 16.7122 40.4439 18.9396 40.6394 22.5554C40.8319 26.1093 38.1221 28.4868 33.6483 28.7449L33.6479 28.7454ZM24.779 41.2399C21.323 41.4351 17.8692 39.3499 17.6817 35.9663C17.4972 32.6402 20.0937 30.4151 24.3794 30.1735C27.543 29.9952 29.5261 30.7155 32.6897 30.5368C33.4741 30.4938 34.2533 30.3827 35.0186 30.2047C34.5523 35.9213 30.411 40.9225 24.779 41.2399ZM28.9999 1.44478C13.7812 1.44434 1.44434 13.781 1.44434 28.9999C1.44434 44.2187 13.7812 56.5554 28.9999 56.5554C44.2186 56.5554 56.5554 44.2183 56.5554 28.9999C56.5554 13.7815 44.2186 1.44434 28.9999 1.44434" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 899 B

packages/docusaurus-playground/static/img/status-mark-white.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.6479 28.7454C30.3452 28.9357 28.2754 28.1664 24.9723 28.3571C24.1531 28.4031 23.3396 28.5219 22.5412 28.7119C23.0288 22.6035 27.3519 17.26 33.2306 16.9204C36.8381 16.7122 40.4439 18.9396 40.6394 22.5554C40.8319 26.1093 38.1221 28.4868 33.6483 28.7449L33.6479 28.7454ZM24.779 41.2399C21.323 41.4351 17.8692 39.3499 17.6817 35.9663C17.4972 32.6402 20.0937 30.4151 24.3794 30.1735C27.543 29.9952 29.5261 30.7155 32.6897 30.5368C33.4741 30.4938 34.2533 30.3827 35.0186 30.2047C34.5523 35.9213 30.411 40.9225 24.779 41.2399ZM28.9999 1.44478C13.7812 1.44434 1.44434 13.781 1.44434 28.9999C1.44434 44.2187 13.7812 56.5554 28.9999 56.5554C44.2186 56.5554 56.5554 44.2183 56.5554 28.9999C56.5554 13.7815 44.2186 1.44434 28.9999 1.44434" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 899 B

packages/docusaurus-playground/static/img/the-graph-mark-black.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.6666 33.111C19.7939 33.111 14.2222 27.5397 14.2222 20.6666C14.2222 13.7935 19.7939 8.2222 26.6666 8.2222C33.5397 8.2222 39.111 13.7935 39.111 20.6666C39.111 27.5397 33.5397 33.111 26.6666 33.111ZM26.6666 2C36.9759 2 45.3332 10.3574 45.3332 20.6666C45.3332 30.9758 36.9759 39.3332 26.6666 39.3332C16.3574 39.3332 8 30.9758 8 20.6666C8 10.3574 16.3574 2 26.6666 2ZM44.4221 40.2443C45.6371 41.4593 45.6371 43.4289 44.4221 44.644L31.9773 57.0887C30.7623 58.3038 28.7927 58.3038 27.5777 57.0887C26.3627 55.8737 26.3627 53.9041 27.5777 52.6891L40.0225 40.2443C41.2375 39.0293 43.2071 39.0293 44.4221 40.2443ZM51.5554 5.1111C51.5554 6.82956 50.1628 8.2222 48.4447 8.2222C46.7262 8.2222 45.3336 6.82956 45.3336 5.1111C45.3336 3.39264 46.7262 2 48.4447 2C50.1628 2 51.5554 3.39264 51.5554 5.1111Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 960 B

packages/docusaurus-playground/static/img/the-graph-mark-white.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.6666 33.111C19.7939 33.111 14.2222 27.5397 14.2222 20.6666C14.2222 13.7935 19.7939 8.2222 26.6666 8.2222C33.5397 8.2222 39.111 13.7935 39.111 20.6666C39.111 27.5397 33.5397 33.111 26.6666 33.111ZM26.6666 2C36.9759 2 45.3332 10.3574 45.3332 20.6666C45.3332 30.9758 36.9759 39.3332 26.6666 39.3332C16.3574 39.3332 8 30.9758 8 20.6666C8 10.3574 16.3574 2 26.6666 2ZM44.4221 40.2443C45.6371 41.4593 45.6371 43.4289 44.4221 44.644L31.9773 57.0887C30.7623 58.3038 28.7927 58.3038 27.5777 57.0887C26.3627 55.8737 26.3627 53.9041 27.5777 52.6891L40.0225 40.2443C41.2375 39.0293 43.2071 39.0293 44.4221 40.2443ZM51.5554 5.1111C51.5554 6.82956 50.1628 8.2222 48.4447 8.2222C46.7262 8.2222 45.3336 6.82956 45.3336 5.1111C45.3336 3.39264 46.7262 2 48.4447 2C50.1628 2 51.5554 3.39264 51.5554 5.1111Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 960 B

packages/docusaurus-playground/static/img/waku-create-app-demo.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 378 KiB

packages/docusaurus-playground/static/img/xmtp-mark-black.svg
+10
View File
@@ -0,0 +1,10 @@
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_949_40203)">
<path d="M2 29.5C2 14.3122 14.1486 2 29.1346 2C44.1109 2 55.6819 14.0833 56.0342 29.3809C56.0342 34.2619 54.3897 38.369 50.2785 42.238C46.8043 45.5077 40.8811 45.988 36.5353 43.5476C33.4334 41.7342 31.0428 37.8722 29.0171 35.0357L25.2582 40.869H17.1531L24.7884 29.3805L17.388 18.0714H25.7281L29.076 23.9048L32.3648 18.0714H40.7638L33.1285 29.3809C33.1285 29.3809 36.7699 35.0357 38.7668 37.2381C40.7638 39.4406 44.4052 39.5 46.7544 37.1191C49.3375 34.5012 49.9157 32.4168 49.9262 29.3809C49.9664 17.6303 40.7568 8.19047 29.1346 8.19047C17.5221 8.19047 8.10822 17.7311 8.10822 29.5C8.10822 41.2689 17.5221 50.8096 29.1346 50.8096C30.7409 50.8096 32.2803 50.6728 33.7745 50.3332L35.0667 56.3453C32.9406 56.8283 31.2229 57 29.1346 57C14.1486 57 2 44.6878 2 29.5Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_949_40203">
<rect width="58" height="58" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

packages/docusaurus-playground/static/img/xmtp-mark-white.svg
+10
View File
@@ -0,0 +1,10 @@
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1029_16174)">
<path d="M2 29.5C2 14.3122 14.1486 2 29.1346 2C44.1109 2 55.6819 14.0833 56.0342 29.3809C56.0342 34.2619 54.3897 38.369 50.2785 42.238C46.8043 45.5077 40.8811 45.988 36.5353 43.5476C33.4334 41.7342 31.0428 37.8722 29.0171 35.0357L25.2582 40.869H17.1531L24.7884 29.3805L17.388 18.0714H25.7281L29.076 23.9048L32.3648 18.0714H40.7638L33.1285 29.3809C33.1285 29.3809 36.7699 35.0357 38.7668 37.2381C40.7638 39.4406 44.4052 39.5 46.7544 37.1191C49.3375 34.5012 49.9157 32.4168 49.9262 29.3809C49.9664 17.6303 40.7568 8.19047 29.1346 8.19047C17.5221 8.19047 8.10822 17.7311 8.10822 29.5C8.10822 41.2689 17.5221 50.8096 29.1346 50.8096C30.7409 50.8096 32.2803 50.6728 33.7745 50.3332L35.0667 56.3453C32.9406 56.8283 31.2229 57 29.1346 57C14.1486 57 2 44.6878 2 29.5Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1029_16174">
<rect width="58" height="58" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

packages/logos-docusaurus-theme/src/client/components/mdx/AppCard/AppCard.scss
+41
View File
@@ -0,0 +1,41 @@
@use '../../../css/utils';
@use '../../../css/lsd';
.mdx-app-card {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 1.5rem 0;
}
.mdx-app-card__logo {
height: 40px;
width: auto;
}
.mdx-app-card__name {
margin-top: 1rem;
}
.mdx-app-card__description {
margin-top: 1.5rem;
}
.mdx-app-card__link {
margin-top: 1.5rem;
width: 100%;
button {
width: 100%;
padding: 10px 16px;
& > span {
display: block;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
}
packages/logos-docusaurus-theme/src/client/components/mdx/AppCard/AppCard.tsx
+57
View File
@@ -0,0 +1,57 @@
import { Button, PickIcon, Typography } from '@acid-info/lsd-react'
import ThemedImage from '@theme/ThemedImage'
import clsx from 'clsx'
import React from 'react'
import './AppCard.scss'
export type AppCardProps = React.HTMLProps<HTMLDivElement> & {
logoSrc?: string
logoSrcDark?: string
name?: React.ReactNode
description?: React.ReactNode
link?: string
linkLabel?: string
}
export const AppCard: React.FC<AppCardProps> = ({
logoSrc,
logoSrcDark,
name,
description,
link,
linkLabel,
...props
}) => {
return (
<div {...props} className={clsx(props.className, 'mdx-app-card')}>
{(logoSrc || logoSrcDark) && (
<ThemedImage
sources={{
dark: logoSrcDark ?? logoSrc ?? '',
light: logoSrc ?? logoSrcDark ?? '',
}}
alt={typeof name === 'string' ? name : ''}
className="mdx-app-card__logo"
/>
)}
<Typography component="span" variant="h5" className="mdx-app-card__name">
{name}
</Typography>
<Typography variant="subtitle1" className="mdx-app-card__description">
{description}
</Typography>
{link && (
<a href={link} target="_blank" className="mdx-app-card__link">
<Button size="large" variant="outlined">
<Typography variant="label1" component="span">
{linkLabel ?? <>Visit {name}</>}
</Typography>
<span>
<PickIcon color="primary" />
</span>
</Button>
</a>
)}
</div>
)
}
packages/logos-docusaurus-theme/src/client/components/mdx/AppCard/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './AppCard'
packages/logos-docusaurus-theme/src/client/components/mdx/PoweredBy/PoweredBy.scss
-48
View File
@@ -2,52 +2,4 @@
@use '../../../css/lsd';
.mdx-powered-by {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 1rem;
}
.mdx-powered-by__card {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 1.5rem 0;
}
.mdx-powered-by__logo {
height: 40px;
width: auto;
}
.mdx-powered-by__name {
margin-top: 1rem;
}
.mdx-powered-by__description {
margin-top: 1.5rem;
}
.mdx-powered-by__link {
margin-top: 1.5rem;
width: 100%;
button {
width: 100%;
padding: 10px 16px;
& > span {
display: block;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
}
@include utils.responsive('lg', 'down') {
.mdx-powered-by {
grid-template-columns: 1fr;
}
}
packages/logos-docusaurus-theme/src/client/components/mdx/PoweredBy/PoweredBy.tsx
+17 -64
View File
@@ -1,76 +1,29 @@
import { Button, PickIcon, Typography } from '@acid-info/lsd-react'
import { useColorMode } from '@docusaurus/theme-common'
import clsx from 'clsx'
import React from 'react'
import { AppCard, AppCardProps, Grid, GridProps } from '..'
import './PoweredBy.scss'
export type PoweredByItem = {
logoSrc?: string
logoSrcDark?: string
name?: React.ReactNode
description?: React.ReactNode
link?: string
linkLabel?: string
}
export type PoweredByProps = React.HTMLProps<HTMLDivElement> & {
items?: PoweredByItem[]
export type PoweredByProps = GridProps & {
items?: AppCardProps[]
}
export const PoweredBy: React.FC<PoweredByProps> = ({
items = [],
className,
...props
}) => {
const { colorMode } = useColorMode()
return (
<div className="mdx-powered-by">
{items.map((item, index) => {
const logoSrc = item.logoSrc ?? item.logoSrcDark
return (
<div key={index} className="mdx-powered-by__card">
{logoSrc && (
<img
alt={typeof item.name === 'string' ? item.name : ''}
className="mdx-powered-by__logo"
src={
(colorMode === 'dark' ? item.logoSrcDark : item.logoSrc) ??
logoSrc
}
/>
)}
<Typography
component="span"
variant="h5"
className="mdx-powered-by__name"
>
{item.name}
</Typography>
<Typography
variant="subtitle1"
className="mdx-powered-by__description"
>
{item.description}
</Typography>
{item.link && (
<a
href={item.link}
target="_blank"
className="mdx-powered-by__link"
>
<Button size="large" variant="outlined">
<Typography variant="label1" component="span">
{item.linkLabel ?? <>Visit {item.name}</>}
</Typography>
<span>
<PickIcon color="primary" />
</span>
</Button>
</a>
)}
</div>
)
})}
</div>
<Grid
className={clsx(className, 'mdx-powered-by')}
xs={{ cols: 1, wrap: true, gap: '0 1rem' }}
lg={{ cols: 2 }}
{...props}
>
{items.map((item, index) => (
<Grid.Item key={index} xs={1}>
<AppCard {...item} />
</Grid.Item>
))}
</Grid>
)
}
packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
+1
View File
@@ -1,3 +1,4 @@
export * from './AppCard'
export * from './Box'
export * from './CallToActionButton'
export * from './CallToActionSection'