mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Revert <wa-code-demo> in docs (#981)
* remove code demo * fix page demos and split into external files
This commit is contained in:
Cory LaViska
@@ -67,6 +67,7 @@
|
||||
"formtarget",
|
||||
"FOUC",
|
||||
"FOUCE",
|
||||
"Frontmatter",
|
||||
"fullscreen",
|
||||
"gestern",
|
||||
"giga",
|
||||
|
||||
@@ -124,7 +124,7 @@ export default function (eleventyConfig) {
|
||||
eleventyConfig.addPlugin(currentLink());
|
||||
|
||||
// Add code examples for `<code class="example">` blocks
|
||||
eleventyConfig.addPlugin(codeExamplesPlugin);
|
||||
eleventyConfig.addPlugin(codeExamplesPlugin());
|
||||
|
||||
// Highlight code blocks with Prism
|
||||
eleventyConfig.addPlugin(highlightCodePlugin());
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
{% include 'head.njk' %}
|
||||
<meta name="theme-color" content="#f36944">
|
||||
|
||||
|
||||
<script type="module" src="/assets/scripts/code-examples.js"></script>
|
||||
<script type="module" src="/assets/scripts/scroll.js"></script>
|
||||
<script type="module" src="/assets/scripts/turbo.js"></script>
|
||||
<script type="module" src="/assets/scripts/search.js"></script>
|
||||
|
||||
@@ -1,5 +1 @@
|
||||
{% extends '../_layouts/block.njk' %}
|
||||
|
||||
{% block head %}
|
||||
<link href="/docs/patterns/patterns.css" rel="stylesheet">
|
||||
{% endblock %}
|
||||
@@ -1,185 +1,85 @@
|
||||
import { parse } from 'node-html-parser';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
|
||||
const templates = {
|
||||
old(pre, code, { open, buttons, edit }) {
|
||||
const id = `code-example-${uuid().slice(-12)}`;
|
||||
let preview = code.textContent;
|
||||
|
||||
// Run preview scripts as modules to prevent collisions
|
||||
const root = parse(preview, { blockTextElements: { script: true } });
|
||||
root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
|
||||
preview = root.toString();
|
||||
|
||||
return `
|
||||
<div class="code-example ${open ? 'open' : ''}">
|
||||
<div class="code-example-preview">
|
||||
${preview}
|
||||
</div>
|
||||
<div class="code-example-source" id="${id}">
|
||||
${pre.outerHTML}
|
||||
</div>
|
||||
${
|
||||
buttons
|
||||
? `
|
||||
<div class="code-example-buttons">
|
||||
<button
|
||||
class="code-example-toggle"
|
||||
type="button"
|
||||
aria-expanded="${open ? 'true' : 'false'}"
|
||||
aria-controls="${id}"
|
||||
>
|
||||
Code
|
||||
<wa-icon name="chevron-down"></wa-icon>
|
||||
</button>
|
||||
${
|
||||
edit
|
||||
? `
|
||||
<button class="code-example-pen" type="button">
|
||||
<wa-icon name="pen-to-square"></wa-icon>
|
||||
Edit
|
||||
</button>
|
||||
`
|
||||
: ''
|
||||
}
|
||||
`
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
new(pre, code, { open, first, attributes }) {
|
||||
attributes = {
|
||||
open,
|
||||
include: `link[rel=stylesheet][href^='/dist/']`,
|
||||
...attributes,
|
||||
};
|
||||
|
||||
const attributesString = Object.entries(attributes)
|
||||
.map(([key, value]) => {
|
||||
if (value === true) {
|
||||
return key;
|
||||
}
|
||||
if (value === false || value === null) {
|
||||
return '';
|
||||
}
|
||||
return `${key}="${value}"`;
|
||||
})
|
||||
.join(' ');
|
||||
|
||||
let includes = '';
|
||||
if (first) {
|
||||
includes = `
|
||||
<template class="wa-code-demo-include-isolated">
|
||||
<script src="/dist/webawesome.loader.js" type="module"></script>
|
||||
</template>`;
|
||||
}
|
||||
|
||||
let preview = '';
|
||||
if (attributes.viewport === undefined) {
|
||||
// Slot in pre-rendered preview
|
||||
preview = `<div style="display:contents" slot="preview">${code.textContent}</div>`;
|
||||
|
||||
// Run preview scripts as modules to prevent collisions
|
||||
const root = parse(preview, { blockTextElements: { script: true } });
|
||||
root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
|
||||
preview = root.toString();
|
||||
}
|
||||
|
||||
return `${includes}
|
||||
<wa-code-demo ${attributesString}>
|
||||
${preview}
|
||||
${pre.outerHTML}
|
||||
</wa-code-demo>
|
||||
`;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Eleventy plugin to turn `<code class="example">` blocks into live examples.
|
||||
*/
|
||||
export function codeExamplesPlugin(eleventyConfig, options = {}) {
|
||||
const defaultOptions = {
|
||||
export function codeExamplesPlugin(options = {}) {
|
||||
options = {
|
||||
container: 'body',
|
||||
defaultOpen: () => false,
|
||||
};
|
||||
options = { ...defaultOptions, ...options };
|
||||
|
||||
const stats = {
|
||||
inputPaths: {},
|
||||
outputPaths: {},
|
||||
...options,
|
||||
};
|
||||
|
||||
eleventyConfig.addTransform('code-examples', function (content) {
|
||||
const { inputPath, outputPath } = this.page;
|
||||
return function (eleventyConfig) {
|
||||
eleventyConfig.addTransform('code-examples', content => {
|
||||
const doc = parse(content, { blockTextElements: { code: true } });
|
||||
const container = doc.querySelector(options.container);
|
||||
|
||||
const doc = parse(content, { blockTextElements: { code: true } });
|
||||
const container = doc.querySelector(options.container);
|
||||
|
||||
if (!container) {
|
||||
return content;
|
||||
}
|
||||
|
||||
// Look for external links
|
||||
container.querySelectorAll('code.example').forEach(code => {
|
||||
stats.inputPaths[inputPath] ??= 0;
|
||||
stats.outputPaths[outputPath] ??= 0;
|
||||
stats.inputPaths[inputPath]++;
|
||||
stats.outputPaths[outputPath]++;
|
||||
|
||||
const pre = code.closest('pre');
|
||||
const first = stats.inputPaths[inputPath] === 1;
|
||||
|
||||
const localOptions = {
|
||||
...options,
|
||||
first,
|
||||
|
||||
// Modifier defaults
|
||||
edit: true,
|
||||
buttons: true,
|
||||
new: true, // comment this line to default back to the old demos
|
||||
attributes: {},
|
||||
};
|
||||
|
||||
for (const prop of ['new', 'open', 'buttons', 'edit']) {
|
||||
if (code.classList.contains(prop)) {
|
||||
localOptions[prop] = true;
|
||||
} else if (code.classList.contains(`no-${prop}`)) {
|
||||
localOptions[prop] = false;
|
||||
}
|
||||
if (!container) {
|
||||
return content;
|
||||
}
|
||||
|
||||
for (const attribute of ['viewport', 'include']) {
|
||||
if (code.hasAttribute(attribute)) {
|
||||
localOptions.attributes[attribute] = code.getAttribute(attribute);
|
||||
code.removeAttribute(attribute);
|
||||
}
|
||||
}
|
||||
// Look for external links
|
||||
container.querySelectorAll('code.example').forEach(code => {
|
||||
const pre = code.closest('pre');
|
||||
const hasButtons = !code.classList.contains('no-buttons');
|
||||
const isOpen = code.classList.contains('open') || !hasButtons;
|
||||
const noEdit = code.classList.contains('no-edit');
|
||||
const id = `code-example-${uuid().slice(-12)}`;
|
||||
let preview = pre.textContent;
|
||||
|
||||
if (Object.keys(localOptions.attributes).length > 0) {
|
||||
// attributes only work on the new syntax
|
||||
localOptions.new = true;
|
||||
}
|
||||
// Run preview scripts as modules to prevent collisions
|
||||
const root = parse(preview, { blockTextElements: { script: true } });
|
||||
root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
|
||||
preview = root.toString();
|
||||
|
||||
if (localOptions.open === undefined) {
|
||||
if (localOptions.defaultOpen === true) {
|
||||
localOptions.open = localOptions.defaultOpen;
|
||||
} else if (typeof localOptions.defaultOpen === 'function') {
|
||||
localOptions.open = localOptions.defaultOpen(code, {
|
||||
pre,
|
||||
inputPathIndex: stats.inputPaths[inputPath],
|
||||
outputPathIndex: stats.outputPaths[outputPath],
|
||||
});
|
||||
}
|
||||
}
|
||||
const codeExample = parse(`
|
||||
<div class="code-example ${isOpen ? 'open' : ''}">
|
||||
<div class="code-example-preview">
|
||||
${preview}
|
||||
<div class="code-example-resizer" aria-hidden="true">
|
||||
<wa-icon name="grip-lines-vertical"></wa-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-example-source" id="${id}">
|
||||
${pre.outerHTML}
|
||||
</div>
|
||||
${
|
||||
hasButtons
|
||||
? `
|
||||
<div class="code-example-buttons">
|
||||
<button
|
||||
class="code-example-toggle"
|
||||
type="button"
|
||||
aria-expanded="${isOpen ? 'true' : 'false'}"
|
||||
aria-controls="${id}"
|
||||
>
|
||||
Code
|
||||
<wa-icon name="chevron-down"></wa-icon>
|
||||
</button>
|
||||
|
||||
const template = localOptions.new ? 'new' : 'old';
|
||||
const codeExample = parse(templates[template](pre, code, localOptions));
|
||||
${
|
||||
noEdit
|
||||
? ''
|
||||
: `
|
||||
<button class="code-example-pen" type="button">
|
||||
<wa-icon name="pen-to-square"></wa-icon>
|
||||
Edit
|
||||
</button>
|
||||
`
|
||||
}
|
||||
|
||||
pre.replaceWith(codeExample);
|
||||
`
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
pre.replaceWith(codeExample);
|
||||
});
|
||||
|
||||
return doc.toString();
|
||||
});
|
||||
|
||||
return doc.toString();
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
287
docs/assets/examples/page/demo-1.html
Normal file
287
docs/assets/examples/page/demo-1.html
Normal file
@@ -0,0 +1,287 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="wa-cloak">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Web Awesome Page Demo 1</title>
|
||||
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<script type="module" src="/dist/webawesome.loader.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<wa-page mobile-breakpoint="920">
|
||||
<div slot="banner" class="wa-body-s">
|
||||
<a href="#" class="wa-cluster wa-align-items-baseline wa-gap-xs" style="flex-wrap: nowrap">
|
||||
<wa-icon name="gift"></wa-icon>
|
||||
<span>Give a Hoot for the Holidays: Donate now and double your impact.</span>
|
||||
</a>
|
||||
</div>
|
||||
<header slot="header" class="wa-split">
|
||||
<div class="wa-cluster">
|
||||
<wa-icon name="feather-pointed" style="color: var(--wa-color-brand-fill-loud); font-size: 1.5em"></wa-icon>
|
||||
<span id="brand-name" class="wa-heading-s wa-desktop-only">Audubon Worldwide</span>
|
||||
<a href="#">Our Work</a>
|
||||
<a href="#">About Us</a>
|
||||
<a href="#">Discover</a>
|
||||
<a href="#">Get Involved</a>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-button size="small" variant="brand" appearance="outlined">Find Your Local Audubon</wa-button>
|
||||
<wa-button size="small" variant="brand">Donate</wa-button>
|
||||
</div>
|
||||
</header>
|
||||
<nav slot="subheader">
|
||||
<div class="wa-cluster" style="flex-wrap: nowrap">
|
||||
<wa-icon-button data-toggle-nav name="bars" label="Menu"></wa-icon-button>
|
||||
<wa-breadcrumb style="font-size: var(--wa-font-size-s)">
|
||||
<wa-breadcrumb-item>Field Guides</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Owls</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Great Horned Owl</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
</div>
|
||||
<wa-input id="search" class="wa-desktop-only" placeholder="Search" size="small" style="max-inline-size: 12rem">
|
||||
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
||||
</wa-input>
|
||||
</nav>
|
||||
<nav slot="navigation-header">
|
||||
<div class="wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" label=""></wa-avatar>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span class="wa-heading-s">Great Horned Owl</span>
|
||||
<span class="wa-caption-s" lang="la"><em>Bubo virginianus</em></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav slot="navigation">
|
||||
<a href="#identification">Identification</a>
|
||||
<a href="#range">Range and Habitat</a>
|
||||
<a href="#behavior">Behavior</a>
|
||||
<a href="#conservation">Conservation</a>
|
||||
</nav>
|
||||
<nav slot="navigation-footer">
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="camera"></wa-icon>
|
||||
<span>Photo Gallery</span>
|
||||
</a>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="map-location-dot"></wa-icon>
|
||||
<span>Interactive Range Map</span>
|
||||
</a>
|
||||
</nav>
|
||||
<header slot="main-header">
|
||||
<div
|
||||
class="wa-flank:end wa-border-radius-l wa-dark"
|
||||
style="
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
--content-percentage: 35%;
|
||||
padding: var(--wa-space-m);
|
||||
"
|
||||
>
|
||||
<div class="wa-stack" style="margin: var(--wa-space-2xl)">
|
||||
<h1>Great Horned Owl</h1>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-tag size="small">Owls</wa-tag>
|
||||
<wa-tag size="small">Birds of Prey</wa-tag>
|
||||
<wa-tag size="small">Pleistocene Birds</wa-tag>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="ruler"></wa-icon>
|
||||
<span class="wa-caption-m">L 21.5" | WS 48.5"</span>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="earth-americas"></wa-icon>
|
||||
<span class="wa-caption-m"
|
||||
>North America (Widespread), Central America (Limited), South America (Limited)</span
|
||||
>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="shield-heart"></wa-icon>
|
||||
<span class="wa-caption-m">Least Concern</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-frame" style="border-radius: var(--wa-border-radius-l); max-inline-size: 40ch">
|
||||
<img src="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="wa-body-l">
|
||||
<h2 id="identification">Identification</h2>
|
||||
<p>
|
||||
Lorem ipsum odor amet, consectetuer adipiscing elit. Eget habitant scelerisque lectus ultrices nascetur
|
||||
aliquet sapien primis. Cursus sapien fusce semper nulla elit sociosqu lectus per sem. Sem ad porttitor dictum
|
||||
nisl pharetra tortor convallis. Sit molestie hendrerit porta dictum tortor posuere euismod magna. Mauris
|
||||
suspendisse pharetra finibus; eleifend etiam ridiculus.
|
||||
</p>
|
||||
<h2 id="range">Range and Habitat</h2>
|
||||
<p>
|
||||
Diam sed ipsum pretium porttitor class cubilia elementum. Blandit felis ligula habitant ultricies vulputate
|
||||
rutrum lacus commodo pulvinar. Nostra semper placerat lectus in dis eu. Sagittis ipsum placerat rhoncus lacus
|
||||
id eget. Erat pharetra aptent enim, augue accumsan ultricies inceptos habitasse. Senectus id maximus
|
||||
parturient tellus; fermentum posuere vulputate luctus. Ac tempus dapibus vehicula ligula ullamcorper sit duis.
|
||||
</p>
|
||||
<h2 id="behavior">Behavior</h2>
|
||||
<p>
|
||||
Erat vitae luctus arcu taciti malesuada pretium arcu justo primis. Cubilia vitae maecenas congue velit id
|
||||
netus arcu. Dictum vel pellentesque taciti fermentum risus consectetur amet. Faucibus commodo habitasse sem
|
||||
maximus praesent purus, dignissim tristique porta. Platea magna justo ipsum ut metus ac facilisi. Imperdiet
|
||||
laoreet pharetra maximus lacus tortor suscipit. Nam quisque iaculis orci porttitor pellentesque rhoncus.
|
||||
Molestie sagittis tincidunt quisque nisi non urna conubia.
|
||||
</p>
|
||||
<h2 id="conservation">Conservation</h2>
|
||||
<p>
|
||||
Nullam magna quam quisque eu varius integer. Inceptos donec facilisi risus himenaeos semper mollis habitasse.
|
||||
Vehicula lacus vivamus euismod pharetra mollis dictum. Ante ex tortor elementum eleifend habitasse orci
|
||||
aliquam. Fames erat senectus fames etiam dapibus cursus.
|
||||
</p>
|
||||
</main>
|
||||
<footer slot="main-footer">
|
||||
<section>
|
||||
<h2 class="wa-heading-m">Sources</h2>
|
||||
<ul class="wa-body-s">
|
||||
<li>
|
||||
<cite
|
||||
><a href="https://www.audubon.org/field-guide/bird/great-horned-owl" target="_blank" rel="noopener"
|
||||
>Great Horned Owl</a
|
||||
></cite
|
||||
>, National Audubon Society. Retrieved 5 December 2024.
|
||||
</li>
|
||||
<li>
|
||||
<cite
|
||||
><a href="https://www.allaboutbirds.org/guide/Great_Horned_Owl/" target="_blank" rel="noopener"
|
||||
>Great Horned Owl</a
|
||||
></cite
|
||||
>, All About Birds by CornellLab. Retrieved 5 December 2024.
|
||||
</li>
|
||||
<li>Armistead, G. L. (2015). <cite>Field guide to birds of Pennsylvania</cite>. Scott & Nix, Inc.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</footer>
|
||||
<aside slot="aside" class="wa-desktop-only">
|
||||
<h2 class="wa-heading-m">Discover More Birds</h2>
|
||||
<wa-card>
|
||||
<div slot="media" class="wa-frame">
|
||||
<img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span class="wa-heading-s">Long-eared Owl</span>
|
||||
<span class="wa-caption-s" lang="la"><em>Asio otus</em></span>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div slot="media" class="wa-frame">
|
||||
<img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span class="wa-heading-s">Northen Hawk Owl</span>
|
||||
<span class="wa-caption-s" lang="la"><em>Surnia ulula</em></span>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div slot="media" class="wa-frame">
|
||||
<img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span class="wa-heading-s">Golden Eagle</span>
|
||||
<span class="wa-caption-s" lang="la"><em>Aquila chrysaetos</em></span>
|
||||
</div>
|
||||
</wa-card>
|
||||
</aside>
|
||||
<footer slot="footer" class="wa-grid wa-gap-xl">
|
||||
<div class="wa-cluster" style="flex-wrap: nowrap">
|
||||
<wa-icon name="feather-pointed" style="font-size: 1.5em"></wa-icon>
|
||||
<span class="wa-heading-s">Audubon Worldwide</span>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-xs">Our Work</h3>
|
||||
<a href="#">Habitat Restoration</a>
|
||||
<a href="#">Migration Science</a>
|
||||
<a href="#">Advocacy</a>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-xs">About Us</h3>
|
||||
<a href="#">Our History</a>
|
||||
<a href="#">Leadership</a>
|
||||
<a href="#">Fiscal Reports</a>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-xs">Discover</h3>
|
||||
<a href="#">Field Guides</a>
|
||||
<a href="#">Photo Search</a>
|
||||
<a href="#">Gear and Resources</a>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-xs">Get Involved</h3>
|
||||
<a href="#">Adopt a Bird</a>
|
||||
<a href="#">Your Local Audubon</a>
|
||||
<a href="#">Youth Audubon Camps</a>
|
||||
</div>
|
||||
</footer>
|
||||
</wa-page>
|
||||
|
||||
<style>
|
||||
wa-page {
|
||||
--menu-width: 15rem;
|
||||
--aside-width: 15rem;
|
||||
}
|
||||
wa-page[view='desktop'] {
|
||||
[slot*='navigation'] {
|
||||
border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
}
|
||||
wa-page[view='mobile'] {
|
||||
--menu-width: auto;
|
||||
--aside-width: auto;
|
||||
}
|
||||
|
||||
[slot='banner'] {
|
||||
--wa-color-text-link: var(--wa-color-neutral-on-loud);
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
[slot='header'] {
|
||||
--wa-link-decoration-default: none;
|
||||
border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
[slot*='header'] a {
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
[slot='subheader'] {
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
[slot='navigation-header'] {
|
||||
border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
[slot*='navigation'] a {
|
||||
--wa-color-text-link: var(--wa-color-text-normal);
|
||||
}
|
||||
[slot='navigation-footer'] {
|
||||
border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
|
||||
.wa-flank {
|
||||
--flank-size: 1.25em;
|
||||
}
|
||||
}
|
||||
[slot='main-header'],
|
||||
main,
|
||||
[slot='main-footer'] {
|
||||
max-inline-size: 60rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
[slot='main-footer'] {
|
||||
border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
[slot='footer'] {
|
||||
--wa-color-text-link: var(--wa-color-text-quiet);
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const sectionAnchors = document.querySelectorAll("[slot*='navigation'] a[href*='#']");
|
||||
sectionAnchors.forEach(sectionAnchor => sectionAnchor.setAttribute('data-drawer', 'close'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
445
docs/assets/examples/page/demo-2.html
Normal file
445
docs/assets/examples/page/demo-2.html
Normal file
@@ -0,0 +1,445 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="wa-cloak">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Web Awesome Page Demo 2</title>
|
||||
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<script type="module" src="/dist/webawesome.loader.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<wa-page class="wa-dark">
|
||||
<header slot="header">
|
||||
<div class="wa-cluster">
|
||||
<wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
|
||||
<wa-icon name="record-vinyl"></wa-icon>
|
||||
<span class="wa-heading-m">radiogaga</span>
|
||||
</div>
|
||||
<wa-input id="search-header" placeholder="Search" class="wa-desktop-only" style="max-inline-size: 100%">
|
||||
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
||||
</wa-input>
|
||||
<div class="wa-cluster">
|
||||
<wa-button appearance="outlined">Log In</wa-button>
|
||||
<wa-button>Sign Up</wa-button>
|
||||
</div>
|
||||
</header>
|
||||
<div slot="navigation-header" class="wa-split">
|
||||
<wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%" class="wa-mobile-only">
|
||||
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
||||
</wa-input>
|
||||
<div class="wa-split">
|
||||
<h2 class="wa-heading-s">For You</h2>
|
||||
<wa-icon-button id="settings" name="gear" label="Settings"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
<nav slot="navigation">
|
||||
<h3 class="wa-heading-xs">Discover</h3>
|
||||
<ul class="wa-stack wa-gap-0">
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="house"></wa-icon>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="star"></wa-icon>
|
||||
<span>New</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="tower-broadcast"></wa-icon>
|
||||
<span>Stations</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 class="wa-heading-xs">Library</h3>
|
||||
<ul class="wa-stack wa-gap-0">
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="heart"></wa-icon>
|
||||
<span>Favorites</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="bars-staggered"></wa-icon>
|
||||
<span>Playlists</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="microphone-lines"></wa-icon>
|
||||
<span>Artists</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="layer-group"></wa-icon>
|
||||
<span>Albums</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="podcast"></wa-icon>
|
||||
<span>Podcasts</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 class="wa-heading-xs">Recently Played</h3>
|
||||
<ul id="recent" class="wa-stack wa-gap-0">
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="radio" style="background: var(--wa-color-red-90); color: var(--wa-color-red-60)"></wa-icon>
|
||||
<span>Lo-Fi Station</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon
|
||||
name="font-awesome"
|
||||
style="background: var(--wa-color-blue-30); color: var(--wa-color-yellow-90)"
|
||||
></wa-icon>
|
||||
<span>Podcast Awesome</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon
|
||||
name="seedling"
|
||||
style="background: var(--wa-color-green-70); color: var(--wa-color-green-90)"
|
||||
></wa-icon>
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>Seasons</span>
|
||||
<span class="wa-caption-s">Blister Soul</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div slot="main-header">
|
||||
<wa-icon-button id="back" name="chevron-left" label="Back"></wa-icon-button>
|
||||
<wa-tooltip for="back" placement="bottom" distance="2">Back</wa-tooltip>
|
||||
<div class="wa-cluster">
|
||||
<wa-icon-button id="favorite" name="heart" variant="regular" label="Favorite"></wa-icon-button>
|
||||
<wa-tooltip for="favorite" placement="bottom" distance="2">Favorite</wa-tooltip>
|
||||
<wa-icon-button id="options" name="ellipsis" label="Options"></wa-icon-button>
|
||||
<wa-tooltip for="options" placement="bottom" distance="2">Options</wa-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
<div class="wa-stack wa-gap-3xl">
|
||||
<div class="wa-flank wa-gap-3xl" style="--content-percentage: 40%">
|
||||
<div class="wa-frame wa-border-radius-l" style="max-inline-size: 40ch">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1732430579016-8d5e5ebd3c99?q=20"
|
||||
alt="Home for the Holidays album artwork"
|
||||
/>
|
||||
</div>
|
||||
<div class="wa-split:column wa-align-items-start">
|
||||
<div class="wa-stack" style="margin-block: auto">
|
||||
<h1 class="wa-heading-3xl">Home for the Holidays</h1>
|
||||
<a href="#" class="wa-heading-m">The Shire Choir</a>
|
||||
<div class="wa-cluster wa-caption-m wa-gap-2xs">
|
||||
<span>Holiday</span>
|
||||
<span>•</span>
|
||||
<span>2024</span>
|
||||
<span>•</span>
|
||||
<span>12 songs, 41 minutes 9 seconds</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="play-controls" class="wa-split wa-gap-xl">
|
||||
<div class="wa-cluster wa-gap-xl">
|
||||
<wa-icon-button name="play" label="Play"></wa-icon-button>
|
||||
<wa-icon-button name="shuffle" label="Shuffle"></wa-icon-button>
|
||||
</div>
|
||||
<wa-icon-button name="plus" label="Add to Library"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ol class="wa-stack wa-gap-0">
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="1"></wa-icon>
|
||||
<span>Fa-La-La-Fellowship</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">3:27</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="2"></wa-icon>
|
||||
<span>Sleigh Ride</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">2:36</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="3"></wa-icon>
|
||||
<span>All I Want For Christmas Is Stew</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">2:51</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="4"></wa-icon>
|
||||
<span>Rockin' Around the Christmas Ent</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">3:05</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="5"></wa-icon>
|
||||
<span>Merry, Did You Know?</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">1:56</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="6"></wa-icon>
|
||||
<span>Run Run Shadowfax</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">3:32</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="7"></wa-icon>
|
||||
<span>You're a Mean One, Mr. Grima</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">2:46</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="8"></wa-icon>
|
||||
<span>O Come, All Ye Faithful</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">3:27</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="9"></wa-icon>
|
||||
<span>Do You Hear What I Hear</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">2:13</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<span class="wa-cluster wa-gap-3xs">
|
||||
<wa-icon name="1"></wa-icon>
|
||||
<wa-icon name="0"></wa-icon>
|
||||
</span>
|
||||
<span>Carol of the Horns</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">2:55</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<span class="wa-cluster wa-gap-3xs">
|
||||
<wa-icon name="1"></wa-icon>
|
||||
<wa-icon name="1"></wa-icon>
|
||||
</span>
|
||||
<span>Silent Night</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">3:10</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<span class="wa-cluster wa-gap-3xs">
|
||||
<wa-icon name="1"></wa-icon>
|
||||
<wa-icon name="2"></wa-icon>
|
||||
</span>
|
||||
<span>Wizard Wonderland</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">3:22</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</main>
|
||||
<div slot="main-footer" class="wa-grid wa-gap-xl wa-align-items-center">
|
||||
<h2 class="wa-heading-2xl">More You Might Like</h2>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<img src="https://images.unsplash.com/photo-1675219119611-40323b738563?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Festival of Lights</span>
|
||||
<span class="wa-caption-s">Station</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<img src="https://images.unsplash.com/photo-1481930916222-5ec4696fc0f2?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Holiday Cheer</span>
|
||||
<span class="wa-caption-s">Essential Playlist</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Nursery Rhymes from the Shire</span>
|
||||
<span class="wa-caption-s">The Shire Choir</span>
|
||||
</div>
|
||||
</div>
|
||||
</wa-page>
|
||||
|
||||
<style>
|
||||
wa-page {
|
||||
--menu-width: 30ch;
|
||||
--wa-tooltip-arrow-size: 0;
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
wa-page[view='mobile'] {
|
||||
--menu-width: auto;
|
||||
|
||||
[slot*='main'],
|
||||
main {
|
||||
padding: var(--wa-space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
wa-page,
|
||||
[slot='header'],
|
||||
wa-page[view='desktop'] [slot*='navigation'] {
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
wa-page[view='mobile'] [slot*='navigation'] {
|
||||
padding: 0;
|
||||
}
|
||||
wa-page::part(base) {
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
[slot='header'] {
|
||||
background: linear-gradient(to bottom, var(--wa-color-surface-raised), var(--wa-color-surface-lowered));
|
||||
}
|
||||
[slot='navigation-header'],
|
||||
[slot='main-header'] {
|
||||
padding-block-end: 0 !important;
|
||||
padding-block-start: var(--wa-space-3xl);
|
||||
}
|
||||
[slot='navigation'] {
|
||||
a {
|
||||
--wa-color-text-link: var(--wa-color-text-normal);
|
||||
--wa-link-decoration-default: none;
|
||||
--wa-link-decoration-hover: none;
|
||||
--flank-size: 2rem;
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: var(--wa-space-xs);
|
||||
|
||||
&:hover {
|
||||
background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
|
||||
}
|
||||
}
|
||||
}
|
||||
wa-icon {
|
||||
align-items: center;
|
||||
aspect-ratio: 1;
|
||||
color: var(--wa-color-brand-fill-loud);
|
||||
display: flex;
|
||||
height: var(--flank-size);
|
||||
justify-content: center;
|
||||
}
|
||||
#recent wa-icon {
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
}
|
||||
|
||||
[slot='main-header'] {
|
||||
border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-border-radius-l) var(--wa-border-radius-l) 0 0;
|
||||
}
|
||||
main,
|
||||
[slot*='main'] {
|
||||
margin-inline: var(--wa-space-m);
|
||||
}
|
||||
main ol li {
|
||||
padding: var(--wa-space-m);
|
||||
|
||||
&:hover {
|
||||
background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
.wa-flank {
|
||||
--flank-size: 2rem;
|
||||
}
|
||||
}
|
||||
main,
|
||||
[slot='main-footer'] {
|
||||
border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
main,
|
||||
[slot='main-header'] {
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
}
|
||||
#play-controls wa-icon-button::part(base) {
|
||||
border: var(--wa-border-width-l) var(--wa-border-style) currentColor;
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#play-controls wa-icon-button[name='play']::part(base) {
|
||||
background-color: var(--wa-color-brand-fill-loud);
|
||||
border: none;
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
font-size: 3rem;
|
||||
padding: 0.5em 0.45em 0.5em 0.55em;
|
||||
}
|
||||
[slot='main-footer'].wa-grid > * {
|
||||
max-inline-size: 30ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const sectionAnchors = document.querySelectorAll("[slot*='navigation'] a[href*='#']");
|
||||
sectionAnchors.forEach(sectionAnchor => sectionAnchor.setAttribute('data-drawer', 'close'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
98
docs/assets/scripts/code-examples.js
Normal file
98
docs/assets/scripts/code-examples.js
Normal file
@@ -0,0 +1,98 @@
|
||||
//
|
||||
// Resizing previews
|
||||
//
|
||||
document.addEventListener('mousedown', handleResizerDrag);
|
||||
document.addEventListener('touchstart', handleResizerDrag, { passive: true });
|
||||
|
||||
function handleResizerDrag(event) {
|
||||
const resizer = event.target.closest('.code-example-resizer');
|
||||
const preview = event.target.closest('.code-example-preview');
|
||||
|
||||
if (!resizer || !preview) return;
|
||||
|
||||
let startX = event.changedTouches ? event.changedTouches[0].pageX : event.clientX;
|
||||
let startWidth = parseInt(document.defaultView.getComputedStyle(preview).width, 10);
|
||||
|
||||
event.preventDefault();
|
||||
preview.classList.add('code-example-preview--dragging');
|
||||
document.documentElement.addEventListener('mousemove', dragMove);
|
||||
document.documentElement.addEventListener('touchmove', dragMove);
|
||||
document.documentElement.addEventListener('mouseup', dragStop);
|
||||
document.documentElement.addEventListener('touchend', dragStop);
|
||||
|
||||
function dragMove(event) {
|
||||
const width = startWidth + (event.changedTouches ? event.changedTouches[0].pageX : event.pageX) - startX;
|
||||
preview.style.width = `${width}px`;
|
||||
}
|
||||
|
||||
function dragStop() {
|
||||
preview.classList.remove('code-example-preview--dragging');
|
||||
document.documentElement.removeEventListener('mousemove', dragMove);
|
||||
document.documentElement.removeEventListener('touchmove', dragMove);
|
||||
document.documentElement.removeEventListener('mouseup', dragStop);
|
||||
document.documentElement.removeEventListener('touchend', dragStop);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Toggle source and CodePen functionality
|
||||
//
|
||||
document.addEventListener('click', event => {
|
||||
const toggle = event.target?.closest('.code-example-toggle');
|
||||
const pen = event.target?.closest('.code-example-pen');
|
||||
|
||||
// Toggle source
|
||||
if (toggle) {
|
||||
const codeExample = toggle.closest('.code-example');
|
||||
const isOpen = !codeExample.classList.contains('open');
|
||||
|
||||
toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
||||
codeExample.classList.toggle('open', isOpen);
|
||||
}
|
||||
|
||||
// Edit in CodePen
|
||||
if (pen) {
|
||||
const codeExample = pen.closest('.code-example');
|
||||
const code = codeExample.querySelector('code');
|
||||
const cdnUrl = document.documentElement.dataset.cdnUrl;
|
||||
const html =
|
||||
`<script data-fa-kit-code="b10bfbde90" type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}styles/themes/default.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}styles/webawesome.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}styles/utilities.css">\n\n` +
|
||||
`${code.textContent}`;
|
||||
const css = 'html > body {\n padding: 2rem !important;\n}';
|
||||
const js = '';
|
||||
|
||||
const form = document.createElement('form');
|
||||
form.action = 'https://codepen.io/pen/define';
|
||||
form.method = 'POST';
|
||||
form.target = '_blank';
|
||||
|
||||
const data = {
|
||||
title: '',
|
||||
description: '',
|
||||
tags: ['webawesome'],
|
||||
editors: '1000',
|
||||
head: '<meta name="viewport" content="width=device-width">',
|
||||
html_classes: '',
|
||||
css_external: '',
|
||||
js_external: '',
|
||||
js_module: true,
|
||||
js_pre_processor: 'none',
|
||||
html,
|
||||
css,
|
||||
js,
|
||||
};
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = 'hidden';
|
||||
input.name = 'data';
|
||||
input.value = JSON.stringify(data);
|
||||
form.append(input);
|
||||
|
||||
document.documentElement.append(form);
|
||||
form.submit();
|
||||
form.remove();
|
||||
}
|
||||
});
|
||||
151
docs/assets/styles/code-examples.css
Normal file
151
docs/assets/styles/code-examples.css
Normal file
@@ -0,0 +1,151 @@
|
||||
.code-example {
|
||||
background: var(--wa-color-surface-lowered);
|
||||
border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
color: var(--wa-color-text-normal);
|
||||
margin-block-end: var(--wa-flow-spacing);
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.code-example-preview {
|
||||
position: relative;
|
||||
background: var(--wa-color-surface-default);
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
padding: 2rem 3.25rem 2rem 2rem;
|
||||
min-width: 20rem;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
> :first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Block the preview while dragging to prevent iframes from intercepting drag events */
|
||||
.code-example-preview--dragging:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.code-example-resizer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 1.75rem;
|
||||
font-size: 20px;
|
||||
color: var(--wa-color-text-quiet);
|
||||
background-color: var(--wa-color-neutral-0, white);
|
||||
border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
border-top-right-radius: var(--wa-border-radius-l);
|
||||
cursor: ew-resize;
|
||||
|
||||
wa-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.code-example-preview {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.code-example-resizer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.code-example-source {
|
||||
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
.code-example:not(.open) .code-example-source {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.code-example.open .code-example-toggle wa-icon {
|
||||
rotate: 180deg;
|
||||
}
|
||||
|
||||
.code-example-source pre {
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.code-example-source:not(:has(+ .code-example-buttons)) {
|
||||
border-bottom: none;
|
||||
|
||||
pre {
|
||||
border-bottom-right-radius: var(--wa-border-radius-l);
|
||||
border-bottom-left-radius: var(--wa-border-radius-l);
|
||||
}
|
||||
}
|
||||
|
||||
.code-example-buttons {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: var(--wa-color-surface-default) !important; /* TODO - remove after native styles refactor */
|
||||
color: var(--wa-color-text-quiet) !important; /* TODO - remove after native styles refactor */
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
all: unset;
|
||||
flex: 1 0 auto;
|
||||
font-size: 0.875rem;
|
||||
color: var(--wa-color-text-quiet);
|
||||
border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet) !important; /* TODO - remove after native styles refactor */
|
||||
background: var(--wa-color-surface-default) !important; /* TODO - remove after native styles refactor */
|
||||
color: var(--wa-color-text-quiet) !important; /* TODO - remove after native styles refactor */
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
border-left: none;
|
||||
border-bottom-left-radius: var(--wa-border-radius-l);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom-right-radius: var(--wa-border-radius-l);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
z-index: 3;
|
||||
outline: var(--wa-focus-ring);
|
||||
}
|
||||
}
|
||||
|
||||
.code-example-pen {
|
||||
flex: 0 0 100px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
wa-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -2px;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,9 @@
|
||||
@import 'code-examples.css';
|
||||
@import 'code-highlighter.css';
|
||||
@import 'copy-code.css';
|
||||
@import 'outline.css';
|
||||
@import 'search.css';
|
||||
@import 'cera_typeface.css';
|
||||
@import 'cera-typeface.css';
|
||||
@import 'theme-icons.css';
|
||||
|
||||
:root {
|
||||
|
||||
@@ -1,213 +0,0 @@
|
||||
---
|
||||
title: Code Demo
|
||||
description: Code demos can be used to render code examples as inline live demos.
|
||||
tags: component
|
||||
isPro: true
|
||||
unpublished: true
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-code-demo>
|
||||
<pre><code class="language-html">
|
||||
<button>Click me!</button>
|
||||
<wa-button>Click me!</wa-button>
|
||||
</code></pre>
|
||||
</wa-code-demo>
|
||||
```
|
||||
|
||||
This component is used right here in the docs to render code examples.
|
||||
|
||||
:::warning
|
||||
Do not render untrusted content in a `<wa-code-demo>` element. This component renders the content as HTML, which introduces XSS vulnerabilities if used with untrusted content.
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
### Open by default
|
||||
|
||||
```html {.example}
|
||||
<wa-code-demo open>
|
||||
<pre><code class="language-html">
|
||||
<button>Click me!</button>
|
||||
<wa-button>Click me!</wa-button>
|
||||
</code></pre>
|
||||
</wa-code-demo>
|
||||
```
|
||||
|
||||
### Custom previews
|
||||
|
||||
In some cases you may want to preprocess the code displayed, for example to sanitize HTML, remove irrelevant elements or attributes, fix whitespace, or do server-side rendering (SSR).
|
||||
For these cases, you can slot in a custom preview:
|
||||
|
||||
```html {.example}
|
||||
<wa-code-demo>
|
||||
<wa-button slot="preview">Click me!</wa-button>
|
||||
<pre><code class="language-html">
|
||||
<button>Click me!</button>
|
||||
</code></pre>
|
||||
</wa-code-demo>
|
||||
```
|
||||
|
||||
Note that this means the preview will be in the light DOM, and can conflict with other things on the page.
|
||||
To only render the custom preview within the component’s shadow DOM, or to display raw text, you can wrap it in a `<template>` element:
|
||||
|
||||
```html {.example}
|
||||
<wa-code-demo>
|
||||
<template slot="preview">
|
||||
<wa-button>Click me!</wa-button>
|
||||
</template>
|
||||
<pre><code class="language-html">
|
||||
<button>Click me!</button>
|
||||
</code></pre>
|
||||
</wa-code-demo>
|
||||
```
|
||||
|
||||
### Including resources (CSS, scripts, etc.)
|
||||
|
||||
Demos are rendered in the shadow DOM of the component, so any resources (stylesheets, scripts, etc.) must be included anew.
|
||||
The same applies to isolated demos (see below), opening demos in a new tab, or editing them on CodePen.
|
||||
|
||||
While you _could_ manually include all of these on every single demo, it would get tedious to write,
|
||||
and it would add noise for the reader.
|
||||
|
||||
Instead, `<wa-code-demo>` provides several better ways to include resources.
|
||||
The core idea is that rather than specifying these resources over and over on each demo,
|
||||
you would **point to elements** which would then be cloned into the demo, at the beginning.
|
||||
|
||||
There are two ways to point to elements:
|
||||
- Add a `wa-code-demo-include` class to them
|
||||
- Specify a CSS selector for which resources to look for in the demo’s `include` attribute.
|
||||
|
||||
There are certain types of elements that are handled specially:
|
||||
- `<template>`: contents are cloned instead of the element itself.
|
||||
This is useful for including resources in your demo that you don't want rendered outside the demo.
|
||||
|
||||
The following example shows both methods.
|
||||
It includes all stylesheets on this page whose URLs start with `/dist/styles/themes/`,
|
||||
plus any other elements with the class `.demo-import`, plus a CSS file with the class `wa-code-demo-include`:
|
||||
|
||||
```html {.example}
|
||||
<template class="wa-code-demo-include-isolated">
|
||||
<script type="module" src="/dist/webawesome.loader.js"></script>
|
||||
<style>wa-callout { font-size: var(--wa-font-size-2xl) }</style>
|
||||
<script>console.log('Hello!')</script>
|
||||
</template>
|
||||
<wa-code-demo include="link[rel=stylesheet]">
|
||||
<pre><code class="language-html">
|
||||
<wa-callout>Helloooo!</wa-callout>
|
||||
</code></pre>
|
||||
</wa-code-demo>
|
||||
```
|
||||
|
||||
|
||||
### Isolated viewports
|
||||
|
||||
Often you may want to render your demo in a separate viewport, e.g. when it’s about a whole page.
|
||||
Or, you may want to sandbox it.
|
||||
For these cases, you can use the `viewport` attribute, which renders the demo in an iframe:
|
||||
|
||||
```html {.example}
|
||||
<wa-code-demo viewport>
|
||||
<pre><code class="language-html">
|
||||
<button>Click me!</button>
|
||||
</code></pre>
|
||||
</wa-code-demo>
|
||||
```
|
||||
|
||||
### Viewport Emulation
|
||||
|
||||
When you use the `viewport` attribute, `<wa-code-demo>` uses [`<wa-viewport-demo>`](../viewport-demo/) internally, and passes the value of `viewport` to it.
|
||||
This allows you to also also provide a width value to emulate and it will be scaled accordingly:
|
||||
|
||||
```html {.example}
|
||||
<wa-code-demo viewport="300">
|
||||
<pre><code class="language-html">
|
||||
<button>Click me!</button>
|
||||
</code></pre>
|
||||
</wa-code-demo>
|
||||
```
|
||||
|
||||
Or both a width and a height value:
|
||||
|
||||
```html {.example}
|
||||
<wa-code-demo viewport="1600 x 1000">
|
||||
<pre><code class="language-html">
|
||||
<button>Click me!</button>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
|
||||
</code></pre>
|
||||
</wa-code-demo>
|
||||
```
|
||||
|
||||
If you only provide a width value, the viewport will be rendered to an initial 16:9 aspect ratio,
|
||||
which can be changed via resizing.
|
||||
You can customize this via the `--viewport-initial-aspect-ratio` property.
|
||||
|
||||
### Isolated demos with resources
|
||||
|
||||
Including resources in isolated demos works the same way.
|
||||
Any relative URLs are still resolved relative to the host document.
|
||||
In addition to the `wa-code-demo-include` class, which specifies resources to be included in *every* demo,
|
||||
you can also use the `wa-code-demo-include-isolated` class which specifies resources to be included in every *isolated* demo,
|
||||
i.e. the previews of demos using the `viewport` attribute, but also opening demos in a new tab or editing them on CodePen.
|
||||
|
||||
```html {.example}
|
||||
<template class="wa-code-demo-include-isolated">
|
||||
<script type="module" src="{% cdnUrl 'webawesome.loader.js' %}"></script>
|
||||
<style>
|
||||
body {
|
||||
padding: var(--wa-space-l);
|
||||
}
|
||||
wa-callout { font-size: var(--wa-font-size-2xl) }
|
||||
</style>
|
||||
<script>console.log('Hello from iframe!')</script>
|
||||
</template>
|
||||
<wa-code-demo viewport include="link[rel=stylesheet]">
|
||||
<pre><code class="language-html">
|
||||
<wa-callout>Helloooo!</wa-callout>
|
||||
</code></pre>
|
||||
</wa-code-demo>
|
||||
```
|
||||
|
||||
## Styling
|
||||
|
||||
Just setting `border-radius` or `border` should work as expected:
|
||||
|
||||
```html{.example}
|
||||
<wa-code-demo style="border: 2px dotted var(--wa-color-blue-50); border-radius: var(--wa-border-radius-m)">
|
||||
<pre><code class="language-html">
|
||||
<button>Click me!</button>
|
||||
<wa-button>Click me!</wa-button>
|
||||
</code></pre>
|
||||
</wa-code-demo>
|
||||
```
|
||||
|
||||
The divider width is controlled separately via `--divider-width`:
|
||||
|
||||
```html{.example}
|
||||
<wa-code-demo open style="border-width: var(--wa-border-width-l); --divider-width: var(--wa-border-width-m);">
|
||||
<pre><code class="language-html">
|
||||
<button>Click me!</button>
|
||||
<wa-button>Click me!</wa-button>
|
||||
</code></pre>
|
||||
</wa-code-demo>
|
||||
```
|
||||
|
||||
## Roadmap
|
||||
|
||||
This component is a work in progress.
|
||||
Some of the things that are not yet implemented are listed below.
|
||||
It goes without saying that this list is a rough plan and subject to change.
|
||||
|
||||
### High priority
|
||||
|
||||
- Make the component dynamic so that when the code changes, the demo is updated
|
||||
|
||||
### Low priority
|
||||
|
||||
- Horizontal layout
|
||||
- Tabbed layout
|
||||
- Provide a way to display CSS and JS separately
|
||||
- Provide a way to customize the playground used (currently it is hardcoded to CodePen)
|
||||
- Provide a way to customize the buttons shown
|
||||
@@ -4,7 +4,6 @@ description: Pages offer an easy way to scaffold entire page layouts using minim
|
||||
tags: [pro, organization, layout]
|
||||
isPro: true
|
||||
order: 0
|
||||
# icon: page
|
||||
---
|
||||
|
||||
The page component is designed to power full webpages. It is flexible enough to handle most modern designs and includes a simple mechanism for handling desktop and mobile navigation.
|
||||
@@ -41,688 +40,35 @@ body {
|
||||
}
|
||||
```
|
||||
|
||||
::info
|
||||
:::info
|
||||
If you use [native styles](/docs/native/), this is already taken care of.
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
:::warning
|
||||
Open demos in a new tab to examine their behavior in different window sizes.
|
||||
The previews below use simulated zooming which, depending on your browser, may not be accurate.
|
||||
Open demos in a new tab to examine their behavior in different window sizes. The previews below use simulated zooming which, depending on your browser, may not be accurate.
|
||||
:::
|
||||
|
||||
### Documentation
|
||||
|
||||
A sample documentation page using [all available slots](#slots).
|
||||
The navigation menu collapses into a drawer at a custom `mobile-breakpoint` of 920px.
|
||||
It can be opened using a button with `[data-toggle-nav]` that appears in the `subheader` slot. The `aside` slot is also hidden below 920px.
|
||||
A sample documentation page using [all available slots](#slots). The navigation menu collapses into a drawer at a custom `mobile-breakpoint` of 920px. It can be opened using a button with `[data-toggle-nav]` that appears in the `subheader` slot. The `aside` slot is also hidden below 920px.
|
||||
|
||||
```html {.example viewport="1600"}
|
||||
<wa-page mobile-breakpoint="920">
|
||||
<div slot="banner" class="wa-body-s">
|
||||
<a href="#" class="wa-cluster wa-align-items-baseline wa-gap-xs" style="flex-wrap: nowrap;">
|
||||
<wa-icon name="gift"></wa-icon>
|
||||
<span>Give a Hoot for the Holidays: Donate now and double your impact.</span>
|
||||
</a>
|
||||
</div>
|
||||
<header slot="header" class="wa-split">
|
||||
<div class="wa-cluster">
|
||||
<wa-icon name="feather-pointed" style="color: var(--wa-color-brand-fill-loud); font-size: 1.5em;"></wa-icon>
|
||||
<span id="brand-name" class="wa-heading-s wa-desktop-only">Audubon Worldwide</span>
|
||||
<a href="#">Our Work</a>
|
||||
<a href="#">About Us</a>
|
||||
<a href="#">Discover</a>
|
||||
<a href="#">Get Involved</a>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-button size="small" variant="brand" appearance="outlined">Find Your Local Audubon</wa-button>
|
||||
<wa-button size="small" variant="brand">Donate</wa-button>
|
||||
</div>
|
||||
</header>
|
||||
<nav slot="subheader">
|
||||
<div class="wa-cluster" style="flex-wrap: nowrap;">
|
||||
<wa-icon-button data-toggle-nav name="bars" label="Menu"></wa-icon-button>
|
||||
<wa-breadcrumb style="font-size: var(--wa-font-size-s);">
|
||||
<wa-breadcrumb-item>Field Guides</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Owls</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Great Horned Owl</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
</div>
|
||||
<wa-input id="search" class="wa-desktop-only" placeholder="Search" size="small" style="max-inline-size: 12rem;">
|
||||
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
||||
</wa-input>
|
||||
</nav>
|
||||
<nav slot="navigation-header">
|
||||
<div class="wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" label=""></wa-avatar>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span class="wa-heading-s">Great Horned Owl</span>
|
||||
<span class="wa-caption-s" lang="la"><em>Bubo virginianus</em></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav slot="navigation">
|
||||
<a href="#identification">Identification</a>
|
||||
<a href="#range">Range and Habitat</a>
|
||||
<a href="#behavior">Behavior</a>
|
||||
<a href="#conservation">Conservation</a>
|
||||
</nav>
|
||||
<nav slot="navigation-footer">
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="camera"></wa-icon>
|
||||
<span>Photo Gallery</span>
|
||||
</a>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="map-location-dot"></wa-icon>
|
||||
<span>Interactive Range Map</span>
|
||||
</a>
|
||||
</nav>
|
||||
<header slot="main-header">
|
||||
<div class="wa-flank:end wa-border-radius-l wa-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-stack" style="margin: var(--wa-space-2xl);">
|
||||
<h1>Great Horned Owl</h1>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-tag size="small">Owls</wa-tag>
|
||||
<wa-tag size="small">Birds of Prey</wa-tag>
|
||||
<wa-tag size="small">Pleistocene Birds</wa-tag>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="ruler"></wa-icon>
|
||||
<span class="wa-caption-m">L 21.5" | WS 48.5"</span>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="earth-americas"></wa-icon>
|
||||
<span class="wa-caption-m">North America (Widespread), Central America (Limited), South America (Limited)</span>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="shield-heart"></wa-icon>
|
||||
<span class="wa-caption-m">Least Concern</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-frame" style="border-radius: var(--wa-border-radius-l); max-inline-size: 40ch;">
|
||||
<img src="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="wa-body-l">
|
||||
<h2 id="identification">Identification</h2>
|
||||
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Eget habitant scelerisque lectus ultrices nascetur aliquet sapien primis. Cursus sapien fusce semper nulla elit sociosqu lectus per sem. Sem ad porttitor dictum nisl pharetra tortor convallis. Sit molestie hendrerit porta dictum tortor posuere euismod magna. Mauris suspendisse pharetra finibus; eleifend etiam ridiculus.</p>
|
||||
<h2 id="range">Range and Habitat</h2>
|
||||
<p>Diam sed ipsum pretium porttitor class cubilia elementum. Blandit felis ligula habitant ultricies vulputate rutrum lacus commodo pulvinar. Nostra semper placerat lectus in dis eu. Sagittis ipsum placerat rhoncus lacus id eget. Erat pharetra aptent enim, augue accumsan ultricies inceptos habitasse. Senectus id maximus parturient tellus; fermentum posuere vulputate luctus. Ac tempus dapibus vehicula ligula ullamcorper sit duis.</p>
|
||||
<h2 id="behavior">Behavior</h2>
|
||||
<p>Erat vitae luctus arcu taciti malesuada pretium arcu justo primis. Cubilia vitae maecenas congue velit id netus arcu. Dictum vel pellentesque taciti fermentum risus consectetur amet. Faucibus commodo habitasse sem maximus praesent purus, dignissim tristique porta. Platea magna justo ipsum ut metus ac facilisi. Imperdiet laoreet pharetra maximus lacus tortor suscipit. Nam quisque iaculis orci porttitor pellentesque rhoncus. Molestie sagittis tincidunt quisque nisi non urna conubia.</p>
|
||||
<h2 id="conservation">Conservation</h2>
|
||||
<p>Nullam magna quam quisque eu varius integer. Inceptos donec facilisi risus himenaeos semper mollis habitasse. Vehicula lacus vivamus euismod pharetra mollis dictum. Ante ex tortor elementum eleifend habitasse orci aliquam. Fames erat senectus fames etiam dapibus cursus.</p>
|
||||
</main>
|
||||
<footer slot="main-footer">
|
||||
<section>
|
||||
<h2 class="wa-heading-m">Sources</h2>
|
||||
<ul class="wa-body-s">
|
||||
<li><cite><a href="https://www.audubon.org/field-guide/bird/great-horned-owl" target="_blank" rel="noopener">Great Horned Owl</a></cite>, National Audubon Society. Retrieved 5 December 2024.</li>
|
||||
<li><cite><a href="https://www.allaboutbirds.org/guide/Great_Horned_Owl/" target="_blank" rel="noopener">Great Horned Owl</a></cite>, All About Birds by CornellLab. Retrieved 5 December 2024.</li>
|
||||
<li>Armistead, G. L. (2015). <cite>Field guide to birds of Pennsylvania</cite>. Scott & Nix, Inc.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</footer>
|
||||
<aside slot="aside" class="wa-desktop-only">
|
||||
<h2 class="wa-heading-m">Discover More Birds</h2>
|
||||
<wa-card>
|
||||
<div slot="media" class="wa-frame">
|
||||
<img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span class="wa-heading-s">Long-eared Owl</span>
|
||||
<span class="wa-caption-s" lang="la"><em>Asio otus</em></span>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div slot="media" class="wa-frame">
|
||||
<img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span class="wa-heading-s">Northen Hawk Owl</span>
|
||||
<span class="wa-caption-s" lang="la"><em>Surnia ulula</em></span>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div slot="media" class="wa-frame">
|
||||
<img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span class="wa-heading-s">Golden Eagle</span>
|
||||
<span class="wa-caption-s" lang="la"><em>Aquila chrysaetos</em></span>
|
||||
</div>
|
||||
</wa-card>
|
||||
</aside>
|
||||
<footer slot="footer" class="wa-grid wa-gap-xl">
|
||||
<div class="wa-cluster" style="flex-wrap: nowrap;">
|
||||
<wa-icon name="feather-pointed" style="font-size: 1.5em;"></wa-icon>
|
||||
<span class="wa-heading-s">Audubon Worldwide</span>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-xs">Our Work</h3>
|
||||
<a href="#">Habitat Restoration</a>
|
||||
<a href="#">Migration Science</a>
|
||||
<a href="#">Advocacy</a>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-xs">About Us</h3>
|
||||
<a href="#">Our History</a>
|
||||
<a href="#">Leadership</a>
|
||||
<a href="#">Fiscal Reports</a>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-xs">Discover</h3>
|
||||
<a href="#">Field Guides</a>
|
||||
<a href="#">Photo Search</a>
|
||||
<a href="#">Gear and Resources</a>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-xs">Get Involved</h3>
|
||||
<a href="#">Adopt a Bird</a>
|
||||
<a href="#">Your Local Audubon</a>
|
||||
<a href="#">Youth Audubon Camps</a>
|
||||
</div>
|
||||
</footer>
|
||||
</wa-page>
|
||||
|
||||
<style>
|
||||
wa-page {
|
||||
--menu-width: 15rem;
|
||||
--aside-width: 15rem;
|
||||
}
|
||||
wa-page[view='desktop'] {
|
||||
[slot*='navigation'] {
|
||||
border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
}
|
||||
wa-page[view='mobile'] {
|
||||
--menu-width: auto;
|
||||
--aside-width: auto;
|
||||
}
|
||||
|
||||
[slot='banner'] {
|
||||
--wa-color-text-link: var(--wa-color-neutral-on-loud);
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
[slot='header'] {
|
||||
--wa-link-decoration-default: none;
|
||||
border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
[slot*='header'] a {
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
[slot='subheader'] {
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
[slot='navigation-header'] {
|
||||
border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
[slot*='navigation'] a {
|
||||
--wa-color-text-link: var(--wa-color-text-normal);
|
||||
}
|
||||
[slot='navigation-footer'] {
|
||||
border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
|
||||
.wa-flank {
|
||||
--flank-size: 1.25em;
|
||||
}
|
||||
}
|
||||
[slot='main-header'],
|
||||
main,
|
||||
[slot='main-footer'] {
|
||||
max-inline-size: 60rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
[slot='main-footer'] {
|
||||
border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
[slot='footer'] {
|
||||
--wa-color-text-link: var(--wa-color-text-quiet);
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const sectionAnchors = document.querySelectorAll("[slot*='navigation'] a[href*='#']");
|
||||
sectionAnchors.forEach((sectionAnchor) => sectionAnchor.setAttribute("data-drawer", "close"));
|
||||
</script>
|
||||
```
|
||||
<p>
|
||||
<wa-button href="/assets/examples/page/demo-1.html" target="_blank">
|
||||
Open demo in a new window
|
||||
</wa-button>
|
||||
</p>
|
||||
|
||||
### Media
|
||||
|
||||
A sample media app page using `header`, `navigation-header`, `main-header`, and `main-footer` along with the default slot. The navigation menu collapses into a drawer at the default `mobile-breakpoint` and can be opened using a button with `[data-toggle-nav]` that appears in the `header` slot.
|
||||
|
||||
```html {.example viewport="1600"}
|
||||
<wa-page class="wa-dark">
|
||||
<header slot="header">
|
||||
<div class="wa-cluster">
|
||||
<wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
|
||||
<wa-icon name="record-vinyl"></wa-icon>
|
||||
<span class="wa-heading-m">radiogaga</span>
|
||||
</div>
|
||||
<wa-input id="search-header" placeholder="Search" class="wa-desktop-only" style="max-inline-size: 100%;">
|
||||
<wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
|
||||
</wa-input>
|
||||
<div class="wa-cluster">
|
||||
<wa-button appearance="outlined">Log In</wa-button>
|
||||
<wa-button>Sign Up</wa-button>
|
||||
</div>
|
||||
</header>
|
||||
<div slot="navigation-header" class="wa-split">
|
||||
<wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%;" class="wa-mobile-only">
|
||||
<wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
|
||||
</wa-input>
|
||||
<div class="wa-split">
|
||||
<h2 class="wa-heading-s">For You</h2>
|
||||
<wa-icon-button id="settings" name="gear" label="Settings"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
<nav slot="navigation">
|
||||
<h3 class="wa-heading-xs">Discover</h3>
|
||||
<ul class="wa-stack wa-gap-0">
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="house"></wa-icon>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="star"></wa-icon>
|
||||
<span>New</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="tower-broadcast"></wa-icon>
|
||||
<span>Stations</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 class="wa-heading-xs">Library</h3>
|
||||
<ul class="wa-stack wa-gap-0">
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="heart"></wa-icon>
|
||||
<span>Favorites</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="bars-staggered"></wa-icon>
|
||||
<span>Playlists</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="microphone-lines"></wa-icon>
|
||||
<span>Artists</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="layer-group"></wa-icon>
|
||||
<span>Albums</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="podcast"></wa-icon>
|
||||
<span>Podcasts</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 class="wa-heading-xs">Recently Played</h3>
|
||||
<ul id="recent" class="wa-stack wa-gap-0">
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="radio" style="background: var(--wa-color-red-90); color: var(--wa-color-red-60);"></wa-icon>
|
||||
<span>Lo-Fi Station</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="font-awesome" style="background: var(--wa-color-blue-30); color: var(--wa-color-yellow-90);"></wa-icon>
|
||||
<span>Podcast Awesome</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="wa-flank">
|
||||
<wa-icon name="seedling" style="background: var(--wa-color-green-70); color: var(--wa-color-green-90);"></wa-icon>
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>Seasons</span>
|
||||
<span class="wa-caption-s">Blister Soul</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div slot="main-header">
|
||||
<wa-icon-button id="back" name="chevron-left" label="Back"></wa-icon-button>
|
||||
<wa-tooltip for="back" placement="bottom" distance="2">Back</wa-tooltip>
|
||||
<div class="wa-cluster">
|
||||
<wa-icon-button id="favorite" name="heart" variant="regular" label="Favorite"></wa-icon-button>
|
||||
<wa-tooltip for="favorite" placement="bottom" distance="2">Favorite</wa-tooltip>
|
||||
<wa-icon-button id="options" name="ellipsis" label="Options"></wa-icon-button>
|
||||
<wa-tooltip for="options" placement="bottom" distance="2">Options</wa-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
<div class="wa-stack wa-gap-3xl">
|
||||
<div class="wa-flank wa-gap-3xl" style="--content-percentage: 40%;">
|
||||
<div class="wa-frame wa-border-radius-l" style="max-inline-size: 40ch;">
|
||||
<img src="https://images.unsplash.com/photo-1732430579016-8d5e5ebd3c99?q=20" alt="Home for the Holidays album artwork" />
|
||||
</div>
|
||||
<div class="wa-split:column wa-align-items-start">
|
||||
<div class="wa-stack" style="margin-block: auto;">
|
||||
<h1 class="wa-heading-3xl">Home for the Holidays</h1>
|
||||
<a href="#" class="wa-heading-m">The Shire Choir</a>
|
||||
<div class="wa-cluster wa-caption-m wa-gap-2xs">
|
||||
<span>Holiday</span>
|
||||
<span>•</span>
|
||||
<span>2024</span>
|
||||
<span>•</span>
|
||||
<span>12 songs, 41 minutes 9 seconds</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="play-controls" class="wa-split wa-gap-xl">
|
||||
<div class="wa-cluster wa-gap-xl">
|
||||
<wa-icon-button name="play" label="Play"></wa-icon-button>
|
||||
<wa-icon-button name="shuffle" label="Shuffle"></wa-icon-button>
|
||||
</div>
|
||||
<wa-icon-button name="plus" label="Add to Library"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ol class="wa-stack wa-gap-0">
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="1"></wa-icon>
|
||||
<span>Fa-La-La-Fellowship</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">3:27</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="2"></wa-icon>
|
||||
<span>Sleigh Ride</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">2:36</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="3"></wa-icon>
|
||||
<span>All I Want For Christmas Is Stew</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">2:51</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="4"></wa-icon>
|
||||
<span>Rockin' Around the Christmas Ent</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">3:05</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="5"></wa-icon>
|
||||
<span>Merry, Did You Know?</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">1:56</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="6"></wa-icon>
|
||||
<span>Run Run Shadowfax</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">3:32</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="7"></wa-icon>
|
||||
<span>You're a Mean One, Mr. Grima</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">2:46</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="8"></wa-icon>
|
||||
<span>O Come, All Ye Faithful</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">3:27</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<wa-icon name="9"></wa-icon>
|
||||
<span>Do You Hear What I Hear</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">2:13</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<span class="wa-cluster wa-gap-3xs">
|
||||
<wa-icon name="1"></wa-icon>
|
||||
<wa-icon name="0"></wa-icon>
|
||||
</span>
|
||||
<span>Carol of the Horns</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">2:55</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<span class="wa-cluster wa-gap-3xs">
|
||||
<wa-icon name="1"></wa-icon>
|
||||
<wa-icon name="1"></wa-icon>
|
||||
</span>
|
||||
<span>Silent Night</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">3:10</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
<li class="wa-split">
|
||||
<span class="wa-flank">
|
||||
<span class="wa-cluster wa-gap-3xs">
|
||||
<wa-icon name="1"></wa-icon>
|
||||
<wa-icon name="2"></wa-icon>
|
||||
</span>
|
||||
<span>Wizard Wonderland</span>
|
||||
</span>
|
||||
<span class="wa-cluster">
|
||||
<span class="wa-caption-m">3:22</span>
|
||||
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</main>
|
||||
<div slot="main-footer" class="wa-grid wa-gap-xl wa-align-items-center">
|
||||
<h2 class="wa-heading-2xl">More You Might Like</h2>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<img src="https://images.unsplash.com/photo-1675219119611-40323b738563?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Festival of Lights</span>
|
||||
<span class="wa-caption-s">Station</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<img src="https://images.unsplash.com/photo-1481930916222-5ec4696fc0f2?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Holiday Cheer</span>
|
||||
<span class="wa-caption-s">Essential Playlist</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Nursery Rhymes from the Shire</span>
|
||||
<span class="wa-caption-s">The Shire Choir</span>
|
||||
</div>
|
||||
</div>
|
||||
</wa-page>
|
||||
|
||||
<style>
|
||||
wa-page {
|
||||
--menu-width: 30ch;
|
||||
--wa-tooltip-arrow-size: 0;
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
wa-page[view='mobile'] {
|
||||
--menu-width: auto;
|
||||
|
||||
[slot*='main'], main {
|
||||
padding: var(--wa-space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
wa-page,
|
||||
[slot='header'],
|
||||
wa-page[view='desktop'] [slot*='navigation'] {
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
wa-page[view='mobile'] [slot*='navigation'] {
|
||||
padding: 0;
|
||||
}
|
||||
wa-page::part(base) {
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
[slot='header'] {
|
||||
background: linear-gradient(to bottom, var(--wa-color-surface-raised), var(--wa-color-surface-lowered));
|
||||
}
|
||||
[slot='navigation-header'],
|
||||
[slot='main-header'] {
|
||||
padding-block-end: 0 !important;
|
||||
padding-block-start: var(--wa-space-3xl);
|
||||
}
|
||||
[slot='navigation'] {
|
||||
a {
|
||||
--wa-color-text-link: var(--wa-color-text-normal);
|
||||
--wa-link-decoration-default: none;
|
||||
--wa-link-decoration-hover: none;
|
||||
--flank-size: 2rem;
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: var(--wa-space-xs);
|
||||
|
||||
&:hover {
|
||||
background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
|
||||
}
|
||||
}
|
||||
}
|
||||
wa-icon {
|
||||
align-items: center;
|
||||
aspect-ratio: 1;
|
||||
color: var(--wa-color-brand-fill-loud);
|
||||
display: flex;
|
||||
height: var(--flank-size);
|
||||
justify-content: center;
|
||||
}
|
||||
#recent wa-icon {
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
}
|
||||
|
||||
[slot='main-header'] {
|
||||
border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-border-radius-l) var(--wa-border-radius-l) 0 0
|
||||
}
|
||||
main,
|
||||
[slot*='main'] {
|
||||
margin-inline: var(--wa-space-m);
|
||||
}
|
||||
main ol li {
|
||||
padding: var(--wa-space-m);
|
||||
|
||||
&:hover {
|
||||
background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
.wa-flank {
|
||||
--flank-size: 2rem;
|
||||
}
|
||||
}
|
||||
main,
|
||||
[slot='main-footer'] {
|
||||
border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
main,
|
||||
[slot='main-header'] {
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
}
|
||||
#play-controls wa-icon-button::part(base) {
|
||||
border: var(--wa-border-width-l) var(--wa-border-style) currentColor;
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#play-controls wa-icon-button[name="play"]::part(base) {
|
||||
background-color: var(--wa-color-brand-fill-loud);
|
||||
border: none;
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
font-size: 3rem;
|
||||
padding: 0.5em 0.45em 0.5em 0.55em;
|
||||
}
|
||||
[slot='main-footer'].wa-grid > * {
|
||||
max-inline-size: 30ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const sectionAnchors = document.querySelectorAll("[slot*='navigation'] a[href*='#']");
|
||||
sectionAnchors.forEach((sectionAnchor) => sectionAnchor.setAttribute("data-drawer", "close"));
|
||||
</script>
|
||||
```
|
||||
|
||||
<p>
|
||||
<wa-button href="/assets/examples/page/demo-2.html" target="_blank">
|
||||
Open demo in a new window
|
||||
</wa-button>
|
||||
</p>
|
||||
|
||||
## Customization
|
||||
|
||||
@@ -764,14 +110,16 @@ A page isn't very opinionated when it comes to responsive behaviors, but there a
|
||||
|
||||
Each slot is a [flex container](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container) and specifies some flex properties so that your content is reasonably responsive by default.
|
||||
|
||||
The following slots specify `justify-content: space-between` and `flex-wrap: wrap` to evenly distribute child elements horizontally and allow them to wrap when space is limited:
|
||||
The following slots specify `justify-content: space-between` and `flex-wrap: wrap` to evenly distribute child elements horizontally and allow them to wrap when space is limited.
|
||||
|
||||
- `header`
|
||||
- `subheader`
|
||||
- `main-header`
|
||||
- `main-footer`
|
||||
- `footer`
|
||||
|
||||
The following slots specify `flex-direction: column` to arrange child elements vertically:
|
||||
The following slots specify `flex-direction: column` to arrange child elements vertically.
|
||||
|
||||
- `navigation-header`
|
||||
- `navigation` (or `menu`)
|
||||
- `navigation-footer`
|
||||
@@ -783,34 +131,14 @@ You can override the default display and flex properties for each slot with your
|
||||
|
||||
#### Responsive Navigation
|
||||
|
||||
When you use the `navigation` slot, your slotted content automatically collapses into a drawer on smaller screens.
|
||||
The breakpoint at which this occurs is `768px` by default, but you can change it using the `mobile-breakpoint` attribute,
|
||||
which takes either a number or a [CSS length](https://developer.mozilla.org/en-US/docs/Web/CSS/length).
|
||||
When you use the `navigation` slot, your slotted content automatically collapses into a drawer on smaller screens. The breakpoint at which this occurs is `768px` by default, but you can change it using the `mobile-breakpoint` attribute, which takes either a number or a [CSS length](https://developer.mozilla.org/en-US/docs/Web/CSS/length).
|
||||
|
||||
```html
|
||||
<wa-page mobile-breakpoint="600"> ... </wa-page>
|
||||
```
|
||||
```html {.example viewport}
|
||||
<wa-page mobile-breakpoint="50ch">
|
||||
<div slot=navigation>Nav</div>
|
||||
<header slot=header>
|
||||
<div style="width: 50ch; background: gold">I’m 50ch wide</div>
|
||||
</header>
|
||||
</wa-page>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
By default, a "hamburger" button appears in the `header` slot to toggle the navigation menu on smaller screens.
|
||||
You can customize what this looks like by slotting your own button in the `toggle-navigation` slot,
|
||||
or place the `data-toggle-nav` attribute on any button on your page (This _does not_ have to be a Web Awesome element.).
|
||||
By default, a "hamburger" button appears in the `header` slot to toggle the navigation menu on smaller screens. You can customize what this looks like by slotting your own button in the `toggle-navigation` slot or place the `data-toggle-nav` attribute on any button on your page. This _does not_ have to be a Web Awesome element.
|
||||
|
||||
The default button not be shown when using either of these methods — if you want to use multiple navigation toggles on your page, simply add the `data-toggle-nav` attribute to multiple elements.
|
||||
|
||||
```html
|
||||
@@ -827,15 +155,15 @@ Alternatively, you can apply `nav-state="open"` and `nav-state="closed"` to the
|
||||
<wa-page nav-state="open"> ... </wa-page>
|
||||
```
|
||||
|
||||
`<wa-page>` is given the attribute `view="mobile"` or `view="desktop"` when the viewport narrower or wider than the `mobile-breakpoint` value, respectively. You can leverage these attributes to change styles depending on the size of the viewport.
|
||||
This is especially useful to hide your `data-toggle-nav` button when the viewport is wider:
|
||||
`<wa-page>` is given the attribute `view="mobile"` or `view="desktop"` when the viewport narrower or wider than the `mobile-breakpoint` value, respectively. You can leverage these attributes to change styles depending on the size of the viewport. This is especially useful to hide your `data-toggle-nav` button when the viewport is wider.
|
||||
|
||||
```css
|
||||
wa-page[view='desktop'] [data-toggle-nav] {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
::info
|
||||
:::info
|
||||
If you use [native styles](/docs/native/), this is already taken care for you, and the `data-toggle-nav` button is already hidden on wider screens.
|
||||
:::
|
||||
|
||||
@@ -843,7 +171,8 @@ If you use [native styles](/docs/native/), this is already taken care for you, a
|
||||
|
||||
You specify widths for some slots on your page with [CSS custom properties](#css-custom-properties) for `--menu-width`, `--main-width`, and `--aside-width`.
|
||||
|
||||
If you specify `--menu-width` to apply a specific width to your `navigation` slot, space will still be reserved on the page even below the `mobile-breakpoint`. To collapse this space on smaller screens, add the following code to your styles:
|
||||
If you specify `--menu-width` to apply a specific width to your `navigation` slot, space will still be reserved on the page even below the `mobile-breakpoint`. To collapse this space on smaller screens, add the following code to your styles.
|
||||
|
||||
```css
|
||||
wa-page[view='mobile'] {
|
||||
--menu-width: auto;
|
||||
@@ -865,7 +194,8 @@ wa-page[view='mobile'] {
|
||||
|
||||
A page specifies default `padding` within each slot and a `gap` between the slot's direct children. You can drop elements into any slot, and reasonable spacing is already applied for you.
|
||||
|
||||
You can override the default spacing for each slot with your own CSS. In this example, we're setting custom `gap` and `padding` for the `footer` slot:
|
||||
You can override the default spacing for each slot with your own CSS. In this example, we're setting custom `gap` and `padding` for the `footer` slot.
|
||||
|
||||
```css
|
||||
[slot="footer"] {
|
||||
gap: var(--wa-space-xl);
|
||||
@@ -875,12 +205,11 @@ You can override the default spacing for each slot with your own CSS. In this ex
|
||||
|
||||
## Utility classes
|
||||
|
||||
[Native styles](/docs/native/) define a few useful defaults for `<wa-page>`, as well as
|
||||
two utility classes you can use for common responsive design tasks:
|
||||
[Native styles](/docs/native/) define a few useful defaults for `<wa-page>`, as well as two utility classes you can use for common responsive design tasks:
|
||||
|
||||
- `.wa-mobile-only` hides an element on the desktop view
|
||||
- `.wa-desktop-only` hides an element on the mobile view
|
||||
|
||||
|
||||
If you don’t want to use [native styles](/docs/native/), you can include this stylesheet in your project to use these:
|
||||
|
||||
```html
|
||||
|
||||
@@ -9,14 +9,6 @@ elements:
|
||||
file: styles/native/input.css
|
||||
---
|
||||
|
||||
<style>
|
||||
wa-code-demo::part(preview) {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Text Fields
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
.anchor-heading:has(+ wa-code-demo, + template + wa-code-demo) {
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
wa-code-demo:has(+ .anchor-heading) {
|
||||
margin-block-end: var(--wa-space-3xl);
|
||||
}
|
||||
@@ -29,6 +29,7 @@ During the alpha period, things might break! We take breaking changes very serio
|
||||
- Added a `min-block-size` to `<wa-divider orientation="vertical">` to ensure the divider is visible regardless of container height [issue:675]
|
||||
- Fixed a bug in `<wa-radio-group>` that caused radios to uncheck when assigning a numeric value [issue:924]
|
||||
- Fixed `<wa-button-group>` so dividers properly show between buttons
|
||||
- Removed the experimental `<wa-code-demo>` component
|
||||
|
||||
## 3.0.0-alpha.13
|
||||
|
||||
|
||||
@@ -99,11 +99,7 @@ To render a code preview, use the standard code field syntax and add a class of
|
||||
```
|
||||
````
|
||||
|
||||
You can add additional modifiers as classes or attributes.
|
||||
For example, `.open` to expand the code by default.
|
||||
The order of these modifiers doesn't matter, but no spaces should exist between them.
|
||||
Class name modifiers are turned on by simply using their name as a class (e.g. `open` to expand the code by default),
|
||||
and turned off by using `no-` followed by the class name (e.g. `no-edit` to hide the edit button).
|
||||
You can also append `.open` to expand the code by default, and `.no-edit` to disable the CodePen button. The order of these modifiers doesn't matter, but no spaces should exist between the language and the modifiers.
|
||||
|
||||
````md
|
||||
```html {.example .open .no-edit}
|
||||
@@ -111,23 +107,6 @@ and turned off by using `no-` followed by the class name (e.g. `no-edit` to hide
|
||||
```
|
||||
````
|
||||
|
||||
the class modifiers currently supported are:
|
||||
- `open` - expands the code (default: true for the first code example in the page, false for all others)
|
||||
- `new` - Uses `<wa-code-demo>` (default: true). Disable to use the old, non-component demo code.
|
||||
- `edit` - Enable the CodePen button (default: true) _(old only)_
|
||||
|
||||
The `viewport` and `include` attributes of [`<wa-code-demo>`](../components/code-demo/) can also be specified.
|
||||
By default, `include` is set to `link[rel=stylesheet]` to include all stylesheets on the page for non-isolated demos,
|
||||
and `link[rel=stylesheet][href^="/dist/"]` for isolated demos.
|
||||
Attributes are specified as described in the [`markdown-it-attrs` documentation](https://www.npmjs.com/package/markdown-it-attrs).
|
||||
|
||||
This particular syntax was chosen for a few reasons:
|
||||
|
||||
1. It's easy to remember
|
||||
2. It works out of the box with markdown-it
|
||||
3. It appears to have the best support across editors and previewers (the language is usually highlighted correctly)
|
||||
|
||||
|
||||
#### Callouts
|
||||
|
||||
Special callouts can be added using the following syntax.
|
||||
|
||||
@@ -1,193 +0,0 @@
|
||||
:host {
|
||||
--preview-background: var(--wa-color-surface-default, canvas);
|
||||
--preview-backdrop: var(--wa-color-surface-lowered, rgb(0 0 0 / 0.25));
|
||||
--preview-resize: inline;
|
||||
--preview-min-width: 10em;
|
||||
--preview-max-width: 100%;
|
||||
--preview-padding: var(--wa-space-2xl, 2rem);
|
||||
--divider-width: var(--wa-border-width-s, 1px);
|
||||
--viewport-initial-aspect-ratio: 16 / 9;
|
||||
--viewport-bezel-width: 0.25em;
|
||||
|
||||
--code-expand-duration: var(--wa-transition-fast, 0.3s);
|
||||
--code-collapse-duration: var(--wa-transition-normal, 0.3s);
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
border-radius: var(--wa-code-demo-rounding, var(--wa-border-radius-l));
|
||||
color: var(--wa-color-text-normal);
|
||||
margin-block-end: var(--wa-flow-spacing);
|
||||
background: var(--preview-backdrop);
|
||||
interpolate-size: allow-keywords;
|
||||
}
|
||||
|
||||
/* Different defaults for isolated demos */
|
||||
:host([viewport]) {
|
||||
--preview-resize: none; /* handled by wa-viewport-demo */
|
||||
--preview-padding: var(--wa-space-l, 1rem);
|
||||
}
|
||||
|
||||
#preview {
|
||||
display: block;
|
||||
padding: var(--preview-padding);
|
||||
border-block-end: inherit;
|
||||
border-block-end-width: var(--divider-width);
|
||||
border-start-start-radius: inherit;
|
||||
border-start-end-radius: inherit;
|
||||
background: var(--preview-background);
|
||||
resize: var(--preview-resize);
|
||||
contain: inline-size; /* Safari chokes on scaled down viewports without this */
|
||||
|
||||
:host(:not([viewport])) & {
|
||||
max-width: min(var(--preview-max-width), 100%);
|
||||
min-width: var(--preview-min-width);
|
||||
overflow: auto;
|
||||
|
||||
@container style(--preview-resize: none) {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
> :first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
wa-viewport-demo + slot[name='preview'].has-slotted {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#source {
|
||||
border-block-end: inherit;
|
||||
overflow: hidden;
|
||||
transition-property: height, display;
|
||||
transition-behavior: allow-discrete;
|
||||
display: block;
|
||||
|
||||
&::slotted(pre) {
|
||||
position: relative;
|
||||
border-radius: 0 !important;
|
||||
margin: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
&:has(+ #buttons) {
|
||||
border-end-start-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:has(+ #buttons)) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Collapsed */
|
||||
&:not(:host([open]) *) {
|
||||
height: 0px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Expanded */
|
||||
&:is(:host([open]) *) {
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
[part~='toggle-button'] wa-icon {
|
||||
transition-property: rotate;
|
||||
|
||||
&:is(:host([open]) *) {
|
||||
rotate: 180deg;
|
||||
}
|
||||
}
|
||||
|
||||
#source,
|
||||
[part~='toggle-button'] wa-icon {
|
||||
&:not(:host([open]) *) {
|
||||
transition-duration: var(--code-collapse-duration);
|
||||
}
|
||||
|
||||
&:is(:host([open]) *) {
|
||||
transition-duration: var(--code-expand-duration);
|
||||
}
|
||||
}
|
||||
|
||||
#buttons {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: var(--controls-background, var(--wa-color-surface-default, canvas));
|
||||
border-end-start-radius: inherit;
|
||||
border-end-end-radius: inherit;
|
||||
border: inherit;
|
||||
/* so that we don't get a visible border
|
||||
border-style: none would be better but it affects how the others cascade :(
|
||||
*/
|
||||
border-width: 0;
|
||||
|
||||
button {
|
||||
--padding-block: 0.5em;
|
||||
--padding-inline: 1.5em;
|
||||
|
||||
all: unset;
|
||||
padding-block: var(--padding-block);
|
||||
padding-inline: var(--padding-inline);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
font-size: 0.875rem;
|
||||
color: var(--wa-color-text-quiet);
|
||||
text-align: center;
|
||||
|
||||
&:not(#preview:active ~ #buttons *) {
|
||||
/* Interactive states should not apply while the preview is being resized */
|
||||
&:hover {
|
||||
background: oklab(from var(--wa-color-surface-lowered, rgb(0 0 0 / 0.05)) l a b / 50%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: var(--wa-shadow-s) inset;
|
||||
padding-block: calc(var(--padding-block) + 1px) calc(var(--padding-block) - 1px);
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
/* bottom left in en */
|
||||
border-end-start-radius: inherit;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
/* bottom right in en */
|
||||
border-end-end-radius: inherit;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
/* bottom left in en */
|
||||
border-end-start-radius: 0;
|
||||
border-inline-start: inherit;
|
||||
border-inline-start-width: var(--divider-width);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
/* bottom right in en */
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
}
|
||||
|
||||
&[part~='toggle-button'] {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
wa-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.1em;
|
||||
}
|
||||
}
|
||||
@@ -1,380 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { HasSlotController, getInnerHTML } from '../../internal/slot.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import '../icon/icon.js';
|
||||
import { viewportPropertyConverter } from '../viewport-demo/viewport-demo.js';
|
||||
import styles from './code-demo.css';
|
||||
|
||||
import type { TemplateResult } from 'lit';
|
||||
import type { ViewportDimensions } from '../viewport-demo/viewport-demo.js';
|
||||
|
||||
interface DemoHTMLOptions {
|
||||
/**
|
||||
* If true, will only start watching after the initial update/render
|
||||
*/
|
||||
type?: string;
|
||||
isolated?: boolean;
|
||||
absolutize?: boolean | string | URL;
|
||||
prettyWhitespace?: boolean;
|
||||
}
|
||||
|
||||
const URL_ATTRIBUTES = ['src', 'href'];
|
||||
|
||||
/**
|
||||
* @summary Code demos can be used to render code examples as inline live demos.
|
||||
* @documentation https://backers.webawesome.com/docs/components/code-demo
|
||||
* @status experimental
|
||||
* @since 3.0
|
||||
*
|
||||
* @dependency wa-viewport-demo
|
||||
* @dependency wa-icon
|
||||
*
|
||||
* @slot - The main code example (usually a `<pre>` element).
|
||||
* @slot preview - One or more custom elements to display as the code example preview.
|
||||
*
|
||||
* @csspart preview - The container of the code example preview.
|
||||
* @csspart controls - The container of the control buttons.
|
||||
* @csspart button - The control buttons.
|
||||
* @csspart open-button - The open in new tab button.
|
||||
* @csspart toggle-button - The toggle button.
|
||||
* @csspart edit-button - The edit button.
|
||||
* @csspart iframe - The iframe that contains the preview (in isolated demos).
|
||||
* @csspart viewport-demo - The viewport demo container (in isolated demos).
|
||||
* @csspart viewport-controls - The viewport demo controls (in isolated demos).
|
||||
*
|
||||
* @cssproperty --preview-backdrop - The color behind the preview, shown when it is resized
|
||||
* @cssproperty --preview-background - The background color of the preview.
|
||||
* @cssproperty --preview-padding - The padding used for the preview. Defaults to `var(--wa-space-2xl)`.
|
||||
* @cssproperty --preview-resize - The CSS `resize` property value used for the preview. Default: `inline`, for horizontal resizing.
|
||||
* @cssproperty --viewport-initial-aspect-ratio - The initial aspect ratio of the viewport, when the `viewport` attribute is used. Defaults to `16 / 9`.
|
||||
* @cssproperty --preview-max-width - The maximum width of the preview. Defaults to `100%`.
|
||||
* @cssproperty --preview-min-width - The minimum width of the preview. Defaults to `4em`.
|
||||
* @cssproperty --divider-width - The width of the divider. Defaults to `var(--wa-border-width-s)`.
|
||||
* @cssproperty --code-collapse-duration - The duration of the code collapse animation (for supporting browsers). Defaults to `var(--wa-transition-normal)`.
|
||||
*
|
||||
*/
|
||||
@customElement('wa-code-demo')
|
||||
export default class WaCodeDemo extends WebAwesomeElement {
|
||||
static shadowStyle = styles;
|
||||
|
||||
@query('slot[name=preview]')
|
||||
private previewSlot: HTMLSlotElement;
|
||||
|
||||
/** Opens the code example */
|
||||
@property({ attribute: 'open', type: Boolean, reflect: true }) open = false;
|
||||
|
||||
/** Renders in an iframe */
|
||||
@property({
|
||||
reflect: true,
|
||||
converter: viewportPropertyConverter,
|
||||
})
|
||||
viewport?: boolean | ViewportDimensions;
|
||||
|
||||
/** Includes resources and other elements in the preview */
|
||||
@property({ reflect: true }) include?: string;
|
||||
|
||||
private readonly hasSlotController = new HasSlotController(this, 'preview');
|
||||
|
||||
firstUpdated() {
|
||||
// This works around a bug where if you have no slotted preview, initial previews will not load.
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
render() {
|
||||
// NOTE We don't want to render the contents of the code element anywhere if a custom preview is provided.
|
||||
// That way, providing a custom preview can also be used to sanitize the code.
|
||||
const code = this.getDemoHTML({ type: 'preview' });
|
||||
let viewportHTML: string | TemplateResult = '';
|
||||
|
||||
if (this.viewport) {
|
||||
// Viewport emulation
|
||||
viewportHTML = html`
|
||||
<wa-viewport-demo .viewport=${this.viewport} part="viewport-demo" exportparts="controls:viewport-controls">
|
||||
<iframe title="Code preview" srcdoc="${code}" part="iframe"></iframe>
|
||||
</wa-viewport-demo>
|
||||
`;
|
||||
}
|
||||
|
||||
const customPreview = this.hasUpdated ? this.hasSlotController.test('preview') : true;
|
||||
|
||||
return html`
|
||||
<div id="preview" part="preview">
|
||||
${viewportHTML}
|
||||
<slot
|
||||
name="preview"
|
||||
class=${classMap({ 'has-slotted': customPreview })}
|
||||
@slotchange=${this.handleSlotChange}
|
||||
.innerHTML=${customPreview || this.viewport ? '' : code}
|
||||
></slot>
|
||||
</div>
|
||||
<slot id="source"></slot>
|
||||
<div id="buttons" part="controls">
|
||||
<button
|
||||
type="button"
|
||||
part="toggle-button button"
|
||||
aria-expanded="${this.open ? 'true' : 'false'}"
|
||||
aria-controls="source"
|
||||
@click=${this.toggle}
|
||||
>
|
||||
Code
|
||||
<wa-icon name="chevron-down"></wa-icon>
|
||||
</button>
|
||||
${this.viewport
|
||||
? html`<button type="button" part="open-button button" @click=${this.openInNewTab}>
|
||||
<wa-icon name="arrow-up-right-from-square"></wa-icon>
|
||||
Open
|
||||
</button>`
|
||||
: ''}
|
||||
<button type="button" part="edit-button button" @click=${this.edit}>
|
||||
<wa-icon name="pen-to-square"></wa-icon>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// TODO memoize this and only update if:
|
||||
// - this.include changes
|
||||
//- elements have been added/removed that match the selector
|
||||
public getIncludedHTML({ isolated = Boolean(this.viewport), absolutize, prettyWhitespace }: DemoHTMLOptions = {}):
|
||||
| string
|
||||
| null {
|
||||
if (!this.ownerDocument) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const selectors = ['.wa-code-demo-include'];
|
||||
|
||||
if (isolated) {
|
||||
selectors.push('.wa-code-demo-include-isolated');
|
||||
}
|
||||
|
||||
if (this.include) {
|
||||
selectors.push(this.include);
|
||||
}
|
||||
|
||||
const elements = recursiveQSA(selectors.join(', '), this);
|
||||
|
||||
return Array.from(elements, (el: Element) => {
|
||||
const isTemplate = el.nodeName === 'TEMPLATE';
|
||||
let source = el;
|
||||
|
||||
if (absolutize) {
|
||||
// Absolutize URLs. Useful for opening in a new tab or code playgrounds.
|
||||
const base = absolutize ? location.href : absolutize;
|
||||
source = source.cloneNode(true) as Element;
|
||||
absolutizeURLs(isTemplate ? (source as HTMLTemplateElement).content : source, base);
|
||||
}
|
||||
|
||||
if (isTemplate) {
|
||||
let ret = (source as HTMLTemplateElement).innerHTML;
|
||||
|
||||
if (prettyWhitespace) {
|
||||
ret = dedent(ret);
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
return source.outerHTML;
|
||||
}).join('\n');
|
||||
}
|
||||
|
||||
public getDemoHTML(options: DemoHTMLOptions = {}): string | null {
|
||||
let code;
|
||||
const customPreview = this.hasUpdated ? this.hasSlotController.test('preview') : true;
|
||||
if (options.type === 'preview' && customPreview && this.previewSlot) {
|
||||
code = getHTML(this.previewSlot.assignedNodes({ flatten: true }));
|
||||
} else {
|
||||
code = this.querySelector?.('code')?.textContent ?? this.textContent;
|
||||
}
|
||||
|
||||
const includedHTML = this.getIncludedHTML(options);
|
||||
|
||||
if (includedHTML) {
|
||||
return includedHTML + '\n\n' + code;
|
||||
}
|
||||
|
||||
return code;
|
||||
}
|
||||
|
||||
private handleSlotChange(e: Event) {
|
||||
const slot = e.target as HTMLSlotElement;
|
||||
|
||||
if (slot.name === 'preview' && !this.viewport) {
|
||||
const assignedNodes = slot.assignedNodes();
|
||||
|
||||
for (const node of assignedNodes) {
|
||||
// Unwrap templates
|
||||
// FIXME this will mess up the order of the nodes if there are mixed templates & regular nodes
|
||||
if (node.nodeName === 'TEMPLATE') {
|
||||
const content = (node as HTMLTemplateElement).content;
|
||||
const clone = content.cloneNode(true);
|
||||
slot.after(clone);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles visibility of the code example
|
||||
*/
|
||||
public toggle() {
|
||||
this.open = !this.open;
|
||||
}
|
||||
/** Opens the code example in a new tab */
|
||||
public openInNewTab() {
|
||||
const markup = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
${this.getDemoHTML({ isolated: true, absolutize: true, prettyWhitespace: true })}
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
const blob = new Blob([markup], { type: 'text/html' });
|
||||
const a = Object.assign(document.createElement('a'), {
|
||||
href: URL.createObjectURL(blob),
|
||||
target: '_blank',
|
||||
});
|
||||
document.documentElement.append(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens the code example in CodePen
|
||||
*/
|
||||
public edit() {
|
||||
const markup = this.getDemoHTML({ isolated: true, absolutize: true, prettyWhitespace: true });
|
||||
const css = 'body {\n padding: 2rem !important;\n}';
|
||||
const js = '';
|
||||
|
||||
const form = Object.assign(document.createElement('form'), {
|
||||
action: 'https://codepen.io/pen/define',
|
||||
method: 'POST',
|
||||
target: '_blank',
|
||||
});
|
||||
|
||||
const data = {
|
||||
title: '',
|
||||
description: '',
|
||||
tags: ['webawesome'],
|
||||
editors: '1000',
|
||||
head: '<meta name="viewport" content="width=device-width">',
|
||||
html_classes: '',
|
||||
css_external: '',
|
||||
js_external: '',
|
||||
js_module: true,
|
||||
js_pre_processor: 'none',
|
||||
html: markup,
|
||||
css,
|
||||
js,
|
||||
};
|
||||
|
||||
const input = Object.assign(document.createElement('input'), {
|
||||
type: 'hidden',
|
||||
name: 'data',
|
||||
value: JSON.stringify(data),
|
||||
});
|
||||
form.append(input);
|
||||
|
||||
document.documentElement.append(form);
|
||||
form.submit();
|
||||
form.remove();
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'wa-code-demo': WaCodeDemo;
|
||||
}
|
||||
}
|
||||
|
||||
// Private helpers
|
||||
|
||||
/**
|
||||
* Convert URLs to absolute URLs on an element and any relevant elements within it
|
||||
* @param root - The root element to start the search from
|
||||
* @param base
|
||||
*/
|
||||
function absolutizeURLs(root: Element | DocumentFragment, base = location.href) {
|
||||
const selector = URL_ATTRIBUTES.map(attr => `[${attr}]`).join(', ');
|
||||
const elements = [];
|
||||
|
||||
if (root instanceof Element && root.matches(selector)) {
|
||||
elements.push(root);
|
||||
}
|
||||
elements.push(...root.querySelectorAll(selector));
|
||||
|
||||
for (const element of elements) {
|
||||
for (const attributeName of URL_ATTRIBUTES) {
|
||||
if (element.hasAttribute(attributeName)) {
|
||||
const url = element.getAttribute(attributeName) || '';
|
||||
const absoluteURL = new URL(url, base).href;
|
||||
element.setAttribute(attributeName, absoluteURL);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get elements that match a selector within an element’s shadow tree
|
||||
* and any parent shadow trees, all the way up to the light DOM
|
||||
* @param selector
|
||||
* @param node - The node to start the search from
|
||||
*/
|
||||
function recursiveQSA(selector: string, node: Node) {
|
||||
const ret: Element[] = [];
|
||||
|
||||
for (let root = node; root.nodeType !== Node.DOCUMENT_NODE; ) {
|
||||
root = root.getRootNode();
|
||||
const elements = (root as ShadowRoot | Document).querySelectorAll(selector);
|
||||
|
||||
ret.push(...elements);
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function dedent(code: string) {
|
||||
// Remove blank lines at the start and end
|
||||
code = code.replace(/^\s*\n|\n\s*$/g, '');
|
||||
|
||||
if (/^\S/gm.test(code)) {
|
||||
// There are non-indented lines, so we can't dedent
|
||||
return code;
|
||||
}
|
||||
|
||||
// Find the smallest indentation
|
||||
const lines = code.split(/\r?\n/);
|
||||
const indents = lines.map(line => line.match(/^\s*/)?.[0]).filter(Boolean) as string[];
|
||||
const minIndent = indents.reduce(
|
||||
(minIndentSoFar, indent) => (minIndentSoFar.length < indent.length ? minIndentSoFar : indent),
|
||||
indents[0],
|
||||
);
|
||||
|
||||
if (!minIndent || lines.some(line => !line.startsWith(minIndent))) {
|
||||
// Inconsistent indentation, can't dedent
|
||||
return code;
|
||||
}
|
||||
|
||||
return code.replace(new RegExp(`^${minIndent}`, 'gm'), '');
|
||||
}
|
||||
|
||||
function getHTML(nodes: Iterable<Node>): string {
|
||||
return getInnerHTML(nodes, node => {
|
||||
if (node.nodeType === Node.ELEMENT_NODE && node.nodeName === 'TEMPLATE') {
|
||||
const template = node as HTMLTemplateElement;
|
||||
return template.innerHTML;
|
||||
}
|
||||
return undefined;
|
||||
});
|
||||
}
|
||||
@@ -3,7 +3,7 @@ import { html } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
import { getComputedStyle } from '../../internal/computedStyle.js';
|
||||
import { getComputedStyle } from '../../internal/computed-style.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import '../icon-button/icon-button.js';
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { getComputedStyle } from './computedStyle.js';
|
||||
import { getComputedStyle } from './computed-style.js';
|
||||
|
||||
const definedProperties = new Set();
|
||||
const initialValues: Record<string, string> = {
|
||||
|
||||
@@ -3,7 +3,7 @@ import { LitElement, defaultConverter, isServer, unsafeCSS } from 'lit';
|
||||
import { property } from 'lit/decorators.js';
|
||||
import { ElementStyleObserver } from 'style-observer';
|
||||
import componentStyles from '../styles/shadow/component.css';
|
||||
import { getComputedStyle } from './computedStyle.js';
|
||||
import { getComputedStyle } from './computed-style.js';
|
||||
|
||||
// Augment Lit's module
|
||||
declare module 'lit' {
|
||||
|
||||
@@ -51,7 +51,6 @@ table,
|
||||
ul,
|
||||
video,
|
||||
wa-callout,
|
||||
wa-code-demo,
|
||||
wa-viewport-demo {
|
||||
&:has(+ *) {
|
||||
margin: 0 0 var(--wa-space-xl) 0;
|
||||
|
||||
Reference in New Issue
Block a user