___ ___ _____ _ ( _`\ ( _`\ ( _ ) _ ( ) | (_(_)| |_) )| (_) |(_) ___ | |__ `\__ \ | ,__/'| _ || |/',__)| _ `\ ( )_) || | | | | || |\__, \| | | | `\____)(_) (_) (_)(_)(____/(_) (_) A PicoSSG tool

spaish.section

API for adding GitHub-style anchor links to section headings with automatic ID generation.

addId()

Method signature: addId({node: $section [, prefix = 'section']})

Adds an auto-generated ID to a heading element if it doesn't already have one.

Parameters

Description

DOM Requirements

Example

const heading = document.querySelector('h2');
// Adds ID like "section-my-heading-text"
spaish.section.addId({node: heading});

// Adds ID like "custom-my-heading-text"
spaish.section.addId({node: heading, prefix: 'custom'});

addIds()

Method signature: addIds([{prefix = 'section'}])

Adds auto-generated IDs to all headings on the page.

Parameters

Description

DOM Requirements

Example

spaish.section.addIds();
// Adds IDs to all headings using default prefix

spaish.section.addIds({prefix: 'docs'});
// Adds IDs using "docs" prefix

addAnchor()

Method signature: addAnchor([{nodes: $section}])

Adds a hover-activated anchor link to a heading element.

Parameters

Description

DOM Requirements

Example

const heading = document.querySelector('h2');
// Adds hover-activated # link to the heading
spaish.section.addAnchor({node: heading});

addAnchors()

Method signature: addAnchors()

Adds hover-activated anchor links to all headings on the page.

Parameters

None

Description

DOM Requirements

Example

// All headings will show # links on hover
spaish.section.addAnchors();

Behavior Notes

ID_PREFIX

Default: 'section'
The prefix used when generating IDs for headings.

HAS_SECTION_ANCHOR_FLAG_NAME

Default: 'hasSpaishSectionAnchor'
Data attribute name used to track which elements have anchors to prevent duplicates.

ANCHOR_TEXT

Default: '#'
The text content displayed in anchor links.