Skip to content

Commit d176188

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #283 from CodeHarborHub/dev-3
Added new Section for Tweets message
2 parents 9bf1f66 + 3280673 commit d176188

File tree

10 files changed

+340
-22
lines changed

10 files changed

+340
-22
lines changed

‎package-lock.json

+13-9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@
3333
"@fortawesome/react-fontawesome": "^0.2.0",
3434
"@giscus/react": "^3.0.0",
3535
"@mdx-js/react": "^3.0.0",
36+
"@types/react": "^18.3.3",
37+
"@types/react-dom": "^18.3.0",
3638
"axios": "^1.6.8",
3739
"clsx": "^2.0.0",
3840
"docusaurus2-dotenv": "^1.4.0",

‎src/components/Tweet/index.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, {type ReactNode} from 'react';
2+
3+
import clsx from 'clsx';
4+
5+
import Link from '@docusaurus/Link';
6+
import styles from './styles.module.css';
7+
8+
export interface Props {
9+
url: string;
10+
handle: string;
11+
name: string;
12+
content: ReactNode;
13+
date: string;
14+
githubUsername: string;
15+
}
16+
17+
export default function Tweet({
18+
url,
19+
handle,
20+
name,
21+
content,
22+
date,
23+
githubUsername,
24+
}: Props): JSX.Element {
25+
return (
26+
<div className={clsx('card', styles.tweet)}>
27+
<div className="card__header">
28+
<div className="avatar">
29+
<img
30+
alt={name}
31+
className="avatar__photo"
32+
src={`https://unavatar.io/twitter/${handle}?fallback=https://github.com/${githubUsername}.png`}
33+
width="48"
34+
height="48"
35+
loading="lazy"
36+
/>
37+
<div className={clsx('avatar__intro', styles.tweetMeta)}>
38+
<strong className="avatar__name">{name}</strong>
39+
<span>@{handle}</span>
40+
</div>
41+
</div>
42+
</div>
43+
44+
<div className={clsx('card__body', styles.tweet)}>{content}</div>
45+
46+
<div className="card__footer">
47+
<Link className={clsx(styles.tweetMeta, styles.tweetDate)} to={url}>
48+
{date}
49+
</Link>
50+
</div>
51+
</div>
52+
);
53+
}

‎src/components/Tweet/styles.module.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.tweet {
2+
font-size: 15px;
3+
}
4+
5+
.tweetMeta {
6+
color: var(--ifm-color-emphasis-700);
7+
}
8+
9+
.tweetMeta strong {
10+
color: var(--ifm-font-color-base);
11+
}

‎src/components/TweetQuote/index.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React, {type ReactNode} from 'react';
2+
3+
import clsx from 'clsx';
4+
5+
import Link from '@docusaurus/Link';
6+
import styles from './styles.module.css';
7+
8+
export interface Props {
9+
url: string;
10+
handle: string;
11+
name: string;
12+
job: string;
13+
children: ReactNode;
14+
}
15+
16+
export default function TweetQuote({
17+
url,
18+
handle,
19+
name,
20+
job,
21+
children,
22+
}: Props): JSX.Element {
23+
const avatar = `https://unavatar.io/twitter/${handle}`;
24+
const profileUrl = `https://twitter.com/${handle}`;
25+
return (
26+
<figure className={styles.tweetQuote}>
27+
<blockquote>
28+
<Link to={url}>{children}</Link>
29+
</blockquote>
30+
<figcaption>
31+
<Link to={profileUrl} rel="nofollow">
32+
<div className="avatar">
33+
<img
34+
alt={name}
35+
className={clsx('avatar__photo', styles.avatarImg)}
36+
src={avatar}
37+
// loading="lazy"
38+
/>
39+
<div className={clsx('avatar__intro')}>
40+
<strong className="avatar__name">
41+
<cite>{name}</cite>
42+
</strong>
43+
<small className="avatar__subtitle" itemProp="description">
44+
{job}
45+
</small>
46+
</div>
47+
</div>
48+
</Link>
49+
</figcaption>
50+
</figure>
51+
);
52+
}

‎src/components/TweetQuote/styles.module.css

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
.tweetQuote {
2+
padding: 0;
3+
margin: 3rem 1rem;
4+
--ifm-link-color: var(--ifm-color-emphasis-900);
5+
--ifm-link-hover-color: var(--ifm-color-emphasis-900);
6+
}
7+
8+
.tweetQuote blockquote {
9+
font-weight: 200;
10+
font-size: 1.2rem;
11+
line-height: 1.4;
12+
position: relative;
13+
border: none;
14+
margin-bottom: 0.6rem;
15+
text-align: center;
16+
}
17+
18+
.tweetQuote :global(.avatar__subtitle) {
19+
margin-top: 0;
20+
}
21+
22+
.tweetQuote blockquote::before,
23+
.tweetQuote blockquote::after {
24+
position: absolute;
25+
color: #f1efe6;
26+
font-size: 6rem;
27+
width: 3rem;
28+
height: 3rem;
29+
font-family: cursive;
30+
line-height: 1;
31+
}
32+
33+
.tweetQuote blockquote::before {
34+
content: "“";
35+
left: -2.4rem;
36+
top: -1.1rem;
37+
}
38+
39+
.tweetQuote blockquote::after {
40+
content: "”";
41+
right: -1.6rem;
42+
bottom: -1.1rem;
43+
}
44+
45+
[data-theme="dark"] .tweetQuote blockquote::before,
46+
[data-theme="dark"] .tweetQuote blockquote::after {
47+
color: #3b3b3b;
48+
}
49+
50+
.tweetQuote p {
51+
display: inline;
52+
}
53+
54+
.tweetQuote .avatarImg {
55+
width: 42px;
56+
height: 42px;
57+
}

