hugo-theme-terminal

---
title: "Showcase"
date: "2018-07-18"
author: "Hello Robot"
toc: true
LiveDoc: true
lastmod: "2024-08-25"
cover: /img/BoyWithMachine.png
---

# Header 1: Some Formatting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum
metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur
ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec
nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin
elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique
porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam. 

> Fusce pharetra suscipit orci nec tempor. Quisque vitae sem sit amet sem mollis
> consequat. Sed at imperdiet lorem. Vestibulum pharetra faucibus odio, ac
> feugiat tellus sollicitudin at. Pellentesque varius tristique mi imperdiet
> dapibus. Duis orci odio, sodales lacinia venenatis sit amet, feugiat et diam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum
metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur
ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec
nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin
elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique
porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam. 

## Header 2: Tabbed Containers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum
metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur
ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec
nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin
elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique
porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam.

{{< tabbed >}}
{{% tab name="english" %}}
> [I]t is unquestionable, as we remarked above, that every human action has its
starting-point in a dissatisfaction, and thereby in a feeling of absence. We
should not act if we did not set before ourselves an end, and we seek a thing
only because we feel the lack of it. Our action proceeds thus from "nothing" to
"something," and its very essence is to embroider "something" on the canvas of
"nothing." The truth is that the "nothing" concerned here is the absence not so
much of a thing as of a utility. If I bring a visitor into a room that I have
not yet furnished, I say to him that "there is nothing in it." Yet I know the
room is full of air; but, as we do not sit on air, the room truly contains
nothing that at this moment, for the visitor and for myself, counts for
anything. In a general way, human work consists in creating utility; and, as
long as the work is not done, there is "nothing"-nothing that we want. Our life
is thus spent in filling voids, which our intellect conceives under the
influence, by no means intellectual, of desire and of regret, under the pressure
of vital necessities; and if we mean by void an absence of utility and not of
things, we may say, in this quite relative sense, that we are constantly going
from the void to the full: such is the direction which our action takes.
{{% /tab %}}
{{% tab name="deutsch" %}}
> Nun ist es aber unbestreitbar, daß, wie | schon oben bemerkt, jede menschliche
Handlung ihren Ausgangspunkt in einer Unbefriedigtheit nimmt und also folglich
in einem Gefühl von Abwesenheit. Man würde nicht handeln, wenn man nicht ein
Ziel vor Augen hätte, und man sucht ein Ding nur zu erreichen, weil man spürt,
daß es einem fehlt. Unsere Handlung schreitet also von »nichts« zu »etwas«, und
ihr Wesen selbst besteht darin, »etwas« auf das Gitterleinen des »Nichts« zu
sticken. Tatsächlich jedoch ist das Nichts, von dem hier die Rede ist, weniger
die Abwesenheit eines Dinges als die einer Nützlichkeit. Wenn ich einen Besucher
in ein noch unmöbliertes Zimmer führe, dann warne ich ihn vor, »daß es dort
nichts gibt«. Ich weiß dabei sehr wohl, daß das Zimmer voll Luft ist, doch
nachdem man auf Luft nicht sitzen kann, enthält das Zimmer tatsächlich nichts
von dem, was in diesem Moment für den Besucher und für mich selbst irgend etwas
zählen würde. Generell besteht menschliche Arbeit darin , Nützlichkeit zu
erzeugen; und bis die Arbeit getan ist, gibt es »nichts« - nichts von dem, was
man erreichen wollte. So verbringen wir unser Leben damit, von unserer
Intelligenz unter dem außer-intellektuellen Einfluß des Verlangens und des
Vermissens, unter dem Druck der vitalen Erfordernisse gedachte Leeren
auszufüllen: Und wenn man unter Leere eine Abwesenheit von Nützlichkeit und
nicht von Dingen versteht, dann darf m an in diesem ganz relativen Sinn sagen,
daß wir beständig vom Leeren zum Vollen schreiten. Das ist die Richtung, in der
sich unsere Handlung bewegt.
{{% /tab %}}
{{< /tabbed >}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum
metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur
ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec
nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin
elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique
porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam.

### Header 3: Show Casing Syntax Highlighting

Nulla libero turpis, lacinia vitae cursus ut, auctor dictum nisl. Fusce varius felis nec sem ullamcorper, at convallis nisi vestibulum. Duis risus odio, porta sit amet placerat mollis, tincidunt non mauris. Suspendisse fringilla, `odio a dignissim pharetra`, est urna sollicitudin urna, eu scelerisque magna ex vitae tellus.

{{< code language="css" title="Really cool snippet" id="1" expand="Show" collapse="Hide" isCollapsed="true" >}}
pre {
  background: #1a1a1d;
  padding: 20px;
  border-radius: 8px;
  font-size: 1rem;
  overflow: auto;

  @media (--phone) {
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  code {
    background: none !important;
    color: #ccc;
    padding: 0;
    font-size: inherit;
  }
}
{{< /code >}}

Nulla libero turpis, lacinia vitae cursus ut, auctor dictum nisl. Fusce varius felis nec sem ullamcorper, at convallis nisi vestibulum. Duis risus odio, porta sit amet placerat mollis, tincidunt non mauris. Suspendisse fringilla, `odio a dignissim pharetra`, est urna sollicitudin urna, eu scelerisque magna ex vitae tellus.

```common-lisp
(defun test (str)
  (declare ignore str)
  (print "Hello World"))

(defun ich-bin-neu ()
  (test "hi"))
```


```bash
#!/bin/bash

# This script takes on Argument, checks whether that Argument is an existing
# file ending in .pdf and if both conditions are met, rids it of any annotations
# saving a copy of the original file with _(clean) atteached to the name.

if [ -f "$1" ]; then
    if [ ${1: -4} == ".pdf" ]; then
        filename="${1/.pdf/_clean.pdf}"
        pdftk "$1" output uncompressed.pdf uncompress
        LANG=C sed -n '/^\/Annots/!p' uncompressed.pdf > stripped.pdf
        pdftk stripped.pdf output "$filename" compress
        rm uncompressed.pdf
        rm stripped.pdf
        echo Done!
    else
        echo "$1" is not a pdf
        exit 1
    fi
else
    echo "$1" does not exist
    exit 1
fi
```

```css
/* PostCSS code */

pre {
  background: #1a1a1d;
  padding: 20px;
  border-radius: 8px;
  font-size: 1rem;
  overflow: auto;

  @media (--phone) {
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  code {
    background: none !important;
    color: #ccc;
    padding: 0;
    font-size: inherit;
  }
}
```

```js
// JS code

const menuTrigger = document.querySelector('.menu-trigger')
const menu = document.querySelector('.menu')
const mobileQuery = getComputedStyle(document.body).getPropertyValue('--phoneWidth')
const isMobile = () => window.matchMedia(mobileQuery).matches
const isMobileMenu = () => {
  menuTrigger.classList.toggle('hidden', !isMobile())
  menu.classList.toggle('hidden', isMobile())
}

isMobileMenu()

menuTrigger.addEventListener('click', () => menu.classList.toggle('hidden'))

window.addEventListener('resize', isMobileMenu)
```

```html
<!-- HTML code -->

<section id="main">
  <div>
   <h1 id="title">{{ .Title }}</h1>
    {{ range .Pages }}
      {{ .Render "summary"}}
    {{ end }}
  </div>
</section>
```

```c
/*Some C code*/

void
commitinfo_free(struct commitinfo *ci)
{
	size_t i;

	if (!ci)
		return;
	if (ci->deltas)
		for (i = 0; i < ci->ndeltas; i++)
			deltainfo_free(ci->deltas[i]);

	free(ci->deltas);
	git_diff_free(ci->diff);
	git_tree_free(ci->commit_tree);
	git_tree_free(ci->parent_tree);
	git_commit_free(ci->commit);
	git_commit_free(ci->parent);
	memset(ci, 0, sizeof(*ci));
	free(ci);
}
```

#### Header 4

Curabitur scelerisque felis viverra varius scelerisque. Ut enim libero, molestie gravida blandit at, mollis ornare tellus. Cras arcu mi, ultrices vel pulvinar vel, volutpat eu tortor. Nullam nec eros quis massa ultrices iaculis sed in metus. Praesent sollicitudin sem sit amet orci tempor gravida.

- Maecenas elementum vitae nibh vitae porttitor.
- Aenean consequat, risus ut cursus placerat, arcu nulla sodales risus, ut molestie tellus tellus et dui.
- Integer imperdiet turpis vitae lacus imperdiet, ut ornare ligula auctor. Integer in mi eu velit vehicula suscipit eget vulputate nulla.
- Etiam vitae enim quis velit lobortis placerat a ut sem.
  - Curabitur lobortis ante sit amet orci pulvinar, sollicitudin viverra nunc accumsan.
  - Praesent fermentum orci quis leo facilisis posuere.

Aliquam erat volutpat. In hac habitasse platea dictumst. Nunc ut tincidunt mauris. Sed at gravida risus, id semper magna. Nullam vitae enim mattis, sodales neque non, pharetra elit. Cras sit amet sagittis augue, et finibus turpis. Ut tempus tincidunt diam vel pharetra. Nulla porttitor odio sit amet nulla scelerisque, quis aliquam mi imperdiet. Sed tincidunt dui vel tellus vestibulum rhoncus. Donec tempus ultrices velit.