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

Simplify sidebar (#989)

Browse Source 
* remove test value

* remove animation to prevent page-to-page blips

* static sidebar

* manage open sections on page load and with turbo

* cleanup unused scripts

* Remove overlap between Style Utilities and Layout

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>
This commit is contained in:
Cory LaViska
2025-05-23 12:07:34 -04:00
committed by GitHub
parent 4e14f25831
commit 23dc884678
7 changed files with 457 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/_includes/base.njk
View File

@@ -9,6 +9,7 @@
<script type="module" src="/assets/scripts/turbo.js"></script>
<script type="module" src="/assets/scripts/search.js"></script>
<script type="module" src="/assets/scripts/outline.js"></script>
{% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar.js"></script>{% endif %}
{% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar-tweaks.js"></script>{% endif %}
<script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>

23
docs/_includes/sidebar-group.njk
View File

@@ -1,23 +0,0 @@
{# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
{% if collections[tag] -%}
{% set groupUrl %}/docs/{{ tag }}/{% endset %}
{% set groupItem = groupUrl | getCollectionItemFromUrl %}
{% set children = groupItem.data.children if groupItem.data.children.length > 0 else (collections[tag] | sort) %}
<wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
<h2 slot="summary">
{% if groupItem %}
<a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
<wa-icon name="grid-2"></wa-icon>
</a>
{% else %}
{{ title or (tag | capitalize) }}
{% endif %}
</h2>
<ul>
{% for page in children %}
{% include 'sidebar-link.njk' %}
{% endfor %}
</ul>
</wa-details>
{%- endif %}

16
docs/_includes/sidebar-link.njk
View File

@@ -1,16 +0,0 @@
{% if page and not page.data.unlisted -%}
<li>
<a href="{{ page.url }}">{{ page.data.title }}</a>
{% if page.data.status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
{% if page.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
{% set children = page.data.children %}
{% if children.length > 0 %}
<ul>
{% for page in children %}
{% include 'sidebar-link.njk' %}
{% endfor %}
</ul>
{% endif %}
</li>
{%- endif %}

436
docs/_includes/sidebar.njk
View File

@@ -20,15 +20,427 @@
<li><a href="/docs/resources/visual-tests">Visual Tests</a></li>
</ul>
{% for tag, title in {
'themes': 'Themes',
'components': 'Components',
'native': 'Native Styles',
'utilities': 'Style Utilities',
'layout': 'Layout',
'patterns': 'Patterns',
'palettes': 'Color Palettes',
'tokens': 'Design Tokens'
} %}
{% include 'sidebar-group.njk' %}
{% endfor %}
<!-- Themes -->
<wa-details appearance="outlined">
<h2 slot="summary">
<a href="/docs/themes/" title="Overview">
Themes
<wa-icon name="grid-2" aria-hidden="true"></wa-icon>
</a>
</h2>
<ul>
<li><a href="/docs/themes/default/">Default</a></li>
<li><a href="/docs/themes/shoelace/">Shoelace</a></li>
<li><a href="/docs/themes/awesome/">Awesome</a></li>
<li>
<a href="/docs/themes/active/">Active</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
<li>
<a href="/docs/themes/brutalist/">Brutalist</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
<li>
<a href="/docs/themes/glossy/">Glossy</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
<li>
<a href="/docs/themes/matter/">Matter</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
<li>
<a href="/docs/themes/mellow/">Mellow</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
<li>
<a href="/docs/themes/playful/">Playful</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
<li>
<a href="/docs/themes/premium/">Premium</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
<li>
<a href="/docs/themes/tailspin/">Tailspin</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
<li>
<a href="/docs/themes/custom/">Custom</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
<li><a href="/docs/themes/creating/">Creating Themes</a></li>
</ul>
</wa-details>
<!-- Components -->
<wa-details appearance="outlined">
<h2 slot="summary">
<a href="/docs/components/" title="Overview">
Components
<wa-icon name="grid-2" aria-hidden="true"></wa-icon>
</a>
</h2>
<ul>
<li>
<a href="/docs/components/page/">Page</a>
<wa-icon name="flask" aria-hidden="true"></wa-icon>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
<li><a href="/docs/components/animated-image/">Animated Image</a></li>
<li><a href="/docs/components/animation/">Animation</a></li>
<li><a href="/docs/components/avatar/">Avatar</a></li>
<li><a href="/docs/components/badge/">Badge</a></li>
<li>
<a href="/docs/components/breadcrumb/">Breadcrumb</a>
<ul>
<li><a href="/docs/components/breadcrumb-item/">Breadcrumb Item</a></li>
</ul>
</li>
<li><a href="/docs/components/button/">Button</a></li>
<li><a href="/docs/components/button-group/">Button Group</a></li>
<li><a href="/docs/components/callout/">Callout</a></li>
<li><a href="/docs/components/card/">Card</a></li>
<li>
<a href="/docs/components/carousel/">Carousel</a>
<wa-icon name="flask" aria-hidden="true"></wa-icon>
<ul>
<li>
<a href="/docs/components/carousel-item/">Carousel Item</a>
<wa-icon name="flask" aria-hidden="true"></wa-icon>
</li>
</ul>
</li>
<li><a href="/docs/components/checkbox/">Checkbox</a></li>
<li><a href="/docs/components/color-picker/">Color Picker</a></li>
<li><a href="/docs/components/comparison/">Comparison</a></li>
<li>
<a href="/docs/components/copy-button/">Copy Button</a>
<wa-icon name="flask" aria-hidden="true"></wa-icon>
</li>
<li><a href="/docs/components/details/">Details</a></li>
<li><a href="/docs/components/dialog/">Dialog</a></li>
<li><a href="/docs/components/divider/">Divider</a></li>
<li><a href="/docs/components/drawer/">Drawer</a></li>
<li><a href="/docs/components/dropdown/">Dropdown</a></li>
<li><a href="/docs/components/format-bytes/">Format Bytes</a></li>
<li><a href="/docs/components/format-date/">Format Date</a></li>
<li><a href="/docs/components/format-number/">Format Number</a></li>
<li><a href="/docs/components/icon/">Icon</a></li>
<li><a href="/docs/components/icon-button/">Icon Button</a></li>
<li><a href="/docs/components/include/">Include</a></li>
<li><a href="/docs/components/input/">Input</a></li>
<li>
<a href="/docs/components/menu/">Menu</a>
<ul>
<li><a href="/docs/components/menu-item/">Menu Item</a></li>
<li><a href="/docs/components/menu-label/">Menu Label</a></li>
</ul>
</li>
<li><a href="/docs/components/mutation-observer/">Mutation Observer</a></li>
<li><a href="/docs/components/popup/">Popup</a></li>
<li><a href="/docs/components/progress-bar/">Progress Bar</a></li>
<li><a href="/docs/components/progress-ring/">Progress Ring</a></li>
<li><a href="/docs/components/qr-code/">QR Code</a></li>
<li>
<a href="/docs/components/radio-group/">Radio Group</a>
<ul>
<li><a href="/docs/components/radio/">Radio</a></li>
<li><a href="/docs/components/radio-button/">Radio Button</a></li>
</ul>
</li>
<li><a href="/docs/components/rating/">Rating</a></li>
<li><a href="/docs/components/relative-time/">Relative Time</a></li>
<li><a href="/docs/components/resize-observer/">Resize Observer</a></li>
<li><a href="/docs/components/scroller/">Scroller</a></li>
<li>
<a href="/docs/components/select/">Select</a>
<ul>
<li><a href="/docs/components/option/">Option</a></li>
</ul>
</li>
<li><a href="/docs/components/skeleton/">Skeleton</a></li>
<li><a href="/docs/components/slider/">Slider</a></li>
<li><a href="/docs/components/spinner/">Spinner</a></li>
<li><a href="/docs/components/split-panel/">Split Panel</a></li>
<li><a href="/docs/components/switch/">Switch</a></li>
<li>
<a href="/docs/components/tab-group/">Tab Group</a>
<ul>
<li><a href="/docs/components/tab/">Tab</a></li>
<li><a href="/docs/components/tab-panel/">Tab Panel</a></li>
</ul>
</li>
<li><a href="/docs/components/tag/">Tag</a></li>
<li><a href="/docs/components/textarea/">Textarea</a></li>
<li><a href="/docs/components/tooltip/">Tooltip</a></li>
<li><a href="/docs/components/tree/">Tree</a></li>
<li><a href="/docs/components/tree-item/">Tree Item</a></li>
</ul>
</wa-details>
<!-- Native styles -->
<wa-details appearance="outlined">
<h2 slot="summary">
<a href="/docs/native/" title="Overview">
Native Styles
<wa-icon name="grid-2" aria-hidden="true"></wa-icon>
</a>
</h2>
<ul>
<li><a href="/docs/native/button/">Button</a></li>
<li><a href="/docs/native/callout/">Callout</a></li>
<li><a href="/docs/native/checkbox/">Checkbox</a></li>
<li><a href="/docs/native/content/">Content</a></li>
<li><a href="/docs/native/details/">Details</a></li>
<li><a href="/docs/native/dialog/">Dialog</a></li>
<li><a href="/docs/native/input/">Input</a></li>
<li><a href="/docs/native/lists/">Lists</a></li>
<li>
<a href="/docs/native/progress/">Progress Bar</a>
<wa-icon name="flask" aria-hidden="true"></wa-icon>
</li>
<li><a href="/docs/native/radio/">Radio</a></li>
<li><a href="/docs/native/select/">Select</a></li>
<li><a href="/docs/native/slider/">Slider</a></li>
<li><a href="/docs/native/table/">Table</a></li>
<li><a href="/docs/native/textarea/">Textarea</a></li>
</ul>
</wa-details>
<!-- Style utilities -->
<wa-details appearance="outlined">
<h2 slot="summary">
<a href="/docs/utilities/" title="Overview">
Style Utilities
<wa-icon name="grid-2" aria-hidden="true"></wa-icon>
</a>
</h2>
<ul>
<li><a href="/docs/utilities/appearance/">Appearance</a></li>
<li><a href="/docs/utilities/color/">Color</a></li>
<li><a href="/docs/utilities/fouce/">Reduce FOUCE</a></li>
<li><a href="/docs/utilities/rounding/">Rounding</a></li>
<li>
<a href="/docs/utilities/size/">Size</a>
<wa-icon name="flask" aria-hidden="true"></wa-icon>
</li>
<li><a href="/docs/utilities/text/">Text</a></li>
<li><a href="/docs/utilities/visually-hidden/">Visually Hidden</a></li>
</ul>
</wa-details>
<!-- Layout -->
<wa-details appearance="outlined">
<h2 slot="summary">
<a href="/docs/layout/" title="Overview">
Layout
<wa-icon name="grid-2" aria-hidden="true"></wa-icon>
</a>
</h2>
<ul>
<li><a href="/docs/utilities/align-items/">Align Items</a></li>
<li><a href="/docs/utilities/gap/">Gap</a></li>
<li><a href="/docs/utilities/cluster/">Cluster</a></li>
<li><a href="/docs/utilities/flank/">Flank</a></li>
<li><a href="/docs/utilities/frame/">Frame</a></li>
<li><a href="/docs/utilities/grid/">Grid</a></li>
<li><a href="/docs/utilities/split/">Split</a></li>
<li><a href="/docs/utilities/stack/">Stack</a></li>
<li>
<a href="/docs/components/page/">Page</a>
<wa-icon name="flask" aria-hidden="true"></wa-icon>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
</ul>
</wa-details>
<!-- Patterns -->
<wa-details appearance="outlined">
<h2 slot="summary">
<a href="/docs/patterns/" title="Overview">
Patterns
<wa-icon name="grid-2" aria-hidden="true"></wa-icon>
</a>
</h2>
<ul>
<li>
<a href="/docs/patterns/app/">App</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
<ul>
<li>
<a href="/docs/patterns/app/action-panel/">Action Panel</a>
</li>
<li>
<a href="/docs/patterns/app/activity-log/">Activity Log</a>
</li>
<li>
<a href="/docs/patterns/app/comments/">Comments</a>
</li>
<li>
<a href="/docs/patterns/app/data-display/">Data Display</a>
</li>
<li>
<a href="/docs/patterns/app/description-list/">Description List</a>
</li>
<li>
<a href="/docs/patterns/app/empty-state/">Empty State</a>
</li>
<li>
<a href="/docs/patterns/app/faq/">FAQ</a>
</li>
<li>
<a href="/docs/patterns/app/grid-list/">Grid List</a>
</li>
<li>
<a href="/docs/patterns/app/leaderboard/">Leaderboard</a>
</li>
<li>
<a href="/docs/patterns/app/pagination/">Pagination</a>
</li>
<li>
<a href="/docs/patterns/app/permissions/">Permissions</a>
</li>
<li>
<a href="/docs/patterns/app/pricing/">Pricing</a>
</li>
</ul>
</li>
<li>
<a href="/docs/patterns/blog-news/">Blog &amp; News</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
<ul>
<li>
<a href="/docs/patterns/blog-news/call-to-action/">Call To Action</a>
</li>
<li>
<a href="/docs/patterns/blog-news/category-list/">Category List</a>
</li>
<li>
<a href="/docs/patterns/blog-news/featured-post/">Featured Post</a>
</li>
<li>
<a href="/docs/patterns/blog-news/footer/">Footer</a>
</li>
<li>
<a href="/docs/patterns/blog-news/newsletter/">Newsletter</a>
</li>
<li>
<a href="/docs/patterns/blog-news/paywall/">Paywall</a>
</li>
<li>
<a href="/docs/patterns/blog-news/post-footer/">Post Footer</a>
</li>
<li>
<a href="/docs/patterns/blog-news/post-header/">Post Header</a>
</li>
<li>
<a href="/docs/patterns/blog-news/post-list/">Post List</a>
</li>
<li>
<a href="/docs/patterns/blog-news/login/">Sign Up &amp; Login</a>
</li>
<li>
<a href="/docs/patterns/blog-news/social-share/">Social Share</a>
</li>
</ul>
</li>
<li>
<a href="/docs/patterns/ecommerce/">Ecommerce</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
<ul>
<li>
<a href="/docs/patterns/ecommerce/category-filter/">Category Filter</a>
</li>
<li>
<a href="/docs/patterns/ecommerce/category-preview/">Category Preview</a>
</li>
<li>
<a href="/docs/patterns/ecommerce/checkout-form/">Checkout Form</a>
</li>
<li>
<a href="/docs/patterns/ecommerce/incentives/">Incentives</a>
</li>
<li>
<a href="/docs/patterns/ecommerce/order-history/">Order History</a>
</li>
<li>
<a href="/docs/patterns/ecommerce/order-summary/">Order Summary</a>
</li>
<li>
<a href="/docs/patterns/ecommerce/product-list/">Product Lists</a>
</li>
<li>
<a href="/docs/patterns/ecommerce/product-overview/">Product Overview</a>
</li>
<li>
<a href="/docs/patterns/ecommerce/product-preview/">Product Preview</a>
</li>
<li>
<a href="/docs/patterns/ecommerce/review/">Product Reviews</a>
</li>
<li>
<a href="/docs/patterns/ecommerce/shopping-cart/">Shopping Cart</a>
</li>
</ul>
</li>
</ul>
</wa-details>
<!-- Color palettes -->
<wa-details appearance="outlined">
<h2 slot="summary">
<a href="/docs/palettes/" title="Overview">
Color Palettes
<wa-icon name="grid-2" aria-hidden="true"></wa-icon>
</a>
</h2>
<ul>
<li><a href="/docs/palettes/default/">Default</a></li>
<li>
<a href="/docs/palettes/anodized/">Anodized</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
<li><a href="/docs/palettes/bright/">Bright</a></li>
<li>
<a href="/docs/palettes/elegant/">Elegant</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
<li>
<a href="/docs/palettes/mild/">Mild</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
<li>
<a href="/docs/palettes/natural/">Natural</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
<li>
<a href="/docs/palettes/rudimentary/">Rudimentary</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
<li><a href="/docs/palettes/shoelace/">Shoelace</a></li>
<li>
<a href="/docs/palettes/vogue/">Vogue</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</li>
</ul>
</wa-details>
<!-- Design tokens -->
<wa-details appearance="outlined">
<h2 slot="summary">
<a href="/docs/tokens/" title="Overview">
Design Tokens
<wa-icon name="grid-2" aria-hidden="true"></wa-icon>
</a>
</h2>
<ul>
<li><a href="/docs/tokens/borders/">Borders</a></li>
<li><a href="/docs/tokens/color/">Color</a></li>
<li><a href="/docs/tokens/focus/">Focus</a></li>
<li><a href="/docs/tokens/shadows/">Shadows</a></li>
<li><a href="/docs/tokens/space/">Space</a></li>
<li><a href="/docs/tokens/transitions/">Transitions</a></li>
<li><a href="/docs/tokens/typography/">Typography</a></li>
<li><a href="/docs/tokens/component-groups/">Component Groups</a></li>
</ul>
</wa-details>

26
docs/assets/scripts/sidebar.js Normal file
View File

@@ -0,0 +1,26 @@
const sidebar = document.querySelector('#sidebar');
const allDetails = sidebar.querySelectorAll('wa-details');
const collapsibleSections = sidebar.querySelectorAll('h2 > a');
function ensureCurrentSectionIsOpen(root) {
const matchingDetails = root.querySelectorAll('wa-details:has(a.current)');
matchingDetails.forEach(details => {
details.setAttribute('open', '');
});
}
// Ensure current section is open on normal page load
window.addEventListener('DOMContentLoaded', () => {
ensureCurrentSectionIsOpen(sidebar);
});
// Ensure current section is open on Turbo page loads
document.addEventListener('turbo:before-render', event => {
if (!event?.detail?.newBody) return;
const newSidebar = event.detail.newBody.querySelector('#sidebar');
if (newSidebar) {
ensureCurrentSectionIsOpen(newSidebar);
}
});

5
docs/assets/styles/docs.css
View File

@@ -198,6 +198,11 @@ wa-badge.pro {
opacity: 0;
}
}
wa-details {
--show-duration: 0;
--hide-duration: 0;
}
}
wa-icon-button.delete {

2
docs/docs/components/textarea.md
View File

@@ -8,7 +8,7 @@ native: input
```html {.example}
<form action="about:blank" target="_blank">
<wa-textarea label="Type something', will ya" name="a" value="no"></wa-textarea>
<wa-textarea label="Type something', will ya" name="a"></wa-textarea>
<button type="submit">Submit</button>
</form>