| /** |
| * Copyright (c) 2017-present, Facebook, Inc. |
| * |
| * This source code is licensed under the MIT license found in the |
| * LICENSE file in the root directory of this source tree. |
| */ |
| |
| const React = require('react'); |
| |
| const CompLibrary = require('../../core/CompLibrary.js'); |
| |
| const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */ |
| const Container = CompLibrary.Container; |
| const GridBlock = CompLibrary.GridBlock; |
| |
| class HomeSplash extends React.Component { |
| render() { |
| const {siteConfig, language = ''} = this.props; |
| const {baseUrl, docsUrl} = siteConfig; |
| const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`; |
| const langPart = `${language ? `${language}/` : ''}`; |
| const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`; |
| |
| const SplashContainer = props => ( |
| <div className="homeContainer"> |
| <div className="homeSplashFade"> |
| <div className="wrapper homeWrapper">{props.children}</div> |
| </div> |
| </div> |
| ); |
| |
| const Logo = props => ( |
| <div className="projectLogo"> |
| <img src={props.img_src} alt="Project Logo" /> |
| </div> |
| ); |
| |
| const ProjectTitle = () => ( |
| <h2 className="projectTitle"> |
| {siteConfig.title} |
| <small>{siteConfig.tagline}</small> |
| </h2> |
| ); |
| |
| const PromoSection = props => ( |
| <div className="section promoSection"> |
| <div className="promoRow"> |
| <div className="pluginRowBlock">{props.children}</div> |
| </div> |
| </div> |
| ); |
| |
| const Button = props => ( |
| <div className="pluginWrapper buttonWrapper"> |
| <a className="button" href={props.href} target={props.target}> |
| {props.children} |
| </a> |
| </div> |
| ); |
| |
| return ( |
| <SplashContainer> |
| <Logo img_src={`${baseUrl}img/undraw_monitor.svg`} /> |
| <div className="inner"> |
| <ProjectTitle siteConfig={siteConfig} /> |
| |
| </div> |
| </SplashContainer> |
| ); |
| } |
| } |
| |
| class Index extends React.Component { |
| render() { |
| const {config: siteConfig, language = ''} = this.props; |
| const {baseUrl} = siteConfig; |
| |
| const Block = props => ( |
| <Container |
| padding={['bottom', 'top']} |
| id={props.id} |
| background={props.background}> |
| <GridBlock |
| align="center" |
| contents={props.children} |
| layout={props.layout} |
| /> |
| </Container> |
| ); |
| |
| const FeatureCallout = () => ( |
| <div |
| className="productShowcaseSection paddingBottom" |
| style={{textAlign: 'center'}}> |
| <h2>Milagro Server</h2> |
| <MarkdownBlock>These are features of this project</MarkdownBlock> |
| </div> |
| ); |
| |
| const TryOut = () => ( |
| <Block id="try"> |
| {[ |
| { |
| content: |
| 'To make your landing page more attractive, use illustrations! Check out ' + |
| '[**unDraw**](https://undraw.co/) which provides you with customizable illustrations which are free to use. ' + |
| 'The illustrations you see on this page are from unDraw.', |
| image: `${baseUrl}img/undraw_code_review.svg`, |
| imageAlign: 'left', |
| title: 'Wonderful SVG Illustrations', |
| }, |
| ]} |
| </Block> |
| ); |
| |
| const Description = () => ( |
| <Block background="dark"> |
| {[ |
| { |
| content: |
| 'This is another description of how this project is useful', |
| image: `${baseUrl}img/undraw_note_list.svg`, |
| imageAlign: 'right', |
| title: 'Description', |
| }, |
| ]} |
| </Block> |
| ); |
| |
| const LearnHow = () => ( |
| <Block background="light"> |
| {[ |
| { |
| content: |
| 'Each new Docusaurus project has **randomly-generated** theme colors.', |
| image: `${baseUrl}img/undraw_youtube_tutorial.svg`, |
| imageAlign: 'right', |
| title: 'Randomly Generated Theme Colors', |
| }, |
| ]} |
| </Block> |
| ); |
| |
| const Features = () => ( |
| <Block layout="fourColumn"> |
| {[ |
| { |
| content: 'This is the content of my feature', |
| image: `${baseUrl}img/undraw_react.svg`, |
| imageAlign: 'top', |
| title: 'Zero-knowledge proof multi-factor authentication', |
| }, |
| { |
| content: 'The content of my second feature', |
| image: `${baseUrl}img/undraw_operating_system.svg`, |
| imageAlign: 'top', |
| title: 'Decentralized custody of digital assets', |
| }, |
| ]} |
| </Block> |
| ); |
| |
| const Showcase = () => { |
| if ((siteConfig.users || []).length === 0) { |
| return null; |
| } |
| |
| const showcase = siteConfig.users |
| .filter(user => user.pinned) |
| .map(user => ( |
| <a href={user.infoLink} key={user.infoLink}> |
| <img src={user.image} alt={user.caption} title={user.caption} /> |
| </a> |
| )); |
| |
| const pageUrl = page => baseUrl + (language ? `${language}/` : '') + page; |
| |
| return ( |
| <div className="productShowcaseSection paddingBottom"> |
| <h2>Who is Using This?</h2> |
| <p>This project is used by all these people</p> |
| <div className="logos">{showcase}</div> |
| <div className="more-users"> |
| <a className="button" href={pageUrl('users.html')}> |
| More {siteConfig.title} Users |
| </a> |
| </div> |
| </div> |
| ); |
| }; |
| |
| return ( |
| <div> |
| <HomeSplash siteConfig={siteConfig} language={language} /> |
| <div className="mainContainer"> |
| <Features /> |
| <FeatureCallout /> |
| <LearnHow /> |
| <TryOut /> |
| </div> |
| </div> |
| ); |
| } |
| } |
| |
| module.exports = Index; |