1

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?

AquaGeneral
  • 155
  • 1
  • 19
  • 1
    I spent hours trying to fix it. I thought I'd come to a true solution when I started making the project also use Express (Harp was mounted). I could then use a DOMParser library for NodeJS and feed that to the documentation page. It all seemed to be working well, but then I realized when it comes down to using the `harp compile` command, none of this Express/Node specific logic is actually available to Harp at compile time :X. – AquaGeneral Mar 08 '16 at 10:01
  • maybe because you need to use `document`, not `Document`? – alexey Mar 15 '16 at 18:47
  • Lower case `document` is null when using Harp, and upper case `Document` doesn't exist/isn't defined when using Harp. – AquaGeneral Mar 16 '16 at 00:35

1 Answers1

1

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>
Alice Tribuleva
  • 33
  • 2
  • 8
  • 1
    I must've seen your response possibly the day you responded but I completely forgot to check it again. Performing the DOM operations on the client side is a decent solution but I really would prefer it to be done at build time. In the next few days I will continue to looking into if I can make any hacks in HarpJS to make this do-able at buildtime. – AquaGeneral Feb 14 '18 at 02:53