From f4a63f9e229a90894ff1d42427891bab327131d9 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 3 Jun 2025 15:28:11 -0400 Subject: [PATCH] Simplify color variants docs (#1023) * remove * simplify --- .../webawesome/docs/_data/componentsBy.js | 43 --------- .../docs/components/cheatsheet/cheatsheet.js | 76 ---------------- .../docs/docs/components/cheatsheet/index.njk | 89 ------------------- .../webawesome/docs/docs/utilities/color.md | 10 +-- 4 files changed, 5 insertions(+), 213 deletions(-) delete mode 100644 packages/webawesome/docs/_data/componentsBy.js delete mode 100644 packages/webawesome/docs/docs/components/cheatsheet/cheatsheet.js delete mode 100644 packages/webawesome/docs/docs/components/cheatsheet/index.njk diff --git a/packages/webawesome/docs/_data/componentsBy.js b/packages/webawesome/docs/_data/componentsBy.js deleted file mode 100644 index a40340286..000000000 --- a/packages/webawesome/docs/_data/componentsBy.js +++ /dev/null @@ -1,43 +0,0 @@ -import components from './components.js'; - -const by = { - attribute: {}, - slot: {}, - event: {}, - method: {}, - cssPart: {}, - cssProperty: {}, -}; - -function getAll(component, type) { - let prop = type + 's'; - if (type === 'cssProperty') { - prop = 'cssProperties'; - } - - return component[prop] ?? []; -} - -for (const componentName in components) { - const component = components[componentName]; - - for (const type of ['attribute', 'slot', 'event', 'method', 'cssPart', 'cssProperty']) { - for (const item of getAll(component, type)) { - by[type][item.name] ??= []; - by[type][item.name].push(component); - } - } -} - -// Sort by descending number of components -const sortByLengthDesc = (a, b) => b[1].length - a[1].length; - -for (const key in by) { - by[key] = sortObject(by[key], sortByLengthDesc); -} - -export default by; - -function sortObject(obj, sorter) { - return Object.fromEntries(Object.entries(obj).sort(sorter)); -} diff --git a/packages/webawesome/docs/docs/components/cheatsheet/cheatsheet.js b/packages/webawesome/docs/docs/components/cheatsheet/cheatsheet.js deleted file mode 100644 index a52adb275..000000000 --- a/packages/webawesome/docs/docs/components/cheatsheet/cheatsheet.js +++ /dev/null @@ -1,76 +0,0 @@ -let url = new URL(location); -const pushedURL = false; - -const matchers = { - default(textContent, query) { - return textContent.includes(query); - }, - - i(textContent, query) { - return textContent.toLowerCase().includes(query.toLowerCase()); - }, - - regexp(textContent, query) { - query.lastIndex = 0; - return query.test(textContent); - }, -}; - -matchers.iregexp = matchers.regexp; // i is baked into the query - -function filterByName(value) { - const previousFilter = url.searchParams.get('name') || ''; - url = new URL(location); - - if (value) { - const isRegexp = name_search_regexp.checked; - const i = !name_search_i.checked; - const query = isRegexp ? new RegExp(value, 'gmsv' + (i ? 'i' : '')) : value; - const matcherId = (i ? 'i' : '') + (isRegexp ? 'regexp' : ''); - const matcher = matchers[matcherId] ?? matchers.default; - - for (const th of document.querySelectorAll('table tbody th:first-child')) { - const tr = th.parentNode; - const matches = matcher(th.textContent, query); - tr.toggleAttribute('hidden', !matches); - } - url.searchParams.set('name', value); - - if (matcherId) { - url.searchParams.set('match', matcherId); - } else { - url.searchParams.delete('match'); - } - } else { - for (const tr of document.querySelectorAll('table tbody tr[hidden]')) { - tr.removeAttribute('hidden'); - } - url.searchParams.delete('name'); - url.searchParams.delete('match'); - } - - if (value !== previousFilter) { - history[pushedURL ? 'replaceState' : 'pushState'](null, '', url); - } - - // Update heading counts - for (const h2 of document.querySelectorAll('h2:has(+ table)')) { - const count = h2.querySelector('.count'); - if (!count) continue; - const table = h2.nextElementSibling; - const visibleRows = table.querySelectorAll('tbody tr:not([hidden])').length; - count.textContent = visibleRows; - const outlineLink = document.querySelector(`#outline-standard a[href="#${h2.id}"]`); - if (outlineLink) { - // Why not just = h2.textContent? To skip the "Jump to heading" link - outlineLink.textContent = ''; - outlineLink.append(...[...h2.childNodes].slice(0, 3).map(n => n.cloneNode(true))); - } - } -} - -if (name_search.value) { - filterByName(name_search.value); -} - -name_search_group.addEventListener('input', e => filterByName(name_search.value)); diff --git a/packages/webawesome/docs/docs/components/cheatsheet/index.njk b/packages/webawesome/docs/docs/components/cheatsheet/index.njk deleted file mode 100644 index e7dde94c1..000000000 --- a/packages/webawesome/docs/docs/components/cheatsheet/index.njk +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Component Cheatsheet -layout: docs -unlisted: true ---- - - - -

- This page lists every bit of syntax used by every Web Awesome component and which components share it. - For these times when your memory is failing, or to simply explore the possibilities! -

- -
- Filter by name - - Case sensitive - Regular expression -
- - - - -{% for type, all in componentsBy -%} -{% set typeTitle = "CSS custom properties" if type == "cssProperty" else ("CSS parts" if type == "cssPart" else (type | title) + "s") %} -

- All {{ (all | keys).length }} - {{ typeTitle }} -

- - - - - - - - - {% for name, thingComponents in all -%} - - - - - {%- endfor %} -
NameComponents
{{ name }}{{ "()" if type == "method" }} - {% set componentLinks = [] %} - {% for component in thingComponents %} - {%- set link -%} - <{{ component.tagName }}> - {%- endset -%} - {# https://giuliachiola.dev/posts/add-items-to-an-array-in-nunjucks/ #} - {% set componentLinks = (componentLinks.push(link), componentLinks) %} - {%- endfor -%} - {% if thingComponents.length > 1 %} -
- {{ thingComponents.length }} components - {{ componentLinks | safe }} -
- {% else %} - {{ componentLinks | safe }} - {% endif %} -
- -{%- endfor %} diff --git a/packages/webawesome/docs/docs/utilities/color.md b/packages/webawesome/docs/docs/utilities/color.md index 7259e860c..91513d416 100644 --- a/packages/webawesome/docs/docs/utilities/color.md +++ b/packages/webawesome/docs/docs/utilities/color.md @@ -7,11 +7,11 @@ file: styles/utilities/variants.css Some Web Awesome components, like ``, allow you to change the color by using a `variant` attribute: -{% for component in componentsBy.attribute.variant %} -{% if component.fileSlug != "icon" or component.fileSlug != "icon-button" -%} -- <{{ component.tagName }}> -{%- endif %} -{%- endfor %} +- [``](/docs/components/badge) +- [``](/docs/components/button) +- [``](/docs/components/button-group) +- [``](/docs/components/callout) +- [``](/docs/components/tag) You can create the same effect on any element by using the color variant utility classes: