Skip to content

Commit

Permalink
feat(docs): auto generate the api docs from darcjs
Browse files Browse the repository at this point in the history
  • Loading branch information
@AGDholo
AGDholo committed May 8, 2023
1 parent 3aa14a0 commit dae0c0c
Show file tree
Hide file tree
Showing 3 changed files with 214 additions and 45 deletions.
259 changes: 214 additions & 45 deletions darc-docs/src/pages/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,25 @@
import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import {Box, Button, Container, CssVarsProvider, Input, Stack, styled, Typography} from "@mui/joy";
import {FiCheck, FiChevronRight, FiCopy} from "react-icons/all";
import {Box, Button, Card, Container, CssVarsProvider, Grid, Input, Sheet, Stack, styled, Typography} from "@mui/joy";
import {
AiOutlineSafety,
FaFileContract,
FiCheck,
FiChevronRight,
FiCopy,
GiChaingun,
GoTelescope
} from "react-icons/all";
import {useCopyToClipboard} from "react-use";
import Link from "@docusaurus/Link";

// styled docusaurus link without underline and default color
const PlainLink = styled(Link)(({theme}) => ({
textDecoration: 'none',
color: 'var(--joy-palette-primary-solidColor, #fff)',
'&:hover': {
textDecoration: 'none',
color: 'var(--joy-palette-primary-solidColor, #fff)',
color: 'inherit',
}
}))

