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() {
+  <div className="homeContainer">
-    return (
+    <div className="homeSplashFade">
-      <div className="homeContainer">
+      <div className="wrapper homeWrapper">
-        <div className="homeSplashFade">
+        {props.children}
-          <div className="wrapper homeWrapper">
-            <div className="projectLogo">
-              <img src={siteConfig.baseUrl + 'img/docusaurus.svg'} />
-            </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="#try">Try It Out</Button>
-                    <Button
-                      href={
-                        siteConfig.baseUrl +
-                        'docs/' +
-                        this.props.language +
-                        '/doc1.html'
-                      }>
-                      Example Link
-                    </Button>
-                    <Button
-                      href={
-                        siteConfig.baseUrl +
-                        'docs/' +
-                        this.props.language +
-                        '/doc2.html'
-                      }>
-                      Example Link 2
-                    </Button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
+    </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 href={docUrl('doc1.html', language)}>
+              Example Link
+            </Button>
+            <Button href={docUrl('doc2.html', language)}>
+              Example Link 2
+            </Button>
+          </PromoSection>
+        </div>
+      </SplashContainer>
     );
   }
 }
 
+const Block = (props) => (
+  <Container padding={['bottom', 'top']} id={props.id} background={props.background}>
+    <GridBlock
+      align="center"
+      contents={props.children}
+      layout={props.layout}
+    />
+  </Container>
+);
+
+const Features = (props) => (
+  <Block layout="fourColumn">
+    {[
+      {
+        content: 'This is the content of my feature',
+        image: imgUrl('docusaurus.svg'),
+        imageAlign: 'top',
+        title: 'Feature One',
+      },
+      {
+        content: 'The content of my second feature',
+        image: imgUrl('docusaurus.svg'),
+        imageAlign: 'top',
+        title: 'Feature Two',
+      },
+    ]}
+  </Block>
+);
+
+const FeatureCallout = (props) => (
+  <div
+    className="productShowcaseSection paddingBottom"
+    style={{textAlign: 'center'}}>
+    <h2>Feature Callout</h2>
+    <MarkdownBlock>These are features of this project</MarkdownBlock>
+  </div>
+)
+
+const LearnHow = (props) => (
+  <Block background="light">
+    {[
+      {
+        content: 'Talk about learning how to use this',
+        image: imgUrl('docusaurus.svg'),
+        imageAlign: 'right',
+        title: 'Learn How',
+      },
+    ]}
+  </Block>
+)
+
+const TryOut = (props) => (
+  <Block id="try">
+    {[
+      {
+        content: 'Talk about trying this out',
+        image: imgUrl('docusaurus.svg'),
+        imageAlign: 'left',
+        title: 'Try it Out',
+      },
+    ]}
+  </Block>
+)
+
+const Description = (props) => (
+  <Block background="dark">
+    {[
+      {
+        content:
+          'This is another description of how this project is useful',
+        image: imgUrl('docusaurus.svg'),
+        imageAlign: 'right',
+        title: 'Description',
+      },
+    ]}
+  </Block>
+)
+
+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 className="button" href={pageUrl('users.html', props.language)}>
+          More {siteConfig.title} Users
+        </a>
+      </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']}>
+          <Features />
-            <GridBlock
+          <FeatureCallout />
-              align="center"
+          <LearnHow />
-              contents={[
+          <TryOut />
-                {
+          <Description />
-                  content: 'This is the content of my feature',
+          <Showcase language={language} />
-                  image: siteConfig.baseUrl + 'img/docusaurus.svg',
-                  imageAlign: 'top',
-                  title: 'Feature One',
-                },
-                {
-                  content: 'The content of my second feature',
-                  image: siteConfig.baseUrl + 'img/docusaurus.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/docusaurus.svg',
-                  imageAlign: 'right',
-                  title: 'Learn How',
-                },
-              ]}
-            />
-          </Container>
-
-          <Container padding={['bottom', 'top']} id="try">
-            <GridBlock
-              contents={[
-                {
-                  content: 'Talk about trying this out',
-                  image: siteConfig.baseUrl + 'img/docusaurus.svg',
-                  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/docusaurus.svg',
-                  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>
     );