const getDom = ({ sha, commit: { message, author: { name, email, date } } }: Commit) => [
  h3([message.split('\n\n')[0]]),
  h4([strong([name])]),
  h4([email]),
  h4([em([date])]),
  p([message.split('\n\n')[1] || ''])
];

 function app() {
   return {
     html: xs.of(
       h('.test-element', [
         div([h2('.a', 'a'), h('h4.b', 'b'), h('h1.fooclass')]),
         div([h3('.c', 'c'), h('div', [h('p.d', 'd'), h('h2.barclass')])]),
       ]),
     ),
   };
 }

function vTitle() {
  return div('#title', [
    h1([
      img({props: {src: 'Rx_Logo_S.png'}}),
      a(
        {props: {href: 'https://github.com/wizardwerdna/FRPBowlingKata'}},
        'FRP Bowling'
      ),
      img({props: {src: 'CycleJS_Logo.png'}}),
    ]),
    h3('The Classic Kata in RxJS and CycleJS')
  ]);
}

 const contents$ = loaded$.map(loaded =>
   loaded
     ? details$.map(commit => getDom(commit))
     : xs.of([h3(['Loading...'])])