Ghost Archive Page

Archive.js

$(document).ready(function(){
    if($('#archivePage').length){
        var $item = $('.archiveList--item'),
            dates = {};
        
        $item.each(function(){
           dates[$(this).data('date')] = '';
        });
                
        for (date in dates) {
          $item.filter('[data-date='+ date +']').wrapAll('<ul class="archiveList"></ul>');
        };
         
        $('.archiveList').each(function() { 
            var month = $(this).children().first().data('date').replace("-"," ");
            $(this).attr('data-date', month);
        });
    };
})

page-timeline.hbs

{{!< default}}

{{!-- This is a page template. A page outputs content just like any other post, and has all the same
    attributes by default, but you can also customise it to behave differently if you prefer. --}}

{{!-- Everything inside the #post tags pulls data from the page --}}
{{#post}}

<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
    <nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
        {{#if @blog.navigation}}
            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
        {{/if}}
    </nav>
</header>

<main class="content" role="main">
    <article class="{{post_class}}">

        <header class="post-header">
            <h1 class="post-title">{{title}}</h1>
        </header>

        <section class="post-content" id="archivePage">
            {{#get "posts" limit="all"}}
                {{#foreach posts}}
                    <li class="archiveList--item" data-date="{{date format="MMMM-YYYY"}}">
                        <time class="archiveItem--date" datetime="{{date format='YYYY-MM-DD'}}">
                            {{date published_at format='DD MMMM'}}
                        </time>    
                        <a href="{{url}}">{{title}}</a>              
                    </li>      
                {{/foreach}}
            {{/get}}
        </section>
    </article>
</main>
{{/post}}