CODEWITHSUNDEEP
pugharp
AquaGeneral
AquaGeneral

Reputation: 155

Generating a Table Of Contents with Harp

I'm trying to create a automatically generated table of contents in my documentation page. Basically I need to go through the documentation text, find the elements I'm interested in by name and add those to the table of contents accordingly. It should also link directly to the elements.

I've placed the contents of the documentation into _documentationBase.jade. There is then a documentation.jade page that will add the table of contents and the documentation itself. What I am stuck on is I want to get a DOM represntation of the partial _documentationBase.jade.

The partial gives me a big string, and to find the parts I want out of that I want it to be a Document so I can call things like getElementsByName and more. To create a DOM object out of the string, it's possible to use the following: - Document: new Document().createElement('div').innerHTML = ...; - DOMParser: new DOMParser().parseFromString(...).

Constructing a JS Document or DOMParser as unbuffered code in Jade results in the following error:

TypeError - Document is not a function

So what is the best way to go about this? I could easily make the table of contents on the client side, but that really is not a good use of Harp. I'm guessing there's possibly some much more simple way to go about this?

Upvotes: 1

Views: 236

Answers (1)

Alice Tribuleva
Alice Tribuleva

Reputation: 33

I haven't found an elegant built-in solution so far, but here's what worked for me. Would love to hear back on any suggestions.

I use a flag in the local JSON which is easier accessible from the EJS (or Pug) layout template, and all the DOM manipulations happen on the client side.

  ...

  <% if (references) { %>
    <script>
      // do something
    </script>
  <% } %>

  </body>
</html>

Upvotes: 1

Related Questions