Zum Inhalt springen
Deep Thoughts

Wie man ein Rehype-Plugin erstellt, das GitHub-Links in schöne Badges verwandelt

Diese Übersetzung wurde von einer generativen KI mithilfe von Action Continuous Translation erstellt. →

A beautiful cover image with the text "Badge Links"
• 3 min Lesezeit • 400 Wörter
Felix Schneider
Felix Schneider
trueberryless

Kürzlich habe ich diesem Blog eine ganz kleine, aber feine Funktion hinzugefügt, die Ihnen als regelmäßiger Leser vielleicht aufgefallen ist. Es ist nichts riesiges, aber es verleiht jedem Blog diesen kleinen, charmanten Touch, nach dem ich mich schon lange gesehnt habe. Ich spreche schreibe von diesen grünen Abzeichen mit Profilbildern, die Sie auch in diesem Blog sehen können.

Die Inspiration, sie zu erstellen, stammt von niemand anderem als antfuAntfu selbst, der solche Abzeichen überall auf seiner Website hat (zum Zeitpunkt des Schreibens).

Anfangs dachte ich, dafür wäre eine lange und mühsame Programmiersitzung nötig, um dieselbe visuelle Schönheit zu erreichen. Doch nach einigem “Vibe Coding” – wie Andrej Karpathy den Begriff prägte – wurde mir schnell klar, dass diese Abzeichen nur ein kleines rehypejsrehype-Plugin von ihrer Existenz entfernt waren.

Dies ist der gesamte Code hinter dem Rehype-Plugin:

src/lib/rehype-github-badge-links.ts
import { h } from "hastscript";
import { visit } from "unist-util-visit";


export default function rehypeGitHubBadgeLinks() {
  return (tree) => {
    visit(tree, "element", (node) => {
      if (
        node.tagName === "a" &&
        typeof node.properties?.href === "string" &&
        node.properties.href.startsWith("https://github.com/")
      ) {
        const match = node.properties.href.match(
          /^https:\/\/github\.com\/([\w-]+)\/?$/
        );
        if (match) {
          const username = match[1];


          // Add GitHub badge class
          node.properties.className = (node.properties.className || []).concat(
            "gh-badge"
          );


          // Build avatar image
          const avatarImg = h("img", {
            src: `https://github.com/${username}.png`,
            alt: username,
          });


          // Prepend avatar image to original children
          node.children.unshift(avatarImg);
        }
      }
    });
  };
}

Im Wesentlichen durchsucht dieses Plugin das HTML nach Links, die auf ein GitHub-Profil verweisen. Wenn es einen solchen Link findet, fügt es vor dem Textinhalt ein <img>-Tag mit dem Profilbild des GitHub-Benutzers oder der Organisation ein. Dies ist dank GitHubs Funktion, das Bild als Ressource hinter dem Profillink mit der Endung .png zur Verfügung zu stellen, sehr konsistent möglich. Lesen Sie mehr über diese Funktion in diesem großartigen Artikel auf dev.to.

Mit ein wenig zusätzlichem Styling sieht es meiner Meinung nach wirklich niedlich aus. Bitte beachten Sie, dass dies eine Starlight Starlight -Seite ist und ich verfügbare CSS-Variablen verwende, wie in Zeile vier:

src/styles/custom.css
.gh-badge {
  display: inline-flex;
  align-items: center;
  background-color: var(--sl-color-accent-low);
  border-radius: 9999px;
  padding: 0em 0.5em 0 0.3em;
  font-size: 0.9em;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  transition: background-color 0.2s ease;
  transform: translateY(0.29rem);
  border: 1px solid var(--sl-color-accent);
}


.gh-badge:hover {
  background-color: var(--sl-color-accent);
}


.gh-badge img {
  border-radius: 9999px;
  width: 1.3em;
  height: 1.3em;
}

Um nun alles zusammenzufügen, müssen Sie beispielsweise in einer Astro-Site lediglich das Rehype-Plugin wie folgt zur Konfiguration hinzufügen:

astro.config.mjs
import { defineConfig } from 'astro/config';
import rehypeGitHubBadgeLinks from "./src/lib/rehype-github-badge-links";


export default defineConfig({
  markdown: {
    rehypePlugins: [rehypeGitHubBadgeLinks]
  }
})

Lesen Sie mehr über die Einbindung von Rehype-Plugins in Astro in deren Konfigurationsreferenz.

Vergessen Sie nicht, das CSS auf ähnliche Weise je nach Framework hinzuzufügen – in Starlight können Sie individuelle globale CSS-Stile konfigurieren, indem Sie diese Anweisungen befolgen – und schon können Sie Ihre eigenen Abzeichen-Links bewundern. Teilen Sie diesen Beitrag gerne mit jedem, den Sie dazu überzeugen möchten, diese Funktionen ebenfalls zu nutzen.

✨ Bonus-Punkt

Wenn Sie ein solches Abzeichen auch für andere Links verwenden möchten, empfehle ich Ihnen, sich selbst eine kleine Astro-Komponente wie diese zu basteln:

src/components/BadgeLink.astro
---
const { href, src, text, className = "gh-badge" } = Astro.props;
---


<a href={href} class={className}>
  <img src={src} alt={text} />
  {text}
</a>

Stellen Sie einfach sicher, dass das CSS global ist (oder scopen Sie es in der obigen Komponente) und es ist einsatzbereit:

import BadgeLink from "../components/BadgeLink.astro";


<BadgeLink
  href="https://github.com/withastro/starlight"
  src="/starlight.png"
  text="Starlight"
/>
Stichwörter: