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
Get rid of dangerouslySetInnerHTML in Social image styles with the ex… 
…cellent hover-color suggestion from Cursor editor
  • Loading branch information
@onnimonni
onnimonni committed Nov 1, 2024
commit f993997eb066d63f1920de70eb58c415a53a54b1
14 changes: 3 additions & 11 deletions components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,20 +47,12 @@ export function FooterImpl() {
)}
</div>

<style
dangerouslySetInnerHTML={{
__html: socialLinks.map((action) => (
`.social-link-footer-${action.name} {}
.social-link-footer-${action.name}:hover { color: ${action.color}; }
`
)).join('\n')
}}
/>

<div className={styles.social}>
{socialLinks.map((action) => (
<a
className={cs(styles[action.name], `social-link-footer-${action.name}`)}
key={action.name}
style={{ '--hover-color': action.color } as React.CSSProperties}
className={styles[action.name]}
href={action.href}
title={action.title}
target='_blank'
Expand Down
31 changes: 3 additions & 28 deletions components/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,39 +85,14 @@
.social a:hover {
transition: color 50ms ease-out;
}

.toggleDarkMode:hover {
color: #2795e9;
.social a:hover {
color: var(--hover-color);
}

.twitter:hover {
.toggleDarkMode:hover {
color: #2795e9;
}

.mastodon:hover {
color: #5a4be1;
}

.zhihu:hover {
color: #0066ff;
}

.github:hover {
color: #c9510c;
}

.youtube:hover {
color: #ff0000;
}

.linkedin:hover {
color: #0077b5;
}

.newsletter:hover {
color: #777777;
}

.comments {
width: 100%;
margin-top: 2em;
Expand Down