<commit_before><!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">

        <title>Concerning the Front End of Things</title>

        <meta name="description" content="Concerning the Front End of Things">
        <meta name="author" content="<NAME>">

        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <link rel="stylesheet" href="/css/reveal.min.css">
        <link rel="stylesheet" href="/css/theme/default.css" id="theme">

        <!-- For syntax highlighting -->
        <link rel="stylesheet" href="/lib/css/zenburn.css">

        <!-- If the query includes 'print-pdf', include the PDF print sheet -->
        <script>
            if( window.location.search.match( /print-pdf/gi ) ) {
                var link = document.createElement( 'link' );
                link.rel = 'stylesheet';
                link.type = 'text/css';
                link.href = '/css/print/pdf.css';
                document.getElementsByTagName( 'head' )[0].appendChild( link );
            }
        </script>

        <!--[if lt IE 9]>
        <script src="lib/js/html5shiv.js"></script>
        <![endif]-->
    </head>

    <body>

    <div class="reveal">

        <!-- Any section element inside of this container is displayed as a slide -->
        <div class="slides">
            <section>
                <h1>Views and Templates</h1>
            </section>
            <section>
                <h3>What We Need</h3>
                <ul>
                    <li>Static File Server</li>
                    <li>Template Engine Integration</li>
                    <li>Reusable Layouts</li>
                    <li>Rendering a view with a Context</li>
                </ul>
            </section>
            <section>
                <section>
                    <h3>Static File Server</h3>
                    <p>This question comes up often enough in IRC and GitHub to call out specifically</p>
                    <pre class="fragment" data-fragment-index="0"><code>
server.route({
    method: 'GET',
    path: '/static/{path*}',
    config: {
        auth: false,
        handler: {
            directory: {
                path: Path.join(server.settings.app.root, 'static'),
                listing: false
            }
        },
        cache: {
            expiresIn: 1000 * 60 * 60 * 24 * 5
        }
    }
});
                  </code></pre>
                <p class="fragment" data-fragment-index="1">So this is the general "serve static files" route most web servers need.</p>
                </section>
                <section>
                    <h3>Dissecting the File Server Code</h3>
                    <p>Regular handle with a path and a method</p>
                    <p>Uses the <b>directory</b> option for the handler, which is documented <a href="http://hapijs.com/api#serverrouteoptions">here</a></p>
                    <ul>
                        <li><b>path</b> tells hapi what folder to look through for the requested files.</li>
                        <li><b>listing</b> tells hapi to not return a listing of files in this directory if "/static" is requested.</li>
                    </ul>
                </section>
            </section>
            <section>
                <section>
                    <h3>View Engine Integration</h3>
                    <p>Like everything else, view engine integration is handled with configuration opens via <b>server.views</b></p>
                    <p>Supports handlebars, Jade, swig, etc. Really anything that has a <b>compile(context)</b> function</p>
                    <p class="fragment" data-fragment-index="0">Hapi 7.0 update: the bulk of this logic has been moved into a new module named vision.</p>
                </section>
                <section>
                    <h3>Hanging on to Handlebars</h3>
                    <pre><code>
server.views({
    engines: {
        html: require('handlebars')
    },<commit_msg>Fixes.<commit_after><!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">

        <title>Concerning the Front End of Things</title>

        <meta name="description" content="Concerning the Front End of Things">
        <meta name="author" content="<NAME>">

        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <link rel="stylesheet" href="/css/reveal.min.css">
        <link rel="stylesheet" href="/css/theme/default.css" id="theme">

        <!-- For syntax highlighting -->
        <link rel="stylesheet" href="/lib/css/zenburn.css">

        <!-- If the query includes 'print-pdf', include the PDF print sheet -->
        <script>
            if( window.location.search.match( /print-pdf/gi ) ) {
                var link = document.createElement( 'link' );
                link.rel = 'stylesheet';
                link.type = 'text/css';
                link.href = '/css/print/pdf.css';
                document.getElementsByTagName( 'head' )[0].appendChild( link );
            }
        </script>

        <!--[if lt IE 9]>
        <script src="lib/js/html5shiv.js"></script>
        <![endif]-->
    </head>

    <body>

    <div class="reveal">

        <!-- Any section element inside of this container is displayed as a slide -->
        <div class="slides">
            <section>
                <h1>Views and Templates</h1>
            </section>
            <section>
                <h3>What We Need</h3>
                <ul>
                    <li>Static File Server</li>
                    <li>Template Engine Integration</li>
                    <li>Reusable Layouts</li>
                    <li>Rendering a view with a Context</li>
                </ul>
            </section>
            <section>
                <section>
                    <h3>Static File Server</h3>
                    <p>This question comes up often enough in IRC and GitHub to call out specifically</p>
                    <pre class="fragment" data-fragment-index="0"><code>
server.route({
    method: 'GET',
    path: '/static/{path*}',
    config: {
        auth: false,
        handler: {
            directory: {
                path: Path.join(server.settings.app.root, 'static'),
                listing: false
            }
        },
        cache: {
            expiresIn: 1000 * 60 * 60 * 24 * 5
        }
    }
});
                  </code></pre>
                <p class="fragment" data-fragment-index="1">So this is the general "serve static files" route most web servers need.</p>
                </section>
                <section>
                    <h3>Dissecting the File Server Code</h3>
                    <p>Regular route with a path, a method, and a configuration</p>
                    <p>Uses the <b>directory</b> option for the handler, which is documented <a href="http://hapijs.com/api#serverrouteoptions">here</a></p>
                    <ul>
                        <li><b>path</b> tells hapi what folder to look through for the requested files.</li>
                        <li><b>listing</b> tells hapi to not return a listing of files in this directory if "/static" is requested.</li>
                    </ul>
                </section>
            </section>
            <section>
                <section>
                    <h3>View Engine Integration</h3>
                    <p>Like everything else, view engine integration is handled with configuration opens via <b>server.views</b></p>
                    <p>Supports handlebars, Jade, swig, etc. Really anything that has a <b>compile(context)</b> function</p>
                    <p class="fragment" data-fragment-index="0">Hapi 7.0 update: the bulk of this logic has been moved into a new module named vision.</p>
                </section>
                <section>
                    <h3>Hanging on to Handlebars</h3>
                    <pre><code>
server.views({
    engines: {
        html: require('handlebars')
    },
{'fraction_non_alphanumeric': 0.13225419664268584, 'fraction_numerical': 0.008633093525179856, 'mean_word_length': 1.6016843418590143, 'pattern_counts': {'":': 0, '<': 207, '<?xml version=': 0, '>': 207, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7651980', 'n_tokens_mistral': 2374, 'n_tokens_neox': 2215, 'n_words': 620}