diff --git a/docs/_includes/grouped-pages.njk b/docs/_includes/grouped-pages.njk index 49bfbdff6..84cf846f5 100644 --- a/docs/_includes/grouped-pages.njk +++ b/docs/_includes/grouped-pages.njk @@ -4,7 +4,7 @@ {% for category, pages in allPages | groupByTags(categories) -%}

{{ category | getCategoryTitle(categories) }}

{%- for page in pages -%} - {%- if not page.data.parent -%} + {%- if not page.data.parent or listChildren -%} {% include "page-card.njk" %} {%- endif -%} {%- endfor -%} diff --git a/docs/_layouts/overview.njk b/docs/_layouts/overview.njk new file mode 100644 index 000000000..848ad9fbe --- /dev/null +++ b/docs/_layouts/overview.njk @@ -0,0 +1,25 @@ +--- +layout: page-outline +tags: ["overview"] +--- +{% set forTag = forTag or (page.url | split('/') | last) %} +{% if description %} +
{{ description | markdown | safe }}
+{% endif %} + +
+ + + +
+ +{% set allPages = collections[forTag] %} +{% include "grouped-pages.njk" %} + + + + +{% if content | trim %} +
{# Temp fix for spacing issue #} +{{ content | safe }} +{% endif %} diff --git a/docs/_utils/filters.js b/docs/_utils/filters.js index c58ee43bd..a62187fe1 100644 --- a/docs/_utils/filters.js +++ b/docs/_utils/filters.js @@ -38,8 +38,12 @@ export function getTitleFromUrl(url, collection) { return item?.data.title || ''; } +export function split(text, separator) { + return (text + '').split(separator).filter(Boolean); +} + export function breadcrumbs(url, { withCurrent = false } = {}) { - const parts = url.split('/').filter(Boolean); + const parts = split(url, '/'); const ret = []; while (parts.length) { diff --git a/docs/assets/scripts/filter.js b/docs/assets/scripts/filter.js new file mode 100644 index 000000000..11d9d8190 --- /dev/null +++ b/docs/assets/scripts/filter.js @@ -0,0 +1,25 @@ +function updateResults(input) { + const filter = input.value.toLowerCase().trim(); + let filtered = Boolean(filter); + + for (let grid of document.querySelectorAll('.index-grid')) { + grid.classList.toggle('filtered', filtered); + + for (let item of grid.querySelectorAll('a:has(> wa-card)')) { + let isMatch = true; + + if (filter) { + const content = item.textContent.toLowerCase() + ' ' + (item.getAttribute('data-keywords') + ' '); + isMatch = content.includes(filter); + } + + item.hidden = !isMatch; + } + } +} + +document.documentElement.addEventListener('wa-input', e => { + if (e.target?.matches('#block-filter wa-input')) { + updateResults(e.target); + } +}); diff --git a/docs/assets/styles/filter.css b/docs/assets/styles/filter.css new file mode 100644 index 000000000..0a0ba92c5 --- /dev/null +++ b/docs/assets/styles/filter.css @@ -0,0 +1,37 @@ +wa-card#drawer-card::part(header) { + --spacing: 0; + justify-content: flex-end; + overflow: hidden; +} + +#block-filter { + margin-block-end: var(--wa-space-xl); +} + +.index-grid.filtered { + h2 { + /* Hide headings while filtering */ + display: none; + } + + &:not(:has(> a:not([hidden]))) { + /* We’re filtering and there are no results */ + + &::before { + content: var(--empty-message); + grid-column: 1 / -1; + color: var(--wa-color-on-quiet); + font-style: italic; + font-weight: var(--wa-font-weight-action); + } + + /* Show empty state when there's a search filter and no results */ + &[data-empty] { + --empty-message: attr(data-empty); + } + + &:not([data-empty]) { + --empty-message: 'No results'; + } + } +} diff --git a/docs/docs/components/index.njk b/docs/docs/components/index.njk index 1bbfcc95f..f5d19614d 100644 --- a/docs/docs/components/index.njk +++ b/docs/docs/components/index.njk @@ -1,7 +1,7 @@ --- title: Components description: Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome. -layout: page-outline +layout: overview categories: - actions - feedback: 'Feedback & Status' @@ -12,70 +12,3 @@ categories: - helpers: 'Utilities' override:tags: [] --- - -
- -
- -{% set allPages = collections.components %} -{% include "grouped-pages.njk" %} - - - - - - diff --git a/docs/docs/layout.njk b/docs/docs/layout.njk index 9807ca6e2..2721fd574 100644 --- a/docs/docs/layout.njk +++ b/docs/docs/layout.njk @@ -1,27 +1,7 @@ --- title: Layout -description: Browse Web Awesome's components and utilities for creating responsive web layouts. -layout: page-outline +description: Layout components and utility classes help you organize content that can adapt to any device or screen size. Browse the collection of responsive layout tools included in Web Awesome Pro. +layout: overview categories: ["components", "utilities"] +override:tags: [] --- - - - -

Layout components and utility classes help you organize content that can adapt to any device or screen size. Browse the collection of responsive layout tools included in Web Awesome Pro.

- -{% set allPages = collections.layout %} -{% include "grouped-pages.njk" %} diff --git a/docs/docs/native/index.njk b/docs/docs/native/index.njk index 5a1994e9e..696a02138 100644 --- a/docs/docs/native/index.njk +++ b/docs/docs/native/index.njk @@ -1,7 +1,7 @@ --- title: Native Styles description: Native Styles use your theme to style native HTML elements to match the look and feel of Web Awesome components. -layout: page-outline +layout: overview categories: ['forms', 'apps', 'content'] override:tags: [] --- @@ -10,13 +10,7 @@ override:tags: [] Web Awesome works _with_ the platform, rather than trying to reinvent it. If all you need is styles, you don’t need to use new `` elements! We also provide styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit. -{% endmarkdown %} -{% set allPages = collections.native %} -{% include "grouped-pages.njk" %} - -
{# Temp fix for spacing issue #} -{% markdown %} ## Installation To use all Web Awesome page styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project: diff --git a/docs/docs/patterns/index.njk b/docs/docs/patterns/index.njk index abf73e782..fee915547 100644 --- a/docs/docs/patterns/index.njk +++ b/docs/docs/patterns/index.njk @@ -1,5 +1,8 @@ --- title: Patterns -description: Browse the library of customizable, framework-friendly web components included in Web Awesome. -layout: page-outline ---- \ No newline at end of file +description: Patterns are reusable solutions to common design problems. +layout: overview +categories: ["e-commerce"] +listChildren: true +override:tags: [] +--- diff --git a/docs/docs/theming/index.njk b/docs/docs/theming/index.njk index efc414092..80c5acec7 100644 --- a/docs/docs/theming/index.njk +++ b/docs/docs/theming/index.njk @@ -1,10 +1,6 @@ --- title: Theming -description: Browse the library of customizable, framework-friendly web components included in Web Awesome. +description: A theme is a collection of pre-defined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel. +layout: overview override:tags: [] --- - -

A theme is a collection of pre-defined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.

- -{% set allPages = collections.theming %} -{% include "grouped-pages.njk" %} diff --git a/docs/docs/theming/theming.json b/docs/docs/theming/theming.json index fd403437b..3526f7655 100644 --- a/docs/docs/theming/theming.json +++ b/docs/docs/theming/theming.json @@ -1,4 +1,7 @@ { "layout": "page-outline.njk", - "tags": ["theming"] + "tags": ["theming"], + "eleventyComputed": { + "icon": "theming/{{ page.fileSlug }}" + } } diff --git a/docs/docs/utilities/index.njk b/docs/docs/utilities/index.njk index 3fb496bc1..e5fa3888d 100644 --- a/docs/docs/utilities/index.njk +++ b/docs/docs/utilities/index.njk @@ -2,16 +2,11 @@ title: Style Utilities description: Web Awesome provides a few style utilities to customize styles in ways that cannot necessarily be described by semantic HTML. Some of these correspond to component attributes, but we also expose utility classes so you can apply these styles to native elements too. -layout: page-outline -override:tags: [] +layout: overview categories: ["layout"] +override:tags: [] --- -{% set allPages = collections.utilities %} -{% include "grouped-pages.njk" %} - - -
{# Temp fix for spacing issue #} {% markdown %} ## Installation