Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add twitterX, Gitlab, Instagram, Reddit and Bugtracker social links #646

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Add twitterX, Gitlab, Instagram, Reddit and Bugtracker social links #646

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6ac3d3b
@react-icons/all-files hasn't been updated in long time. Replace it w…
onnimonni Nov 1, 2024
bd6ae7f
Run prettier --write to fix the formatting of icons
onnimonni Nov 1, 2024
be6655d
Refactor social icons to reduce repetition. Thanks @gauravmm and the …
onnimonni Nov 1, 2024
f993997
Get rid of dangerouslySetInnerHTML in Social image styles with the ex…
onnimonni Nov 1, 2024
3423f03
Define the logos and colors only in one place, remove color duplicati…
onnimonni Nov 1, 2024
948004f
Remove all new social media links to make this pr smaller
onnimonni Nov 1, 2024
6dd515c
Add mastodon which was missing from the original social accounts
onnimonni Nov 1, 2024
631ae7b
Revert "Remove all new social media links to make this pr smaller"
onnimonni Nov 1, 2024
08ff1e2
Add gitlab, instagram, reddit and bugtracker links
onnimonni Nov 1, 2024
3c34de3
Remove unused prefix param from PageSocial and don't interpolate Mast…
onnimonni Nov 1, 2024
2dedfa5
Merge branch 'refactor-social-icons' into add-more-social-links
onnimonni Nov 1, 2024
dcfd122
Enable custom social link background setting and use it for Instagram…
onnimonni Nov 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Enable custom social link background setting and use it for Instagram… 
… gradient background
  • Loading branch information
@onnimonni
onnimonni committed Nov 1, 2024
commit dcfd12206adec78986b34e4543a5126136eca519
2 changes: 2 additions & 0 deletions components/PageSocial.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
}

.socialLink:hover {
border-radius: 50%;
color: var(--hover-color);
background: var(--hover-background);
}

.pageSocial .actionBgPane {
Expand Down
9 changes: 6 additions & 3 deletions components/PageSocial.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ interface SocialLink {
icon: ({ size }: { size: number }) => React.ReactNode
color: string
href?: string
// Currently only used for instagram
background?: string
}

export const socialLinks: SocialLink[] = [
Expand Down Expand Up @@ -84,7 +86,8 @@ export const socialLinks: SocialLink[] = [
name: 'instagram',
href: `https://instagram.com/${config.instagram}`,
title: `Instagram @${config.instagram}`,
color: "#ff0000",
color: "#ffffff",
background: "radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%, #285AEB 90%)",
icon: FaInstagram
},

Expand Down Expand Up @@ -121,7 +124,7 @@ export function PageSocial() {
rel='noopener noreferrer'
>
<div className={styles.actionBg}>
<div className={styles.actionBgPane} />
<div className={styles.actionBgPane} style={{ background: action.background } as React.CSSProperties} />
</div>

<div className={styles.actionBg}>{action.icon({ size: 24 })}</div>
Expand All @@ -139,7 +142,7 @@ export function PageSocialButtons() {
{socialLinks.map((action) => (
<a
key={action.name}
style={{ '--hover-color': action.color } as React.CSSProperties}
style={{ '--hover-background': action.background, '--hover-color': action.color } as React.CSSProperties}
className={cs(styles[action.name], styles.socialLink)}
href={action.href}
title={action.title}
Expand Down