How to use the @cycle/dom.h1 function in @cycle/dom

export default () => div([
  h1('.modal-box-title', 'Logic expression editor'),
  h2('Languages'),
  dl([
    helpItem('Auto detection:', [
      'If the language is set to auto detect a dialect' +
      ' of the logic expression will be guessed.',
    ]),
    helpItem('C', [
      'Literals: 1, 0, true, false, void',
      'Binary Operators: &&, &, ||, |, ^',
      'Unary Operators: !, ~',
      'Identifiers can be quoted',
    ]),
    helpItem('Python', [
      'Literals: 1, 0, True, False, None',
      'Binary Operators: and, or, xor',
      'Unary Operators: not',

category.slug
                                                          }`,
                                                      },
                                                  },
                                                  category.name
                                              )
                                            : a('.category', span('.loading'))
                                    ),
                                    post.pinned
                                        ? span('.icon-pin.pinned-post')
                                        : null,
                                ]),

                                div('.flex.items-center', [
                                    div('.flex-auto', [
                                        h1(
                                            a(
                                                '.link',
                                                {
                                                    attrs: { href },
                                                    dataset: {
                                                        postId: post.id,
                                                    },
                                                },
                                                post.title
                                            )
                                        ),
                                        a({ attrs: { rel: 'author' } }, [
                                            div(
                                                author.image
                                                    ? img({
                                                          attrs: {

(isLogged, vtree) =>
      div([
        h1('.title.center-align.trello-blue.white-text', [
          'TKAT ',
          small('.trello-blue-100-text', '(Trello Kanban Analysis Tool)'),
        ]),
        R.ifElse(
          R.identity,
          R.always(vtree),
          R.always(
            div('.center-align', [
              button(
                '.auth-btn.btn.waves-effect.waves-light.trello-blue',
                'Connect to Trello'
              ),
            ])
          )
        )(isLogged),
      ])

return props$.map(x => {
    return div('.page1',[
      h1('.content-subhead', ['Page 1']),
      h1([`This is Page 1`]),
      h2(['Counter: ' + x])
    ])
  });
}

function renderHeader() {
  return header('.header', [
    h1('todos'),
    input('.new-todo', {
      props: {
        type: 'text',
        placeholder: 'What needs to be done?',
        autofocus: true,
        name: 'newTodo'
      },
      hook: {
        update: (oldVNode, {elm}) => {
          elm.value = '';
        },
      },
    })
  ]);
}

function aboutPageView() {
  return div([
    h1('About me'),
    p(placeholderText())
  ])
}

return calculatorVDom.map(calcVNode =>
    div('.app', [
      h1(`.title.${styles.title}`, 'Matrix Multiplication'),
      calcVNode,
      h2(`.footnote.${styles.footnote}`, [
        a({attrs: {href: 'https://github.com/staltz/matrixmultiplication.xyz'}},
          'Built by @andrestaltz with Cycle.js'
        )
      ])
    ])
  );

DOM: O.merge(intents.reset$, intents.create$, O.just()).map(() =>
      header(".header", [
        h1("todos"),
        input(".new-todo", {
          type: "text",
          value: "",
          attributes: {placeholder: "What needs to be done?"},
          autofocus: true,
          name: "newTodo"
        })
      ]))
  }

return history$.map(history => {
    const {pathname} = history;
    let page = h1('404 not found');
    if (pathname === '/home') {
      page = homePageView();
    } else if (pathname === '/about') {
      page = aboutPageView();
    } else if (pathname === '/contacts') {
      page = contactsPageView();
    }

    return div([
      navigation(pathname),
      page,
      br(),
      h3('History object'),
      p(JSON.stringify(history))
    ]);
  });

export default (pla$) => div([
  h1('.modal-box-title', 'Export...'),
  h3('PLA'),
  div(pla$
    .map(formatPLA)
    .startWith('')
    .map((text) => textarea('.export-text', {
      attributes: {readonly: true},
    }, text))),
])
;