mirror of
https://github.com/wavetermdev/docusaurus-og.git
synced 2026-08-05 13:46:35 -07:00
feat: update components related to roadmap
This commit is contained in:
jinhojang6
Jinho Jang
@@ -180,102 +180,64 @@ import * as challengesData from '/generated/challenges.json'
|
||||
</Box>
|
||||
|
||||
<Box top={{ xs: 144, lg: 216 }}>
|
||||
<SectionHeader
|
||||
title="Development Roadmap"
|
||||
description="Codex is currently in its first proof-of-concept iteration and aims to release its beta version, Katana, before the end of Q4 2023."
|
||||
<Roadmap
|
||||
title="Roadmap"
|
||||
description="Nomos is currently in its first proof-of-concept iteration and aims to release its beta version, Katana, before the end of Q4 2023."
|
||||
bottom={{ xs: '4rem', lg: '7.25rem' }}
|
||||
timeline={[
|
||||
{
|
||||
period: [2013],
|
||||
description: "Ethereum's Whisper unveiled as web3 messaging protocol",
|
||||
},
|
||||
{
|
||||
period: [2018],
|
||||
description: 'Status establishes Vac to R&D Whisper improvements',
|
||||
},
|
||||
{
|
||||
period: [2020],
|
||||
description: 'Waku v1 replaces Whisper in Status app',
|
||||
},
|
||||
{
|
||||
period: [2021, 'Q1'],
|
||||
description: 'Waku v2 specs and PoC released with RLN Relay',
|
||||
},
|
||||
{
|
||||
period: [2021, 'Q2'],
|
||||
description: 'JS-Waku (for browsers) and Go-Waku released',
|
||||
},
|
||||
{
|
||||
period: [2022, 'Q3'],
|
||||
description: 'DNS Discovery added, plus availability in more languages',
|
||||
},
|
||||
{
|
||||
period: [2022, 'Q4'],
|
||||
description:
|
||||
'SQLite for Waku Store, RLN Relay testnet debuts at DevCon',
|
||||
},
|
||||
{
|
||||
period: [2023, 'Q2'],
|
||||
description: 'Relay sharding, opt-in spam-protected topic',
|
||||
},
|
||||
{
|
||||
period: [2023, 'Q4'],
|
||||
description: 'Auto-sharding, DoS protection, bandwidth capping',
|
||||
},
|
||||
{
|
||||
period: [2024, 'Q1'],
|
||||
description: 'Auto-sharding, DoS protection, bandwidth capping',
|
||||
},
|
||||
{
|
||||
period: [2025, '+'],
|
||||
description: 'Operator Incentivization, use-case specific SDKs',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Grid
|
||||
xs={{ cols: 6, wrap: false, gap: '0 1rem' }}
|
||||
actions={
|
||||
<CallToActionButton
|
||||
style={{ marginTop: 0 }}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
href="/about"
|
||||
>
|
||||
Read more
|
||||
</CallToActionButton>
|
||||
}
|
||||
>
|
||||
<Grid.Item>
|
||||
<TimelineItem
|
||||
period="2021"
|
||||
borderStyle="dashed"
|
||||
description="Codex project begins"
|
||||
/>
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<TimelineItem
|
||||
period="2022"
|
||||
borderStyle="solid"
|
||||
description=" PoC-1 “Dagger” demos"
|
||||
/>
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<TimelineItem
|
||||
period="2022"
|
||||
borderStyle="dashed"
|
||||
description="Marketplace redesign, zk-proofs research"
|
||||
/>
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<TimelineItem
|
||||
period="2023"
|
||||
borderStyle="solid"
|
||||
description="PoC-2 “Scimitar” demos"
|
||||
/>
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<TimelineItem
|
||||
period="2023 Q3"
|
||||
borderStyle="solid"
|
||||
description="PoC-3 demo scheduled"
|
||||
/>
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<TimelineItem
|
||||
period="2023 Q4"
|
||||
borderStyle="dashed"
|
||||
description="V1 “Katana” release scheduled"
|
||||
/>
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<TimelineItem
|
||||
period="2024"
|
||||
borderStyle="solid"
|
||||
description="L2 aggregator node development"
|
||||
/>
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<TimelineItem
|
||||
period="2024"
|
||||
borderStyle="dashed"
|
||||
description="Payment channels/bandwidth incentives"
|
||||
/>
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<TimelineItem
|
||||
period="2025"
|
||||
borderStyle="solid"
|
||||
description="V2 with improved incentives and repair"
|
||||
/>
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<TimelineItem
|
||||
period="2025"
|
||||
description="Public mainnet release"
|
||||
borderStyle="none"
|
||||
/>
|
||||
</Grid.Item>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
<Box top={{ xs: 144, lg: 216 }}>
|
||||
<CallToActionSection
|
||||
title="User Endorsements"
|
||||
/>
|
||||
<CallToActionSection title="User Endorsements" />
|
||||
</Box>
|
||||
|
||||
<Box top={{ xs: 64, lg: 100 }}>
|
||||
<Showcase
|
||||
id="showcase"
|
||||
|
||||
@@ -14,10 +14,16 @@ import { GridItem } from './GridItem'
|
||||
|
||||
export type GridProps = React.ComponentProps<typeof GridRoot> & {
|
||||
actions?: React.ReactNode
|
||||
leftLabel?: string
|
||||
rightLabel?: string
|
||||
spacingButtons?: boolean
|
||||
}
|
||||
|
||||
export const Grid: { Item: typeof GridItem } & React.FC<GridProps> = ({
|
||||
actions,
|
||||
leftLabel,
|
||||
rightLabel,
|
||||
spacingButtons = false,
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
@@ -40,12 +46,27 @@ export const Grid: { Item: typeof GridItem } & React.FC<GridProps> = ({
|
||||
<GridRoot {...props} className={clsx(props.className, 'mdx-grid')}>
|
||||
<div className="mdx-grid__actions">
|
||||
{actions}
|
||||
<div className="mdx-grid__scroll">
|
||||
<div
|
||||
className={clsx(
|
||||
'mdx-grid__scroll',
|
||||
spacingButtons && 'mdx-grid__scroll--spacing-buttons',
|
||||
)}
|
||||
>
|
||||
<IconButtonGroup size="small" color="primary">
|
||||
<IconButton size="small" onClick={scroll.bind(null, -1)}>
|
||||
<IconButton
|
||||
className={clsx('mdx-grid__scroll-button')}
|
||||
size="small"
|
||||
onClick={scroll.bind(null, -1)}
|
||||
>
|
||||
<ChevronLeftIcon />
|
||||
{leftLabel?.length && leftLabel}
|
||||
</IconButton>
|
||||
<IconButton size="small" onClick={scroll.bind(null, 1)}>
|
||||
<IconButton
|
||||
className={clsx('mdx-grid__scroll-button')}
|
||||
size="small"
|
||||
onClick={scroll.bind(null, 1)}
|
||||
>
|
||||
{rightLabel?.length && rightLabel}
|
||||
<ChevronRightIcon />
|
||||
</IconButton>
|
||||
</IconButtonGroup>
|
||||
@@ -64,6 +85,7 @@ type GridBreakpointProps = {
|
||||
cols?: number
|
||||
wrap?: boolean
|
||||
gap?: string | number
|
||||
scrollButtons?: boolean
|
||||
}
|
||||
|
||||
const GridRoot = styled.div<{
|
||||
@@ -79,6 +101,33 @@ const GridRoot = styled.div<{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0 1rem;
|
||||
|
||||
button:first-of-type {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
button:last-of-type {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.mdx-grid__scroll--spacing-buttons {
|
||||
width: 100%;
|
||||
|
||||
> div {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mdx-grid__scroll-button {
|
||||
width: 83px;
|
||||
gap: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
border: 1px solid rgb(var(--lsd-border-primary)) !important;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.mdx-grid__content {
|
||||
@@ -95,7 +144,7 @@ const GridRoot = styled.div<{
|
||||
gap: 1rem;
|
||||
|
||||
& > * {
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -158,7 +207,27 @@ const GridRoot = styled.div<{
|
||||
'down',
|
||||
)(css`
|
||||
.mdx-grid__scroll {
|
||||
display: none !important;
|
||||
display: ${props.xs?.scrollButtons ? 'flex' : 'none'};
|
||||
|
||||
& > div {
|
||||
justify-content: flex-end;
|
||||
|
||||
> button:not(:last-child) {
|
||||
border-right: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdx-grid__scroll-button {
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.mdx-grid__scroll-button--left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdx-grid__scroll-button--right {
|
||||
display: none;
|
||||
}
|
||||
`)}
|
||||
`
|
||||
|
||||
@@ -24,6 +24,48 @@ export const Roadmap: React.FC<RoadmapProps> = ({
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
const currentYear = new Date().getFullYear()
|
||||
|
||||
const handleBorderStyle = (year: number, isLast: boolean) => {
|
||||
if (year === currentYear) {
|
||||
return 'solid'
|
||||
} else if (isLast) {
|
||||
return 'none'
|
||||
} else return 'dashed'
|
||||
}
|
||||
|
||||
const getCurrentQuarter = () => {
|
||||
const month = new Date().getMonth()
|
||||
return 'Q' + Math.ceil((month + 1) / 3)
|
||||
}
|
||||
|
||||
const handlePeriodStyle = (period: TimelineItemProps['period']) => {
|
||||
const currentYear = new Date().getFullYear()
|
||||
const currentQuarter = getCurrentQuarter()
|
||||
|
||||
let year, additional
|
||||
|
||||
if (Array.isArray(period)) {
|
||||
;[year, additional] = period
|
||||
} else {
|
||||
year = period
|
||||
}
|
||||
|
||||
if (year < currentYear) {
|
||||
return 'filled'
|
||||
} else if (year > currentYear) {
|
||||
return 'transparent'
|
||||
} else {
|
||||
if (!additional || additional === '+') {
|
||||
return 'filled'
|
||||
}
|
||||
if (additional <= currentQuarter) {
|
||||
return 'filled'
|
||||
}
|
||||
return 'transparent'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
@@ -47,17 +89,24 @@ export const Roadmap: React.FC<RoadmapProps> = ({
|
||||
{timeline.length > 0 && (
|
||||
<Grid
|
||||
className="mdx-roadmap__timeline"
|
||||
xs={{ cols: 6, wrap: false, gap: '0 1rem' }}
|
||||
xs={{ cols: 6, wrap: false, gap: '0 1rem', scrollButtons: true }}
|
||||
spacingButtons
|
||||
leftLabel="Past"
|
||||
rightLabel="Future"
|
||||
>
|
||||
{timeline.map((item, index) => (
|
||||
<Grid.Item key={index} xs={1}>
|
||||
<TimelineItem
|
||||
{...item}
|
||||
index={item.index ?? index + 1}
|
||||
period={item.period}
|
||||
period={item.period ?? currentYear}
|
||||
description={item.description}
|
||||
alignment={alignment}
|
||||
borderStyle={item.borderStyle}
|
||||
borderStyle={handleBorderStyle(
|
||||
item?.period?.[0] ?? currentYear,
|
||||
index === timeline.length - 1,
|
||||
)}
|
||||
periodStyle={handlePeriodStyle(item?.period ?? currentYear)}
|
||||
className={clsx('mdx-roadmap__timeline-item', item.className)}
|
||||
/>
|
||||
</Grid.Item>
|
||||
|
||||
+14
-1
@@ -3,7 +3,6 @@
|
||||
|
||||
.mdx-timeline-item {
|
||||
width: 236px;
|
||||
height: 100%;
|
||||
gap: 1rem;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
@@ -45,8 +44,18 @@
|
||||
padding: 3px 12px;
|
||||
display: inline-block;
|
||||
border-radius: 10rem;
|
||||
}
|
||||
|
||||
.mdx-timeline-item__period--filled {
|
||||
color: rgb(var(--lsd-text-secondary)) !important;
|
||||
background-color: rgb(var(--lsd-surface-secondary));
|
||||
border: 1px solid rgb(var(--lsd-border-secondary));
|
||||
}
|
||||
|
||||
.mdx-timeline-item__period--transparent {
|
||||
color: rgb(var(--lsd-text-primary)) !important;
|
||||
background-color: rgb(var(--lsd-surface-primary));
|
||||
border: 1px solid rgb(var(--lsd-border-primary));
|
||||
}
|
||||
|
||||
.mdx-timeline-item__item:last-child {
|
||||
@@ -63,6 +72,10 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mdx-timeline-item__description {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
@include utils.responsive('lg', 'down') {
|
||||
.mdx-timeline-item {
|
||||
width: 204px;
|
||||
|
||||
+28
-3
@@ -12,11 +12,31 @@ export type TimelineItemProps = Omit<
|
||||
/** The alignment of the timeline item, either 'top' or 'bottom'. (Optional, default: 'top') */
|
||||
alignment?: 'top' | 'bottom'
|
||||
/** The period or time frame associated with the timeline item. e.g., `2023 Q3` */
|
||||
period: React.ReactNode
|
||||
period: [number, 'Q1' | 'Q2' | 'Q3' | 'Q4' | '+'] | number
|
||||
/** The description or content of the timeline item. */
|
||||
description: React.ReactNode
|
||||
/** The border style for the timeline item */
|
||||
borderStyle?: 'solid' | 'dashed' | 'none'
|
||||
/** The period style for the timeline item */
|
||||
periodStyle?: 'transparent' | 'filled'
|
||||
}
|
||||
|
||||
const formatPeriod = (input: TimelineItemProps['period']) => {
|
||||
if (Array.isArray(input) && input.length > 0) {
|
||||
let result = input[0].toString()
|
||||
|
||||
if (input.length > 1) {
|
||||
if (input[1] === '+') {
|
||||
result += '+'
|
||||
} else {
|
||||
result += ' ' + input[1]
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -65,12 +85,14 @@ export type TimelineItemProps = Omit<
|
||||
* </Box>
|
||||
* ```
|
||||
*/
|
||||
|
||||
export const TimelineItem: React.FC<TimelineItemProps> = ({
|
||||
index,
|
||||
period,
|
||||
description,
|
||||
alignment = 'top',
|
||||
borderStyle,
|
||||
periodStyle,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
@@ -93,9 +115,12 @@ export const TimelineItem: React.FC<TimelineItemProps> = ({
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
component="span"
|
||||
className="mdx-timeline-item__period"
|
||||
className={clsx(
|
||||
'mdx-timeline-item__period',
|
||||
`mdx-timeline-item__period--${periodStyle}`,
|
||||
)}
|
||||
>
|
||||
{period}
|
||||
{formatPeriod(period)}
|
||||
</Typography>
|
||||
</div>
|
||||
<Typography
|
||||
|
||||
@@ -2,6 +2,53 @@
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
"@acid-info/logos-docusaurus-theme@1.0.0-alpha.121":
|
||||
version "1.0.0-alpha.121"
|
||||
resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-theme/-/logos-docusaurus-theme-1.0.0-alpha.121.tgz#8086b475acf4a9885d7a3d48057b8add22602db5"
|
||||
integrity sha512-0CFVyl0zjv88sF0xBkcPxJg5CwKN59IAghUpK4L0Y0Yb5GHA3xBY555yEHhorboPJ1OO6Xma0n0nxTR4es9dpQ==
|
||||
dependencies:
|
||||
"@acid-info/docusaurus-og" "^1.0.0-alpha.111"
|
||||
"@acid-info/lsd-react" "^0.1.0-alpha.21"
|
||||
"@docusaurus/core" "^2.4.1"
|
||||
"@docusaurus/mdx-loader" "^2.4.1"
|
||||
"@docusaurus/module-type-aliases" "^2.4.1"
|
||||
"@docusaurus/plugin-content-blog" "^2.4.1"
|
||||
"@docusaurus/plugin-content-docs" "^2.4.1"
|
||||
"@docusaurus/plugin-content-pages" "^2.4.1"
|
||||
"@docusaurus/theme-classic" "^2.4.1"
|
||||
"@docusaurus/theme-common" "^2.4.1"
|
||||
"@docusaurus/theme-mermaid" "^2.4.1"
|
||||
"@docusaurus/theme-translations" "^2.4.1"
|
||||
"@docusaurus/types" "^2.4.1"
|
||||
"@docusaurus/utils" "^2.4.1"
|
||||
"@docusaurus/utils-common" "^2.4.1"
|
||||
"@docusaurus/utils-validation" "^2.4.1"
|
||||
"@emotion/react" "^11.11.0"
|
||||
"@emotion/styled" "^11.11.0"
|
||||
"@mdx-js/react" "^1.6.22"
|
||||
"@react-three/drei" "8.20.2"
|
||||
"@react-three/fiber" "6.2.3"
|
||||
"@tryghost/content-api" "^1.11.4"
|
||||
axios "^1.4.0"
|
||||
boolean "^3.2.0"
|
||||
clsx "^1.2.1"
|
||||
copy-text-to-clipboard "^3.0.1"
|
||||
copy-to-clipboard "^3.3.2"
|
||||
date-fns "^2.30.0"
|
||||
docusaurus-plugin-sass "^0.2.3"
|
||||
dotenv "^16.0.3"
|
||||
lodash "^4.17.21"
|
||||
object-hash "^3.0.0"
|
||||
prism-react-renderer "^1.3.5"
|
||||
react "^17.0.2"
|
||||
react-dom "^17.0.2"
|
||||
react-quick-pinch-zoom "^4.9.0"
|
||||
react-use "^17.4.0"
|
||||
sharp "^0.32.1"
|
||||
three "^0.152.2"
|
||||
three-stdlib "^2.23.4"
|
||||
utility-types "^3.10.0"
|
||||
|
||||
"@acid-info/lsd-react@^0.1.0-alpha.21":
|
||||
version "0.1.0-alpha.21"
|
||||
resolved "https://registry.yarnpkg.com/@acid-info/lsd-react/-/lsd-react-0.1.0-alpha.21.tgz#3a6a6862bc492521197ef354795f1b1fe9bceffe"
|
||||
|
||||
Reference in New Issue
Block a user