src/html.htl

<!--
/*
* Copyright 2018 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
-->
<!DOCTYPE html>
<html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />    
      <link rel="stylesheet" href="/styles.css"/>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700"/>
      <script src="https://momentjs.com/downloads/moment.min.js"></script>
      <title>${content.title}</title>
    </head>

    <body>
        <div class="header">
            <div class="title">
                <h1><img src="/adobe_logo.png"/>Launch, by Adobe, Documentation</h1>
            </div>
            <div class="search">
                <input type="text" value="" placeholder="Search" class="searchinput">
            </div>
        </div>
        <div class="main">
            <div class="nav">
                <esi:include src="${content.nav}.summary.html" />
            </div>
            <div class="content">
                <div class="content-body">
                    <div class="title">
                        <h1>${content.title}</h1>
                        <div data-sly-test="${content.committers && content.lastModified}" class="author">
                            <sly data-sly-list="${content.committers}"><img title="${item.display}" src="${item.avatar_url}"></sly>
                            <span class="lastModified">Last modified <time datetime="${content.lastModified.raw}">${content.lastModified.display}</time></span>
                        </div>
                    </div>
                    <div data-sly-test="${content.document.body}">
                      ${content.document.body.innerHTML}
                    </div>
                </div>
            </div>
        </div>
        <script>
            window.addEventListener('load', () => {
                const parent = document.getElementsByClassName('lastModified')[0];

                const elem = parent.children[0];
                const lastMod = elem.getAttribute('datetime');
                elem.innerHTML = moment(lastMod).fromNow();
                parent.className +=  ' visible';
            });
        </script>
    </body>
</html>