"use strict";
const React = require("react");
const PropTypes = require("prop-types");
const CompLibrary = require("../../core/CompLibrary.js");
const MarkdownBlock = CompLibrary.MarkdownBlock;
const Container = CompLibrary.Container;
const AnimatedLogo = require("@sandhose/prettier-animated-logo");
const siteConfig = require(process.cwd() + "/siteConfig.js");
const ButtonGroup = props => (
{props.children}
);
ButtonGroup.propTypes = {
children: PropTypes.node
};
class Button extends React.Component {
render() {
return (
);
}
}
Button.defaultProps = {
target: "_self"
};
Button.propTypes = {
href: PropTypes.string,
target: PropTypes.string,
children: PropTypes.any
};
const HomeSplash = props => {
return (
);
};
HomeSplash.propTypes = {
language: PropTypes.string
};
const TldrSection = ({ language }) => (
What is Prettier?
- An opinionated code formatter
- Supports many languages
- Integrates with most editors
- Has few options
Why?
- You press save and code is formatted
- No need to discuss style in code review
- Saves you time and energy
-
And more
);
TldrSection.propTypes = {
language: PropTypes.string
};
const Language = ({ name, nameLink, showName, image, variants }) => (
{showName && (
-
{nameLink ? {name} : name}
)}
{variants.map(variant => (
-
{variant}
))}
);
Language.propTypes = {
name: PropTypes.string,
nameLink: PropTypes.string,
showName: PropTypes.bool,
image: PropTypes.string,
variants: PropTypes.array
};
const LanguagesSection = () => {
const languageChunks = siteConfig.supportedLanguages.reduce(
(acc, language) => {
const last = acc[acc.length - 1];
if (
last &&
last.length < 2 &&
last.reduce((sum, lang) => sum + lang.variants.length, 0) +
language.variants.length <
9
) {
last.push(language);
} else {
acc.push([language]);
}
return acc;
},
[]
);
return (
Works with the Tools You Use
{languageChunks.map((languageChunk, index) => (
{languageChunk.map(language => (
))}
))}
);
};
const Editor = ({ content = "", image, name }) => (
{name}
{content.replace(/\n/g, " \n")}
);
Editor.propTypes = {
content: PropTypes.string,
image: PropTypes.string.isRequired,
name: PropTypes.string.isRequired
};
const EditorSupportSection = () => (
Editor Support
{siteConfig.editors.map(editor => (
))}
);
const bash = (...args) => `~~~bash\n${String.raw(...args)}\n~~~`;
const json = object => `~~~json\n${JSON.stringify(object, null, 2)}\n~~~`;
class GetStartedSection extends React.Component {
constructor(props) {
super(props);
this.state = {
npmClient: "yarn"
};
}
render() {
return (
Get Started
-
Add prettier to your project:
{bash`yarn add prettier --dev --exact`}
{bash`npm install prettier --save-dev --save-exact`}
-
Verify by running against a file:
{bash`yarn prettier --write src/index.js`}
{bash`npx prettier --write src/index.js`}
-
Run prettier when commiting files:
{bash`yarn add pretty-quick husky --dev`}
{bash`npm install pretty-quick husky --save-dev`}
Then add this config to package.json
:
{json({
husky: {
hooks: {
"pre-commit": "pretty-quick --staged"
}
}
})}
);
}
}
const UsersSection = ({ language }) => {
const showcase = siteConfig.users
.filter(user => {
return user.pinned;
})
.map((user, i) => {
return (
);
});
return (
Used By People You Rely On
{showcase}
Established in the Ecosystem
More than 2000 tools and integrations on npm
More than 400,000 dependent repositories on GitHub
);
};
UsersSection.propTypes = {
language: PropTypes.string
};
class Index extends React.Component {
render() {
const language = this.props.language || "en";
return (
);
}
}
Index.propTypes = {
language: PropTypes.string
};
module.exports = Index;