devroom.io/layouts/_default/single.html

{{ partial "header.html" . }}

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

    {{ .Content }}

    {{ if eq .Section "posts" }}
        <aside class="about">
                
            <p>
            <strong>About Ariejan</strong> – I'm a software engineer building rock solid back-end systems
            using Ruby on Rails, Golang, and Elixir. In my free time I love to
            repair audio equipment, experiment with electronics, and play the piano.
            </p>

            <p>
            <strong>Continue reading</strong> – Check my list of <a href="/recommendations">book recommendations</a>.
            </p>

            <p>
            <strong>Get in touch</strong> – Mention <a href="http://twitter.com/ariejan">@ariejan</a> on Twitter or shoot me <a href="mailto:ariejan@devroom.io">an email</a> (<a href="/gpg">gpg</a> available).
            </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" . }}