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

Update Layouts to Prep for Site Assets (#1470)

Browse Source 
* syncing up `<body>` classes on blank.njk
* using `wa_page_attributes` block instead of `pageType`
* using `head` block instead of `pageType`
* removing `pageType` from `<body>` classes
* removing `pageType` from eleventyConfig
* updating color-scheme-selector's icons
* allowing `wa-page` attributes to override those set in base.njk
* allowing pageClass to be used on base.njk's `<body>`
This commit is contained in:
Brian Talbot
2025-09-22 19:06:54 -04:00
committed by GitHub
parent 694a9eccb9
commit cf80b57a79
4 changed files with 32 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/webawesome/docs/.eleventy.js
View File

@@ -76,7 +76,6 @@ export default async function (eleventyConfig) {
//
eleventyConfig.addGlobalData('package', packageData);
eleventyConfig.addGlobalData('layout', 'page.njk');
eleventyConfig.addGlobalData('pageType', 'docs'); // Default page type
eleventyConfig.addGlobalData('server', {
head: '',
loginOrAvatar: '',
@@ -94,6 +93,17 @@ export default async function (eleventyConfig) {
return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
});
/**
* @example
{% set foo = {foo: "bar"} %}
{% set bar = {bar: "baz"} %}
{% set merged = foo | merge(bar) %}
{{ merged | dump }}
*/
eleventyConfig.addFilter('merge', function (obj1, obj2) {
return Object.assign({}, obj1, obj2);
});
// Custom filter to sort with a priority item first, e.g.
// {{ collection | sortWithFirst('fileSlug', 'default') }} => the item with the fileSlug of 'default' will be first
eleventyConfig.addFilter('sortWithFirst', function (collection, property, firstValue) {

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

@@ -15,16 +15,9 @@
{% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar.js"></script>{% endif %}
<script defer data-domain="webawesome.com" src="https://plausible.io/js/script.js"></script>
{% if pageType == 'marketing' %}
{# Marketing styles #}
<link rel="stylesheet" href="/assets/styles/marketing.css" />
{% else %}
{# Docs styles (default) #}
{% block head %}
<link rel="stylesheet" href="/assets/styles/docs.css" />
{% endif %}
{% block head %}{% endblock %}
{% endblock %}
<script type="module">
// Set the initial color scheme before the page renders to prevent flashing
@@ -48,9 +41,17 @@
}
</script>
</head>
<body class="layout-{{ layout | stripExtension }} page-{{ page.fileSlug or 'home' }}{{ ' page-wide' if wide }} page-{{ pageType or 'docs' }}">
<!-- use view="desktop" as default to reduce layout jank on desktop site. -->
<wa-page view="desktop" disable-navigation-toggle {% if pageType == 'marketing' %}disable-sticky="header"{% endif %} mobile-breakpoint="1180">
<body class="layout-{{ layout | stripExtension }} page-{{ pageClass or page.fileSlug or 'home' }}{{ ' page-wide' if wide }}">
{% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true, 'mobile-breakpoint': 1180 } %}
{% set waPageAttributes = waPageAttributes or {} %}
{% set mergedWaPageAttributes = defaultWaPageAttributes | merge(waPageAttributes) %}
<wa-page
{% for key, value in mergedWaPageAttributes %}
{% if value != null and value != false %}
{{ key }}="{{ value }}"
{% endif %}
{% endfor %}
>
{% block pageHeader %}
<header slot="header" class="wa-split">
{# Logo #}

14
packages/webawesome/docs/_includes/color-scheme-selector.njk
View File

@@ -1,18 +1,18 @@
<wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" title="Press \ to toggle">
<wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
<wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
<wa-select class="color-scheme-selector" appearance="filled" value="auto" title="Press \ to toggle">
<wa-icon class="only-light" slot="start" name="sun-bright" variant="regular"></wa-icon>
<wa-icon class="only-dark" slot="start" name="moon-stars" variant="regular"></wa-icon>
<wa-option value="light">
<wa-icon slot="start" name="sun" variant="regular"></wa-icon>
<wa-icon slot="start" name="sun-bright" variant="regular"></wa-icon>
Light
</wa-option>
<wa-option value="dark">
<wa-icon slot="start" name="moon" variant="regular"></wa-icon>
<wa-icon slot="start" name="moon-stars" variant="regular"></wa-icon>
Dark
</wa-option>
<wa-divider></wa-divider>
<wa-option value="auto">
<wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
<wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
<wa-icon class="only-light" slot="start" name="sun-bright" variant="regular"></wa-icon>
<wa-icon class="only-dark" slot="start" name="moon-stars" variant="regular"></wa-icon>
System
</wa-option>
</wa-select>

2
packages/webawesome/docs/_layouts/blank.njk
View File

@@ -4,7 +4,7 @@
{% include 'head.njk' %}
{% block head %}{% endblock %}
</head>
<body class="layout-{{ layout | stripExtension }}">
<body class="layout-{{ layout | stripExtension }} page-{{ pageClass or page.fileSlug or 'home' }}">
{% block content %}
{{ content | safe }}
{% endblock %}