Where can I fins the ejs of default listing?

[nurfatimaj]

Hi!

I am trying to write an ejs for custom listing. I would like to make a list of my publications. It's a rather simple format

<% for (const item of items) { %>

<h5><%- item.title %></h5>
<div class="listing-categories">
  <% for (const cat of item.categories) {%>
    <div class="listing-category" onclick="window.quartoListingCategory('<%- cat %>'); return false;">
      <%- cat %>
    </div>
  <% } %>
</div>

<p class = "quarto-title-authors"><%- item.author %></p>

<%- item.description %>

<% } %>

However, it does not maintain the ability to filter by text or by selecting the categories.

So, I was wondering where could I see the ejs for the current default listing template, to be able to only change the parts I want to change. I only want to get rid of left column, where currently the author names are, and move the author names below the title.

I would appreciate any help! I am new to Quarto and definitely have never seen ejs before.

Thank you!

[dragonstyle]

Hello!

The item template for our implementation can be a little tough to decipher as it contains quite a bit of other coordinate to enable features and customization. That said, what you have should be pretty close to what is needed. I haven't run this, but I think this should support filtering and sorting:

<div class="list">
<% for (const item of items) { %>
<div <%= metadataAttrs(item) %>>
  <h5 class="listing-title"><%- item.title %></h5>
  <div class="listing-categories">
    <% for (const cat of item.categories) {%>
      <div class="listing-category" onclick="window.quartoListingCategory('<%- cat %>'); return false;">
        <%- cat %>
      </div>
    <% } %>
  </div>

  <p class="quarto-title-authors listing-author">
    <%- item.author %>
  </p>
  <span class="listing-description">
    <%- item.description %>
  </span>

</div>
<% } %>
</div>

The changes I made are:

1. Put a div around the whole thing and add the class listing (this is how we know where a listing is when trying to sort/filter it)

2. Put a div around the individual item and add <%= metadataAttrs(item) %> (we'll use this to write additional attributes that we may need to sort fields like dates which have a non-text sort order)

3. For each field (like title), add the class listing-<fieldname> (e.g. listing-title) to the tag that contains the text value of that fields (like the h5 for title).

1 and 2 don't have to be done with a DIV, we just need some kind of container to look inside of... Give this a try and see if this gets the filtering and sorting working for you.... There is a simple example using ul and li here that you could try adapting:

https://quarto.org/docs/websites/website-listings-custom.html#sorting-filtering-and-pagination

One other note - for custom listings like this, you will need to explicitly enable the UI by adding the following to your document front matter as well:

---
filter-ui: true
sort-ui: true
---

Hope this gets you going, let us know how it works out!
-c

[nurfatimaj]

Thank you so much! It works like a charm!

May I ask one more thing? Is it possible to make listings appear in sections? For example, I am using categories to mark if an item is published article, working paper or work in progress. Can I somehow make it look like this

Articles

[Item 1]

[Item 2]

...

Working papers

[Item 1]

[Item 2]

...

I saw in the documentation the possibility of having multiple listings based on folder locations. But since working papers and work in progress are likely to be moved around in future, I was worried that it may create problems with links. So, I was wondering if it is possible to use categories instead of folders to display them grouped?

Thanks again!

[dragonstyle]

I think this will do it:

```{=html}
<%
// Group the items into categories
const categoryItems = {};
for (const item of items) {
  for (const category of item.categories) 
  {
    categoryItems[category] = categoryItems[category] || [];
    categoryItems[category].push(item);
   }
}
%>
<div class="list">
  <% 
  for (const category of Object.keys(categoryItems)) {
    const catItems = categoryItems[category];
  %>
    <!-- The category heading -->
    <h2><%- category %></h2>
    
    <% for (const item of catItems) { %>
      <!-- The item -->
      <div <%= metadataAttrs(item) %>>
        <h5 class="listing-title"><%- item.title %></h5>
        <div class="listing-categories">
          <% for (const cat of item.categories) {%>
            <div class="listing-category" onclick="window.quartoListingCategory('<%- cat %>'); return false;">
              <%- cat %>
            </div>
          <% } %>
        </div>
  
        <p class="quarto-title-authors listing-author">
          <%- item.author %>
        </p>
        <span class="listing-description">
          <%- item.description %>
        </span>
  
      </div>
    <% } %>
  <% } %>
</div>
```

[nurfatimaj]

Amazing! Thank you sooo much! I think now I am definitely migrating to Quarto: apart from the above, it is generally a lot less hassle 😊 Thanks again!

[dragonstyle]

Thanks for the kind words and good luck with Quarto!

[nurfatimaj]

Hi! I'm writing again with a question. I posted previously a question in the discussion #90, but I realise today that this functionality is already there. I saw this page: https://quarto.org/docs/authoring/create-citeable-articles.html#web-articles
And if I specify the author field as

author: 
  - name: Author 1
    url: link1
    affiliation: institute 1
  - name: Author 2
    url: link 2
    affiliation: institute 2

I see it rendered correctly for that exact page

However, I am having trouble accessing these subfields in the custom listing template that you helped me with above.

So, far what I tried is

<div class="quarto-title-authors listing-author">
  <% for (const author of item.author) { %>
    <a href="<%- author.url %>"><%- author.name %></a>
  <% } %>
</div>

but it produces a bunch of empty links like this: <a href="http://localhost:5538/research.html"></a>
Since I wasn't sure what is considered an element of list item.author, I put this to ejs template

<div class="quarto-title-authors listing-author">
  <% for (const author of item.author) { %>
    <%- author %>
  <% } %>
</div>

This is how the output looks like

So, it really seems like ejs for some reason considers every individual character to be the list element. So, as a funny check I also temporarily asked ejs to print the following

<div class="quarto-title-authors listing-author">
  <% item.author.length %>
</div>

and it printed out 18, i.e., literally the number of characters in "Author 1, Author 2" string.

Could you please suggest how can I correctly access the url and name subfields of author field, so I could construct the link in my listing template.

Thank you very much!

[dragonstyle]

Right now, our author field for listings is pretty simple (and inflexible). It is currently provided merely as a string, and you can't currently access the individual authors and their properties like affiliations or urls (so when you're looping through the authors, since its a string you're literally looping through the character :) ).

We are beginning work on improving our handling of title blocks, authors and affiliations, and other areas related to creating scholarly works, so I anticipate I'll be improving this soon...