mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs: flatten table of contents hierarchy

Browse source
This commit is contained in:
Eric Liu 2022-08-06 14:02:53 -07:00
commit d4cf6577c9
2 changed files with 26 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

11
docs/src/layouts/ComponentLayout.svelte
View file

@ -100,12 +100,11 @@
<Row> <Row>
<Column class="prose"> <Column class="prose">
<div class="toc mobile"> <div class="toc mobile">
<h5>Table of Contents</h5> <h5>Examples</h5>
<slot name="aside" /> <slot name="aside" />
</div> </div>
<h2 id="usage">Usage</h2>
<slot /> <slot />
<h2 id="component-api">Component API</h2> <h3 id="component-api">Component API</h3>
<p> <p>
API documentation is API documentation is
<Link <Link
@ -143,7 +142,7 @@
<Column class="table" xlg="{4}" lg="{5}"> <Column class="table" xlg="{4}" lg="{5}">
<div class="toc"> <div class="toc">
<h5>Table of Contents</h5> <h5>Examples</h5>
<slot name="aside" /> <slot name="aside" />
</div> </div>
</Column> </Column>
@ -157,7 +156,8 @@
border-bottom: 1px solid var(--cds-ui-03); border-bottom: 1px solid var(--cds-ui-03);
} }
.toc h5 { :global(.toc h5) {
margin-top: var(--cds-spacing-06);
margin-bottom: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-03);
} }
@ -168,6 +168,7 @@
@media (max-width: 1056px) { @media (max-width: 1056px) {
.toc.mobile { .toc.mobile {
display: block; display: block;
margin-bottom: var(--cds-spacing-09);
} }
} }
</style> </style>

51
docs/svelte.config.js
View file

@ -188,41 +188,30 @@ module.exports = {
"</Layout_MDSVEX_DEFAULT>", "</Layout_MDSVEX_DEFAULT>",
`<div slot="aside"> `<div slot="aside">
<ul class="bx--list--unordered"> <ul class="bx--list--unordered">
<li class="bx--list__item">
<a class="bx--link" href="#usage">Usage</a>
<ul class="bx--list--unordered bx--list--nested">
${toc ${toc
.map((item) => { .map(
return ` (item) =>
<li class="bx--list__item"> `<li class="bx--list__item"><a class="bx--link" href="\#${item.id}">${item.text}</a></li>`
<a class="bx--link" href="\#${item.id}">${item.text}</a> )
</li>`;
})
.join("")} .join("")}
</ul> <h5>Component API</h5>
<li class="bx--list__item">
<a class="bx--link" href="#props">Props</a>
</li> </li>
<li class="bx--list__item"> <li class="bx--list__item">
<a class="bx--link" href="#component-api">Component API</a> <a class="bx--link" href="#typedefs">Typedefs</a>
<ul class="bx--list--unordered bx--list--nested"> </li>
<li class="bx--list__item"> <li class="bx--list__item">
<a class="bx--link" href="#props">Props</a> <a class="bx--link" href="#slots">Slots</a>
</li> </li>
<li class="bx--list__item"> <li class="bx--list__item">
<a class="bx--link" href="#typedefs">Typedefs</a> <a class="bx--link" href="#forwarded-events">Forwarded events</a>
</li> </li>
<li class="bx--list__item"> <li class="bx--list__item">
<a class="bx--link" href="#slots">Slots</a> <a class="bx--link" href="#dispatched-events">Dispatched events</a>
</li> </li>
<li class="bx--list__item"> <li class="bx--list__item">
<a class="bx--link" href="#forwarded-events">Forwarded events</a> <a class="bx--link" href="#rest-props">restProps</a>
</li>
<li class="bx--list__item">
<a class="bx--link" href="#dispatched-events">Dispatched events</a>
</li>
<li class="bx--list__item">
<a class="bx--link" href="#rest-props">restProps</a>
</li>
</ul>
</li> </li>
</ul> </ul>
</div> </div>