mirror of
https://github.com/verdaccio/verdaccio.git
synced 2024-12-23 22:27:34 -05:00
188 lines
5.6 KiB
JavaScript
Executable file
188 lines
5.6 KiB
JavaScript
Executable file
/**
|
|
* 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;
|
|
|
|
const siteConfig = require(process.cwd() + '/siteConfig.js');
|
|
|
|
class Button extends React.Component {
|
|
render() {
|
|
return (
|
|
<div className="pluginWrapper buttonWrapper">
|
|
<a className="button" href={this.props.href} target={this.props.target}>
|
|
{this.props.children}
|
|
</a>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
Button.defaultProps = {
|
|
target: '_self',
|
|
};
|
|
|
|
class HomeSplash extends React.Component {
|
|
render() {
|
|
return (
|
|
<div className="homeContainer">
|
|
<div className="homeSplashFade">
|
|
<div className="wrapper homeWrapper">
|
|
<div className="projectLogo">
|
|
<img src={siteConfig.baseUrl + 'img/verdaccio-tiny@3x.png'} />
|
|
</div>
|
|
<div className="inner">
|
|
<h2 className="projectTitle">
|
|
<img title={siteConfig.title} src={siteConfig.baseUrl + 'img/verdaccio@2x.png'} />
|
|
|
|
<small>{siteConfig.tagline}</small>
|
|
</h2>
|
|
<div className="section promoSection">
|
|
<div className="promoRow">
|
|
<div className="pluginRowBlock">
|
|
<Button href="https://github.com/verdaccio">Github</Button>
|
|
<Button
|
|
href={
|
|
siteConfig.baseUrl +
|
|
'docs/' +
|
|
this.props.language +
|
|
'/doc1.html'
|
|
}>
|
|
Documentation
|
|
</Button>
|
|
<Button
|
|
href={
|
|
siteConfig.baseUrl +
|
|
'docs/' +
|
|
this.props.language +
|
|
'/contribute.html'
|
|
}>
|
|
Contribute
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
class Index extends React.Component {
|
|
render() {
|
|
let language = this.props.language || 'en';
|
|
const showcase = siteConfig.users
|
|
.filter(user => {
|
|
return user.pinned;
|
|
})
|
|
.map(user => {
|
|
return (
|
|
<a href={user.infoLink}>
|
|
<img src={user.image} title={user.caption} />
|
|
</a>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<HomeSplash language={language} />
|
|
<div className="mainContainer">
|
|
<Container padding={['bottom', 'top']}>
|
|
<GridBlock
|
|
align="center"
|
|
contents={[
|
|
{
|
|
content: 'This is the content of my feature',
|
|
image: siteConfig.baseUrl + 'img/npm.svg',
|
|
imageAlign: 'top',
|
|
title: 'Feature One',
|
|
},
|
|
{
|
|
content: 'The content of my second feature',
|
|
image: siteConfig.baseUrl + 'img/yarn.svg',
|
|
imageAlign: 'top',
|
|
title: 'Feature Two',
|
|
},
|
|
]}
|
|
layout="fourColumn"
|
|
/>
|
|
</Container>
|
|
|
|
<div
|
|
className="productShowcaseSection paddingBottom"
|
|
style={{textAlign: 'center'}}>
|
|
<h2>Feature Callout</h2>
|
|
<MarkdownBlock>These are features of this project</MarkdownBlock>
|
|
</div>
|
|
|
|
<Container padding={['bottom', 'top']} background="light">
|
|
<GridBlock
|
|
contents={[
|
|
{
|
|
content: 'Talk about learning how to use this',
|
|
image: siteConfig.baseUrl + 'img/verdaccio-tiny@3x.png',
|
|
imageAlign: 'right',
|
|
title: 'Learn How',
|
|
},
|
|
]}
|
|
/>
|
|
</Container>
|
|
|
|
<Container padding={['bottom', 'top']} id="try">
|
|
<GridBlock
|
|
contents={[
|
|
{
|
|
content: 'Talk about trying this out',
|
|
image: siteConfig.baseUrl + 'img/verdaccio-tiny@3x.png',
|
|
imageAlign: 'left',
|
|
title: 'Try it Out',
|
|
},
|
|
]}
|
|
/>
|
|
</Container>
|
|
|
|
<Container padding={['bottom', 'top']} background="dark">
|
|
<GridBlock
|
|
contents={[
|
|
{
|
|
content:
|
|
'This is another description of how this project is useful',
|
|
image: siteConfig.baseUrl + 'img/verdaccio-tiny@3x.png',
|
|
imageAlign: 'right',
|
|
title: 'Description',
|
|
},
|
|
]}
|
|
/>
|
|
</Container>
|
|
|
|
<div className="productShowcaseSection paddingBottom">
|
|
<h2>{"Who's 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={
|
|
siteConfig.baseUrl + this.props.language + '/' + 'users.html'
|
|
}>
|
|
More {siteConfig.title} Users
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
module.exports = Index;
|