Skip to content

Commit 82f29e4

Browse files
mdvanesmdvanes
authored
Merge pull request #5 from code-star/main
replace tweets by toots
2 parents fa38b23 + fa2181b commit 82f29e4

File tree

18 files changed

+729
-65
lines changed

18 files changed

+729
-65
lines changed

‎.github/workflows/prod.yml‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ jobs:
1616

1717
steps:
1818
- name: Checkout 🛎️
19-
uses: actions/checkout@v2
19+
uses: actions/checkout@v3
2020
- name: Use Node.js ${{ matrix.node-version }}
21-
uses: actions/setup-node@v1
21+
uses: actions/setup-node@v3
2222
with:
2323
node-version: ${{ matrix.node-version }}
2424
- name: Install and Build components 🔧
@@ -29,12 +29,14 @@ jobs:
2929
echo TWITTER_USER_NAME=${{ secrets.TWITTER_USER_NAME }} >> .env
3030
echo YOUTUBE_API_KEY=${{ secrets.YOUTUBE_API_KEY }} >> .env
3131
echo YOUTUBE_PLAYLIST_ID=${{ secrets.YOUTUBE_PLAYLIST_ID }} >> .env
32+
echo MASTODON_ACCESS_TOKEN=${{ secrets.MASTODON_ACCESS_TOKEN }} >> .env
33+
echo MASTODON_ID=${{ secrets.MASTODON_ID }} >> .env
3234
npm ci
3335
npx next build && npx next export
3436
touch out/.nojekyll
3537
# CI: false # true -> fails on warning
3638
- name: Deploy 🚀
37-
uses: JamesIves/github-pages-deploy-action@4.0.0
39+
uses: JamesIves/github-pages-deploy-action@v4
3840
with:
3941
token: ${{ secrets.ACCESS_TOKEN }} # Access token from the Prod repo, set in Settings > Secrets
4042
repository-name: code-star/code-star.github.io

‎.github/workflows/test.yml‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ jobs:
1616

1717
steps:
1818
- name: Checkout 🛎️
19-
uses: actions/checkout@v2
19+
uses: actions/checkout@v3
2020
- name: Use Node.js ${{ matrix.node-version }}
21-
uses: actions/setup-node@v1
21+
uses: actions/setup-node@v3
2222
with:
2323
node-version: ${{ matrix.node-version }}
2424
- name: Install and Build components 🔧
@@ -29,13 +29,15 @@ jobs:
2929
echo TWITTER_USER_NAME=${{ secrets.TWITTER_USER_NAME }} >> .env
3030
echo YOUTUBE_API_KEY=${{ secrets.YOUTUBE_API_KEY }} >> .env
3131
echo YOUTUBE_PLAYLIST_ID=${{ secrets.YOUTUBE_PLAYLIST_ID }} >> .env
32+
echo MASTODON_ACCESS_TOKEN=${{ secrets.MASTODON_ACCESS_TOKEN }} >> .env
33+
echo MASTODON_ID=${{ secrets.MASTODON_ID }} >> .env
3234
npm ci
3335
echo "{ \"basePath\": \"/codestar-website-next\" }" > config.json
3436
npx next build && npx next export
3537
touch out/.nojekyll
3638
# CI: false # true -> fails on warning
3739
- name: Deploy 🚀
38-
uses: JamesIves/github-pages-deploy-action@4.0.0
40+
uses: JamesIves/github-pages-deploy-action@v4
3941
with:
4042
token: ${{ secrets.GITHUB_TOKEN }}
4143
branch: gh-pages # The branch the action should deploy to.

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,11 @@ Merges to the `production` branch are automatically deployed to the production e
3535

3636
Settings for Github Actions:
3737

38-
- under github.com > settings > security/secrets > actions > add new repository secret:
38+
- Under github.com > settings > security/secrets > actions > add new repository secret:
3939
- TWITTER_ACCESS_TOKEN
4040
- TWITTER_USER_NAME
4141
- YOUTUBE_API_KEY
4242
- YOUTUBE_PLAYLIST_ID
43+
- MASTODON_ACCESS_TOKEN
44+
- MASTODON_ID
45+
- Also make sure a mapping exists for each key in test.yml and prod.yml

