feat(daffio): render design component guide and API docs with tabs

[griest024]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/graycoreio/daffodil/blob/develop/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Fixes: #3366

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

• docs(design): tag examples with @example #3392
• pull out doc title and first paragraph
• [FEAT] Implement table of contents for all doc kinds #3420

[griest024]

@xelaint lmk what you think about the implementation and I'll fix the tests if there are no changes that need to be made

[xelaint]

@griest024

1. Can we hide API usage examples, specifically only for @daffodil/design? I'll be updating docs to include usage examples in the readme files.
2. Can we move the title and first paragraph description to be placed outside of the tabs?
3. Table of contents should update dynamically depending on which tab you're on.
4. Currently, each component/directive title in the API tabs is being rendered as a <h1>. There can only be one <h1> on a page. They should probably be <h3> or below.

[xelaint]

@griest024 Clicking on Usage in the TOC directs me to the Usage tab instead of the Usage heading.

[griest024]

Yeah toc is broken with tabs. It's something that needs to be fixed in dgeni/daffio though, it's not a problem with the tabs component

[xelaint]

Yeah toc is broken with tabs. It's something that needs to be fixed in dgeni/daffio though, it's not a problem with the tabs component

API headings don't have ids associated with them, so the TOC in the API tag doesn't work. Is this related?

[griest024]

Yeah toc is broken with tabs. It's something that needs to be fixed in dgeni/daffio though, it's not a problem with the tabs component

API headings don't have ids associated with them, so the TOC in the API tag doesn't work. Is this related?

yes

[griest024]

@xelaint ready for re-review

[xelaint]

These don't need to be linked

[xelaint]

The long description is no longer styled correctly because of the extra div. Is it possible to do this:

<h1>{{doc().title}}</h1>
	<p [innerHtml]="doc().longDescription | safe"></p>

so this outputs:

<h1>Title</h1>
<p>Description</p>

instead of:

<h1>Title</h1>
<div><p>Description</p></div>

[griest024]

These don't need to be linked

Do you specifically want them to not be links? I thought it would be handy for them to be links

[xelaint]

These don't need to be linked

Do you specifically want them to not be links? I thought it would be handy for them to be links

They link to a separate api page, but this view is already the api tab view. Don't think that makes sense since we got rid of a separate api page for design?

[griest024]

These don't need to be linked

Do you specifically want them to not be links? I thought it would be handy for them to be links

They link to a separate api page, but this view is already the api tab view. Don't think that makes sense since we got rid of a separate api page for design?

I see what you're saying but I thought the API tab would display a trimmed down version of the API and then the API page would have everything includes examples and source block, etc. I'll remove the links if you don't want them; I don't have a strong preference for them.

[xelaint]

These don't need to be linked

Do you specifically want them to not be links? I thought it would be handy for them to be links

They link to a separate api page, but this view is already the api tab view. Don't think that makes sense since we got rid of a separate api page for design?

I see what you're saying but I thought the API tab would display a trimmed down version of the API and then the API page would have everything includes examples and source block, etc. I'll remove the links if you don't want them; I don't have a strong preference for them.

No, the API tab should display everything, except examples.

There's not need for separate pages. So pages like /docs/design/api, docs/design/api/accordion, etc don't need to exist.

[griest024]

@xelaint I've made all your requested changes