# How to Headline

It's about everything - from H-One to H-Six. After all, every website needs a system for displaying headlines. Our headlines provide you with a so-called anchor link. If you click on the `#` symbol, we will save the link to your clipboard. So that you can share our great post on the messenger service you trust (hopefully Signal).



How we have done this? Read on.
## Hugo and Headlines {class=text-accented}
Hugo offers a so-called »render hook« for headlines. This means you can change the behavior of how headlines are rendered from Markdown files. To do this, create the file called `render-heading.html` under the path `layouts/_default/_markup`:



## Render-Hook {class=text-accented}
According to Hugos [Documentation](https://gohugo.io/render-hooks/headings/) this file gets the following input variables from Hugo: 
- `.Level` - The hierarchical level of the headline: So `1` for `H1`, `2` for `H2` etc.
- `.Text` - This is the headline's text 
- `.Anchor` - The anchor link of the headline itself



## Rendering the Headline {class=text-accented}
This snippet is all you need to render a headline:

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

However, we don't just want to write the headline text, we also want to automatically display a hashtag at the end of the headline. To do this, we expand the snippet like this:

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

We write a diamond symbol after the heading text. We also place a `div` with the `lowlight` class around the heading text.
Not much has happened yet. We therefore add a link to the snippet:

```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 far. So good. The `#` symbol is now clickable. We gave the link element the class `heading-anchor`. The reason for this is so that we can easily select all anchor elements using Javascript. 

## Copy link {class=text-accented}
Now we not only want it to be clickable, but also to be copied to the clipboard. That's why we need the following Javascript here:

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

Here we use the Css class mentioned above to determine all anchor elements on a page and link their click event with the `copyAnchorLink` function. This function is given the previously read `href` attribute of the anchor element.
We then have to program the function. It looks like this:

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

Here the function `copyToClipboard` is activated. It looks like this:

```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 {
  }
}
```

This snippet uses the `navigator` object to ask whether copying to the clipboard is allowed at all. If so, an attempt is made to store the link in the clipboard. If this fails, the old version of copying is tried as a fallback. To do this, the code branches to the `copyCodeBlockExecCommand` function. This snippet looks like this:

```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);
}
```

 A `textArea` object is created here and the content of the link is first written into it, then the content is selected and copied to the clipboard.

## Outro {class=text-accented}
With these snippets you should be able to display a clickable anchor link behind your headlines. Your headlines can then be clicked. But you are still responsible for them to kick.