Layouts

Layouts are an essential part for building user interfaces, with parts of UI which are often reused. Atlet allows you to make, and use layouts with builtin withLayout function. Here is an example.

/**@jsx h */
/**@jsxFrag Fragment */
import { serve } from 'https://deno.land/std/http/server.ts'
import { createHandler, withLayout, Props, h, Fragment } from 'https://deno.land/x/atlet@1.2.0/mod.ts'

const Layout = (props: Props) => (
  <main>
    <nav>
      <p>I am navbar</p>
    </nav>
    {props.children}
  </main>
)

const Page = withLayout(Layout, () => (
  <div>
    <p>I am inside the Layout</p>
  </div>
))

const handler = await createHandler({
  '/': Page,
})

// you can also use Deno.serve which is available in Deno 1.35
serve(handler)

The withLayout function is just a simple wrapper, which takes two components, adds one into another, and returns a component, which's props are passed into both layout and child, giving everyone access to the same props data.

You can also nest these layouts as much as you need. The ~~sky~~ RAM is the pretty much only limit.

/**@jsx h */
/**@jsxFrag Fragment */
import { serve } from 'https://deno.land/std/http/server.ts'
import { createHandler, withLayout, Props, h, Fragment } from 'https://deno.land/x/atlet@1.2.0/mod.ts'

const LayoutOne = (props: Props) => (
  <div>
    <h1>Layout 1</h1>
    {props.children}
  </div>
)

// We can use the same withLayout function to also create a new layout
const LayoutTwo = withLayout(LayoutOne, (props: Props) => (
  <div>
    <h1>Layout 2</h1>
    {props.children}
  </div>
))

const Page = withLayout(LayoutTwo, () => (
  <h1>It smells like updog in here.</h1>
))

const handler = await createHandler({
  '/': Page,
})

// you can also use Deno.serve which is available in Deno 1.35
serve(handler)

Props

Middleware