197 lines
5.5 KiB
JavaScript
Executable File
197 lines
5.5 KiB
JavaScript
Executable File
"use strict";
|
|
|
|
const React = require("react");
|
|
|
|
const CompLibrary = require("../../core/CompLibrary.js");
|
|
// const Marked = CompLibrary.Marked; /* 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"
|
|
};
|
|
|
|
Button.propTypes = {
|
|
href: React.PropTypes.string,
|
|
target: React.PropTypes.string,
|
|
children: React.PropTypes.any
|
|
};
|
|
|
|
class HomeSplash extends React.Component {
|
|
render() {
|
|
return (
|
|
<div className="homeContainer">
|
|
<div className="homeSplashFade">
|
|
<div className="wrapper homeWrapper">
|
|
<div className="projectLogo">
|
|
<img src="/icon.png" />
|
|
</div>
|
|
<div className="inner">
|
|
<h2 className="projectTitle">
|
|
{siteConfig.title}
|
|
<small>{siteConfig.tagline}</small>
|
|
</h2>
|
|
<div className="section promoSection">
|
|
<div className="promoRow">
|
|
<div className="pluginRowBlock">
|
|
<Button href="/playground/">Try It Out</Button>
|
|
<Button
|
|
href={"/docs/" + this.props.language + "/install.html"}
|
|
>
|
|
Get Started
|
|
</Button>
|
|
<Button
|
|
href={"/docs/" + this.props.language + "/options.html"}
|
|
>
|
|
Options
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
HomeSplash.propTypes = {
|
|
language: React.PropTypes.string
|
|
};
|
|
|
|
class Index extends React.Component {
|
|
render() {
|
|
const language = this.props.language || "en";
|
|
const showcase = siteConfig.users
|
|
.filter(user => {
|
|
return user.pinned;
|
|
})
|
|
.map((user, i) => {
|
|
return (
|
|
<a key={i} href={user.infoLink}>
|
|
<img src={user.image} title={user.caption} />
|
|
<br />
|
|
{user.caption}
|
|
</a>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<script src="redirect.js" />
|
|
<HomeSplash language={language} />
|
|
<div className="mainContainer">
|
|
<div
|
|
className="productShowcaseSection lightBackground paddingTop paddingBottom"
|
|
style={{ textAlign: "center" }}
|
|
>
|
|
<h2 style={{ margin: 0 }}>Language Support</h2>
|
|
<Container>
|
|
<GridBlock
|
|
align="center"
|
|
contents={siteConfig.supportedLanguages.map(language => ({
|
|
title: language.name,
|
|
image: language.image,
|
|
imageAlign: "top",
|
|
content: language.variants.join("\n\n")
|
|
}))}
|
|
layout="fourColumn"
|
|
/>
|
|
</Container>
|
|
</div>
|
|
|
|
{/*<div
|
|
className="productShowcaseSection paddingBottom"
|
|
style={{ textAlign: "center" }}
|
|
>
|
|
<h2>Feature Callout</h2>
|
|
<Marked>These are features of this project</Marked>
|
|
</div>*/}
|
|
|
|
<div className="productShowcaseSection paddingBottom">
|
|
<h2>Editor Integration</h2>
|
|
<Container>
|
|
<GridBlock
|
|
align="center"
|
|
contents={siteConfig.editors.map(editor => ({
|
|
content: editor.content || "",
|
|
image: editor.image,
|
|
imageAlign: "bottom",
|
|
title: editor.name
|
|
}))}
|
|
layout="fourColumn"
|
|
/>
|
|
</Container>
|
|
|
|
<p>Developed an integration?</p>
|
|
<a
|
|
href={`${
|
|
siteConfig.githubUrl
|
|
}/edit/master/website/data/editors.yml`}
|
|
className="button"
|
|
>
|
|
Add it here
|
|
</a>
|
|
</div>
|
|
|
|
{/*<Container padding={["bottom", "top"]} background="dark">
|
|
<GridBlock
|
|
contents={[
|
|
{
|
|
content:
|
|
"This is another description of how this project is useful",
|
|
image: "/prettier.png",
|
|
imageAlign: "left",
|
|
title: "Description"
|
|
}
|
|
]}
|
|
/>
|
|
</Container>*/}
|
|
|
|
<div className="productShowcaseSection paddingTop paddingBottom lightBackground">
|
|
<h2>Who{"'"}s Using Prettier?</h2>
|
|
<p>
|
|
A few of the{" "}
|
|
<a href="https://www.npmjs.com/browse/depended/prettier">
|
|
many projects
|
|
</a>{" "}
|
|
using Prettier
|
|
</p>
|
|
<div className="logos">{showcase}</div>
|
|
<div className="more-users">
|
|
<a
|
|
className="button"
|
|
href={siteConfig.baseUrl + language + "/users/"}
|
|
target="_self"
|
|
>
|
|
More Prettier Users
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
Index.propTypes = {
|
|
language: React.PropTypes.string
|
|
};
|
|
|
|
module.exports = Index;
|