Skip to content

Add local Font Awesome icons #15

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

Merged
MHolmes91 merged 1 commit into from
Jun 4, 2025
Merged

Add local Font Awesome icons #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,4 @@ It requires Node.js 22 or newer.
6. Run `npm test` to execute the unit tests.
7. When you are satisfied with the results run `npm run export` to generate the static site.
* The results of the export can be found in the `out` folder.

16 changes: 8 additions & 8 deletions __tests__/index.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@ describe('Home page', () => {

it('renders all entry types with links', () => {
const entries = [
{ url: 'https://github.com/u', title: 'GitHub', fa: 'fab fa-github', type: 'github' },
{ url: 'https://twitter.com/u', title: 'Twitter', fa: 'fab fa-twitter', type: 'twitter' },
{ url: 'https://www.linkedin.com/in/u', title: 'LinkedIn', fa: 'fab fa-linkedin-in', type: 'linkedin' },
{ url: 'mailto:u@example.com', title: 'Email u@example.com', fa: 'fas fa-at', type: 'email', target: '_self' },
{ url: 'https://bitbucket.org/u', title: 'Bitbucket', fa: 'fab fa-bitbucket', type: 'bitbucket' },
{ url: 'https://stackoverflow.com/users/1', title: 'Stack Overflow', fa: 'fab fa-stack-overflow', type: 'stack-overflow' },
{ url: 'https://stackexchange.com/users/1', title: 'Stack Exchange', fa: 'fab fa-stack-exchange', type: 'stack-exchange' }
{ url: 'https://github.com/u', title: 'GitHub', type: 'github' },
{ url: 'https://twitter.com/u', title: 'Twitter', type: 'twitter' },
{ url: 'https://www.linkedin.com/in/u', title: 'LinkedIn', type: 'linkedin' },
{ url: 'mailto:u@example.com', title: 'Email u@example.com', type: 'email', target: '_self' },
{ url: 'https://bitbucket.org/u', title: 'Bitbucket', type: 'bitbucket' },
{ url: 'https://stackoverflow.com/users/1', title: 'Stack Overflow', type: 'stack-overflow' },
{ url: 'https://stackexchange.com/users/1', title: 'Stack Exchange', type: 'stack-exchange' }
];

render(<Home {...baseProps} portfolioEntries={entries} />);
Expand All @@ -40,7 +40,7 @@ describe('Home page', () => {
});

it('renders div when entry has no URL', () => {
const entry = { url: null, title: 'Twitter', fa: 'fab fa-twitter', type: 'twitter' };
const entry = { url: null, title: 'Twitter', type: 'twitter' };
const { container } = render(<Home {...baseProps} portfolioEntries={[entry]} />);
const element = container.querySelector('.portfolio__element--twitter');
expect(element.tagName).toBe('DIV');
Expand Down
65 changes: 62 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 5 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,11 @@
"dependencies": {
"next": "15.3.3",
"react": "18.2.0",
"react-dom": "18.2.0"
"react-dom": "18.2.0",
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-brands-svg-icons": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/react-fontawesome": "^0.2.0"
},
"devDependencies": {
"@testing-library/jest-dom": "6.1.5",
Expand Down
39 changes: 29 additions & 10 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
import Head from 'next/head'
import Script from 'next/script'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
faGithub,
faTwitter,
faLinkedinIn,
faBitbucket,
faStackOverflow,
faStackExchange,
} from '@fortawesome/free-brands-svg-icons'
import { faAt } from '@fortawesome/free-solid-svg-icons'

export async function getStaticProps() {
const fs = require('fs')
Expand Down Expand Up @@ -43,13 +53,13 @@ export async function getStaticProps() {
}
}
const p = data.portfolio || {}
if (p.github) assign(p.github.order, { url: p.github.username ? `https://github.com/${p.github.username}` : null, title: 'GitHub', fa: 'fab fa-github', type: 'github' })
if (p.twitter) assign(p.twitter.order, { url: p.twitter.handle ? `https://twitter.com/${p.twitter.handle}` : null, title: 'Twitter', fa: 'fab fa-twitter', type: 'twitter' })
if (p.linkedIn) assign(p.linkedIn.order, { url: p.linkedIn.username ? `https://www.linkedin.com/in/${p.linkedIn.username}` : null, title: 'LinkedIn', fa: 'fab fa-linkedin-in', type: 'linkedin' })
if (p.email) assign(p.email.order, { url: p.email.address ? `mailto:${p.email.address}` : null, title: `Email ${p.email.address || 'me'}`, fa: 'fas fa-at', type: 'email', target: '_self' })
if (p.bitbucket) assign(p.bitbucket.order, { url: p.bitbucket.username ? `https://bitbucket.org/${p.bitbucket.username}` : null, title: 'Bitbucket', fa: 'fab fa-bitbucket', type: 'bitbucket' })
if (p.stackOverflow) assign(p.stackOverflow.order, { url: p.stackOverflow.id ? `https://stackoverflow.com/users/${p.stackOverflow.id}` : null, title: 'Stack Overflow', fa: 'fab fa-stack-overflow', type: 'stack-overflow' })
if (p.stackExchange) assign(p.stackExchange.order, { url: p.stackExchange.id ? `https://stackexchange.com/users/${p.stackExchange.id}` : null, title: 'Stack Exchange', fa: 'fab fa-stack-exchange', type: 'stack-exchange' })
if (p.github) assign(p.github.order, { url: p.github.username ? `https://github.com/${p.github.username}` : null, title: 'GitHub', type: 'github' })
if (p.twitter) assign(p.twitter.order, { url: p.twitter.handle ? `https://twitter.com/${p.twitter.handle}` : null, title: 'Twitter', type: 'twitter' })
if (p.linkedIn) assign(p.linkedIn.order, { url: p.linkedIn.username ? `https://www.linkedin.com/in/${p.linkedIn.username}` : null, title: 'LinkedIn', type: 'linkedin' })
if (p.email) assign(p.email.order, { url: p.email.address ? `mailto:${p.email.address}` : null, title: `Email ${p.email.address || 'me'}`, type: 'email', target: '_self' })
if (p.bitbucket) assign(p.bitbucket.order, { url: p.bitbucket.username ? `https://bitbucket.org/${p.bitbucket.username}` : null, title: 'Bitbucket', type: 'bitbucket' })
if (p.stackOverflow) assign(p.stackOverflow.order, { url: p.stackOverflow.id ? `https://stackoverflow.com/users/${p.stackOverflow.id}` : null, title: 'Stack Overflow', type: 'stack-overflow' })
if (p.stackExchange) assign(p.stackExchange.order, { url: p.stackExchange.id ? `https://stackexchange.com/users/${p.stackExchange.id}` : null, title: 'Stack Exchange', type: 'stack-exchange' })

const portfolioEntries = entries.filter(Boolean)

Expand All @@ -60,6 +70,16 @@ export async function getStaticProps() {
}
}

const icons = {
github: faGithub,
twitter: faTwitter,
linkedin: faLinkedinIn,
email: faAt,
bitbucket: faBitbucket,
'stack-overflow': faStackOverflow,
'stack-exchange': faStackExchange,
}

export default function Home({ data, headerPictureUrl, faviconUrl, faviconType, portfolioEntries, description }) {
return (
<>
Expand All @@ -69,7 +89,6 @@ export default function Home({ data, headerPictureUrl, faviconUrl, faviconType,
{faviconUrl && <link rel="icon" type={faviconType} href={faviconUrl} />}
<link href='//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|PT+Sans:400,700|PT+Sans+Narrow:400,700|Inconsolata:400' rel='stylesheet' type='text/css' />
</Head>
<Script src="https://kit.fontawesome.com/f938125ef2.js" strategy="afterInteractive" />
{data.googleAnalyticsID && (
<>
<Script src={`https://www.googletagmanager.com/gtag/js?id=${data.googleAnalyticsID}`} strategy="afterInteractive" />
Expand All @@ -94,13 +113,13 @@ export default function Home({ data, headerPictureUrl, faviconUrl, faviconType,
entry.url ? (
<a key={idx} href={entry.url} target={entry.target || '_blank'} title={entry.title} className={`portfolio__element portfolio__element--${entry.type}`}>
<div className="portfolio__element__icon">
<i className={entry.fa}></i>
<FontAwesomeIcon icon={icons[entry.type]} />
</div>
</a>
) : (
<div key={idx} className={`portfolio__element portfolio__element--${entry.type}`}>
<div className="portfolio__element__icon">
<i className={entry.fa}></i>
<FontAwesomeIcon icon={icons[entry.type]} />
</div>
</div>
)
Expand Down
4 changes: 2 additions & 2 deletions styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ a:visited, a:hover {
border-radius: 50%;
text-align: center;
}
.portfolio__element__icon > i {
.portfolio__element__icon > svg {
font-size: 70px;
}
.portfolio__element:not(.portfolio__element--github):hover .portfolio__element__icon, .portfolio__element .portfolio__element:not(.portfolio__element--github):active .portfolio__element__icon {
Expand All @@ -81,7 +81,7 @@ a:visited, a:hover {
color: #dfdfdf;
background-color: initial;
}
.portfolio__element--github .portfolio__element__icon i {
.portfolio__element--github .portfolio__element__icon svg {
font-size: 128px;
}
.portfolio__element--github:hover .portfolio__element__icon, .portfolio__element--github .portfolio__element--github:active .portfolio__element__icon {
Expand Down