Date De-Duplication Code?

Hi there, does anyone have an easy way/code snippet to only show the first instantiation of a date in a reverse chron feed of posts on the main page? In other words, if I have multiple posts on January 21, I only want to show the date for the newest one in that feed. And then the next date shown would be January 20 (or whatever date the last post not on that same day was). And if there were multiple posts on January 20th, it wouldn’t show the date again until the last post of January 19. And so on…

The reason would be having multiple posts in a day but not wanting to show the same date over and over and over again in a row.

Any easy way to do this? Thanks in advance.

The themes that I’ve seen generally are using some CSS trickery to not display the date on later items – they’re still writing it out, just hiding it.

I think you’d want something like:

div[data-date="1-12-2023"] ~ div[data-date="1-12-2023"] span  {
  display:none;
}

HTML to match (both will need adjusting for your actual structure…)

<div>I'm a div</div>
<div data-date="1-12-2023"><span>1-12-2023</span> post 1</div>
<div> I'm a plain div</div>
<div data-date="1-12-2023"><span>1-12-2023</span> post 2</div>
<div data-date="1-11-2023"><span>1-11-2023<span> - post 1</div>

So how do you write that CSS out with handlebars?

For years and months, it’s not so bad to enumerate the possibilities, but for days? No way.

It’s a little ugly, but I’d stick a <style>style like example above for the current {{date}}</style> inside the foreach.