Augment date and date-modified fields rendering in default listing template?

[axtimwalde]

Description

I am using the default blog listing template for a website with tutorials and examples for a software library. The individual documents and notebooks are being updated from time to time to adjust to changes in the library. I use the date and date-modified fields to express when the entry was first created and when it was updated.

The default listing template allows me to sort by date-modified, and I can make it print both date and date-modified, but there is no indication what the dates mean, they are just both printed. I would like to prepend "First published on " and "Last modified on " to those dates, but I cannot find a way other than creating a custom listing and listing-item template. Creating new templates feels too much though. I like the default templates very much and would like to get updates and bugfixes without tracking the changes in an almost equivalent custom templates. Also, I cannot just copy the embedded default listing and listing-item templates because they use the listing property which my quarto installation does not seem to pass to custom templates. Is there any good solution for this?

It would also be nice if the template would skip the date-modified field if it doesn't exist instead of printing "Invalid Date".

A possible solution could be a dedicated format field for date and date-modified, e.g. "[Last modified on ]medium" and an if-present check in the template. Does that already exist? I could try to add it if you're ok with that?

This is my listing configuration, may be I missed something obvious?

---
listing:
  contents: posts
  sort:
    - "date-modified desc"
    - "date desc"
  type: default
  fields: [image, date, date-modified, title, author, categories, description]
  categories: true
  sort-ui: false
  filter-ui: false
  feed:
    type: partial
page-layout: full
title-block-banner: false
format:
  html:
    code-tools: false
---

[mcanouil]

I would like to prepend "First published on " and "Last modified on "

Rather than asking to change the default to fit your needs (which might not fit others needs), you should consider creating your own listing template, see https://quarto.org/docs/websites/website-listings-custom.html.

See also #7089 (reply in thread) and other post on custom listings.

[mcanouil]

No, follow the documentation on theming.

The only place you can use SCSS is theme.

[axtimwalde]

Ok. I reasoned that CSS and formatting configurations cannot solve my problem and using client side Javascript to modify static DOM is bad style. I therefore drafted a template following the available documentation, GitHub issues, and Quarto sources to get a listing page that does what I proposed. Here is the draft:

<% for (const item of items) { %>
<div class="quarto-post image-right" <%= metadataAttrs(item) %>>
<div class="thumbnail">
<a href="<%- item.path %>" class="no-external">
<% if (item.image) { %>
<p><img src="<%- item.image%>" class="thumbnail-image" alt="<%= item['image-alt'] %>"></p>
<% } %>
</a>
</div>
<div class="body">
<h3 class="no-anchor listing-title"><a href="<%- item.path %>" class="no-external"><%= item.title %></a></h3>
<div class="listing-subtitle"><a href="<%- item.path %>" class="no-external"><%= item.subtitle %></a></div>
<div class="listing-categories">
<% for (const category of item.categories) { %>
<div class="listing-category" onclick="window.quartoListingCategory('<%=category%>'); return false;"><%= category %></div>
<% } %>
</div>
<div class="delink listing-description"><a href="<%- item.path %>" class="no-external"><%= item.description %></a></div>
</div>
<div class="metadata"><a href="<%- item.path %>" class="no-external">
<% if (item['date-modified'] === "Invalid Date") { %>
<% if (item.date) { %><div class="listing-date">`<%= item.date %>`{=html}</div><% } %>
<% if (item.author) { %><div class="listing-author"><%= item.author %></div><% } %>
<% } else { %>
<div class="listing-date">`<%= item['date-modified'] %>`{=html}</div>
<% if (item.author) { %><div class="listing-author"><%= item.author %></div><% } %>
<% if (item.date) { %><div class="listing-date" style="color:rgb(192,192,192)">first published on <nobr>`<%= item.date %>`{=html}</nobr></div><% } %>
<% } %>
</a></div>
</div><% } %>

However, this draft does not render preview images for items that do not have an image property, i.e. for which the preview image must be generated from the source. I don't understand why this happens, the Quarto documentation about listing fields clearly states that the image field contains whatever is appropriate, this is also how it seems to work with the original default template. The img and imgPlaceholder methods that are called in the original template also do not seem to do any magic stuff. Can you may be tell me what I am missing?

(BTW, I would be happy to clean up and parameterize the logic of this template and provide a proposal to extend Quarto's default template if there is interest, and again, this would not be a breaking change that affects anybody who uses the current template as is, I am a considerate person.)

[mcanouil]

The default listing is more than a template, it also uses TypeScript and LUA logics which does not apply to custom listings.

Your template won't work with Quarto internals, for instance you hardcoded English text which is unsuitable for other languages.
And contrary to what you might think, it is a breaking change in that regard because the behaviour is changed by your template.

Additionally, we cannot help you with your custom listings template with only a screenshot to work with.
A small complete example as a Git repository is required.

[axtimwalde]

Of course: https://github.com/axtimwalde/quarto-test

With this line

https://github.com/axtimwalde/quarto-test/blob/main/index.qmd#L7

you see only one preview image, without it, you see two. I expect to see two with this line.

My custom example template, as you know, does not have access to Quarto internals, and was therefore meant as a minimal demonstration of a desired outcome. I tried to convey this temporary and incomplete nature by mentioning that I would parameterize and clean it up, but apparently failed to get through.

[mcanouil]

Yes, you are loosing the preview image auto-detection, so you need to explicitly set image.
Unfortunately, that is how Quarto is today. I know there was some discussion to improve this, but not in a short time frame.

Using a template means you are taking care of everything. It's both an advantage and an inconvenient.