modifying table listing page on quarto

For this til page listing, I used table type listing. It looks good but it was including author field, which was unnecessary.

quarto table listing by default

Encouraged by the success of the previous effort to modify the default listing page, I wrote this in the .scss…

.quarto-listing-table th:nth-child(3), td:nth-child(3) {
    display:none;
}

…and that promptly removed the author column completely. ofcourse, I had to inspect, see the th and td are the 3rd ones, find the nth-child selector etc. but thats the details.

However, this would impact all the table listings I would ever use. So, tried the same approach as before by defining body-classes in the listing page and including this in the .scss

.til-page .quarto-listing-table th:nth-child(3), td:nth-child(3) {
    display:none;
}

and that refused to work. Finally gaveup on that approach and decided to write a custom listing. That went the following.

First, wrote an til-listing.ejs

<div>
<table class="til-table">
    <thead>
        <th>
            Date
        </th>
        <th>
            Title
        </th>
    </thead>
    <tbody>
        <% for (const item of items) { %>
            <tr>
                <td>
                    <%= item['date'] %>
                </td>

                <td>
                    <a href="<%- item.path %>"><%= item.title %></a>
                 </td>
            </tr>
        <% } %>

    </tbody>
</table>
</div>

Modified the listing page to include this .ejs as the template. template: ../_themes/til-listing.ejs

then, included the following in the .scss to pad properly. this was iterative. first wrote the above without the class, the table was looking crowded so looked up how to add padding.

.til-table td {
    padding:0px 20px 10px 0px;
}

just played around with the numbers till i got a good looking table.

and, the listing page is changed. Categories is not working though. going to look into it next.

Update:

When Anand saw all this drama, he stepped in and changed the .ejs to this.

```{=html}
<div class="til-listing list">
<% for (const item of items) { %>
    <div class="til-item" <%= metadataAttrs(item) %>>
        <div class="til-item-header">
            <span class="til-item-date listing-date"><%= item['date'] %></dspan>
            <span class="til-item-categories">
                <% for (const c of item.categories) { %>
                    <span class="til-category listing-categories"><%= c %></span>
                <% } %>
            </span>
        </div>
        <div class="til-item-title"><a href="<%- item.path %>"><span class="listing-name"><%= item.title %></span></a></div>
    </div>
<% } %>
</div>

and added the following to .scss.

.til-item {
    margin: 20px 0;
}

.til-item-header {
    color: #888;
    font-size: 0.8em;
}

.til-category {
    text-transform: uppercase;
    color: #666;
    background: #eee;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 0px 5px;
    font-size: 0.7em;
}

notice the <%= metadataAttrs(item) %> and such stuff, which is the result of followng this part pf the quarto guide on enabling sorting for custom listings. That fixed the categories sorting too!