docs: add X feed to homepage (#1319)

Author: PhilippeR26

www/package-lock.json

@@ -22,7 +22,8 @@
     "clsx": "^1.1.1",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "react-helmet": "^6.1.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^2.4.0",

www/package.json

@@ -1,7 +1,7 @@
 .features {
   display: flex;
   align-items: center;
-  padding: 2rem 0;
+  padding: 4rem 0 2rem 0;
   width: 100%;
 }
 

www/src/components/HomepageFeatures/styles.module.css

@@ -21,3 +21,16 @@
   align-items: center;
   justify-content: center;
 }
+
+.feedSection {
+  padding: 3rem 0;
+  background-color: #303846;
+}
+.feedContainer {
+  width: 90%;
+  max-width: 600px;
+  margin: auto;
+}
+.twitterTarget {
+  color: white;
+}

www/src/pages/index.module.css

@@ -4,8 +4,10 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Layout from '@theme/Layout';
 import clsx from 'clsx';
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import styles from './index.module.css';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
@@ -22,17 +24,42 @@ function HomepageHeader() {
       </div>
     </header>
   );
+};
+
+function XFeed() {
+  return (
+    <BrowserOnly>
+      {() =>
+        <div className={clsx('hero hero--primary', styles.heroBanner, styles.feedSection)}>
+          <div className={clsx(styles.feedContainer)}>
+            <a
+            className={clsx('twitter-timeline', styles.twitterTarget)}
+              data-width={600}
+              data-height={400}
+              data-dnt="true"
+              href="https://twitter.com/starknetjs?ref_src=twsrc%5Etfw"
+              text-align="center"
+            >Tweets by Starknetjs</a>
+            <Helmet>
+              <script async src="https://platform.twitter.com/widgets.js" charSet="utf-8"></script>
+            </Helmet>
+          </div>
+        </div>
+      }
+    </BrowserOnly>
+  )
 }
 
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
+      title={``}
       description="JavaScript library for Starknet"
     >
       <HomepageHeader />
       <main>
+        <XFeed></XFeed>
         <HomepageFeatures />
       </main>
     </Layout>