Index page composition (#293)

* without having having to worry about site design.

Let me know if double having is intentional

* index page composition

examples/basics/pages/en/index.js

@@ -14,6 +14,18 @@ const GridBlock = CompLibrary.GridBlock;
 
 const siteConfig = require(process.cwd() + '/siteConfig.js');
 
+function imgUrl(img) {
+  return siteConfig.baseUrl + 'img/' + img;
+}
+
+function docUrl(doc, language) {
+  return siteConfig.baseUrl + 'docs/' + language + '/' + doc;
+}
+
+function pageUrl(page, language) {
+  return siteConfig.baseUrl + language + '/' + page;
+}
+
 class Button extends React.Component {
   render() {
     return (
@@ -30,154 +42,182 @@ Button.defaultProps = {
   target: '_self',
 };
 
-class HomeSplash extends React.Component {
+const SplashContainer = (props) => (
-  render() {
-    return (
   <div className="homeContainer">
     <div className="homeSplashFade">
       <div className="wrapper homeWrapper">
-            <div className="projectLogo">
+        {props.children}
-              <img src={siteConfig.baseUrl + 'img/docusaurus.svg'} />
       </div>
-            <div className="inner">
+    </div>
+  </div>
+)
+
+const Logo = (props) => (
+  <div className="projectLogo">
+    <img src={props.img_src} />
+  </div>
+)
+
+const ProjectTitle = (props) => (
   <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>
+)
+
+class HomeSplash extends React.Component {
+
+  render() {
+    let language = this.props.language || 'en';
+    return (
+      <SplashContainer>
+        <Logo img_src={imgUrl('docusaurus.svg')} />
+        <div className="inner">
+          <ProjectTitle />
+          <PromoSection>
             <Button href="#try">Try It Out</Button>
-                    <Button
+            <Button href={docUrl('doc1.html', language)}>
-                      href={
-                        siteConfig.baseUrl +
-                        'docs/' +
-                        this.props.language +
-                        '/doc1.html'
-                      }>
               Example Link
             </Button>
-                    <Button
+            <Button href={docUrl('doc2.html', language)}>
-                      href={
-                        siteConfig.baseUrl +
-                        'docs/' +
-                        this.props.language +
-                        '/doc2.html'
-                      }>
               Example Link 2
             </Button>
+          </PromoSection>
         </div>
-                </div>
+      </SplashContainer>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
     );
   }
 }
 
-class Index extends React.Component {
+const Block = (props) => (
-  render() {
+  <Container padding={['bottom', 'top']} id={props.id} background={props.background}>
-    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={[
+      contents={props.children}
+      layout={props.layout}
+    />
+  </Container>
+);
+
+const Features = (props) => (
+  <Block layout="fourColumn">
+    {[
       {
         content: 'This is the content of my feature',
-                  image: siteConfig.baseUrl + 'img/docusaurus.svg',
+        image: imgUrl('docusaurus.svg'),
         imageAlign: 'top',
         title: 'Feature One',
       },
       {
         content: 'The content of my second feature',
-                  image: siteConfig.baseUrl + 'img/docusaurus.svg',
+        image: imgUrl('docusaurus.svg'),
         imageAlign: 'top',
         title: 'Feature Two',
       },
     ]}
-              layout="fourColumn"
+  </Block>
-            />
+);
-          </Container>
 
+const FeatureCallout = (props) => (
   <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">
+const LearnHow = (props) => (
-            <GridBlock
+  <Block background="light">
-              contents={[
+    {[
       {
         content: 'Talk about learning how to use this',
-                  image: siteConfig.baseUrl + 'img/docusaurus.svg',
+        image: imgUrl('docusaurus.svg'),
         imageAlign: 'right',
         title: 'Learn How',
       },
     ]}
-            />
+  </Block>
-          </Container>
+)
 
-          <Container padding={['bottom', 'top']} id="try">
+const TryOut = (props) => (
-            <GridBlock
+  <Block id="try">
-              contents={[
+    {[
       {
         content: 'Talk about trying this out',
-                  image: siteConfig.baseUrl + 'img/docusaurus.svg',
+        image: imgUrl('docusaurus.svg'),
         imageAlign: 'left',
         title: 'Try it Out',
       },
     ]}
-            />
+  </Block>
-          </Container>
+)
 
-          <Container padding={['bottom', 'top']} background="dark">
+const Description = (props) => (
-            <GridBlock
+  <Block background="dark">
-              contents={[
+    {[
       {
         content:
           'This is another description of how this project is useful',
-                  image: siteConfig.baseUrl + 'img/docusaurus.svg',
+        image: imgUrl('docusaurus.svg'),
         imageAlign: 'right',
         title: 'Description',
       },
     ]}
-            />
+  </Block>
-          </Container>
+)
 
+const Showcase = (props) => {
+  const showcase = siteConfig.users
+    .filter(user => {
+      return user.pinned;
+    })
+    .map((user, i) => {
+      return (
+        <a href={user.infoLink} key={i}>
+          <img src={user.image} title={user.caption} />
+        </a>
+      );
+    });
+
+  return (
     <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
+        <a className="button" href={pageUrl('users.html', props.language)}>
-                className="button"
-                href={
-                  siteConfig.baseUrl + this.props.language + '/' + 'users.html'
-                }>
           More {siteConfig.title} Users
         </a>
       </div>
     </div>
+  )
+}
+
+class Index extends React.Component {
+  render() {
+    let language = this.props.language || 'en';
+
+    return (
+      <div>
+        <HomeSplash language={language} />
+        <div className="mainContainer">
+          <Features />
+          <FeatureCallout />
+          <LearnHow />
+          <TryOut />
+          <Description />
+          <Showcase language={language} />
         </div>
       </div>
     );