Group by Day then Time like Scripting Notes

support
1

I want to try and replicate something like how Scripting News is setup with my Hugo blog-- on the index each day is grouped in reverse chronological, and within that group, each post is ordered in chronological order, with pagination.

My current index is pretty dang simple:

{{- range .Paginator.Pages }}
    {{ .Render "summary"}}
{{- end }}
<div class = "paginator">
{{ if .Paginator.HasPrev }}
  <a class = "left" href="{{ .Paginator.Prev.URL }}">←Newer Posts</a>
{{ end }}
{{ if .Paginator.HasNext }}
  <a href="{{ .Paginator.Next.URL }}" style = "float: right;">Older Posts→</a>
{{ end }}
</div>

I was thinking I’d have to do something like:

{{ range .Pages.GroupByDate "2006-01-02" "desc" }}
<h2>{{ .Key }}</h2>
  {{ range .Pages.GroupByDate "2006-01-02 15:04:05  -070" "asc" }}
   ...
{{-  end }}
{{- end }}

But I feel like I’m missing something subtle about what .Pages.GroupByDate returns and how to apply the “inner range” by each object in the outer range, etc.

Am I headed in the right direction? Has anyone else attempted this? For some more “why” context-- much like Scripting Notes, most of my posts are micro posts without titles, and I find the idea of the index being a chronological collection of thoughts from the day to be appealing given that post style, with longer posts interspersed and clear by having section headers.

2

Hi there,

Do you have your site code somewhere we can have a look at? Have a read about Requesting Help to see how to make it easier for us to help.

3

This is a pretty close approximation of my theme in current state https://github.com/jsonbecker/jsonbecker-theme.

The site itself is hosted on micro.blog, so I don’t readily have a content folder available. It can be found at https://micro.json.blog. The content is mostly title-less posts, as you can see. I’m not really worried about the content part of the layout, just how to arrange my index.html so that posts are grouped versus in reverse chronological order by date and then by chronological order by date and time within a day.

4

It would be much easier to help you if we could clone your project with sample posts included instead of me trying to create sample posts that approximate what you have. How is your content folder organised? Do you have sub-folders? sub-sub-folders? What does the frontmatter look like? What does your config look like?

Here’s some pages of the docs you can have a look at:

5

Here’s a branch with a fake small site.

The current index is standard, reverse chronological and looks like this:

image
image1716×1216 128 KB

What I want is for the post on April 03 to show in the reverse order they do, while still having April 3 appear above April 2.

I can figure out the rest from there, but what I don’t really get is how to interact with Paginator and sort and group pages the way I want by date.

6

It helps to split it up:

{{/*  Get Posts  */}}
{{ $posts := where  site.RegularPages "Type" "post" }}

{{/*  Group Posts by Date  */}}
{{ $grouped := $posts.GroupByDate "2006-01-02" }}

{{/*  Paginate Group */}}
{{ $paginated := (.Paginate ($grouped)) }}

{{/*  Range over Page Groups  */}}
{{ range $paginated.PageGroups }}

  {{/*  Range over PageGroup Pages (in Reverse)  */}}
  {{ range .Pages.Reverse  }}
    {{ .Render "summary"}}
  {{ end }}

{{ end }}

See:

3 Likes
7

Thanks, that worked perfectly. What’s tough for me sometimes with these elements is knowing things like .PageGroups is an element on the result of using .Paginate. Some of the interaction between properties and methods/functions are sometimes hard to string together, even if I carefully read the docs.

Encouraged that this is easy to read, even if it’s not particularly easy (to me) to write.

8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.