From e42f507a336d158ebb2e981b9ccd4f47ad8d1c3f Mon Sep 17 00:00:00 2001 From: ajay-dhangar Date: Tue, 28 May 2024 21:49:53 +0530 Subject: [PATCH 1/3] Added new Section for Tweets message --- package-lock.json | 22 ++-- package.json | 2 + src/components/Tweet/index.tsx | 53 ++++++++++ src/components/Tweet/styles.module.css | 11 ++ src/components/TweetQuote/index.tsx | 52 ++++++++++ src/components/TweetQuote/styles.module.css | 57 +++++++++++ src/css/custom.css | 4 + src/data/tweets.tsx | 107 ++++++++++++++++++++ src/pages/index.module.css | 4 + src/pages/{index.js => index.tsx} | 50 ++++++--- 10 files changed, 340 insertions(+), 22 deletions(-) create mode 100644 src/components/Tweet/index.tsx create mode 100644 src/components/Tweet/styles.module.css create mode 100644 src/components/TweetQuote/index.tsx create mode 100644 src/components/TweetQuote/styles.module.css create mode 100644 src/data/tweets.tsx rename src/pages/{index.js => index.tsx} (55%) diff --git a/package-lock.json b/package-lock.json index aa13db63d..235712b5d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,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", @@ -4198,15 +4200,22 @@ "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==" }, "node_modules/@types/react": { - "version": "18.2.52", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.52.tgz", - "integrity": "sha512-E/YjWh3tH+qsLKaUzgpZb5AY0ChVa+ZJzF7ogehVILrFpdQk6nC/WXOv0bfFEABbXbgNxLBGU7IIZByPKb6eBw==", + "version": "18.3.3", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz", + "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==", "dependencies": { "@types/prop-types": "*", - "@types/scheduler": "*", "csstype": "^3.0.2" } }, + "node_modules/@types/react-dom": { + "version": "18.3.0", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", + "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-router": { "version": "5.1.20", "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz", @@ -4257,11 +4266,6 @@ "@types/node": "*" } }, - "node_modules/@types/scheduler": { - "version": "0.16.8", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", - "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" - }, "node_modules/@types/send": { "version": "0.17.4", "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz", diff --git a/package.json b/package.json index 912f0127c..7946d6207 100644 --- a/package.json +++ b/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", diff --git a/src/components/Tweet/index.tsx b/src/components/Tweet/index.tsx new file mode 100644 index 000000000..d82ddbfaa --- /dev/null +++ b/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 ( +
+
+
+ {name} +
+ {name} + @{handle} +
+
+
+ +
{content}
+ +
+ + {date} + +
+
+ ); +} \ No newline at end of file diff --git a/src/components/Tweet/styles.module.css b/src/components/Tweet/styles.module.css new file mode 100644 index 000000000..6250a5469 --- /dev/null +++ b/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); +} diff --git a/src/components/TweetQuote/index.tsx b/src/components/TweetQuote/index.tsx new file mode 100644 index 000000000..24ae7dce6 --- /dev/null +++ b/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 ( +
+
+ {children} +
+
+ +
+ {name} +
+ + {name} + + + {job} + +
+
+ +
+
+ ); +} \ No newline at end of file diff --git a/src/components/TweetQuote/styles.module.css b/src/components/TweetQuote/styles.module.css new file mode 100644 index 000000000..cd4b59eb5 --- /dev/null +++ b/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; +} diff --git a/src/css/custom.css b/src/css/custom.css index 7afe0d766..37d508902 100644 --- a/src/css/custom.css +++ b/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; } \ No newline at end of file diff --git a/src/data/tweets.tsx b/src/data/tweets.tsx new file mode 100644 index 000000000..9b0beecfc --- /dev/null +++ b/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't believe how much I'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'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'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; diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 1084b640f..8b1d94dc7 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -29,4 +29,8 @@ width: 100px; height: 2px; background-color: var(--ifm-color-primary); +} + +.section { + padding: 1rem; } \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.tsx similarity index 55% rename from src/pages/index.js rename to src/pages/index.tsx index 5d63bf2f9..ce89e845d 100644 --- a/src/pages/index.js +++ b/src/pages/index.tsx @@ -1,18 +1,49 @@ -// import clsx from "clsx"; +import clsx from "clsx"; // import Link from "@docusaurus/Link"; +import React from "react"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import Layout from "@theme/Layout"; -// import OurInstructors from "@site/src/components/OurInstructors"; -// import GiscusComponent from "@site/src/components/GiscusComponent"; - import Heading from "@theme/Heading"; import styles from "./index.module.css"; import Features from "../components/HomePage/Features"; import Courses from "../components/HomePage/Courses"; import { featuresData, coursesData } from "../database/home"; import Header from "../components/HomePage/Header"; +import Tweet from "../components/Tweet"; +import Tweets, { type TweetItem } from "../data/tweets"; + +function TweetsSection() { + const tweetColumns: TweetItem[][] = [[], [], []]; + Tweets.filter((tweet) => tweet.showOnHomepage).forEach((tweet, i) => + tweetColumns[i % 3]!.push(tweet) + ); + + return ( +
+
+
+ + Loved by many Users + +
+
+ {tweetColumns.map((tweetItems, i) => ( +
+ {tweetItems.map((tweet) => ( + + ))} +
+ ))} +
+
+
+ ); +} -export default function Home() { +export default function Home(): JSX.Element { const { siteConfig } = useDocusaurusContext(); return ( - {/* -
- Join the Discussion -
*/} - - {/*
- -
*/} + ); From 0ad71aac235b40ee8a654f9775eab3a4dc260d5c Mon Sep 17 00:00:00 2001 From: ajay-dhangar Date: Tue, 28 May 2024 21:57:01 +0530 Subject: [PATCH 2/3] resolving issues --- src/data/tweets.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/data/tweets.tsx b/src/data/tweets.tsx index 9b0beecfc..538bca650 100644 --- a/src/data/tweets.tsx +++ b/src/data/tweets.tsx @@ -29,7 +29,7 @@ const TWEETS: TweetItem[] = [ date: "May 28, 2024", content: ( <> - Can't believe how much I've learned from @CodeHarborHub in just a few + Can't believe how much I've learned from @CodeHarborHub in just a few weeks. Their hands-on projects are amazing! #WebDevelopment #CodeHarborHub @@ -44,7 +44,7 @@ const TWEETS: TweetItem[] = [ date: "May 28, 2024", content: ( <> - Loving the data science courses on @CodeHarborHub. It's all free and ad-free. Perfect for anyone looking to upskill. #DataScience #FreeLearning + Loving the data science courses on @CodeHarborHub. It's all free and ad-free. Perfect for anyone looking to upskill. #DataScience #FreeLearning ), showOnHomepage: true, @@ -96,7 +96,7 @@ const TWEETS: TweetItem[] = [ date: "May 28, 2024", content: ( <> - If you're looking to learn AI and machine learning, @CodeHarborHub is the place to be. Comprehensive and free! #MachineLearning #AI #CodeHarborHub + If you're looking to learn AI and machine learning, @CodeHarborHub is the place to be. Comprehensive and free! #MachineLearning #AI #CodeHarborHub ), showOnHomepage: true, From 32806737bd0050654f8ee60e621532cfde02c604 Mon Sep 17 00:00:00 2001 From: ajay-dhangar Date: Tue, 28 May 2024 22:00:26 +0530 Subject: [PATCH 3/3] resolving issues --- src/pages/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index ce89e845d..85fda35e1 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -12,7 +12,7 @@ import Header from "../components/HomePage/Header"; import Tweet from "../components/Tweet"; import Tweets, { type TweetItem } from "../data/tweets"; -function TweetsSection() { +function TweetsSection(): React.JSX.Element { const tweetColumns: TweetItem[][] = [[], [], []]; Tweets.filter((tweet) => tweet.showOnHomepage).forEach((tweet, i) => tweetColumns[i % 3]!.push(tweet) @@ -43,7 +43,7 @@ function TweetsSection() { ); } -export default function Home(): JSX.Element { +export default function Home(): React.JSX.Element { const { siteConfig } = useDocusaurusContext(); return (