Twitter Tweet Embed Added

Author: WilfredAlmeida

README.md

@@ -47,7 +47,7 @@ Yes, you can fork this repo. Please give me proper credit by linking back to [br
    nvm install
    ```
 
-3. Install dependencies
+3. Install dependencies. Use `yarn`, don't use `npm`
 
    ```sh
    yarn

package.json

@@ -57,6 +57,7 @@
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-transition-group": "^4.3.0",
+    "react-twitter-embed": "^4.0.4",
     "scrollreveal": "^4.0.5",
     "styled-components": "^5.3.0"
   },

src/components/index.js

@@ -13,3 +13,4 @@ export { default as Jobs } from './sections/jobs';
 export { default as Featured } from './sections/featured';
 export { default as Projects } from './sections/projects';
 export { default as Contact } from './sections/contact';
+export { default as TwitterTweets } from './sections/tweet';

src/components/sections/tweet.js

@@ -0,0 +1,34 @@
+/*
+
+To embed tweets, the react-twitter-embed package is used. In the below code, simply add the TwitterTweetEmbed element and tweets will be displayed.
+
+The tweets are shown left-to-right top-to-bottom in 3 columns on desktop and 1 column on mobile.
+
+*/
+
+import React from 'react';
+import { TwitterTweetEmbed } from 'react-twitter-embed';
+
+export default function TwitterTweets() {
+  return (
+    <div>
+      <ul
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          listStyleType: 'none',
+          justifyContent: 'center',
+          columnGap: '10px',
+        }}>
+        <TwitterTweetEmbed tweetId={'1539670459142537216'} />
+
+        <TwitterTweetEmbed tweetId={'1540022171149701120'} />
+
+        <TwitterTweetEmbed tweetId={'1536600005884391424'} />
+
+        <TwitterTweetEmbed tweetId={'1538976281844662272'} />
+      </ul>
+    </div>
+  );
+}

src/pages/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Layout, Hero, About, Jobs, Featured, Projects, Contact } from '@components';
+import { Layout, Hero, About, Jobs, Featured, Projects, Contact, TwitterTweets } from '@components';
 
 const StyledMainContainer = styled.main`
   counter-reset: section;
@@ -15,6 +15,7 @@ const IndexPage = ({ location }) => (
       <Jobs />
       <Featured />
       <Projects />
+      <TwitterTweets />
       <Contact />
     </StyledMainContainer>
   </Layout>

yarn.lock

@@ -11333,6 +11333,13 @@ react-transition-group@^4.3.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-twitter-embed@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz#4a6b8354acc266876ff1110b9f648518ea20db6d"
+  integrity sha512-2JIL7qF+U62zRzpsh6SZDXNI3hRNVYf5vOZ1WRcMvwKouw+xC00PuFaD0aEp2wlyGaZ+f4x2VvX+uDadFQ3HVA==
+  dependencies:
+    scriptjs "^2.5.9"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -11975,6 +11982,11 @@ schema-utils@^3.0, schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+scriptjs@^2.5.9:
+  version "2.5.9"
+  resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
+  integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==
+
 scrollreveal@^4.0.5:
   version "4.0.9"
   resolved "https://registry.npmjs.org/scrollreveal/-/scrollreveal-4.0.9.tgz#47866e1967ff604e64bac28818fe0dcea44f2c8b"