‎src/css/custom.css

+4
Original file line numberDiff line numberDiff line change
@@ -334,4 +334,8 @@ table, tr, td, th {
334334
width: 35px;
335335
height: 35px;
336336
border-radius: 50%;
337+
}
338+
339+
.row .col .card {
340+
margin-top: 10px;
337341
}

‎src/data/tweets.tsx

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React from "react";
2+
3+
import type { Props as Tweet } from "../components/Tweet";
4+
5+
export type TweetItem = Tweet & {
6+
showOnHomepage: boolean;
7+
};
8+
9+
const TWEETS: TweetItem[] = [
10+
{
11+
url: "https://x.com/CodesWithAjay/status/1795486727077007869",
12+
handle: "TechLover99",
13+
name: "TechLover99",
14+
date: "May 28, 2024",
15+
content: (
16+
<>
17+
Just completed my first JavaScript course on @CodeHarborHub! The content
18+
is top-notch and completely free. Highly recommend it! #LearnToCode
19+
#FreeEducation
20+
</>
21+
),
22+
showOnHomepage: true,
23+
githubUsername: "TechLover99",
24+
},
25+
{
26+
url: "https://x.com/CodesWithAjay/status/1795486727077007869",
27+
handle: "DevNewbie",
28+
name: "DevNewbie",
29+
date: "May 28, 2024",
30+
content: (
31+
<>
32+
Can&apos;t believe how much I&apos;ve learned from @CodeHarborHub in just a few
33+
weeks. Their hands-on projects are amazing! #WebDevelopment
34+
#CodeHarborHub
35+
</>
36+
),
37+
showOnHomepage: true,
38+
githubUsername: "DevNewbie",
39+
},
40+
{
41+
url: "https://x.com/CodesWithAjay/status/1795486727077007869",
42+
handle: "DataScienceGeek",
43+
name: "DataScienceGeek",
44+
date: "May 28, 2024",
45+
content: (
46+
<>
47+
Loving the data science courses on @CodeHarborHub. It&apos;s all free and ad-free. Perfect for anyone looking to upskill. #DataScience #FreeLearning
48+
</>
49+
),
50+
showOnHomepage: true,
51+
githubUsername: "DataScienceGeek",
52+
},
53+
{
54+
url: "https://x.com/CodesWithAjay/status/1795486727077007869",
55+
handle: "CoderGirl",
56+
name: "CoderGirl",
57+
date: "May 28, 2024",
58+
content: (
59+
<>
60+
Joined @CodeHarborHub last month and already feel more confident in my coding skills. Great community and resources! #TechCommunity #WomenInTech
61+
</>
62+
),
63+
showOnHomepage: true,
64+
githubUsername: "CoderGirl",
65+
},
66+
{
67+
url: "https://x.com/CodesWithAjay/status/1795486727077007869",
68+
handle: "FutureDev",
69+
name: "FutureDev",
70+
date: "May 28, 2024",
71+
content: (
72+
<>
73+
Shoutout to @CodeHarborHub for providing such quality education for free! Their courses have been a game-changer for me. #TechSkills #CareerGrowth
74+
</>
75+
),
76+
showOnHomepage: true,
77+
githubUsername: "FutureDev",
78+
},
79+
{
80+
url: "https://x.com/CodesWithAjay/status/1795486727077007869",
81+
handle: "CodeMaster",
82+
name: "CodeMaster",
83+
date: "May 28, 2024",
84+
content: (
85+
<>
86+
Just finished the Python course on @CodeHarborHub. The explanations were clear and easy to follow. Ideal for beginners! #Python #CodeHarborHub
87+
</>
88+
),
89+
showOnHomepage: true,
90+
githubUsername: "CodeMaster",
91+
},
92+
{
93+
url: "https://x.com/CodesWithAjay/status/1795486727077007869",
94+
handle: "AI_Enthusiast",
95+
name: "AI_Enthusiast",
96+
date: "May 28, 2024",
97+
content: (
98+
<>
99+
If you&apos;re looking to learn AI and machine learning, @CodeHarborHub is the place to be. Comprehensive and free! #MachineLearning #AI #CodeHarborHub
100+
</>
101+
),
102+
showOnHomepage: true,
103+
githubUsername: "AI_Enthusiast",
104+
},
105+
];
106+
107+
export default TWEETS;

‎src/pages/index.module.css

+4
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,8 @@
2929
width: 100px;
3030
height: 2px;
3131
background-color: var(--ifm-color-primary);
32+
}
33+
34+
.section {
35+
padding: 1rem;
3236
}

0 commit comments

Comments
 (0)