# New blog. Test post, ignore

I just did an update on this website (finally), and churned out some new posts.
This post will act as a primitive style guide and as a visual reference.

## This is an h2 heading

One morning, when _Gregor Samsa_ woke from troubled dreams, he found himself
transformed in his bed into a horrible vermin. He lay on his armour-like back,
and if he lifted his head a little he could see his brown belly, slightly domed
and divided by arches into stiff sections. The bedding was hardly able to cover
it and seemed ready to slide off any moment.

### Here’s an h3

His many legs, pitifully thin compared with the size of the rest of him, waved
about helplessly as he looked. **"What's happened to me?"** he thought. It
wasn't a dream. His room, a proper human room although a little too small, lay
peacefully between its four familiar walls.

#### H4, deep enough?

A collection of textile samples lay spread out on the table - Samsa was a
travelling salesman - and above it there hung a picture that he had recently cut
out of an illustrated magazine and housed in a nice, gilded frame.

##### This is h5

It showed a lady fitted out with a fur hat and fur boa who sat upright, raising
a heavy fur muff that covered the whole of her lower arm towards the viewer.

###### And an h6 😬

Gregor then turned to look out the window at the dull weather.

## Horizontal rule

Here’s a horizontal rule:

---

## Lists

There are 3 types of lists.

### Unordered list

- This here
- is an
- unordered list.
  - How about nesting?
  - Is that working?
    - How deep can you go?
      - Huh?
- Looks good?

#### Code inside a list

- What about inline code inside a list: `const foo = () => 'bar'`?
- And codeblocks inside `li` elements:
  ```js
  const foo = () => {
    return 'bar'
  }
  ```
  - Nested one level deeper:
    ```js
    'li .gatsby-highlight': {
      backgroundColor: 'var(--gray-lightest)',
      fontSize: '90%',
      margin: 0,
      width: '100%'
    },
    ```
    ```js
    'li > p': {
      marginBottom: 'calc(var(--spacing-m) / 2)'
    },
    ```
    - One more level just make sure:
      ```js
      "li pre[class*='language-']": {
        padding: '10px'
      }
      ```
- That looks pretty good, margins and all.

### Ordered list

1. What about
   1. nested
   2. ordered
1. lists?
   - Or unordered list
   - inside ordered list.
1. Do they
1. look ok?

### Description list

Banana
  A yellow-ish, long fruit growing on a tree.
  Apple

A round fruit with a color gamut from `rgb(0, 255, 0)` to
    `rgb(255, 0, 0)`

Code in title: `foo('bar')`

Codeblock in description:

```js
<Foo>
  {map.bars(bar => {
    return <span>{bar}</bar>
  })}
</Foo>
```

Nested description list

Description lists can be nested, like other lists. It’s good when
    documenting code for example. JSX markup for these gets pretty dicey.

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla vitae omnis
    blanditiis similique, ipsa cupiditate quam assumenda deleniti inventore cumque
    alias ex id in culpa aperiam! Numquam quo sit officiis!

## Code

### Inline code

Here’s some inline code: `const foo = (bar) => bar.fooz.trim() === 'baz'`. And
here is some syntax highlighted inline code
`const foo = (bar) => bar.fooz.trim() === 'baz'{:js}` you can make that happen
by ending the line with `\{:js\}`, js being the highlighted lang:

```js
foo...{:js}
```

### Sample output, samp

Inline samp looks like this. Block samp looks like this:

Some output

### Keyboard

`<kbd>`:

Press Cmd+/ or Ctrl+/ to search, then Esc to
close the search.

### Code blocks

Here’s some jsx with a highlighted lines:

```jsx {4, 13-14}
const [searchOpen, setSearchOpen] = React.useState(false)

const handleKeyboard = ({ repeat, metaKey, ctrlKey, key }) => {
  if (repeat) return

  // Handle both, `ctrl` and `meta`.
  if ((metaKey || ctrlKey) && key === '/') setSearchOpen(prev => !prev)
}

React.useEffect(() => {
  document.addEventListener('keydown', handleKeyboard)

  // Important to remove the listeners.
  return () => document.removeEventListener('keydown', handleKeyboard)
})
```

Here’s a bigger chunk of code, with line numbers:

```jsx showLineNumbers
const listItems = ['foo', 'bar', 'baz', 'quix']

const FilterableList = () => {
  const [searchResults, setSearchResults] = useState(listItems)

  const handleChange = event => {
    const value = event.target.value.toLowerCase()

    if (value) {
      const filteredItems = listItems.filter(item =>
        item?.toLowerCase().includes(value)
      )

      setSearchResults(
        filteredItems.length > 0 || value ? filteredItems : listItems
      )
    } else {
      setSearchResults(listItems)
    }
  }

  return (
    <Wrap>
      <Input onChange={handleChange} placeholder='Search' type='text' />
      <ul>
        {searchResults.length < 1 ? (
          <li>No results</li>
        ) : (
          searchResults.map(item => <li key={item}>{item}</li>)
        )}
      </ul>
    </Wrap>
  )
}
```

