btakita/Index.html

## Index.html
<!-- Index.html is used in DOM & SSR -->
<Layout id="index" class__root="Index" ctx="{{ctx}}">
  <main>
    <article ref:presentation id="presentation">
      <section class="slide-0">
        Slide 0
      </section>
      <section class="slide-1">
        Slide 1
      </section>
      <section class="slide-2">
        Slide 2
      </section>
    </article>
  </main>
</Layout>

<script type="buble">
  import Layout from 'Layout.html'
  export default {
    oncreate,
    components: {
      Layout
    }
  }
  function oncreate() {
    bespoke.from('#presentation')
  }
</script>

## Index__SSR.html
<!-- Index__SSR.html injects Index.html into Layout__Root__SSR.html -->
<Layout__SSR
  ctx="{{ctx}}"
  meta="{{meta__root}}"
  title="{{title__root}}"
  styles="{{styles__root}}"
  scripts="{{scripts__root}}"
  components__onload="{{components__onload}}"
>
  <Index ctx="{{ctx}}"></Index>
</Layout__SSR>

<script type="buble">
  import {$versioned} from 'ctx-core/html/lib'
  import Layout__Root__SSR from 'Layout__Root__SSR.html'
  import Index from 'Index.html'
  export default {
    data() {
      return {
        meta__root:
          '<meta name="description" content="Index Page description">',
        title__root:
          'Index Page Title',
        styles__root:
          `<link rel="stylesheet" href='//fonts.googleapis.com/css?family=PT+Serif'>`,
        components__onload:
          [
            ['Index', {
              hydrate: true
            }]
          ]
      }
    },
    computed: {
      scripts__root: ctx =>
        `<script src="${$versioned(ctx, '/root/bespoke.min.js')}"><${'/script'}>`
    },
    components: {
      Layout__Root__SSR,
      Index
    }
  }
</script>

## Layout.html
<!-- Isomorphic Layout to preserve dynamic behavior such as scroll events-->
<:Window on:scroll="onscroll__window(event)" />

<div
  class="Layout {{class__Layout}}"
>
  <header ref:masthead id="masthead" class="masthead"></header>
  {{yield}}
  <footer></footer>
</div>

<script type="buble">
  export default {
    methods: {
      onscroll__window
    }
  }
  function onscroll__window(e) {
    const {scrollY} = window
        , {masthead} = C.refs
    if(scrollY > 100) {
      masthead.classList.add('nav-up')
    } else {
    masthead.classList.remove('nav-up')
    }
  }
</script>

