demo.html

<script type="coffeedom">

# Note: needs to be served by webserver, as most browsers prevent the use of 
#       history.pushstate when using the file:// protocol

dom.BODY = ->  

  loc = fetch 'location'
  homepage = loc.url == '/' || loc.url == ''

  DIV 
    style: 
      padding: 50
      fontSize: 18

    if !homepage 
      DIV 
        style: 
          position: 'absolute'
          top: 20
          left: 20
          cursor: 'pointer'
          textDecoration: 'underline'

        onClick: -> 
          Earl.load_page '/', 
            came_from_skill_section: true

        'back home'

    if homepage 
      HOMEPAGE()

    else 
      RESUME()




dom.HOMEPAGE = -> 
  DIV null,

    DIV 
      style:
        fontSize: 50

      'Hello, I\'m Earl!'

    DIV null,

      'Click me to see what I can do'

    A 
      href: '/what_i_do'

      EARL_HEADSHOT()



dom.RESUME = -> 

  links = [
    A 
      href: "/"
      target: '_blank'
      "I can open internal links in a new tab"
    A 
      href: 'https://invisible.college'
      'I let external link open freely'
    A 
      href: 'https://invisible.college'
      target: '_blank'
      "...including external links that open a new tab"
  ]

  DIV null,
    for l in links

      DIV
        style: 
          padding: 50

        EARL_HEADSHOT
          style: 
            width: 150
            display: 'inline-block'
            marginRight: 40

        l

    DIV 
      onClick: -> location.reload()

      SPAN 
        style: 
          textDecoration: 'underline'
          cursor: 'pointer'
        'Reload the page'

      ' and see that we return right back here'


dom.EARL_HEADSHOT = -> 

  IMG 
    src: 'https://f.consider.it/earl.jpg'
    style: @props.style or {}

#</script><script src="https://stateb.us/client5.js"></script>
<script src="https://rawgit.com/invisible-college/Earl/master/earl.js" history_aware_links></script>