UI • v1.0.0

@synqro/summary

Génère automatiquement une table of contents avec tracking du scroll.

Scanne une zone de contenu pour détecter les headings, clone un template d'item et génère des liens cliquables avec smooth scroll. Un IntersectionObserver met en surbrillance le heading actif pendant le scroll.

Install • À coller dans Project Settings → Custom Code → Footer

HTML

<!-- [Synqro Labs] Summary -->
<script src="https://cdn.jsdelivr.net/npm/@synqro/summary@1/dist/index.min.js"></script>

Installation

1
Ajoute le script à ton projet Webflow. Va dans Project Settings → Custom Code → Footer Code et colle le snippet ci-dessus.
2
Ajoute les custom attributes sur les éléments concernés dans le Designer Webflow — voir le tableau ci-dessous.
3
Publie ton site. Le script s'initialise automatiquement au DOMContentLoaded.

Configuration

Sélectionne l'élément dans le Designer Webflow et ajoute ces custom attributes dans le panneau Element Settings.

Attribute	Value	Description
Required	`(empty) or ID`	Container pour les items générés. Ajoute un ID comme valeur pour pairer avec une zone de contenu spécifique.
Required	`(empty) or ID`	Zone de contenu de l'article. Doit matcher l'ID de la liste si tu utilises plusieurs summaries.
Required	`(empty)`	L'élément à l'intérieur du template d'item qui recevra le texte du titre.
	`h2 \| h3`	Niveau de titre à scanner. Par défaut : h2.
	`active`	Classe ajoutée à l'item actuellement visible. Par défaut : active.
	`80`	Offset de scroll en pixels — utile si tu as un header fixe.

Exemples

Table des matières basique

HTML

<div sl-summary-list>
    <div class="summary-item">
        <div sl-summary-text>Item template</div>
    </div>
</div>

<div sl-summary-content>
    <h2>First Section</h2>
    <p>Content...</p>
    <h2>Second Section</h2>
    <p>Content...</p>
</div>

Tips

Le template d'item à l'intérieur de sl-summary-list est cloné pour chaque titre trouvé.
Stylise l'état actif avec la classe active (combo class .summary-item.active en Webflow).
Utilise des IDs matchés (sl-summary-list="intro" + sl-summary-content="intro") si tu as plusieurs summaries sur la page.