
Here is the CSS snippet I use to target and show specific icons for [various](https://wikipedia.org) [external](https://github.com) [links](https://example.org) on this site. To use it, first save the external link and other brand icon SVGs in the `assets` directory and then set the `--color-icon` CSS variable somewhere.

```css showLineNumbers
/* Ignore URLs on this domain, internal links, anchors, and links with no-icon class */
a:not([href^='https://rsapkf.org']):not([href^='/']):not([href^='#']):not(
    .no-icon
  )::after {
  background-color: var(--color-icon);
  content: '';
  display: inline-flex;
  width: 10px;
  height: 10px;
  margin-left: 3px;
  margin-right: 1px;
  -webkit-mask-image: url(/assets/external-links/external-link.svg);
  mask-image: url(/assets/external-links/external-link.svg);
  -webkit-mask-size: cover;
  mask-size: cover;
}
a::after {
  font-size: 8px;
  padding: 0 2.25px;
  position: relative;
  bottom: 1.5px;
}
a[href*='wikipedia.org']::after {
  -webkit-mask-image: url(/assets/external-links/wikipedia.svg) !important;
  mask-image: url(/assets/external-links/wikipedia.svg) !important;
}
a[href*='github.com']::after {
  -webkit-mask-image: url(/assets/external-links/github.svg) !important;
  mask-image: url(/assets/external-links/github.svg) !important;
}
```

You'll also notice some links do a <a href="https://example.org/" target="_blank" rel="noopener noreferrer">bumpy animation</a> thing on hover. When clicked, they open in a new tab. These are links with `target` attribute set to `_blank`. Here is how to do it:

```css showLineNumbers
a[target^='_blank']:hover::after {
  position: relative;
  bottom: 0.3rem;
  transition: 0.2s ease-out;
}
```

## Using Font Awesome

I used the following snippet previously when using SCSS with Font Awesome icons.

```scss showLineNumbers
a {
  /* ... link styles */

  /* Target external links
     If you want to indicate websites with specific icons, make sure you add them here
     If using Font Awesome icons, font-family and font-weight need to be set based on
     whether you are using Brand or Regular icons
     https://fontawesome.com/v5.0.13/how-to-use/on-the-web/advanced/css-pseudo-elements

     Ignore internal links and specified domains (we'll style these later using brand icons) */

  &:not([href^='/']):not([href^='#']):not([href*='wikipedia.org']):not([href*='github.com'])::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f35d'; /* external link icon unicode */
  }

  &::after {
    font-family: 'Font Awesome 5 Brands';
    font-weight: 400;
    color: rgb(85, 78, 78);
    font-size: 0.7rem;
    padding: 0.15rem;
    position: relative;
    bottom: 0.2rem;
  }

  /* Now, add individual icons from Font Awesome
     https://fontawesome.com/cheatsheet */
  &[href*='wikipedia.org']::after {
    content: '\f266';
  }

  &[href*='github.com']::after {
    content: '\f09b';
  }
}
```

## Further reading

- [CSS-Tricks - Target Only External Links](https://css-tricks.com/snippets/jquery/target-only-external-links/)
- [w3.org - Substring matching attribute selectors](https://www.w3.org/TR/selectors/#attribute-substrings)
- [MDN - Attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)


Targeting and styling external links using CSS

[Top]

Using Font Awesome

Deploying mdBook site on Netlify


On <Link href='/projects'>/projects</Link>, I am using GitHub's REST API to populate the stars count, forks count, description and homepage for my projects hosted on GitHub. Let's see how!

We'll be using functional components and as such React's `useEffect` and `useState` Hooks. Some other things you should be familiar with are template strings, `async/await`, destructuring and `try/catch`.

First, create a file named `github-api.js` in `src/services` directory and copy the following code into the file:

```js {10-14} showLineNumbers
import axios from 'axios'

const GITHUB_USERNAME = '<YOUR_GITHUB_USERNAME>'
const baseUrl = 'https://api.github.com/'

export const fetchData = async (project) => {
  try {
    const {
      data: { description, homepage, stargazers_count, forks_count },
    } = await axios({
      method: 'get',
      url: `${baseUrl}repos/${GITHUB_USERNAME}/${project.repo}`,
      timeout: 3000,
    })
    return {
      description,
      homepage,
      starsCount: stargazers_count,
      forksCount: forks_count,
    }
  } catch (error) {
    return project
  }
}
```

We are using [axios](https://github.com/axios/axios) to make requests. We could also use the native `fetch` API for this but `axios` makes it very easy to set timeout, cancel requests and set authorization headers if we need to authenticate with an access token. GitHub API requires a token to make 60+ requests per hour.

The asynchronous function `fetchData` takes in a `project` object as an argument and calls the API, then returns an object with `description`, `homepage`, `starsCount`, `forksCount` properties. If the request fails, the function will return the initial value for `project` that we can use as a fallback.

We will import the `fetchData` function in our component and call it inside the useEffect hook.

Create a component in `src/components` called `github-stats.js` and put the following code inside:

```jsx showLineNumbers
import React, { useState, useEffect } from 'react'
import { fetchData } from '../services/github-api'

const GITHUB_USERNAME = '<YOUR_GITHUB_USERNAME>'

const GitHubStats = ({ project }) => {
  const [starsCount, setStarsCount] = useState(project.starsCount)
  const [forksCount, setForksCount] = useState(project.forksCount)
  const [description, setDescription] = useState(project.description)
  const [homepage, setHomepage] = useState(project.homepage)

  const stargazersUrl = `https://github.com/${GITHUB_USERNAME}/${project.repo}/stargazers`
  const forksUrl = `https://github.com/${GITHUB_USERNAME}/${project.repo}/network/members`

  useEffect(() => {
    let isMounted = true

    const runEffect = async () => {
      const res = await fetchData(project)
      if (!isMounted) return

      setDescription(res.description)
      setHomepage(res.homepage)
      setStarsCount(res.starsCount)
      setForksCount(res.forksCount)
    }

    runEffect()
    
    return () => {
      isMounted = false
    }
  }, [project])

  return (
    <>
      <a href={`https://github.com/${GITHUB_USERNAME}/${project.repo}`}>
        {project.repo}
      </a>
      : {description}
      <br />
      {homepage && (<>Homepage: <a href={homepage}>{homepage}</a></>)}
      <br />
      Stars: <a href={stargazersUrl}>{starsCount}</a> &bull; Forks: <a href={forksUrl}>{forksCount}</a>
    </>
  )
}

export default GitHubStats
```

The GitHubStats component takes a `project` object as a prop and calls the fetchData function which returns an object with `description`, `homepage`, `starsCount` and `forksCount` keys. On a succesfull API call, these keys will be populated with latest data from GitHub. If the API call fails, these values will contain values from the `project` object that we pass.

Now, we can import the `GitHubStats` component in `src/pages/projects.js`:

```jsx showLineNumbers
import React from 'react'

import Layout from '../components/layout'
import GitHubStats from '../components/github-stats'

const projects = [
  {
    repo: 'project-one',
    description: 'Project One description.',
    homepage: 'https://example.org/1',
    starsCount: 10,
    forksCount: 5,
  },
  {
    repo: 'project-two',
    description: 'Project Two description.',
    homepage: 'https://example.org/2',
    starsCount: 5,
    forksCount: 2,
  },
]

const ProjectsPage = () => {
  return (
    <Layout>
      <ul>
        {projects.map((project) => (
          <li key={project.repo}>
            <GitHubStats project={project} />
          </li>
        ))}
      </ul>
    </Layout>
  )
}

export default ProjectsPage
```

We create an array of objects with backup data to use if API call fails. Then, we map through each project and render `GitHubStats` component passing in the `project` as prop. And that's it!

Some things you could now try might be styling the page, using an object to store the state instead of multiple useState calls, or separating the backup data into the `src/data/` directory for better [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns).
