# How to Headline

Es geht um alles – von H-Eins bis H-Sechs. Schließlich braucht jede Website ein System, wie es die Überschriften darstellt. Unsere Headlines spendieren euch gleich einen sogennanten Anchor-Link mit. Wenn ihr auf das `#`-Symbol klickt, speichern wir den Link in eure Zwischenablage. Damit ihr unseren super Beitrag gleich im Messenger-Dienst eures Vertrauens (hoffentlich Signal) weiterleiten könnt. 



Wie haben wir das gemacht? Lest einfach weiter.

## Hugo und Headlines {class=text-accented}
Hugo bietet für Headlines einen sogennanten `Render-Hook` an. Das heißt man kann das Verhalten, wie Überschriften aus Markdown-Files gerendert werden, abändern. Dafür legt ihr unter dem Pfad `layouts/_default/_markup` die Datei mit dem Namen `render-heading.html` an:



##  Render-Hook {class=text-accented}
Laut [Dokumentation](https://gohugo.io/render-hooks/headings/) erhält dieses File die folgenden Variablen von Hugo als Input:
- `.Level` – Die hierarchische Ebene der Headline: Also `1` für `H1`, `2` für `H2` usw.
- `.Text` – Das ist der Text der Headline
- `.Anchor` – Der Anchor-Link der Headline selbst



##  Rendern der Überschrift {class=text-accented}
Um eine Headline also zu rendern, genügt dieses Snippet:

```html { title = "render-heading.html" }
<h{{ .Level }}>
    {{ .Text | safeHTML }}
</h{{ .Level }}>
```

Wir wollen allerdings nicht nur den Überschriften-Text hinschreiben, sondern auch automatisch einen Hashtag an das Ende der Headline anzeigen. Dafür erweitern wir das Snippet so:

```html { title = "render-heading.html" }
<h{{ .Level }}>
    <div class="lowlight"></div>
    {{ .Text | safeHTML }} #            
    </div>
</h {{ .Level }}>
```

Nach dem Überschriften-Text schreiben wir ein Rautesymbol. Zusätzlich legen wir ein `div` mit der Klasse `lowlight` um den Überschriftentext.
Damit ist jetzt noch nicht viel passiert. Deswegen erweitern wir das Snippet um einen Link:

```html { title = "render-heading.html" }
<h{{ .Level }}>
  <div class="lowlight"></div>
  {{ .Text | safeHTML }}
    <a class="heading-anchor" href="#{{.Anchor}}" aria-label="#" alt="#">
        {{ "#" }}            
    </a>
  </div>
</h {{ .Level }}>
```

So weit. So gut. Das `#`-Symbol ist jetzt klickbar. Dem Link-Element haben wir die Klasse `heading-anchor` mitgegeben. Das hat den Grund, damit wir per Javascript alle Anchor-Elemente einfach selektieren können. 

##  Link kopieren {class=text-accented}
Jetzt wollen wir aber nicht nur, dass er klickbar ist, sondern auch, dass er in die Zwischenablage kopiert wird. Deswegen brauchen wir hier das folgende Javascript:

```js
document.querySelectorAll(".heading-anchor").forEach(element => {
    let anchor = element.getAttribute("href");
    element.addEventListener('click', e => {
        copyAnchorLink(anchor);
    }, {once: true})
})
```

Hier nutzen wir die davor angesprochene Css-Klasse, um alle Anchor-Elemente auf einer Seite zu ermitteln und ihr Klick-Event mit der Funktion `copyAnchorLink` zu verknüpfen. Dieser Funktion wird das zuvor ausgelesene `href`-Attribut des Anchor-Elements mitgegeben.
Die Funktion müssen wir dann auch noch programmieren. Sie sieht so aus:

```js
function copyAnchorLink(anchorText) {
    placeholders = document.querySelectorAll(".lowlight");
    copyToClipboard(anchorText, placeholders[0]);
    element = anchorText.replace('#', '');
  }
}
```

Hier wird die Funktion `copyToClipboard` aufgerufen. Die sieht so aus:

```js
async function copyToClipboard(anchorText, highlightDiv) {
  const codeToCopy = window.location.origin + window.location.pathname + anchorText;
  try {
    var result = await navigator.permissions.query({ name: "clipboard-write" });
    if (result.state == "granted" || result.state == "prompt") {
      await navigator.clipboard.writeText(codeToCopy);
    } else {
      copyCodeBlockExecCommand(codeToCopy, highlightDiv);
    }
  } catch (_) {
    copyCodeBlockExecCommand(codeToCopy, highlightDiv);
  } finally {
  }
}
```

Dieses Snippet nutzt das `navigator`-Objekt um zu erfragen, ob Copying in die Zwischenablage überhaupt erlaubt ist. Falls ja wird versucht, den Link im Clipboard abzulegen. Wenn das schiefgeht, wird als Fallback die alte Variante des Kopierens versucht. Hierfür verzweigt der Code in die Funktion `copyCodeBlockExecCommand`. Dieses Snippet sieht so aus:

```js
function copyCodeBlockExecCommand(codeToCopy, highlightDiv) {
  const textArea = document.createElement("textArea");
  textArea.contentEditable = "true";
  textArea.readOnly = "false";
  textArea.className = "copyable-text-area";
  textArea.value = codeToCopy;
  highlightDiv.insertBefore(textArea, highlightDiv.firstChild);
  textArea.select();
  textArea.setSelectionRange(0, 99999); // For mobile devices
  document.execCommand("copy");
  highlightDiv.removeChild(textArea);
}
```

Hier wird ein `textArea`-Objekt erzeugt und der Inhalt des Links zuerst dort hinein geschrieben, dann der Inhalt selektiert und in die Zwischenablage kopiert.

##  Outro {class=text-accented}
Mit diesen Snippets solltet ihr es schaffen, einen klickbaren Anchor-Link hinter euren Überschriften anzuzeigen. Headlines kann man dann klicken. Damit sie kicken, seid ihr dann selbst verantwortlich.