<NME> index.js
<BEF> import React, { PureComponent } from 'react';
import NextLink from '../components/Link';
import styled, { css } from 'styled-components';
import { LiveProvider, LiveEditor, LivePreview } from 'react-live-runner';

import rem from '../utils/rem';
import { blmGrey, blmMetal, blmBlack } from '../utils/colors';
import { editorMixin, StyledError } from '../components/LiveEdit';
import Link from '../components/Link';
import { Content } from '../components/Layout';
import SeoHead from '../components/SeoHead';
import HomepageGettingStarted from '../sections/homepage/getting-started.md';
import WithIsScrolled from '../components/WithIsScrolled';
import Footer from '../components/Footer';
import Nav from '../components/Nav';
import { sortedCompanies, sortedProjects } from '../companies-manifest';
import UsersLogos from '../components/UsersLogos';
import SmallShowcase from '../components/SmallShowcase';
import { headerFont } from '../utils/fonts';
import baseScope from '../utils/scope';

const Tagline = styled.h1`
  font-weight: 600;
  font-size: 1.3rem;
`;

const SupportingTagline = styled.h2`
  font-size: 1.1rem;
  font-weight: 400;
`;

const headerCode = `
const Button = styled.a\`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;

  /* The GitHub button is a primary button
   * edit this to target it specifically! */
  \${props => props.primary && css\`
    background: white;
    color: black;
  \`}
\`
`.trim();

const transformHeaderCode = (code) => `
${code}

render(
  <div>
    <Button
      href="https://github.com/styled-components/styled-components"
      target="_blank"
      rel="noopener"
      primary
    >
      GitHub
    </Button>

    <Button as={Link} href="/docs">
      Documentation
    </Button>
  AutodeskLogo,
  Auth0Logo,
  BBCLogo,
  BloombergLogo,
  BlueTomatoLogo,
  CasperLogo,
  h1,
  h2 {
    margin: 0;
  }
`;

const Logo = styled.img.attrs((/* props */) => ({
  alt: 'styled-components Logo',
  src: '/logo.png',
}))`
  width: ${rem(125)};
  height: ${rem(125)};
`;

const UsersHeading = styled.p`
  text-transform: uppercase;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 2.5rem 0 0.5rem;
  opacity: 0.8;
`;

const ShowcaseHeading = styled(UsersHeading)`
  margin: 2rem 0 0.5rem;
`;

const Wrapper = styled.div.attrs((/* props */) => ({
  className: 'hero-header', // for integration tests
}))`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;

  background: linear-gradient(20deg, ${blmGrey}, ${blmMetal});
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.17);
  box-sizing: border-box;
  min-height: 100vh;
  margin-bottom: 160px;
`;

const EditorContainer = styled.div`
  display: inline-block;
  box-shadow: ${rem(1)} ${rem(1)} ${rem(20)} rgba(20, 20, 20, 0.27);
  margin: ${rem(35)} 0;
  text-align: left;
  width: 100%;
  max-width: 34rem;
`;

const Editor = styled(LiveEditor)`
  ${editorMixin};
  height: 24rem;
  white-space: pre;
  width: 100%;
`;

const Links = styled.div`
  margin: ${rem(36)} 0;
`;

const ShowcaseLink = styled(NextLink)`
  display: block;
  max-width: 100%;
  width: 196px;
  background: red;
  line-height: 48px;
  text-align: center;
  color: white;
  font-family: ${headerFont};
  border-radius: 4px;
  margin: 0 auto;
  background-color: ${blmGrey};
  transition: background-color 0.2s ease-in-out;

  &:hover {
    background-color: ${blmBlack};
  }
`;

class Index extends PureComponent {
  state = {
    isMobileNavFolded: true,
  };

  toggleMobileNav = () => {
    this.setState((prevState) => ({
      isMobileNavFolded: !prevState.isMobileNavFolded,
    }));
  };

  onRouteChange = () => {
    this.setState({
      isMobileNavFolded: true,
    });
  };

