
Here is part of the snippet I use to target external links on this site:

```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 FontAwesome 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
  &:not([href*='rsapkf.org']):not([href^='/']):not([href^='#']):not(
      [href*='mozilla.org']
    ):not([href*='github.com'])::after {
    content: '\f35d'; // or url(/img/external-link.svg) ...
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
  }

  &::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 FontAwesome (https://fontawesome.com/cheatsheet)
  &[href*='mozilla.org']::after {
    content: '\f269';
  }

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

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

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

  // Target links with target attribute
  &[target^='_blank']:hover::after {
    position: relative;
    bottom: 0.5rem;
    transition: ease 0.2s;
  }
```

## 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 external links using SCSS

[Top]


Now that I've got a domain, I have moved my project sites from GitHub Pages to Netlify, and serve them from subdomains right from Netlify using Netlify DNS. This is technically possible for sites hosted on GitHub Pages. You need to add a CNAME record to your DNS provider and CNAME file at the root of your project repository. Refer to [GitHub's documentation](https://docs.github.com/en/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site) for details.

This is a simple enough task but I came across some quirks and information that might be useful:

- One of my sites is built using [mdBook](https://github.com/rust-lang/mdBook), a static site generator written in Rust but Netlify doesn't support Rust in its [build image](https://github.com/netlify/build-image) like Node, Python or Ruby. If you use `mdbook build` as build command, you'll get `mdbook : command not found` error in deploy log.

To solve this problem, use the following build command:

```shell
curl -L https://github.com/rust-lang/mdBook/releases/download/v0.3.7/mdbook-v0.3.7-x86_64-unknown-linux-gnu.tar.gz | tar xvz && ./mdbook build
```

Make sure to change the version to the one that you want to use.

- mdBook puts generated HTML and CSS files in the `book` directory (like `build` dir used by npm) by default. So, use this dir (or whatever folder you have used in the configuration) as publish directory.

- I had problems with pages generated from **LICENSE** and **CONTRIBUTING.md** files. These files are located at the root directory of the project. I had to disable Netlify's [Pretty URLs](https://docs.netlify.com/site-deploys/post-processing/#post-processing-features) (**Settings > Build & deploy > Post processing > Asset optimization**) to make this work.

- I couldn't get sidebar to resize. Disabling **Bundle CSS** on Netlify worked. This might not be necessary if using v0.4.


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 starsgazersUrl = `https://github.com/${GITHUB_USERNAME}/${project.repo}/stargazers`
  const forksUrl = `https://github.com/${GITHUB_USERNAME}/${project.repo}/network/members`

  useEffect(() => {
    const runEffect = async () => {
      const res = await fetchData(project)

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

    runEffect()
  }, [project])

  return (
    <>
      <a href={`https://github.com/${GITHUB_USERNAME}/${project.repo}`}>
        {project.repo}
      </a>
      : {description}
      <br />
      Homepage: <a href={homepage}>{homepage}</a>
      <br />
      Stars: <a href={starsgazersUrl}>{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://project-one.org/',
    starsCount: 10,
    forksCount: 5,
  },
  {
    repo: 'project-two',
    description: 'Project Two description.',
    homepage: 'https://project-two.org/',
    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).
