How to have a table of content in page which is using EJS Template

[shravanngoswamii]

Description

Is there anyway I can get the table of content in a page that is generating from this setup?

index.qmd:

---
pagetitle: Publications by Year
toc: true
toc-depth: 3
listing:
  id: yearwise-publications
  template: templates/years.ejs
  contents: assets/data/by-year.yaml
---

## Publications by Year

::: {#yearwise-publications}

:::

templates/years.ejs:

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

### <%- item.year %> {#<%- item.year %>}

<% for (const pubdata of item.data) { %>

::: {#<%- pubdata.id %> .entry-block }

<% if (pubdata.title && pubdata.url) { %>
#### [<%- pubdata.title %>](<%- pubdata.url %>)
<% } else { %>
#### <%- pubdata.title %>
<% } %>

<% 
// Extract and format fields
const fields = {
    author: pubdata.author_formatted || '',
    editor: pubdata.editor_formatted || '',
    booktitle: pubdata.booktitle || '',
    journal: pubdata.journal || '',
    institution: pubdata.institution || '',
    school: pubdata.school || '',
    address: pubdata.address || '',
    location: pubdata.location || '',
    publisher: pubdata.publisher || '',
    series: pubdata.series || '',
    doi: pubdata.doi || '',
    isbn: pubdata.isbn || '',
    issn: pubdata.issn || '',
    acmid: pubdata.acmid || '',
    pubmedid: pubdata.pubmedid || '',
    note: pubdata.note || '',
    day: pubdata.day || '',
    month: pubdata.month || '',
    abstract: pubdata.abstract || '',
    annote: pubdata.annote || ''
};

// Construct the entry text
const entry_text_parts = [
    fields.author ? `${fields.author}, ` : '',
    fields.day ? `${fields.day}, ` : '',
    fields.month ? `${fields.month} ` : '',
    `${pubdata.year}. `,
    fields.booktitle ? `(In ${fields.booktitle}). ` : '',
    fields.editor ? `Edited by ${fields.editor}. ` : '',
    fields.journal ? `(${fields.journal}). ` : '',
    fields.institution ? `${fields.institution}, ` : '',
    fields.school ? `${fields.school}, ` : '',
    fields.address ? `${fields.address}. ` : '',
    fields.location ? `${fields.location}. ` : '',
    fields.publisher ? `${fields.publisher}. ` : '',
    fields.series ? `${fields.series}. ` : '',
    fields.doi ? `**DOI**: ${fields.doi}. ` : '',
    fields.isbn ? `**ISBN**: ${fields.isbn}. ` : '',
    fields.issn ? `**ISSN**: ${fields.issn}. ` : '',
    fields.acmid ? `**ACM ID**: ${fields.acmid}. ` : '',
    fields.pubmedid ? `**PubMed ID**: ${fields.pubmedid}. ` : '',
    fields.note ? `**Note**: ${fields.note}. ` : ''
].join('').trim();
%>

<%- entry_text_parts %>

<% if (fields.abstract || pubdata.url) { %>
::: {.tab-set}
<% if (fields.abstract) { %>
[Abstract[▼]{#arrow-abstract-<%- pubdata.id %> .arrow .arrow-down}]{.tab-link onclick="toggleAbstract('abstract-<%- pubdata.id %>')"}
<% } %> <% if (pubdata.url) { %> [URL](<%- pubdata.url %>){.tab-link}
<% } %>
:::

<% if (fields.abstract) { %>
::: {#abstract-<%- pubdata.id %> .abstract-content}
<%= fields.abstract %>
:::
<% } %>
<% } %>

<% if (fields.annote) { %>
**Comment:** <%= fields.annote %>
<% } %>

:::

<% } %>
<% } %>

sample yaml data:

- year: '2022'
  data:
  - id: AllWenMarEtal22
    type: article
    cat: deep
    title: Sparse MoEs meet Efficient Ensembles
    journal: TMLR
    year: '2022'
    url: .
    abstract: '...'
    annote: <a href="https://github.com/google-research/vmoe">Code</a>
    author_formatted: James Urquhart Allingham, Florian Wenzel, Zelda E Mariet, Basil
      Mustafa, Joan Puigcerver, Neil Houlsby, Ghassen Jerfel, Vincent Fortuin, Balaji
      Lakshminarayanan, Jasper Snoek, Dustin Tran, Carlos Riquelme Ruiz, Rodolphe
      Jenatton
    editor_formatted: ''

[cderv]

By TOC, do you mean a table of content of the headers inside the custom listing page ? Or something different for the content of the listings in assets/data/by-year.yaml ?

Can you try build a reproducible example as a github repo for example ? This would help us play with the example and understand what you want.

[shravanngoswamii]

By TOC, do you mean a table of content of the headers inside the custom listing page ?

Yes, by TOC, I mean table of content of headers!

Can you try build a reproducible example as a github repo for example ? This would help us play with the example and understand what you want.

I have extracted a small data of site and made this reproducible repo!
Repo: https://github.com/shravanngoswamii/toc
Preview: https://shravanngoswamii.github.io/toc/

Those years with <h3> tag should appear in table of content, and they do appear if I use them directly without EJS like see here, I have generated a sample page similar to what my EJS is generating!
Code: https://github.com/shravanngoswamii/toc/blob/main/markdown.qmd
Preview: https://shravanngoswamii.github.io/toc/markdown.html

I think other Quarto features works fine with pages generating from EJS Templates, so table of content should also appear!

Thanks, @cderv!

[cderv]

I believe the TOC is made only for top level headers. Here, the headers are in a div.

Oh this is highly possible! I don't remember who is responsible for TOC creation to check. it could be pandoc, or we may have been taking over IDK.

My other thinking is that, if Pandoc is the one doing the TOC, maybe the ejs content come in too late and it is not in the TOC at all, even if there were no div.

Possible this is a limitation where EJS content can't be in TOC currently. These different scenarios should be checked and tested

[shravanngoswamii]

I believe the TOC is made only for top level headers.
Here, the headers are in a div.

If that's the case then how this is working, my EJS is generating exactly same content as this:
Code: https://github.com/shravanngoswamii/toc/blob/main/markdown.qmd
Preview: https://shravanngoswamii.github.io/toc/markdown.html

See here, in this both Publication by Year and Test are appearing in table of content and EJS content is coming in third div and any heading in that are not appearing in table of content:

---
pagetitle: Publications by Year
toc: true
toc-depth: 3
listing:
  id: yearwise-publications
  template: years.ejs
  contents: by-year.yaml
---

## Publications by Year

::: {.test}
## Test
:::

::: {#yearwise-publications}

:::

[cderv]

See here, in this both Publication by Year and Test are appearing in table of content and EJS content is coming in third div and any heading in that are not appearing in table of content

Thanks for your testing. It would confirm that this is EJS specific, probably having TOC generated before any EJS content being inserting and so any included HEADER are missing.

But also, please to try a bit more content in your div because a Div just above a Header in Pandoc is not a div in html. Any attributes is merged.

This emulates what happens in Quarto

❯ quarto pandoc -t html --section-divs
## Publications by Year

::: {.test}
## Test
:::
^Z
<section id="publications-by-year" class="level2">
<h2>Publications by Year</h2>
</section>
<section id="test" class="level2 test">
<h2>Test</h2>
</section>

You see that div.test does not exist in resulting HTML.

[cderv]

Looking at how we handle EJS rendering, I don't think the TOC will contain any headers from the EJS content 🤔

I'll try to look closely into this based on your example. Thanks

[shravanngoswamii]

Ok, thanks! Let me know if this is solved! For now, I am using a custom table of content!