Added new Section for Tweets message

package.json

@@ -33,6 +33,8 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@giscus/react": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "axios": "^1.6.8",
     "clsx": "^2.0.0",
     "docusaurus2-dotenv": "^1.4.0",

src/components/Tweet/index.tsx

@@ -0,0 +1,53 @@
+import React, {type ReactNode} from 'react';
+
+import clsx from 'clsx';
+
+import Link from '@docusaurus/Link';
+import styles from './styles.module.css';
+
+export interface Props {
+  url: string;
+  handle: string;
+  name: string;
+  content: ReactNode;
+  date: string;
+  githubUsername: string;
+}
+
+export default function Tweet({
+  url,
+  handle,
+  name,
+  content,
+  date,
+  githubUsername,
+}: Props): JSX.Element {
+  return (
+    <div className={clsx('card', styles.tweet)}>
+      <div className="card__header">
+        <div className="avatar">
+          <img
+            alt={name}
+            className="avatar__photo"
+            src={`https://unavatar.io/twitter/${handle}?fallback=https://github.com/${githubUsername}.png`}
+            width="48"
+            height="48"
+            loading="lazy"
+          />
+          <div className={clsx('avatar__intro', styles.tweetMeta)}>
+            <strong className="avatar__name">{name}</strong>
+            <span>@{handle}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className={clsx('card__body', styles.tweet)}>{content}</div>
+
+      <div className="card__footer">
+        <Link className={clsx(styles.tweetMeta, styles.tweetDate)} to={url}>
+          {date}
+        </Link>
+      </div>
+    </div>
+  );
+}

src/components/Tweet/styles.module.css

@@ -0,0 +1,11 @@
+.tweet {
+  font-size: 15px;
+}
+
+.tweetMeta {
+  color: var(--ifm-color-emphasis-700);
+}
+
+.tweetMeta strong {
+  color: var(--ifm-font-color-base);
+}

src/components/TweetQuote/index.tsx

@@ -0,0 +1,52 @@
+import React, {type ReactNode} from 'react';
+
+import clsx from 'clsx';
+
+import Link from '@docusaurus/Link';
+import styles from './styles.module.css';
+
+export interface Props {
+  url: string;
+  handle: string;
+  name: string;
+  job: string;
+  children: ReactNode;
+}
+
+export default function TweetQuote({
+  url,
+  handle,
+  name,
+  job,
+  children,
+}: Props): JSX.Element {
+  const avatar = `https://unavatar.io/twitter/${handle}`;
+  const profileUrl = `https://twitter.com/${handle}`;
+  return (
+    <figure className={styles.tweetQuote}>
+      <blockquote>
+        <Link to={url}>{children}</Link>
+      </blockquote>
+      <figcaption>
+        <Link to={profileUrl} rel="nofollow">
+          <div className="avatar">
+            <img
+              alt={name}
+              className={clsx('avatar__photo', styles.avatarImg)}
+              src={avatar}
+              // loading="lazy"
+            />
+            <div className={clsx('avatar__intro')}>
+              <strong className="avatar__name">
+                <cite>{name}</cite>
+              </strong>
+              <small className="avatar__subtitle" itemProp="description">
+                {job}
+              </small>
+            </div>
+          </div>
+        </Link>
+      </figcaption>
+    </figure>
+  );
+}

src/components/TweetQuote/styles.module.css

@@ -0,0 +1,57 @@
+.tweetQuote {
+  padding: 0;
+  margin: 3rem 1rem;
+  --ifm-link-color: var(--ifm-color-emphasis-900);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-900);
+}
+
+.tweetQuote blockquote {
+  font-weight: 200;
+  font-size: 1.2rem;
+  line-height: 1.4;
+  position: relative;
+  border: none;
+  margin-bottom: 0.6rem;
+  text-align: center;
+}
+
+.tweetQuote :global(.avatar__subtitle) {
+  margin-top: 0;
+}
+
+.tweetQuote blockquote::before,
+.tweetQuote blockquote::after {
+  position: absolute;
+  color: #f1efe6;
+  font-size: 6rem;
+  width: 3rem;
+  height: 3rem;
+  font-family: cursive;
+  line-height: 1;
+}
+
+.tweetQuote blockquote::before {
+  content: "“";
+  left: -2.4rem;
+  top: -1.1rem;
+}
+
+.tweetQuote blockquote::after {
+  content: "”";
+  right: -1.6rem;
+  bottom: -1.1rem;
+}
+
+[data-theme="dark"] .tweetQuote blockquote::before,
+[data-theme="dark"] .tweetQuote blockquote::after {
+  color: #3b3b3b;
+}
+
+.tweetQuote p {
+  display: inline;
+}
+
+.tweetQuote .avatarImg {
+  width: 42px;
+  height: 42px;
+}

