Created Wall of Love page

components/TweetList.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+import TweetEmbed from 'react-tweet-embed'
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  float: none;
+  margin: auto;
+`
+
+const Tweet = styled(TweetEmbed)`
+  margin: 50px;
+  max-width: 500px;
+`
+
+const TweetList = ({ tweets }) => (
+  <Wrapper>
+    {tweets.map((tweet) => <Tweet key={tweet} id={tweet} />)}
+  </Wrapper>
+)
+
+export default TweetList

package.json

@@ -38,6 +38,9 @@
     "react-dom": "^15.6.1",
     "react-live": "^1.8.0-2",
     "react-octicons-svg": "^1.1.13",
+    "react-tweet-embed": "^1.0.6",
+    "styled-components": "^2.0.0",
+    "sw-precache-webpack-plugin": "^0.9.1",
     "styled-components": "^3.0.2",
     "styled-theming": "^2.2.0",
     "sw-precache-webpack-plugin": "^0.11.4",

pages/index.js

@@ -79,6 +79,9 @@ const HomepageLivePreview = ({ className, ...rest }, { live: { element: Button }
       <InternalButton href="/docs" prefetch>
         Documentation
       </InternalButton>
+      <InternalButton href="/wall-of-love" prefetch>
+        Wall of Love
+      </InternalButton>
     </div>
   )
 }

pages/tweets.json

@@ -0,0 +1,22 @@
+[
+  "832610480309096448",
+  "849692122450206721",
+  "840329548885557250",
+  "835185830444556288",
+  "843328639282245633",
+  "787024424541167616",
+  "787065295022202880",
+  "786967300809248773",
+  "786745688319221761",
+  "787397000715235328",
+  "840043225628958720",
+  "839568322848907265",
+  "839492174504837120",
+  "836705032363859968",
+  "836240384036569092",
+  "835609968506187779",
+  "834095013139132416",
+  "827499925323792384",
+  "827080398828105729",
+  "830860330083418112"
+]

pages/wall-of-love/index.js

@@ -0,0 +1,91 @@
+import styled from 'styled-components'
+import tweets from '../tweets.json'
+import TweetList from '../../components/TweetList'
+import { violetRed, gold } from '../../utils/colors'
+import rem from '../../utils/rem'
+import { Content } from '../../components/Layout'
+import Link from '../../components/Link'
+import { headerFont } from '../../utils/fonts'
+import HeartIcon from 'react-octicons-svg/dist/HeartIcon'
+
+const Title = styled.div`
+  margin: 2rem 0;
+
+  h1,
+  h2 {
+    margin: 0;
+  }
+`
+
+const Tagline = styled.h1`
+  font-weight: 600;
+  font-size: 1.3rem;
+`
+
+const SupportingTagline = styled.h2`
+  font-size: 1.1rem;
+  font-weight: 400;
+`
+
+const Logo = styled.img.attrs({
+  alt: 'styled-components Logo',
+  src: '/static/logo.png'
+})`
+  width: ${rem(125)};
+  height: ${rem(125)};
+`
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: white;
+
+  background: linear-gradient(20deg, ${violetRed}, ${gold});
+  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.17);
+  box-sizing: border-box;
+  min-height: 100vh;
+`
+
+const HeroContent = Content.extend`
+  font-family: ${headerFont};
+  width: 75rem;
+`
+
+const Heart = styled(HeartIcon).attrs({
+  width: null,
+  height: null
+})`
+  display: inline-block;
+  width: ${rem(17)};
+`
+
+const WallOfLove = () => (
+  <div>
+    <Wrapper>
+      <HeroContent>
+        <Link href="/"><Logo /></Link>
+        <Title>
+          <Tagline>Wall of Love</Tagline>
+          <SupportingTagline>A list of positive tweets about styled-components 💅🏿</SupportingTagline>
+        </Title>
+        <TweetList tweets={tweets} />
+      </HeroContent>
+      <HeroContent>
+        {'Made with '}
+        <Heart />
+        {' by '}
+        <Link inline white href="https://twitter.com/glenmaddern">@glenmaddern</Link>
+        {', '}
+        <Link inline white href="https://twitter.com/mxstbr">@mxstbr</Link>
+        {' & '}
+        <Link inline white href="https://twitter.com/_philpl">@_philpl‬</Link>
+      </HeroContent>
+
+    </Wrapper>
+  </div>
+)
+
+export default WallOfLove

server.js

@@ -94,6 +94,9 @@ app.prepare()
       cachedRender(req, res, '/docs/api')
     })
 
+    server.get('/wall-of-love', (req, res) => {
+      cachedRender(req, res, '/wall-of-love')
+    })
     // Proxy imageshield.io images
     const proxyMap = {
       'npm-v.svg': 'https://img.shields.io/npm/v/styled-components.svg',

yarn.lock

@@ -5103,6 +5103,10 @@ react-proxy@^3.0.0-alpha.0:
   dependencies:
     lodash "^4.6.1"
 
+react-tweet-embed@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/react-tweet-embed/-/react-tweet-embed-1.0.6.tgz#a5e1c9cd633f18db3ef1c604c472afe3ce5ee746"
+
 [email protected]:
   version "15.4.2"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.4.2.tgz#27e1dff5d26d0e830f99614c487622bc831416f3"