Post number one is here

Lead: Nullam quis risus ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Donec sed odio dui. Donec ullamcorper emphasis eget urna bold text mollis bolder text nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis a link here euismod.

Donec sed odio dui. Donec ullamcorper^[1] nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod.

Header two #

Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod.

Header 3: HTML #

Header 4 #

Donec sed odio dui. Donec ullamcorper emphasis eget urna bold text mollis bolder text nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis a link here euismod.

Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod.

Header 5: JavaScript

import { createFocusTrap } from 'focus-trap'

const SELECTORS = {
  nav: '.js-nav',
  toggleBtn: '.js-nav-toggle'
}

const CLASSES = {
  open: 'is-open'
}

class Navigation {
  // comment here
  constructor() {
    this.isOpen = false
    this.nav = document.querySelector(SELECTORS.nav)
    this.toggleBtn = this.nav.querySelector(SELECTORS.toggleBtn)
    this.focusTrap = createFocusTrap(this.nav)
    this.toggleBtn.addEventListener('click', () => this.toggleMenu())
  }

  toggleMenu(force) {
    this.isOpen = typeof force === 'boolean' ? force : !this.isOpen
    this.nav.classList.toggle(CLASSES.open, this.isOpen)
    this.toggleBtn.setAttribute('aria-expanded', String(this.isOpen))
    if (this.isOpen) {
      this.focusTrap.activate()
    } else {
      this.focusTrap.deactivate()
    }
  }
}

if (document.querySelector(SELECTORS.nav)) {
  new Navigation()
}

Header six: CSS

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.

Paragraphs are separated by a blank line.

2nd paragraph. Italic, bold, and monospace. Itemized lists
look like:

• this one
• that one
• the other one

Note that — not considering the asterisk — the actual text
content starts at 4-columns in.

Blockquote #

Block quotes are
written like so.

They can span multiple paragraphs,
if you like.

Use 3 dashes — for an em-dash. Use 2 dashes for ranges (ex., “it’s all
in chapters 12–14”). Three dots… will be converted to an ellipsis.
Unicode is supported. ☺

h2 header #

Here’s a numbered list:

1. first item
2. second item
3. third item

Note again how the actual text starts at 4 columns in (4 characters
from the left side). Here’s a code sample.

As you probably guessed, indented 4 spaces. By the way, instead of
indenting the block, you can use delimited blocks, if you like:

Footnotes #

Here’s a link to a website. Here’s a footnote^[2] and text.

Tables #

Tables can look like this:

A horizontal rule follows:

“line block” #

| Line one
| Line too
| Line tree