src/css/custom.css

@@ -334,4 +334,8 @@ table, tr, td, th {
   width: 35px;
   height: 35px;
   border-radius: 50%;
+}
+
+.row .col .card {
+  margin-top: 10px;
 }

src/data/tweets.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+
+import type { Props as Tweet } from "../components/Tweet";
+
+export type TweetItem = Tweet & {
+  showOnHomepage: boolean;
+};
+
+const TWEETS: TweetItem[] = [
+  {
+    url: "https://x.com/CodesWithAjay/status/1795486727077007869",
+    handle: "TechLover99",
+    name: "TechLover99",
+    date: "May 28, 2024",
+    content: (
+      <>
+        Just completed my first JavaScript course on @CodeHarborHub! The content
+        is top-notch and completely free. Highly recommend it! #LearnToCode
+        #FreeEducation
+      </>
+    ),
+    showOnHomepage: true,
+    githubUsername: "TechLover99",
+  },
+  {
+    url: "https://x.com/CodesWithAjay/status/1795486727077007869",
+    handle: "DevNewbie",
+    name: "DevNewbie",
+    date: "May 28, 2024",
+    content: (
+      <>
+        Can&apos;t believe how much I&apos;ve learned from @CodeHarborHub in just a few
+        weeks. Their hands-on projects are amazing! #WebDevelopment
+        #CodeHarborHub
+      </>
+    ),
+    showOnHomepage: true,
+    githubUsername: "DevNewbie",
+  },
+  {
+    url: "https://x.com/CodesWithAjay/status/1795486727077007869",
+    handle: "DataScienceGeek",
+    name: "DataScienceGeek",
+    date: "May 28, 2024",
+    content: (
+      <>
+        Loving the data science courses on @CodeHarborHub. It&apos;s all free and ad-free. Perfect for anyone looking to upskill. #DataScience #FreeLearning
+      </>
+    ),
+    showOnHomepage: true,
+    githubUsername: "DataScienceGeek",
+  },
+  {
+    url: "https://x.com/CodesWithAjay/status/1795486727077007869",
+    handle: "CoderGirl",
+    name: "CoderGirl",
+    date: "May 28, 2024",
+    content: (
+      <>
+        Joined @CodeHarborHub last month and already feel more confident in my coding skills. Great community and resources! #TechCommunity #WomenInTech
+      </>
+    ),
+    showOnHomepage: true,
+    githubUsername: "CoderGirl",
+  },
+  {
+    url: "https://x.com/CodesWithAjay/status/1795486727077007869",
+    handle: "FutureDev",
+    name: "FutureDev",
+    date: "May 28, 2024",
+    content: (
+      <>
+        Shoutout to @CodeHarborHub for providing such quality education for free! Their courses have been a game-changer for me. #TechSkills #CareerGrowth
+      </>
+    ),
+    showOnHomepage: true,
+    githubUsername: "FutureDev",
+  },
+  {
+    url: "https://x.com/CodesWithAjay/status/1795486727077007869",
+    handle: "CodeMaster",
+    name: "CodeMaster",
+    date: "May 28, 2024",
+    content: (
+      <>
+        Just finished the Python course on @CodeHarborHub. The explanations were clear and easy to follow. Ideal for beginners! #Python #CodeHarborHub
+      </>
+    ),
+    showOnHomepage: true,
+    githubUsername: "CodeMaster",
+  },
+  {
+    url: "https://x.com/CodesWithAjay/status/1795486727077007869",
+    handle: "AI_Enthusiast",
+    name: "AI_Enthusiast",
+    date: "May 28, 2024",
+    content: (
+      <>
+        If you&apos;re looking to learn AI and machine learning, @CodeHarborHub is the place to be. Comprehensive and free! #MachineLearning #AI #CodeHarborHub
+      </>
+    ),
+    showOnHomepage: true,
+    githubUsername: "AI_Enthusiast",
+  },
+];
+
+export default TWEETS;

src/pages/index.module.css

@@ -29,4 +29,8 @@
   width: 100px;
   height: 2px;
   background-color: var(--ifm-color-primary);
+}
+
+.section {
+  padding: 1rem;
 }