Here’s some NGINX with line numbers:

```nginx showLineNumbers
server {
  server_name staging.clubmate.fi;
  root /var/www/staging.clubmate.fi/public_html;

  location /foo {
    return 301 http://clubmate.fi;
  }
}
```

## Embeds

The CodePen shortcode should work `<CodePen slug="ZEOdZGz" />`:

### CodePen

[This demo is demonstrating a keyboard shortcuts](https://codepen.io/hilja/pen/ZEOdZGz)

### CodeSandbox

[An embedded CodeSandbox demo](https://codesandbox.io/s/l9m26)

### StackBlitz

[React TypeScript StackBlitz demo](https://stackblitz.com/edit/react-ts)

### YouTube

[This is a caption](https://www.youtube.com/watch?v=xuCn8ux2gbs)

### Iframes

100% wide Iframe (default) with a caption:

[Interactive example](/test-post)

## Media

### Bitmap image

![A silly looking cat wearing Supreme bucket hat, chain, and Timbs](/images/wuss-poppin-2.jpg)

A meme

### SVG image

![Erlang logo as an SVG](https://codesandbox.io/static/img/play-codesandbox.svg)

CodeSandbox edit SVG

### Image as a link

[![Erlang logo as an SVG](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.com)

CodeSandbox edit SVG wrapped into a link

### Gif-like Mux video

[A gif-like video showing fish autocomplete](https://stream.mux.com/nALvs002E00YxiYG3c02Vsyu8Se00Ot3P00WrqYcZGL502Cuc.m3u8)

### Mux video with controls

[Hungarian senior citizen wishing you happy holidays](https://stream.mux.com/NB1midmpN1eRElwUjT121qgDtj01ciF4sZeU75Qq00oTA.m3u8)

## HTML elements

All the lesser used HTML elements.

### Address

`<address>`

Address: Main Street 69

### Superscript and subscript

`<sup>` and `<sub>`

Here’s the sup superscript between normal text subscript

### Small

`<small>`

Normal text, small text, more normal text.

### Blockquote and cite

Here’s a `<blockquote>` where the name is wrapped in `<cite>`:

> Never argue with stupid people, they will drag you down to their level and
> then beat you with experience. ―Mark Twain

### Abbreviations

`<abbr>`

The WAP is a highly modern
technical standard that renders pages in written in

WML.

### Quote

`<q>`

After Gregor Samsa had woken up, he simply thought What’s happened to me?
like what had just transpired wasn’t that unusual.

### Marking

And `<mark>` for highlighting pieces of text:

Some highlighted text marked with mark.

### Deleting and inserting

Deleting and correcting text with `<del>` and `<ins>`:

~~And it was like that~~. Not anymore!

## Boxes

Read more:

```jsx
<ReadMore href='/disable-gatsby-telemetry'>
  How to disable Gatsby telemetry
</ReadMore>
```

[How to disable Gatsby telemetry](/disable-gatsby-telemetry)

Note:

```jsx
<Note type='info|default'>Text</Note>
```

Did you know that one kilo of feathers weighs exactly one kilo.

**Note:** at the moment of writing this, content-visibility only works on new
  Chromium based browsers. Version 85 to be precise. Which seems to be about 65%
  of global usage.

Did you know that one kilo of feathers weighs exactly one kilo.

## Drawers

Detail summary thingy:

More on Kafka:

Franz Kafka (3 July 1883 – 3 June 1924) was a German-speaking Bohemian novelist
and short-story writer, widely regarded as one of the major figures of
20th-century literature.
([Wikipedia](https://en.wikipedia.org/wiki/Franz_Kafka))

Code inside detail/summary:

Here are few codeblocks:

```html
<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>Demo</title>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script data-type="module" type="text/babel">
    /* eslint-disable react/react-in-jsx-scope */
    const App = () => {
      return <p class='test'>Hello, this is a test</p>
    }

    ReactDOM.render(<App />, document.getElementById('root'))

  </script>
</body>
```

```css
.test {
  color: #bada55;
}
```

## Table

| Command                     | Aliases                              | Action                 |
| --------------------------- | ------------------------------------ | ---------------------- |
| `tmux attach`               | `a`, `at`, `attach-session`          | Attach to last session |
| `tmux attach -t myses`      | ditto                                | Attach to myses        |
| `tmux ls`                   | `list-sessions`, Ctrl+b s | List session           |
| `tmux`                      | `new`, `new-session`, `:new`         | New session            |
| `tmux new -s myses`         | `:new -s myses`                      | New named session      |
| `tmux kill-ses -t myses`    | `kill-session`                       | Kill myses             |
| `tmux kill-ses -a`          | ditto                                | Kill all but current   |
| `tmux kill-ses -a -t myses` | ditto                                | Kill all but myses     |
| Ctrl+b $         | -                                    | Rename session         |
| Ctrl+b d         | -                                    | Detach session         |
| Ctrl+b (         | -                                    | Previous session       |
| Ctrl+b )         | -                                    | Next session           |