diff --git a/docs/_includes/grouped-pages.njk b/docs/_includes/grouped-pages.njk index 4f484fb91..a51506657 100644 --- a/docs/_includes/grouped-pages.njk +++ b/docs/_includes/grouped-pages.njk @@ -1,13 +1,13 @@ {# Cards for pages listed by category #} +
{% for category, pages in allPages | groupByTags(categories) -%} -
-

{{ category | capitalize }}

+

{{ category | getCategoryTitle(categories) }}

{%- for page in pages -%} - {%- if not page.data.unlisted -%} + {%- if not page.data.unlisted and not page.data.parent -%} {% include "page-card.njk" %} {%- endif -%} {%- endfor -%} -
{%- endfor -%} +
diff --git a/docs/_includes/page-card.njk b/docs/_includes/page-card.njk index c93fdf0ee..9b5f67f17 100644 --- a/docs/_includes/page-card.njk +++ b/docs/_includes/page-card.njk @@ -1,4 +1,4 @@ - +
{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %} diff --git a/docs/_utils/filters.js b/docs/_utils/filters.js index 367960baf..562f5cfa5 100644 --- a/docs/_utils/filters.js +++ b/docs/_utils/filters.js @@ -134,7 +134,24 @@ export function sort(arr, keys = ['data.order', 'data.title']) { }); } +/** + * Group an 11ty collection (or any array of objects with a `data.tags` property) by certain tags. + * @param {object[]} collection + * @param { Object | (string | Object)[]} [tags] The tags to group by. If not provided/empty, defaults to grouping by all tags. + * @returns { Object. } An object with keys for each tag, and an array of items for each tag. + */ export function groupByTags(collection, tags) { + if (!tags) { + // Default to grouping by union of all tags + tags = Array.from(new Set(collection.flatMap(item => item.data.tags))); + } else if (Array.isArray(tags)) { + // May contain objects of one-off tag -> label mappings + tags = tags.map(tag => (typeof tag === 'object' ? Object.keys(tag)[0] : tag)); + } else if (typeof tags === 'object') { + // tags is an object of tags to labels, so we just want the keys + tags = Object.keys(tags); + } + let ret = Object.fromEntries(tags.map(tag => [tag, []])); ret.other = []; @@ -162,3 +179,22 @@ export function groupByTags(collection, tags) { return ret; } + +export function getCategoryTitle(category, categories) { + let title; + if (Array.isArray(categories)) { + // Find relevant entry + // [{id: "Title"}, id2, ...] + title = categories.find(entry => typeof entry === 'object' && entry?.[category])?.[category]; + } else if (typeof categories === 'object') { + // {id: "Title", id2: "Title 2", ...} + title = categories[category]; + } + + if (title) { + return title; + } + + // Capitalized + return category.charAt(0).toUpperCase() + category.slice(1); +} diff --git a/docs/docs/components/animated-image.md b/docs/docs/components/animated-image.md index 49e894386..2f97e649c 100644 --- a/docs/docs/components/animated-image.md +++ b/docs/docs/components/animated-image.md @@ -1,7 +1,8 @@ --- title: Animated Image description: A component for displaying animated GIFs and WEBPs that play and pause on interaction. -tags: component +tags: [imagery, niche] +icon: animated-image --- ```html {.example} diff --git a/docs/docs/components/animation.md b/docs/docs/components/animation.md index 013e145f1..8865f76c5 100644 --- a/docs/docs/components/animation.md +++ b/docs/docs/components/animation.md @@ -1,7 +1,8 @@ --- title: Animation description: Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. -tags: component +tags: [helpers, primitives] +icon: animation --- To animate an element, wrap it in `` and set an animation `name`. The animation will not start until you add the `play` attribute. Refer to the [properties table](#properties) for a list of all animation options. @@ -196,4 +197,3 @@ Animations won't play until you apply the `play` attribute. You can omit it init animation.play = true; }); -``` diff --git a/docs/docs/components/avatar.md b/docs/docs/components/avatar.md index 5c4081f07..3f16ddfc3 100644 --- a/docs/docs/components/avatar.md +++ b/docs/docs/components/avatar.md @@ -1,7 +1,8 @@ --- title: Avatar description: Avatars are used to represent a person or object. -tags: component +tags: [imagery, apps, content] +icon: avatar --- By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and images. You should always provide a `label` for assistive devices. diff --git a/docs/docs/components/badge.md b/docs/docs/components/badge.md index 517ca7951..abc4a7020 100644 --- a/docs/docs/components/badge.md +++ b/docs/docs/components/badge.md @@ -1,7 +1,8 @@ --- title: Badge description: Badges are used to draw attention and display statuses or counts. -tags: component +tags: [feedback, content] +icon: badge --- ```html {.example} @@ -127,4 +128,3 @@ When including badges in menu items, use the `suffix` slot to make sure they're Comments 4 Replies 12 -``` diff --git a/docs/docs/components/breadcrumb.md b/docs/docs/components/breadcrumb.md index b08bc59fd..6646f3a5b 100644 --- a/docs/docs/components/breadcrumb.md +++ b/docs/docs/components/breadcrumb.md @@ -1,7 +1,8 @@ --- title: Breadcrumb description: Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy. -tags: component +tags: [navigation] +icon: breadcrumb --- Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation. @@ -171,4 +172,3 @@ Alternatively, you can place dropdown menus in a prefix or suffix slot. -``` diff --git a/docs/docs/components/button-group.md b/docs/docs/components/button-group.md index 24a00887e..f70bce8d5 100644 --- a/docs/docs/components/button-group.md +++ b/docs/docs/components/button-group.md @@ -1,7 +1,8 @@ --- title: Button Group description: Button groups can be used to group related buttons into sections. -tags: component +tags: [actions, forms, apps] +icon: button-group --- ```html {.example} diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md index ec1b03b75..04f48c63c 100644 --- a/docs/docs/components/button.md +++ b/docs/docs/components/button.md @@ -1,8 +1,9 @@ --- title: Button description: Buttons represent actions that are available to the user. -tags: component +tags: [actions, forms] native: button +icon: button --- ```html {.example} diff --git a/docs/docs/components/callout.md b/docs/docs/components/callout.md index d06e4243e..7e1863950 100644 --- a/docs/docs/components/callout.md +++ b/docs/docs/components/callout.md @@ -1,7 +1,8 @@ --- title: Callout description: Callouts are used to display important messages inline. -tags: component +tags: [feedback, content] +icon: callout --- ```html {.example} diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md index 527c9d028..d91e09252 100644 --- a/docs/docs/components/card.md +++ b/docs/docs/components/card.md @@ -1,7 +1,8 @@ --- title: Card description: Cards can be used to group related subjects in a container. -tags: component +tags: [organization, layout] +icon: card --- ```html {.example} diff --git a/docs/docs/components/carousel-item.md b/docs/docs/components/carousel-item.md index e9049375c..6fb06cce8 100644 --- a/docs/docs/components/carousel-item.md +++ b/docs/docs/components/carousel-item.md @@ -3,6 +3,7 @@ title: Carousel Item description: A carousel item represent a slide within a carousel. tags: component parent: carousel +icon: carousel-item --- ```html {.example} diff --git a/docs/docs/components/carousel.md b/docs/docs/components/carousel.md index 4de87be2b..40a1abeec 100644 --- a/docs/docs/components/carousel.md +++ b/docs/docs/components/carousel.md @@ -1,7 +1,8 @@ --- title: Carousel description: Carousels display an arbitrary number of content slides along a horizontal or vertical axis. -tags: component +tags: [imagery, disclosure] +icon: carousel --- ```html {.example} diff --git a/docs/docs/components/checkbox.md b/docs/docs/components/checkbox.md index ecbe6e8bb..d7335f96e 100644 --- a/docs/docs/components/checkbox.md +++ b/docs/docs/components/checkbox.md @@ -1,7 +1,7 @@ --- title: Checkbox description: Checkboxes allow the user to toggle an option on or off. -tags: component +tags: [inputs, forms] native: checkbox --- @@ -93,4 +93,4 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi }); }); -``` \ No newline at end of file +``` diff --git a/docs/docs/components/color-picker.md b/docs/docs/components/color-picker.md index b9e8924d1..b002366d7 100644 --- a/docs/docs/components/color-picker.md +++ b/docs/docs/components/color-picker.md @@ -1,8 +1,9 @@ --- title: Color Picker description: Color pickers allow the user to select a color. -tags: component +tags: [inputs, forms] native: input +icon: color-picker --- ```html {.example} diff --git a/docs/docs/components/copy-button.md b/docs/docs/components/copy-button.md index e9ef88591..7e9e63cc5 100644 --- a/docs/docs/components/copy-button.md +++ b/docs/docs/components/copy-button.md @@ -1,7 +1,8 @@ --- title: Copy Button description: Copies data to the clipboard when the user clicks the button. -tags: component +tags: [actions, apps] +icon: copy-button --- ```html {.example} diff --git a/docs/docs/components/details.md b/docs/docs/components/details.md index e5fd30c28..07cd53b33 100644 --- a/docs/docs/components/details.md +++ b/docs/docs/components/details.md @@ -1,7 +1,8 @@ --- title: Details description: Details show a brief summary and expand to show additional content. -tags: component +tags: [organization, apps, content, disclosure] +icon: details native: details --- diff --git a/docs/docs/components/dialog.md b/docs/docs/components/dialog.md index 456c549b3..3df67d4b2 100644 --- a/docs/docs/components/dialog.md +++ b/docs/docs/components/dialog.md @@ -1,8 +1,10 @@ --- title: Dialog description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.' -tags: component +tags: [organization, apps, disclosure] +icon: dialog native: dialog +keywords: modal --- diff --git a/docs/docs/components/divider.md b/docs/docs/components/divider.md index 9836c9ad3..eb7abffcd 100644 --- a/docs/docs/components/divider.md +++ b/docs/docs/components/divider.md @@ -1,7 +1,8 @@ --- title: Divider description: Dividers are used to visually separate or group elements. -tags: component +tags: [organization, content, forms] +icon: divider --- ```html {.example} diff --git a/docs/docs/components/drawer.md b/docs/docs/components/drawer.md index 957b457bf..298a706e5 100644 --- a/docs/docs/components/drawer.md +++ b/docs/docs/components/drawer.md @@ -1,7 +1,8 @@ --- title: Drawer description: Drawers slide in from a container to expose additional options and information. -tags: component +tags: [organization, disclosure] +icon: drawer --- diff --git a/docs/docs/components/dropdown.md b/docs/docs/components/dropdown.md index 0029af991..99440a5c3 100644 --- a/docs/docs/components/dropdown.md +++ b/docs/docs/components/dropdown.md @@ -1,7 +1,8 @@ --- title: Dropdown description: 'Dropdowns expose additional content that "drops down" in a panel.' -tags: component +tags: [actions, apps] +icon: dropdown --- Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it. diff --git a/docs/docs/components/format-bytes.md b/docs/docs/components/format-bytes.md index 0d1379f6f..a8ef1b3d4 100644 --- a/docs/docs/components/format-bytes.md +++ b/docs/docs/components/format-bytes.md @@ -1,7 +1,8 @@ --- title: Format Bytes description: Formats a number as a human readable bytes value. -tags: component +tags: [helpers, content, inline] +icon: format-bytes --- ```html {.example} diff --git a/docs/docs/components/format-date.md b/docs/docs/components/format-date.md index 32be5307e..fc6bd9214 100644 --- a/docs/docs/components/format-date.md +++ b/docs/docs/components/format-date.md @@ -1,7 +1,8 @@ --- title: Format Date description: Formats a date/time using the specified locale and options. -tags: component +tags: [helpers, content, inline] +icon: format-date --- Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). No language packs are required. diff --git a/docs/docs/components/format-number.md b/docs/docs/components/format-number.md index d9e001877..ec061f071 100644 --- a/docs/docs/components/format-number.md +++ b/docs/docs/components/format-number.md @@ -1,7 +1,8 @@ --- title: Format Number description: Formats a number using the specified locale and options. -tags: component +tags: [helpers, content, inline] +icon: format-number --- Localization is handled by the browser's [`Intl.NumberFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat). No language packs are required. diff --git a/docs/docs/components/icon-button.md b/docs/docs/components/icon-button.md index 4219a7b42..e8490e915 100644 --- a/docs/docs/components/icon-button.md +++ b/docs/docs/components/icon-button.md @@ -1,7 +1,8 @@ --- title: Icon Button description: Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. -tags: component +tags: [actions, apps] +icon: icon-button --- For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/docs/components/icon). diff --git a/docs/docs/components/icon.md b/docs/docs/components/icon.md index f16dab8f0..6b3e850c1 100644 --- a/docs/docs/components/icon.md +++ b/docs/docs/components/icon.md @@ -1,7 +1,8 @@ --- title: Icon description: Icons are symbols that can be used to represent various options within an application. -tags: component +tags: [imagery, apps, popular] +icon: icon --- Web Awesome comes bundled with over 2,000 free icons courtesy of [Font Awesome](https://fontawesome.com/). These icons are part of the `default` icon library. Font Awesome Pro users can unlock additional icon families. Or, if you prefer, you can register your own [custom icon library](#icon-library). diff --git a/docs/docs/components/image-comparer.md b/docs/docs/components/image-comparer.md index 92b4b11fc..95d1ca513 100644 --- a/docs/docs/components/image-comparer.md +++ b/docs/docs/components/image-comparer.md @@ -1,7 +1,8 @@ --- title: Image Comparer description: Compare visual differences between similar photos with a sliding panel. -tags: component +tags: [imagery, niche] +icon: image-comparer --- For best results, use images that share the same dimensions. The slider can be controlled by dragging or pressing the left and right arrow keys. (Tip: press shift + arrows to move the slider in larger intervals, or home + end to jump to the beginning or end.) diff --git a/docs/docs/components/include.md b/docs/docs/components/include.md index 0bc70088b..f56771e48 100644 --- a/docs/docs/components/include.md +++ b/docs/docs/components/include.md @@ -1,7 +1,8 @@ --- title: Include description: Includes give you the power to embed external HTML files into the page. -tags: component +tags: [helpers, primitives] +icon: include --- Included files are asynchronously requested using `window.fetch()`. Requests are cached, so the same file can be included multiple times, but only one request will be made. diff --git a/docs/docs/components/index.md b/docs/docs/components/index.md index 1410a1eed..c12c064bc 100644 --- a/docs/docs/components/index.md +++ b/docs/docs/components/index.md @@ -1,414 +1,24 @@ --- title: Components -description: Browse the library of customizable, framework-friendly web components included in Web Awesome. +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 +categories: + - actions + - feedback: 'Feedback & Status' + - imagery + - inputs + - navigation + - organization + - helpers: 'Utilities' +override:tags: [] --- -

Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.

-
-
-

Actions

- - -
- {% include "svgs/button.njk" %} -
- Button - - - - -
- {% include "svgs/button-group.njk" %} -
- Button Group - - - - -
- {% include "svgs/copy-button.njk" %} -
- Copy Button - - - - -
- {% include "svgs/dropdown.njk" %} -
- Dropdown - - - - -
- {% include "svgs/icon-button.njk" %} -
- Icon Button - - - - -
- {% include "svgs/menu.njk" %} -
- Menu - - - - -
- {% include "svgs/qr-code.njk" %} -
- QR Code - - - -

Feedback and Status

- - -
- {% include "svgs/badge.njk" %} -
- Badge - - - - -
- {% include "svgs/callout.njk" %} -
- Callout - - - - -
- {% include "svgs/progress-bar.njk" %} -
- Progress Bar - - - - -
- {% include "svgs/progress-ring.njk" %} -
- Progress Ring - - - - -
- {% include "svgs/skeleton.njk" %} -
- Skeleton - - - - -
- {% include "svgs/spinner.njk" %} -
- Spinner - - - - -
- {% include "svgs/tag.njk" %} -
- Tag - - - - -
- {% include "svgs/tooltip.njk" %} -
- Tooltip - - - -

Imagery

- - -
- {% include "svgs/animated-image.njk" %} -
- Animated Image - - - - -
- {% include "svgs/avatar.njk" %} -
- Avatar - - - - -
- {% include "svgs/carousel.njk" %} -
- Carousel - - - - -
- {% include "svgs/icon.njk" %} -
- Icon - - - - -
- {% include "svgs/image-comparer.njk" %} -
- Image Comparer - - - -

Inputs

- - -
- {% include "svgs/checkbox.njk" %} -
- Checkbox - - - - -
- {% include "svgs/color-picker.njk" %} -
- Color Picker - - - - -
- {% include "svgs/input.njk" %} -
- Input - - - - -
- {% include "svgs/radio-group.njk" %} -
- Radio Group - - - - -
- {% include "svgs/range.njk" %} -
- Range - - - - -
- {% include "svgs/rating.njk" %} -
- Rating - - - - -
- {% include "svgs/select.njk" %} -
- Select - - - - -
- {% include "svgs/switch.njk" %} -
- Switch - - - - -
- {% include "svgs/textarea.njk" %} -
- Textarea - - - -

Navigation

- - -
- {% include "svgs/breadcrumb.njk" %} -
- Breadcrumb - - - - -
- {% include "svgs/tab-group.njk" %} -
- Tab Group - - - - -
- {% include "svgs/tree.njk" %} -
- Tree - - - -

Organization

- - -
- {% include "svgs/card.njk" %} -
- Card - - - - -
- {% include "svgs/details.njk" %} -
- Details - - - - -
- {% include "svgs/dialog.njk" %} -
- Dialog - - - - -
- {% include "svgs/divider.njk" %} -
- Divider - - - - -
- {% include "svgs/drawer.njk" %} -
- Drawer - - - - -
- {% include "svgs/page.njk" %} -
- Page - - - - -
- {% include "svgs/split-panel.njk" %} -
- Split Panel - - - -

Utilities

- - -
- {% include "svgs/animation.njk" %} -
- Animation - - - - -
- {% include "svgs/format-bytes.njk" %} -
- Format Bytes - - - - -
- {% include "svgs/format-date.njk" %} -
- Format Date - - - - -
- {% include "svgs/format-number.njk" %} -
- Format Number - - - - -
- {% include "svgs/include.njk" %} -
- Include - - - - -
- {% include "svgs/mutation-observer.njk" %} -
- Mutation Observer - - - - -
- {% include "svgs/popup.njk" %} -
- Popup - - - - -
- {% include "svgs/relative-time.njk" %} -
- Relative Time - - - - -
- {% include "svgs/resize-observer.njk" %} -
- Resize Observer - - -
+{% set allPages = collections.components %} +{% include "grouped-pages.njk" %}