devroom.io/layouts/_default/single.html

{{ partial "header.html" . }}

<article class="post" id="{{ .Slug }}">
    <h1>{{ .Title }}</h1>
    <p>
        {{ if eq .Section "posts" }}
          {{ .Date.Format "2 January 2006" }}
        {{ end }}
    </p>

    {{ .Content }}

    {{ if eq .Section "posts" }}
        <aside class="about">
            <h4>Learn more?</h4>
            <p>
            Reading books is a great way to learn new things. I've made a list of <a href="/recommendations">book I highly recommend</a>.
            </p>

            <h4>Get in touch</h4>
            <p>
            I'd love to hear your questions and comments on this article!
            <a href="http://twitter.com/ariejan">Mention @ariejan on Twitter</a>, <a href="mailto:ariejan@devroom.io">shoot me an email</a> (<a href="/gpg">gpg</a> available) or sign up for <a href="http://eepurl.com/cL3XY9" target="_blank">my newsletter</a>.
            </p>

            <div class="avatar"></div>

            <h4>About Ariejan</h4>

            <p>
            Hey! I'm a software engineer building rock solid back-end systems
            using Ruby, Ruby on Rails and Elixir. In my free time I love to
            repair audio equipment, experiment with electronics, and play the piano.
            </p>
        </aside>
    {{ end }}
</article>

<script type="text/javascript">
function ready(fn) {
    if (document.readyState != 'loading') {
        fn();
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}

function imageClick(e) {
    e.preventDefault();
    this.classList.toggle('zoomed');
}

function handleEsc(e) {
    if (e.keyCode == 27) {
        var zoomedImages = document.querySelectorAll('img.zoomed');
        Array.prototype.forEach.call(zoomedImages, function(el, i) {
            el.classList.toggle('zoomed');
        });
    }
}

ready(function() {
    var images = document.querySelectorAll('article img');
    Array.prototype.forEach.call(images, function(el, i) {
        el.addEventListener('click', imageClick);
    });

    document.addEventListener('keyup', handleEsc);
});
</script>

{{ partial "footer.html" . }}