  render() {
    const { isMobileNavFolded } = this.state;
    return (
      <div>
        <SeoHead title="styled-components">
          <meta name="robots" content="noodp" />
        </SeoHead>

        <WithIsScrolled>
          {({ isScrolled }) => (
            <Nav
              showSideNav={false}
              transparent={!isScrolled}
              isMobileNavFolded={isMobileNavFolded}
              onMobileNavToggle={this.toggleMobileNav}
              onRouteChange={this.onRouteChange}
            />
          )}
        </WithIsScrolled>

        <Wrapper>
          <Content hero>
            <LiveProvider code={headerCode} transformCode={transformHeaderCode} scope={{ ...baseScope, rem, Link }}>
              <Logo />

              <Title>
                <Tagline>Visual primitives for the component age.</Tagline>
                <SupportingTagline>
                  Use the best bits of ES6 and CSS to style your apps without stress 💅🏾
                </SupportingTagline>
              </Title>

              <Links>
                <LivePreview />
              </Links>

              <EditorContainer>
                <Editor />
                <StyledError />
              </EditorContainer>
            </LiveProvider>

            <UsersHeading>Used by folks at</UsersHeading>
          </Content>
          <UsersLogos users={sortedCompanies.filter((v, i) => i % 2)} />
          <UsersLogos reverse users={sortedCompanies.filter((v, i) => !(i % 2))} />
          <ShowcaseHeading>To create beautiful websites like these</ShowcaseHeading>
          <SmallShowcase projects={sortedProjects} />
        </Wrapper>
        <ShowcaseLink href="/showcase">Discover more</ShowcaseLink>

        <HomepageGettingStarted />

        <Footer />
      </div>
    );
  }
}

export default Index;
  <CompanyLogo bottom="0.1rem" key="https://www.trulia.com/" similarWebGlobalRank={257}>
    <TruliaLogo />
  </CompanyLogo>,
];

