js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow Setting data-no-anchor at the View-Level (#1718)

Browse Source 
* adding option to set 11ty's `data-no-anchor` at view-level

* moving all `base.njk` initializations to before `<html>`

* updating anchor-headings.js transformer logic
This commit is contained in:
Brian Talbot
2025-11-05 14:06:56 -05:00
committed by GitHub
parent 0bead172fe
commit 3d4b3ada27
2 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/webawesome/docs/_includes/base.njk
View File

@@ -1,5 +1,8 @@
<!DOCTYPE html>
<html lang="en" data-fa-kit-code="38c11e3f20" data-version="{{ package.version }}" class="wa-cloak">
{% if hasAnchors == undefined %}{% set hasAnchors = true %}{% endif %}
{% if hasBanner == undefined %}{% set hasBanner = true %}{% endif %}
{% if hasGeneratedTitle == undefined %}{% set hasGeneratedTitle = true %}{% endif %}
<html lang="en" data-fa-kit-code="38c11e3f20" data-version="{{ package.version }}" class="wa-cloak"{% if hasAnchors == false %} data-no-anchor{% endif %}>
<head>
{% include 'head.njk' %}
<meta name="theme-color" content="#f36944">
@@ -27,8 +30,6 @@
</script>
</head>
<body class="layout-{{ layout | stripExtension }} page-{{ pageClass or page.fileSlug or 'home' }}{{ ' page-wide' if wide }}">
{% if hasBanner == undefined %}{% set hasBanner = true %}{% endif %}
{% if hasGeneratedTitle == undefined %}{% set hasGeneratedTitle = true %}{% endif %}
{% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true, 'mobile-breakpoint': 1180, 'disable-sticky': 'banner' } %}
{% set waPageAttributes = waPageAttributes or {} %}

18
packages/webawesome/docs/_transformers/anchor-headings.js
View File

@@ -35,9 +35,23 @@ export function anchorHeadingsTransformer(options = {}) {
return doc;
}
// Look for headings
let selector = `:is(${options.headingSelector}):not([data-no-anchor], [data-no-anchor] *)`;
// Check if the document or container has data-no-anchor (view-level)
const hasNoAnchorOnDocument = doc.querySelector('html')?.hasAttribute('data-no-anchor') || false;
const hasNoAnchorOnContainer = container.closest('[data-no-anchor]') !== null;
// If view-level data-no-anchor is set, skip processing all headings
if (hasNoAnchorOnDocument || hasNoAnchorOnContainer) {
return doc;
}
// Look for headings (selector excludes headings with data-no-anchor attribute)
let selector = `:is(${options.headingSelector}):not([data-no-anchor])`;
container.querySelectorAll(selector).forEach(heading => {
// Skip if heading is a descendant of an element with data-no-anchor
// (selector already excludes headings with the attribute directly)
if (heading.closest('[data-no-anchor]') !== null) {
return;
}
const hasAnchor = heading.querySelector('a');
const existingId = heading.getAttribute('id');
const clone = parse(heading.outerHTML);