‎components/EmbeddedSocialMedia/EmbeddedSocialMedia.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
1-
import Link from "next/link";
21
import { FC } from "react";
2+
import { IToots } from "../../lib/mastodon/getToots";
33
import { ITweets } from "../../lib/twitter/getTweets";
44
import { IPlaylistItem } from "../../lib/youtube-playlist/youtube-playlist.types";
5-
import PlaylistItemCard from "../PlaylistItemCard/PlaylistItemCard";
6-
import styles from "./EmbeddedSocialMedia.module.scss";
7-
import TweetCard from "../TweetCard/TweetCard";
85
import Playlist from "../Playlist/Playlist";
6+
import TootCard from "../TootCard/TootCard";
7+
import styles from "./EmbeddedSocialMedia.module.scss";
98

109
interface EmbeddedSocialMediaProps {
10+
toots: IToots | null;
1111
tweets: ITweets | null;
1212
playlist: IPlaylistItem[];
1313
}
1414

1515
const EmbeddedSocialMedia: FC<EmbeddedSocialMediaProps> = ({
16-
tweets,
16+
toots,
1717
playlist,
1818
}) => {
1919
return (
2020
<div className={styles["embedded-social-media"]}>
21-
<TweetCard tweets={tweets} />
21+
<TootCard toots={toots} />
22+
{/* <TweetCard tweets={tweets} /> */}
2223
<Playlist playlist={playlist} viewport="sm" />
2324
</div>
2425
);

‎components/Footer/Footer.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { FC } from "react";
22
import styles from "./Footer.module.scss";
33
import Image from "next/image";
4+
import mastodonSvg from "../../public/mastodon_logo.svg";
45
import twitterSvg from "../../public/twitter_logo.svg";
56
import githubSvg from "../../public/github_logo.svg";
67
import mediumSvg from "../../public/medium_logo.svg";
@@ -31,6 +32,14 @@ const Footer: FC = () => {
3132
</ul>
3233

3334
<p className="social-links">
35+
<a href="https://mastodon.social/@codestar" aria-label="Mastodon">
36+
<Image
37+
src={mastodonSvg}
38+
alt="Codestar Mastodon"
39+
width={32}
40+
height={32}
41+
/>
42+
</a>
3443
<a href="https://twitter.com/codestar_nl" aria-label="Twitter">
3544
<Image
3645
src={twitterSvg}

‎components/TootCard/TootCard.module.scss‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
@import "../constants";
2+
3+
.toot-card {
4+
display: none;
5+
border: 1px solid $highlight-card-bg;
6+
border-radius: $card-border-radius;
7+
padding: 1rem;
8+
9+
> a {
10+
display: block;
11+
text-align: right;
12+
font-weight: bold;
13+
}
14+
15+
p:first-child {
16+
align-items: center;
17+
color: $underline-text;
18+
display: flex;
19+
gap: 10px;
20+
}
21+
22+
div > a {
23+
display: block;
24+
margin-bottom: 0.5rem;
25+
overflow-x: hidden;
26+
text-overflow: ellipsis;
27+
28+
&:hover {
29+
text-decoration: underline;
30+
}
31+
}
32+
33+
@media (min-width: $main-width) {
34+
display: block;
35+
width: $aside-width;
36+
}
37+
}
38+
39+
.toot-card--badges {
40+
display: flex;
41+
gap: 0.7rem;
42+
cursor: default;
43+
align-items: flex-start;
44+
45+
> span {
46+
display: flex;
47+
gap: 0.3rem;
48+
align-items: flex-start;
49+
padding: 0.2rem;
50+
border-radius: 4px;
51+
52+
&:hover {
53+
background-color: $highlight-card-bg;
54+
}
55+
}
56+
}

‎components/TootCard/TootCard.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import Image from "next/image";
2+
import { FC } from "react";
3+
import { formatDate } from "../../lib/formatDate";
4+
import { IToots } from "../../lib/mastodon/getToots";
5+
import mastodonSvg from "../../public/mastodon_logo.svg";
6+
import replySvg from "../../public/fa-reply.svg";
7+
import retweetSvg from "../../public/fa-retweet.svg";
8+
import starSvg from "../../public/fa-star.svg";
9+
import styles from "./TootCard.module.scss";
10+
11+
interface ITootCardProps {
12+
toots: IToots | null;
13+
}
14+
15+
const TootCard: FC<ITootCardProps> = ({ toots }) => {
16+
if (!toots) {
17+
return <></>;
18+
}
19+
const { author, data } = toots;
20+
return (
21+
<section className={styles["toot-card"]}>
22+
<a href={author.url}>@{author.username}@mastodon.social</a>
23+
{data.map(
24+
({
25+
id,
26+
text,
27+
created_at,
28+
url,
29+
reblogs_count,
30+
replies_count,
31+
favourites_count,
32+
}) => (
33+
<div key={id}>
34+
<p>
35+
<Image
36+
src={mastodonSvg}
37+
alt="Codestar Mastodon"
38+
width={24}
39+
height={24}
40+
/>
41+
<span>{formatDate(created_at)}</span>
42+
</p>
43+
<a href={url}>{text}</a>
44+
<div className={styles["toot-card--badges"]}>
45+
<span title="Replies">
46+
<Image src={replySvg} alt="Replies" width={18} height={18} />
47+
{replies_count}
48+
</span>
49+
<span title="Reblogs">
50+
<Image src={retweetSvg} alt="Reblogs" width={18} height={18} />
51+
{reblogs_count}
52+
</span>
53+
<span title="Favourites">
54+
<Image src={starSvg} alt="Favourites" width={18} height={18} />
55+
{favourites_count}
56+
</span>
57+
</div>
58+
</div>
59+
)
60+
)}
61+
</section>
62+
);
63+
};
64+
65+
export default TootCard;

‎components/UpcomingMeetupCard/UpcomingMeetupCard.module.scss‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
@import "../constants";
22

33
.upcoming-meetup-card {
4-
border-radius: 4px;
5-
background-color: $highlight-card-bg;
6-
padding: 1rem;
7-
text-align: center;
4+
display: block;
85

9-
&:hover {
10-
background-color: lighten($highlight-card-bg, 10%);
6+
section {
7+
border-radius: 4px;
8+
background-color: $highlight-card-bg;
9+
padding: 1rem;
10+
text-align: center;
11+
12+
&:hover {
13+
background-color: lighten($highlight-card-bg, 10%);
14+
}
1115
}
1216

13-
h2, h3 {
17+
h2,
18+
h3 {
1419
margin-top: 0;
1520
}
1621

@@ -19,16 +24,19 @@
1924
// padding: 1rem;
2025
// }
2126

22-
> p > a {
27+
section > p > button {
2328
display: inline-block;
2429
background-color: $orange;
2530
border-radius: 4px;
31+
border: none;
2632
padding: 8px;
33+
font-size: 16px;
2734
font-weight: bold;
2835
color: black;
2936
width: 100%;
3037
max-width: $aside-width;
3138
text-align: center;
39+
cursor: pointer;
3240

3341
@media (min-width: $main-width) {
3442
// width: $aside-width - 30px;

‎components/UpcomingMeetupCard/UpcomingMeetupCard.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ const formatDate = (time: string) =>
1818
const UpcomingMeetupCard: FC<IUpcomingMeetupCardProps> = ({ meetup }) => {
1919
const { link, featured_photo, name, time } = meetup;
2020
return (
21-
<a href={link}>
22-
<section className={styles["upcoming-meetup-card"]}>
21+
<a href={link} className={styles["upcoming-meetup-card"]}>
22+
<section>
2323
<h2>MEETUP</h2>
2424
<h3>{name}</h3>
2525
{featured_photo && (
@@ -31,7 +31,7 @@ const UpcomingMeetupCard: FC<IUpcomingMeetupCardProps> = ({ meetup }) => {
3131
/>
3232
)}
3333
<p>
34-
<a href={link}>SIGN UP FOR {formatDate(time).toUpperCase()}</a>
34+
<button>SIGN UP FOR {formatDate(time).toUpperCase()}</button>
3535
</p>
3636
</section>
3737
</a>

‎components/UpcomingMeetupList/UpcomingMeetupList.module.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@import "../constants";
22

33
.upcoming-meetup-list {
4+
flex-direction: column;
5+
gap: 1rem;
46
padding: 1rem;
57
width: 100%;
68

0 commit comments

Comments
 (0)