Expand All @@ -33,54 +40,60 @@ function HomepageHeader() {

return (
<>
<Container maxWidth={"lg"} sx={{
height: 'calc(100svh - 60px)',
<Container maxWidth={"xl"} sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}>
<Box>
<Stack spacing={4}>
<Typography level={'display1'} lineHeight={1.2}>
<Typography component={'span'} color={'primary'}>
Decentralized
</Typography>
<br/> Autonomous <br/> Regulated Corporation
<Stack spacing={4}>
<Typography level={'display2'} lineHeight={1.2}>
<Typography component={'span'} color={'primary'}>
Decentralized
</Typography>
<br/> Autonomous <br/> Regulated Corporation
</Typography>

<Typography level={'h4'} sx={(theme) => ({
color: theme.vars.palette.text.tertiary
})}>
From accountability and transparency to innovative decision-making, DARC is <br/>
revolutionizing the way we approach corporate structures. Join the movement <br/> and
discover
the power of decentralized autonomous corporations.
</Typography>
<Typography level={'h6'} fontSize={'lg'} sx={(theme) => ({
color: theme.vars.palette.text.tertiary
})}>
From accountability and transparency to innovative decision-making, DARC is <br/>
revolutionizing the way we approach corporate structures. Join the
movement <br/> and
discover
the power of decentralized autonomous corporations.
</Typography>


<Stack direction={'row'} spacing={2}>
<Button size={'lg'} endDecorator={<FiChevronRight/>}
component={PlainLink} to={'/docs/Overview/'}
>Get started</Button>
<Box sx={{
cursor: 'pointer',
}}>
<Box onClick={() => handleCopy()}>
<Input
sx={{
width: '300px',
'& .Joy-disabled, .MuiInput-endDecorator': {
color: 'black',
}
}}
disabled
size={'lg'}
endDecorator={isCopy ? <FiCheck/> : <FiCopy/>}
placeholder={text}/>
</Box>
<Stack direction={'row'} spacing={2}>
<Button size={'lg'} endDecorator={<FiChevronRight/>}
component={PlainLink} to={'/docs/Overview/'}
>Get started</Button>
<Box sx={{
cursor: 'pointer',
}}>
<Box onClick={() => handleCopy()}>
<Input
sx={{
width: '300px',
'& .Joy-disabled, .MuiInput-endDecorator': {
color: 'black',
}
}}
disabled
size={'lg'}
endDecorator={isCopy ? <FiCheck/> : <FiCopy/>}
placeholder={text}/>
</Box>
</Stack>
</Box>
</Stack>
</Stack>

<Box sx={{display: {xs: 'none', lg: 'block'}}}>
<img src={'/img/header-img-1.png'} style={{
height: '600px',
}}/>
</Box>

</Container>
</>
);
Expand All @@ -90,14 +103,50 @@ const Footer = () => {
return (
<Container>
<Box textAlign={'center'}>
<Typography variant={'body2'}>
<Typography variant={'body2'} fontSize={'sm'}>
© 2023 DARC. All rights reserved.
</Typography>
</Box>
</Container>
)
}

const featureCardData = [
{
title: 'Decentralization',
description: 'Enjoy the benefits of a decentralized operating framework with DARC, eliminating intermediaries and increasing efficiency for businesses.',
icon: <GiChaingun/>
},
{
title: 'Transparency',
description: 'DARC offers a transparent operating environment for businesses, providing greater trust and accountability for all parties involved.',
icon: <GoTelescope/>
},
{
title: 'Trustless Transactions',
description: 'Experience a trustless environment for transactions with DARC, where parties can transact and interact with each other without the need for intermediaries or third parties.',
icon: <AiOutlineSafety/>
},
{
title: 'Smart Contracts',
description: 'Automate business processes and reduce costs with DARC\'s smart contract technology, providing a more efficient and effective way of conducting business.',
icon: <FaFileContract/>
}
]

const featureCardData2 = [
{
title: 'Docs',
description: 'Simplify your documentation process with Darc\'s user-friendly and efficient documentation tools.',
to: '/docs/Overview/',
},
{
title: 'Github',
description: 'Darc\'s open and decentralized ecosystem empowers businesses with transparency, collaboration, and regulatory compliance.',
to: 'https://github.com/project-darc/darc'
}
]

export default function Home() {
const {siteConfig} = useDocusaurusContext();
return (
Expand All @@ -106,8 +155,128 @@ export default function Home() {
title={`Hello from ${siteConfig.title}`}
description="Description will go into a meta tag in <head />">
<CssVarsProvider>
<HomepageHeader/>
<Footer/>
<Box sx={{
my: 10
}}>
<HomepageHeader/>
</Box>

<Stack spacing={10}>
<Box sx={{
background: '#f4f6f8',
}}>
<Container maxWidth={'xl'} sx={{
my: 10
}}>
<Box>
<Typography level={'h2'}>
Features of
<Typography component={'span'} color={'primary'} ml={1}>
DARC
</Typography>
</Typography>

<Grid container spacing={2} mt={2} alignItems={'stretch'}>
{featureCardData.map((item, index) => (
<Grid xs={6} lg={3} key={index} minHeight={'100%'}>
<Card variant={'soft'} sx={{height: '100%'}}>
<Stack spacing={1}>
<Typography level={'body1'} fontWeight={'bolder'}
gap={1} display={'flex'}>
<Typography component={'span'} alignSelf={'center'}
display={'flex'}
color={'primary'}>
{item.icon}
</Typography> {item.title}
</Typography>
<Typography level={'body2'} fontSize={'sm'} fontWeight={'normal'}>
{item.description}
</Typography>
</Stack>
</Card>
</Grid>
))}
</Grid>
</Box>
</Container>
</Box>

<Box>
<Container maxWidth={'xl'}>
<Grid container spacing={2} alignItems={'center'}>
<Grid xs={12} md={6} lg={5}>
<Box>
<Typography level={'h2'} mt={5}>
<Typography component={'span'} color={'primary'} mr={1}>
Accelerate
</Typography>
delivery <br/> of your corporation
</Typography>

<Typography level={'body1'} fontSize={'sm'} fontWeight={'normal'} mt={2}
sx={(theme) => ({
color: theme.vars.palette.text.tertiary
})}>
Unlock the potential of Darc's tools within the DARC ecosystem, optimizing
efficiency and compliance for blockchain-based businesses. Experience a
streamlined
approach to project delivery and take your business to the next level with
Darc's
innovative tools.
</Typography>
</Box>
</Grid>

<Grid xs={12} md={6} sx={(theme) => ({
'& a': {
textDecoration: 'none',
},
})}>
<Box>
<Grid container spacing={2} alignItems={'stretch'}>
{featureCardData2.map((item, index) => (
<Grid xs={6} minHeight={'100%'}>
<Sheet variant={'outlined'}
sx={theme => ({
p: 2,
borderRadius: 20,
height: '100%'
})}>
<Stack justifyContent={'space-between'} spacing={1}
height={'100%'}>
<Link to={item.to}>
<Stack spacing={1}>
<Typography level={'body1'} fontWeight={'bolder'}>
{item.title}
</Typography>
<Typography level={'body2'} fontSize={'sm'}>
{item.description}
</Typography>
</Stack>
</Link>
<Typography to={item.to} component={PlainLink}
level={'body2'}
fontSize={'sm'} color={'primary'}
fontWeight={'bold'}>
Learn more
</Typography>
</Stack>
</Sheet>
</Grid>
))}
</Grid>
</Box>
</Grid>
</Grid>
</Container>
</Box>
</Stack>

<Box sx={{
mt: 10
}}>
<Footer/>
</Box>
</CssVarsProvider>
</Layout>

Expand Down
Binary file added darc-docs/static/img/_9dfbc001-3935-47e5-ab1a-f3f384555735.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added darc-docs/static/img/header-img-1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit dae0c0c

Please sign in to comment.