class Index extends PureComponent {

<MSG> added birchbox logo to homepage

<DFF> @@ -70,6 +70,7 @@ import {
   AutodeskLogo,
   Auth0Logo,
   BBCLogo,
+  BirchboxLogo,
   BloombergLogo,
   BlueTomatoLogo,
   CasperLogo,
@@ -419,6 +420,10 @@ const Logos = [
   <CompanyLogo bottom="0.1rem" key="https://www.trulia.com/" similarWebGlobalRank={257}>
     <TruliaLogo />
   </CompanyLogo>,
+
+  <CompanyLogo height="1.3rem" bottom="-0.2rem" key="https://birchbox.com/" similarWebGlobalRank={38199}>
+    <BirchboxLogo />
+  </CompanyLogo>,
 ];
 
 class Index extends PureComponent {

{'commit': 'diff --git a/components/CompanyLogos.js b/components/CompanyLogos.js\nindex a46bff7..bc16584 100644\n--- a/components/CompanyLogos.js\n+++ b/components/CompanyLogos.js\n@@ -653,3 +653,9 @@ export const TruliaLogo = () => (\n     <path d="M147.71 11a5.51 5.51 0 1 0-5.5-5.51 5.51 5.51 0 0 0 5.5 5.51zm4.99 29.56V14.64h-15.5v9.28h6.22v25.92h15.49v-9.28h-6.21zm-26.49 0V2.54h-15.49v9.28h6.21v28.74h-6.21v9.28h21.7v-9.28h-6.21zM60.25 14.52h-2.81a12.17 12.17 0 0 0-10.75 5.39l-1.89-5.27h-9.11v9.28H40v25.92h9.28V31.72a8.16 8.16 0 0 1 8.16-8.16h2.81zm42.98 18.35V14.64H94V33.2a8.29 8.29 0 0 1-16.58 0V14.64h-9.33v18.23a17.57 17.57 0 0 0 35.14 0zM27.6 23.92v-9.28H15.49V3.28H6.22v11.36H0v9.28h6.22v8.92a17.56 17.56 0 0 0 17.56 17.57A17.74 17.74 0 0 0 27.6 50v-9.17a9.28 9.28 0 0 1-3.18.56 8.78 8.78 0 0 1-8.93-8.61v-8.86zm162.09-9.28v3.5a13.08 13.08 0 0 0-9.14-4h-.72c-9.17 0-16.6 8.12-16.6 18.15s7.43 18.19 16.6 18.15h.72a13.08 13.08 0 0 0 9.14-4v3.5H199v-35.3zm-8.81 26.82a9.06 9.06 0 0 1-8.88-9.23 8.85 8.85 0 1 1 17.69 0 9 9 0 0 1-8.81 9.23z"></path>\n   </Svg>\n );\n+\n+export const BirchboxLogo = () => (\n+  <Svg viewBox="0 0 535.3 61">\n+    <path d="M497.332 30.524l19.021-19.021 19.021 19.02-19.02 19.022zM44.8 30.1c6.8-6.1 7.4-16.5 1.3-23.3-3.1-3.4-7.6-5.4-12.3-5.4H0v58.2h34.7c9.1 0 16.5-7.4 16.5-16.4 0-5.1-2.3-9.9-6.4-13.1M7.7 9.1h26.1c4.8 0 8.8 3.9 8.8 8.8s-3.9 8.8-8.8 8.8H7.7V9.1zm27 42.8h-27V34.4h27c4.8 0 8.8 3.9 8.8 8.8s-3.9 8.7-8.8 8.7m306.1-21.8c6.8-6.1 7.4-16.5 1.3-23.3-3.1-3.5-7.6-5.5-12.3-5.5H296v58.2h34.7c9.1 0 16.5-7.4 16.5-16.5 0-4.9-2.3-9.7-6.4-12.9m-37.1-21h26.1c4.8 0 8.8 3.9 8.8 8.8s-3.9 8.8-8.8 8.8h-26.1V9.1zm27 42.8h-27V34.4h27c4.8 0 8.8 3.9 8.8 8.8s-3.9 8.7-8.8 8.7M68.1 1.4h7.7v58.2h-7.7V1.4zM391.8 0c-16.9 0-30.5 13.7-30.5 30.5 0 16.9 13.7 30.5 30.5 30.5s30.5-13.7 30.5-30.5S408.6 0 391.8 0m0 53.3c-12.6 0-22.8-10.2-22.8-22.8s10.2-22.8 22.8-22.8c12.6 0 22.8 10.2 22.8 22.8-.1 12.6-10.3 22.8-22.8 22.8m-231-22.8c0 12.6 10.2 22.8 22.8 22.8 7.5 0 14.6-3.7 18.8-9.9l2.2-3.2 6.4 4.4-2.2 3.2c-9.5 13.9-28.5 17.5-42.4 7.9s-17.5-28.5-7.9-42.4C168-.6 187-4.2 200.9 5.4c3.1 2.1 5.8 4.8 7.9 7.9l2.2 3.2-6.4 4.4-2.2-3.2c-7.1-10.4-21.3-13.1-31.7-6-6.2 4.2-9.9 11.3-9.9 18.8M269.2 1.4h7.7v58.2h-7.7V35.5h-35.4v24.1h-7.7V1.4h7.7v26.4h35.4V1.4zm-143.7 33c9.1 0 16.5-7.4 16.5-16.5s-7.4-16.5-16.5-16.5H94.7v58.2h7.7V34.4h9.8l20.1 25.2h9.9l-20.1-25.2h3.4zm-23.1-7.8V9.1h23.1c4.8 0 8.8 3.9 8.8 8.8s-3.9 8.8-8.8 8.8h-23.1zm359.4 3.1l24.5 29.9h-10l-19.5-23.8-19.5 23.8h-10l24.5-29.9-23.1-28.3h10l18.2 22.2L475 1.4h10l-23.2 28.3z" />\n+  </Svg>\n+);\ndiff --git a/pages/index.js b/pages/index.js\nindex 34ed110..21588ee 100644\n--- a/pages/index.js\n+++ b/pages/index.js\n@@ -70,6 +70,7 @@ import {\n   AutodeskLogo,\n   Auth0Logo,\n   BBCLogo,\n+  BirchboxLogo,\n   BloombergLogo,\n   BlueTomatoLogo,\n   CasperLogo,\n@@ -419,6 +420,10 @@ const Logos = [\n   <CompanyLogo bottom="0.1rem" key="https://www.trulia.com/" similarWebGlobalRank={257}>\n     <TruliaLogo />\n   </CompanyLogo>,\n+\n+  <CompanyLogo height="1.3rem" bottom="-0.2rem" key="https://birchbox.com/" similarWebGlobalRank={38199}>\n+    <BirchboxLogo />\n+  </CompanyLogo>,\n ];\n \n class Index extends PureComponent {\n', 'commit_subject': 'added birchbox logo to homepage', 'repo_name': 'styled-components/styled-components-website', 'committer': {'name': 'jannick vandaele', 'email': 'baf5a2e87b22abcd2ef69e16eac701327beaed2b@hotmail.com', 'time_sec': '1569922767', 'tz_offset': '120', 'date': {'seconds': '1569922767'}}, 'commit_tree': 'f3f979e60fc13adb49d5f47273f24c76ba400216', 'commit_message': 'added birchbox logo to homepage\n', 'language_name': 'Shell', 'license': 'mit', 'hunks': '@@ -70,6 +70,7 @@ import {\n   AutodeskLogo,\n   Auth0Logo,\n   BBCLogo,\n+  BirchboxLogo,\n   BloombergLogo,\n   BlueTomatoLogo,\n   CasperLogo,\n@@ -419,6 +420,10 @@ const Logos = [\n   <CompanyLogo bottom="0.1rem" key="https://www.trulia.com/" similarWebGlobalRank={257}>\n     <TruliaLogo />\n   </CompanyLogo>,\n+\n+  <CompanyLogo height="1.3rem" bottom="-0.2rem" key="https://birchbox.com/" similarWebGlobalRank={38199}>\n+    <BirchboxLogo />\n+  </CompanyLogo>,\n ];\n \n class Index extends PureComponent {\n', 'addition_count': 5, 'deletion_count': 0, 'src_file': 'a/pages/index.js', 'tgt_file': 'b/pages/index.js', 'file_extension': '.js', 'before_file': 'import React, { PureComponent } from \'react\';\nimport NextLink from \'../components/Link\';\nimport styled, { css } from \'styled-components\';\nimport { LiveProvider, LiveEditor, LivePreview } from \'react-live-runner\';\n\nimport rem from \'../utils/rem\';\nimport { blmGrey, blmMetal, blmBlack } from \'../utils/colors\';\nimport { editorMixin, StyledError } from \'../components/LiveEdit\';\nimport Link from \'../components/Link\';\nimport { Content } from \'../components/Layout\';\nimport SeoHead from \'../components/SeoHead\';\nimport HomepageGettingStarted from \'../sections/homepage/getting-started.md\';\nimport WithIsScrolled from \'../components/WithIsScrolled\';\nimport Footer from \'../components/Footer\';\nimport Nav from \'../components/Nav\';\nimport { sortedCompanies, sortedProjects } from \'../companies-manifest\';\nimport UsersLogos from \'../components/UsersLogos\';\nimport SmallShowcase from \'../components/SmallShowcase\';\nimport { headerFont } from \'../utils/fonts\';\nimport baseScope from \'../utils/scope\';\n\nconst Tagline = styled.h1`\n  font-weight: 600;\n  font-size: 1.3rem;\n`;\n\nconst SupportingTagline = styled.h2`\n  font-size: 1.1rem;\n  font-weight: 400;\n`;\n\nconst headerCode = `\nconst Button = styled.a\\`\n  /* This renders the buttons above... Edit me! */\n  display: inline-block;\n  border-radius: 3px;\n  padding: 0.5rem 0;\n  margin: 0.5rem 1rem;\n  width: 11rem;\n  background: transparent;\n  color: white;\n  border: 2px solid white;\n\n  /* The GitHub button is a primary button\n   * edit this to target it specifically! */\n  \\${props => props.primary && css\\`\n    background: white;\n    color: black;\n  \\`}\n\\`\n`.trim();\n\nconst transformHeaderCode = (code) => `\n${code}\n\nrender(\n  <div>\n    <Button\n      href="https://github.com/styled-components/styled-components"\n      target="_blank"\n      rel="noopener"\n      primary\n    >\n      GitHub\n    </Button>\n\n    <Button as={Link} href="/docs">\n      Documentation\n    </Button>\n  AutodeskLogo,\n  Auth0Logo,\n  BBCLogo,\n  BloombergLogo,\n  BlueTomatoLogo,\n  CasperLogo,\n  h1,\n  h2 {\n    margin: 0;\n  }\n`;\n\nconst Logo = styled.img.attrs((/* props */) => ({\n  alt: \'styled-components Logo\',\n  src: \'/logo.png\',\n}))`\n  width: ${rem(125)};\n  height: ${rem(125)};\n`;\n\nconst UsersHeading = styled.p`\n  text-transform: uppercase;\n  color: #fff;\n  font-size: 0.8rem;\n  font-weight: 600;\n  margin: 2.5rem 0 0.5rem;\n  opacity: 0.8;\n`;\n\nconst ShowcaseHeading = styled(UsersHeading)`\n  margin: 2rem 0 0.5rem;\n`;\n\nconst Wrapper = styled.div.attrs((/* props */) => ({\n  className: \'hero-header\', // for integration tests\n}))`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  color: white;\n\n  background: linear-gradient(20deg, ${blmGrey}, ${blmMetal});\n  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.17);\n  box-sizing: border-box;\n  min-height: 100vh;\n  margin-bottom: 160px;\n`;\n\nconst EditorContainer = styled.div`\n  display: inline-block;\n  box-shadow: ${rem(1)} ${rem(1)} ${rem(20)} rgba(20, 20, 20, 0.27);\n  margin: ${rem(35)} 0;\n  text-align: left;\n  width: 100%;\n  max-width: 34rem;\n`;\n\nconst Editor = styled(LiveEditor)`\n  ${editorMixin};\n  height: 24rem;\n  white-space: pre;\n  width: 100%;\n`;\n\nconst Links = styled.div`\n  margin: ${rem(36)} 0;\n`;\n\nconst ShowcaseLink = styled(NextLink)`\n  display: block;\n  max-width: 100%;\n  width: 196px;\n  background: red;\n  line-height: 48px;\n  text-align: center;\n  color: white;\n  font-family: ${headerFont};\n  border-radius: 4px;\n  margin: 0 auto;\n  background-color: ${blmGrey};\n  transition: background-color 0.2s ease-in-out;\n\n  &:hover {\n    background-color: ${blmBlack};\n  }\n`;\n\nclass Index extends PureComponent {\n  state = {\n    isMobileNavFolded: true,\n  };\n\n  toggleMobileNav = () => {\n    this.setState((prevState) => ({\n      isMobileNavFolded: !prevState.isMobileNavFolded,\n    }));\n  };\n\n  onRouteChange = () => {\n    this.setState({\n      isMobileNavFolded: true,\n    });\n  };\n\n  render() {\n    const { isMobileNavFolded } = this.state;\n    return (\n      <div>\n        <SeoHead title="styled-components">\n          <meta name="robots" content="noodp" />\n        </SeoHead>\n\n        <WithIsScrolled>\n          {({ isScrolled }) => (\n            <Nav\n              showSideNav={false}\n              transparent={!isScrolled}\n              isMobileNavFolded={isMobileNavFolded}\n              onMobileNavToggle={this.toggleMobileNav}\n              onRouteChange={this.onRouteChange}\n            />\n          )}\n        </WithIsScrolled>\n\n        <Wrapper>\n          <Content hero>\n            <LiveProvider code={headerCode} transformCode={transformHeaderCode} scope={{ ...baseScope, rem, Link }}>\n              <Logo />\n\n              <Title>\n                <Tagline>Visual primitives for the component age.</Tagline>\n                <SupportingTagline>\n                  Use the best bits of ES6 and CSS to style your apps without stress 💅🏾\n                </SupportingTagline>\n              </Title>\n\n              <Links>\n                <LivePreview />\n              </Links>\n\n              <EditorContainer>\n                <Editor />\n                <StyledError />\n              </EditorContainer>\n            </LiveProvider>\n\n            <UsersHeading>Used by folks at</UsersHeading>\n          </Content>\n          <UsersLogos users={sortedCompanies.filter((v, i) => i % 2)} />\n          <UsersLogos reverse users={sortedCompanies.filter((v, i) => !(i % 2))} />\n          <ShowcaseHeading>To create beautiful websites like these</ShowcaseHeading>\n          <SmallShowcase projects={sortedProjects} />\n        </Wrapper>\n        <ShowcaseLink href="/showcase">Discover more</ShowcaseLink>\n\n        <HomepageGettingStarted />\n\n        <Footer />\n      </div>\n    );\n  }\n}\n\nexport default Index;\n  <CompanyLogo bottom="0.1rem" key="https://www.trulia.com/" similarWebGlobalRank={257}>\n    <TruliaLogo />\n  </CompanyLogo>,\n];\n\nclass Index extends PureComponent {\n', 'message': 'added birchbox logo to homepage\n', 'author_name': 'jannick vandaele', 'lang': 'js'}