## 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.

- Introduction
- Getting Started
- Components
- API Reference
- External Link ↗

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="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.

# Chapter 1: Foundation

## Overview

Chapter overview content...

## Core Concepts

### Components

Component details...

### Patterns

Pattern explanations...

# Chapter 2: Advanced

Advanced topics...

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="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>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!