Chapter 1: Foundation
Overview
Chapter overview content...
Core Concepts
Components
Component details...
Patterns
Pattern explanations...
Chapter 2: Advanced
Advanced topics...
Content Management
JavaScript components for active link highlighting and automatic table of contents generation.
Active Link Highlighter
Automatically highlights navigation links matching the current URL.
HTML
<!-- Navigation with active link highlighting -->
<nav
data-ss="active-link"
data-ss-active-link-class="active"
style="
display: flex;
gap: 8px;
padding: 16px;
background: var(--color_fill_secondary);
border-radius: 12px;
"
>
<a
href="/home"
style="
padding: 8px 16px;
border-radius: 6px;
text-decoration: none;
color: inherit;
"
>
Home
</a>
<a
href="/about"
style="
padding: 8px 16px;
border-radius: 6px;
text-decoration: none;
color: inherit;
"
>
About
</a>
<a
href="/services"
class="active"
style="
padding: 8px 16px;
border-radius: 6px;
text-decoration: none;
background: var(--color_fill_primary);
color: white;
"
>
Services
</a>
<a
href="/contact"
style="
padding: 8px 16px;
border-radius: 6px;
text-decoration: none;
color: inherit;
"
>
Contact
</a>
</nav>
<!-- Sidebar navigation -->
<aside
data-ss="active-link"
data-ss-active-link-class="is-current"
data-ss-active-link-skip=".skip-highlight"
style="
width: 200px;
padding: 16px;
background: var(--color_fill_secondary);
border-radius: 12px;
margin-top: 16px;
"
>
<ul style="list-style: none; padding: 0; margin: 0">
<li>
<a
href="/docs/intro"
style="
display: block;
padding: 10px 12px;
border-radius: 6px;
text-decoration: none;
color: inherit;
"
>
Introduction
</a>
</li>
<li>
<a
href="/docs/setup"
class="is-current"
style="
display: block;
padding: 10px 12px;
border-radius: 6px;
text-decoration: none;
background: rgba(
var(--color_fill_primary_rgb),
0.1
);
color: var(--color_fill_primary);
font-weight: 500;
"
>
Getting Started
</a>
</li>
<li>
<a
href="/docs/components"
style="
display: block;
padding: 10px 12px;
border-radius: 6px;
text-decoration: none;
color: inherit;
"
>
Components
</a>
</li>
<li>
<a
href="/docs/api"
style="
display: block;
padding: 10px 12px;
border-radius: 6px;
text-decoration: none;
color: inherit;
"
>
API Reference
</a>
</li>
<li>
<a
href="https://external.com"
class="ss-c-skip-highlight"
style="
display: block;
padding: 10px 12px;
border-radius: 6px;
text-decoration: none;
color: inherit;
opacity: 0.6;
"
>
External Link ↗
</a>
</li>
</ul>
</aside>Table of Contents Builder
Generates a table of contents from elements with
data-label
attributes. Integrates with ScrollSpyManager.
Introduction
Welcome to the documentation. This section covers the basics.
Getting Started
Follow these steps to begin using the library.
Installation
Install via npm or yarn.
Configuration
Configure your project settings.
Advanced Usage
Learn about advanced features and patterns.
HTML
<!-- TOC Builder initialization -->
<div
data-ss="toc-builder"
data-ss-toc-root="content-area"
data-ss-toc-container="toc-nav"
></div>
<div
style="display: grid; grid-template-columns: 1fr 250px; gap: 32px"
>
<!-- Main content with labeled sections -->
<div id="content-area">
<section data-label="Introduction" id="intro">
<h2>Introduction</h2>
<p>
Welcome to the documentation. This section covers the
basics.
</p>
</section>
<section data-label="Getting Started" id="getting-started">
<h2>Getting Started</h2>
<p>Follow these steps to begin using the library.</p>
<section data-label="Installation" id="installation">
<h3>Installation</h3>
<p>Install via npm or yarn.</p>
</section>
<section data-label="Configuration" id="configuration">
<h3>Configuration</h3>
<p>Configure your project settings.</p>
</section>
</section>
<section data-label="Advanced Usage" id="advanced">
<h2>Advanced Usage</h2>
<p>Learn about advanced features and patterns.</p>
</section>
</div>
<!-- Auto-generated TOC -->
<nav
id="toc-nav"
style="
position: sticky;
top: 20px;
padding: 20px;
background: var(--color_fill_secondary);
border-radius: 12px;
height: fit-content;
"
>
<h4
style="
margin: 0 0 16px;
font-size: 14px;
text-transform: uppercase;
opacity: 0.6;
"
>
On This Page
</h4>
<ul style="list-style: none; padding: 0; margin: 0">
<li>
<a
href="#intro"
style="
display: block;
padding: 6px 0;
text-decoration: none;
color: inherit;
border-left: 2px solid transparent;
padding-left: 12px;
"
>
Introduction
</a>
</li>
<li>
<a
href="#getting-started"
style="
display: block;
padding: 6px 0;
text-decoration: none;
color: var(--color_fill_primary);
border-left: 2px solid
var(--color_fill_primary);
padding-left: 12px;
font-weight: 500;
"
>
Getting Started
</a>
</li>
<li style="padding-left: 16px">
<a
href="#installation"
style="
display: block;
padding: 4px 0;
text-decoration: none;
color: inherit;
font-size: 14px;
opacity: 0.8;
"
>
Installation
</a>
</li>
<li style="padding-left: 16px">
<a
href="#configuration"
style="
display: block;
padding: 4px 0;
text-decoration: none;
color: inherit;
font-size: 14px;
opacity: 0.8;
"
>
Configuration
</a>
</li>
<li>
<a
href="#advanced"
style="
display: block;
padding: 6px 0;
text-decoration: none;
color: inherit;
border-left: 2px solid transparent;
padding-left: 12px;
"
>
Advanced Usage
</a>
</li>
</ul>
</nav>
</div>Nested Section Structure
The TOC builder supports nested sections with
data-level
attributes.
HTML
<!-- Deeply nested content structure -->
<article id="documentation">
<section data-label="Chapter 1" data-level="1">
<h1>Chapter 1: Foundation</h1>
<section data-label="Overview" data-level="2">
<h2>Overview</h2>
<p>Chapter overview content...</p>
</section>
<section data-label="Core Concepts" data-level="2">
<h2>Core Concepts</h2>
<section data-label="Components" data-level="3">
<h3>Components</h3>
<p>Component details...</p>
</section>
<section data-label="Patterns" data-level="3">
<h3>Patterns</h3>
<p>Pattern explanations...</p>
</section>
</section>
</section>
<section data-label="Chapter 2" data-level="1">
<h1>Chapter 2: Advanced</h1>
<p>Advanced topics...</p>
</section>
</article>
<!-- Generated TOC structure -->
<nav
class="ss-c-toc"
style="
padding: 20px;
background: var(--color_fill_secondary);
border-radius: 12px;
"
>
<ol style="margin: 0; padding-left: 20px">
<li>
<a href="#chapter-1">Chapter 1: Foundation</a>
<ol style="padding-left: 16px">
<li><a href="#overview">Overview</a></li>
<li>
<a href="#core-concepts">Core Concepts</a>
<ol style="padding-left: 16px">
<li><a href="#components">Components</a></li>
<li><a href="#patterns">Patterns</a></li>
</ol>
</li>
</ol>
</li>
<li><a href="#chapter-2">Chapter 2: Advanced</a></li>
</ol>
</nav>JavaScript API
Programmatic control of content management components.
JavaScript
<script>
// ActiveLinkHighlighter
import { ActiveLinkHighlighter } from "stylescape";
const highlighter = new ActiveLinkHighlighter(navElement, {
activeClass: "is-active",
skip: ".external-link",
matchExact: false, // Also match parent routes
matchHash: true, // Match URL hash
});
highlighter.refresh(); // Re-check active state
highlighter.setActive(linkElement); // Manually set active
// TableOfContentsBuilder
import { TableOfContentsBuilder } from "stylescape";
const tocBuilder = new TableOfContentsBuilder({
root: document.getElementById("content"),
container: document.getElementById("toc"),
labelAttribute: "data-label",
levelAttribute: "data-level",
scrollSpy: true,
smooth: true,
offset: 80,
});
tocBuilder.build(); // Generate TOC
tocBuilder.refresh(); // Rebuild after content changes
tocBuilder.destroy(); // Clean up
</script>