## Layout__SSR.html
<!-- Server Side Layout -->
<html lang="en">
  <head>
    {{{meta || ''}}}
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {{#if styles}}
      {{{styles || ''}}}
    {{/if}}
    <link rel="stylesheet" href="/fonts/neuzeitgro-bla-reg.css" type="text/css">
    <link rel="stylesheet" href="{{$versioned(ctx, '/dist/bundle.css')}}" type="text/css">
    {{#if title}}
      <title>{{{title}}}</title>
    {{else}}
      <title>Default Title</title>
    {{/if}}
  </head>
  <body>
    {{yield}}
    <script src="{{env.BABEL__POLYFILL__URL}}"></script>
    {{#if scripts}}
      {{{scripts}}}
    {{/if}}
    <script src="{{$versioned__js('/dist/site-build-file')}}"></script>
    <script>
      var ctx = window.ctx || {{{JSON.stringify(ctx || {})}}}
        , components = {{{JSON.stringify(components)}}}
      $ctx.mount({
        ctx: ctx,
        components: components
      })
    </script>
  </body>
</html>

<script type="buble">
  import env from 'ctx-core/env'
  import {$versioned} from 'ctx-core/html/lib'
  import {$versioned__js} from 'ctx-core/html/node'
  export default {
    data() {
      return {
        env
      }
    },
    helpers: {
      $versioned,
      $versioned__js,
      $script__head__gtm,
      $script__body__gtm
    }
  }
</script>
	<!-- Index.html is used in DOM & SSR -->
	<Layout id="index" class__root="Index" ctx="{{ctx}}">
	<main>
	<article ref:presentation id="presentation">
	<section class="slide-0">
	Slide 0
	</section>
	<section class="slide-1">
	Slide 1
	</section>
	<section class="slide-2">
	Slide 2
	</section>
	</article>
	</main>
	</Layout>

	<script type="buble">
	import Layout from 'Layout.html'
	export default {
	oncreate,
	components: {
	Layout
	}
	}
	function oncreate() {
	bespoke.from('#presentation')
	}
	</script>
	<!-- Index__SSR.html injects Index.html into Layout__Root__SSR.html -->
	<Layout__SSR
	ctx="{{ctx}}"
	meta="{{meta__root}}"
	title="{{title__root}}"
	styles="{{styles__root}}"
	scripts="{{scripts__root}}"
	components__onload="{{components__onload}}"
	>
	<Index ctx="{{ctx}}"></Index>
	</Layout__SSR>

	<script type="buble">
	import {$versioned} from 'ctx-core/html/lib'
	import Layout__Root__SSR from 'Layout__Root__SSR.html'
	import Index from 'Index.html'
	export default {
	data() {
	return {
	meta__root:
	'<meta name="description" content="Index Page description">',
	title__root:
	'Index Page Title',
	styles__root:
	`<link rel="stylesheet" href='//fonts.googleapis.com/css?family=PT+Serif'>`,
	components__onload:
	[
	['Index', {
	hydrate: true
	}]
	]
	}
	},
	computed: {
	scripts__root: ctx =>
	`<script src="${$versioned(ctx, '/root/bespoke.min.js')}"><${'/script'}>`
	},
	components: {
	Layout__Root__SSR,
	Index
	}
	}
	</script>
	<!-- Isomorphic Layout to preserve dynamic behavior such as scroll events-->
	<:Window on:scroll="onscroll__window(event)" />

	<div
	class="Layout {{class__Layout}}"
	>
	<header ref:masthead id="masthead" class="masthead"></header>
	{{yield}}
	<footer></footer>
	</div>

	<script type="buble">
	export default {
	methods: {
	onscroll__window
	}
	}
	function onscroll__window(e) {
	const {scrollY} = window
	, {masthead} = C.refs
	if(scrollY > 100) {
	masthead.classList.add('nav-up')
	} else {
	masthead.classList.remove('nav-up')
	}
	}
	</script>
	<!-- Server Side Layout -->
	<html lang="en">
	<head>
	{{{meta \|\| ''}}}
	<meta name="viewport" content="width=device-width, initial-scale=1">
	{{#if styles}}
	{{{styles \|\| ''}}}
	{{/if}}
	<link rel="stylesheet" href="/fonts/neuzeitgro-bla-reg.css" type="text/css">
	<link rel="stylesheet" href="{{$versioned(ctx, '/dist/bundle.css')}}" type="text/css">
	{{#if title}}
	<title>{{{title}}}</title>
	{{else}}
	<title>Default Title</title>
	{{/if}}
	</head>
	<body>
	{{yield}}
	<script src="{{env.BABEL__POLYFILL__URL}}"></script>
	{{#if scripts}}
	{{{scripts}}}
	{{/if}}
	<script src="{{$versioned__js('/dist/site-build-file')}}"></script>
	<script>
	var ctx = window.ctx \|\| {{{JSON.stringify(ctx \|\| {})}}}
	, components = {{{JSON.stringify(components)}}}
	$ctx.mount({
	ctx: ctx,
	components: components
	})
	</script>
	</body>
	</html>

	<script type="buble">
	import env from 'ctx-core/env'
	import {$versioned} from 'ctx-core/html/lib'
	import {$versioned__js} from 'ctx-core/html/node'
	export default {
	data() {
	return {
	env
	}
	},
	helpers: {
	$versioned,
	$versioned__js,
	$script__head__gtm,
	$script__body__gtm
	}
	}
	</script>