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

DRY social icons #644

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

DRY social icons #644

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 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
3c34de3
Remove unused prefix param from PageSocial and don't interpolate Mast…
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
Next Next commit
Define the logos and colors only in one place, remove color duplicati… 
…on from from the css
  • Loading branch information
@onnimonni
onnimonni committed Nov 1, 2024
commit 3423f039d6686af9b1f5ebbaa5070a7a9d8a25ab
17 changes: 2 additions & 15 deletions components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5'

import * as config from '@/lib/config'
import { useDarkMode } from '@/lib/use-dark-mode'
import { socialLinks } from './PageSocial'
import { PageSocialButtons } from './PageSocial'

import styles from './styles.module.css'

Expand Down Expand Up @@ -48,20 +48,7 @@ export function FooterImpl() {
</div>

<div className={styles.social}>
{socialLinks.map((action) => (
<a
key={action.name}
style={{ '--hover-color': action.color } as React.CSSProperties}
className={styles[action.name]}
href={action.href}
title={action.title}
target='_blank'
rel='noopener noreferrer'
>
{action.icon({ size: 16 })}
</a>
))}

<PageSocialButtons />
</div>
</footer>
)
Expand Down
69 changes: 13 additions & 56 deletions components/PageSocial.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,19 @@
color: var(--fg-color);
}

.socialLink:hover {
color: var(--hover-color);
}

.pageSocial .actionBgPane {
background: var(--hover-color);
}

.pageSocial .socialLink:hover {
color: var(--fg-color);
border-color: var(--hover-color);;
}

.action {
position: relative;
border-radius: 50%;
Expand Down Expand Up @@ -72,62 +85,6 @@
fill: var(--fg-color);
}

.facebook .actionBgPane {
background: #3b5998;
}
.facebook:hover {
border-color: #3b5998;
}

.twitter .actionBgPane {
background: #2795e9;
}
.twitter:hover {
border-color: #2795e9;
}

.linkedin .actionBgPane {
background: #0077b5;
}
.linkedin:hover {
border-color: #0077b5;
}

.github .actionBgPane {
background: #c9510c;
}
.github:hover {
border-color: #c9510c;
}

.youtube .actionBgPane {
background: #ff0000;
}
.youtube:hover {
border-color: #ff0000;
}

.medium .actionBgPane {
background: #00ab6c;
}
.medium:hover {
border-color: #00ab6c;
}

.newsletter .actionBgPane {
background: #777777;
}
.newsletter:hover {
border-color: #777777;
}

.email .actionBgPane {
background: #777;
}
.email:hover {
border-color: #777;
}

@media only screen and (max-width: 768px) {
.links {
position: relative;
Expand Down
41 changes: 24 additions & 17 deletions components/PageSocial.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,36 +76,23 @@ export const socialLinks: SocialLink[] = [
config.bugtracker && {
name: 'bugtracker',
href: `${config.bugtracker}`,
title: `Bugtracker`,
title: 'Bugtracker',
color: "#e24329",
icon: IoIosBug
}
].filter(Boolean)

function generateCssFrag(prefix: string) {
return socialLinks.map((action) => (
`.social-link-${prefix}-${action.name} {}
.social-link-${prefix}-${action.name}:hover {
background: ${action.color};
color: white;
}
`
)).join('\n');
}

export function PageSocial(prefix: string) {
return (
<>
<style
dangerouslySetInnerHTML={{ __html: generateCssFrag("side") }}
/>
<div className={styles.pageSocial}>
{socialLinks.map((action) => (
<>
<a
className={cs(styles.action, styles[action.name], `social-link-side-${action.name}`)}
href={action.href}
key={action.name}
style={{ '--hover-color': action.color } as React.CSSProperties}
className={cs(styles.action, styles[action.name], styles.socialLink)}
href={action.href}
title={action.title}
target='_blank'
rel='noopener noreferrer'
Expand All @@ -122,3 +109,23 @@ export function PageSocial(prefix: string) {
</>
)
}

export function PageSocialButtons() {
return (
<>
{socialLinks.map((action) => (
<a
key={action.name}
style={{ '--hover-color': action.color } as React.CSSProperties}
className={cs(styles[action.name], styles.socialLink)}
href={action.href}
title={action.title}
target='_blank'
rel='noopener noreferrer'
>
{action.icon({ size: 32 })}
</a>
))}
</>
)
}
3 changes: 0 additions & 3 deletions components/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,6 @@
.social a:hover {
transition: color 50ms ease-out;
}
.social a:hover {
color: var(--hover-color);
}

.toggleDarkMode:hover {
color: #2795e9;
Expand Down