Shopify Blog list by date (requires Luxon JS)

sidebar.liquid

{%- when 'by_year' -%}
      <div class="sf-block-aside">
        <h3 class="sf-aside-title">{{ b_s.title }}</h3>
        <div class="sf-aside-content">
          <ul class="sf-list-row" id="year-tags"></ul>
        </div>
      </div>
  <script type="text/javascript">
    const articles = {};
    {% for article in blog.articles limit: 9999 %}
      if(!Array.isArray(articles[{{ article.published_at | date: "%Y" }}])){
        articles[{{ article.published_at | date: "%Y" }}] = [];
      }
    articles[{{ article.published_at | date: "%Y" }}].push({{ article | json }});
    articles[{{ article.published_at | date: "%Y" }}][articles[{{ article.published_at | date: "%Y" }}].length -1].url = `{{ article.url }}`;

    {% endfor %}
    for(const year in articles){
      const articleYear = articles[year];
      const h4 = document.createElement('h4');
      h4.classList.add('sf-aside-title');
      h4.appendChild(document.createTextNode(`${year}`));
      document.querySelector('#year-tags').appendChild(h4);
      articleYear.forEach((article, index) => {
        if(article.published_at) {
          const li = document.createElement('li');
          const link = document.createElement('a');
          link.href = article.url;
          const date = luxon.DateTime.fromISO(article.published_at);
          const text = document.createTextNode(`${article.title}`)
          li.title = `Published on ${date.toFormat('ff')}`;
          link.appendChild(text);
          li.appendChild(link);
          document.querySelector('#year-tags').appendChild(li);
        }
      });
    }
  </script>