// This is what it looks like

section(
  h1('Brage.js is so easy'),
  p('This is how you use it'),
  ul({ class: 'list' },
    li('Steak'),
    li('Milk'),
    li('Eggs'),
    li('Liver')
  ),
  aside('Cool?')
)

// Access the parent
let world
const list = ul(
  li('Hello'),
  world = li('World')
)
world.parent === list // true

// Mount list into body
const list = ul(li('Hello'), li('World'))
mount(list)

// Mount list into another tag
mount(list, document.querySelector('#app'))

// Append paragraph to body
const paragraph = p('Hello world')
append(paragraph)

// Append paragraph to another element
append(paragraph, document.querySelector('#app'))

// Insert a new paragraph before the .paragraph element
insert(p('New'), document.querySelector('.paragraph'))

// Replace a paragraph with another paragaph
replace(p('New'), document.querySelector('.paragraph'))

import { div, h1, p, img } from '@/modules/brage.js'
import banner from '@/assets/images/brage.jpg'

class HomeView {
  render = () => {
    return(
      div(
        h1('Home'),
        p('Welcome to our Brage.js demo page!'),
        div(
          img({ src: banner })
        )
      )
    )
  }
}

export default new HomeView()

import homeView from '@/views/site/home-view.js'

// The view is a class that contains a render function.

import { BrageRouter } from 'brage'
import homeView from '@/views/site/home-view.js'
import aboutView from '@/views/site/about-view.js'
import listView from '@/views/site/list-view.js'
import controllerView from '@/views/site/controller-view.js'
import todoView from '@/views/todo/todo-view.js'

const routes = [
  { path: '/', view: homeView },
  { path: '/about', view: aboutView },
  { path: '/list/:message', view: listView },
  { path: '/controller', view: controllerView },
  { path: '/todo', view: todoView }
]

export default new BrageRouter(routes)

import { header, nav, a, div } from '@/modules/brage.js'
import routes from '@/lib/routes.js'

class HeaderView {
  render = () => {
    const view = (
      header(
        nav(
          // Add the router-link class to each router link
          this.homeLink = a('Home', { class: 'router-link active', href: '/' }),
          this.aboutLink = a('About', { class: 'router-link', href: '/about' }),
          this.listLink = a('List', { class: 'router-link', href: '/list/hello' }),
          this.controllerLink = a('Controller', { class: 'router-link', href: '/controller' }),
          this.todoLink = a('Todo', { class: 'router-link', href: '/todo' })
        )
      )
    )

    // Call registerLinks for each link you want to use with the router
    routes.registerLinks([
      this.homeLink,
      this.aboutLink,
      this.listLink,
      this.controllerLink,
      this.todoLink
    ])

    return view
  }
}

export default new HeaderView()

// Route props are sent to the render function
render = (props) => {
  console.log(props) // { id: '1234' }
}

// Use destructuring to capture the props directly
render = ({ id }) => {
  console.log(id) // '1234'
}