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

21
docs/svelte.config.js
View file

@ -188,22 +188,13 @@ module.exports = {
"</Layout_MDSVEX_DEFAULT>",
`<div slot="aside">
<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
.map((item) => {
return `
<li class="bx--list__item">
<a class="bx--link" href="\#${item.id}">${item.text}</a>
</li>`;
})
.map(
(item) =>
`<li class="bx--list__item"><a class="bx--link" href="\#${item.id}">${item.text}</a></li>`
)
.join("")}
</ul>
</li>
<li class="bx--list__item">
<a class="bx--link" href="#component-api">Component API</a>
<ul class="bx--list--unordered bx--list--nested">
<h5>Component API</h5>
<li class="bx--list__item">
<a class="bx--link" href="#props">Props</a>
</li>
@ -223,8 +214,6 @@ module.exports = {
<a class="bx--link" href="#rest-props">restProps</a>
</li>
</ul>
</li>
</ul>
</div>
</Layout_MDSVEX_DEFAULT>`
),