Komfortable und sichere externe Links via Gatsby Remark

2 Minuten Lesezeit
Komfortable und sichere externe Links via Gatsby Remark

Hintergrund

Grundsätzlich werden alle Links innerhalb des Markdown Contents direkt verknüpft. Also man klickt auf den Link und weg ist man von der vorherigen Seite. Solange man innerhalb einer Webseite so navigiert, ist das cool. Externe Links sollten aber lieber in einem neuen Tab mit target="_blank" geöffnet werden. Das birgt allerdings einige Risiken. Ich mag gar nicht zu sehr auf die Details eingehen, aber hier gibt es dazu mehr Informationen und eine gute Demonstration.

Die Aufgabe ist externe Links (also Links, die von der Website weg gehen) mit einem target="_blank"-Attribut automatisch zu versehen. Damit stellen wir dann auch gleich sicher, dass wir einheitlich auf der ganzen Seite das gleiche Handling dafür nutzen und ich muss nicht mehr daran denken und kann’s nicht vergessen.

Als Markdown-Transformer nutze ich Remark. Cool ist, von Gatsby gibt es bereits das passende Plugin names gatsby-remark-external-links dafür!

Installation

  1. Das Plugin einfach installieren:
npm install --save gatsby-remark-external-links
  1. Einstellungen vornehmen in der gatsby-config.js
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
        {
          resolve: "gatsby-remark-external-links",
          options: {
            target: "_self",
            rel: "noopener"
          }
        }
        ]
      }
    },
    // ...

Noch etwas nutzerfreundlicher finde ich es, wenn externe Links zusätzlich noch mit einem kleinen Icon gekennzeichnet werden. Am einfachsten lässt sich das per CSS und schicken Icons lösen.

a[target="_blank"]::before {
  content: "\f08e";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  display: inline-block;
  text-decoration: none;
  padding-right: 0.3em;
}

Das Ganze lässt sich auch prima mit Styled Components, Font Awesome und Gatsby umsetzen. Ich glaube dafür brauchen wir ein eigenes kleines Plugin. Den genauen Prozess schreib ich euch in Kürze. ✌️