Skip to content

Commit 5c269fa

Browse files
sissbrueckersissbruecker
authored
chore: allow multiple sub pages within dev pages (#10137)
1 parent ea8ad23 commit 5c269fa

File tree

7 files changed

+175
-35
lines changed

7 files changed

+175
-35
lines changed

‎dev/charts/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99
<body>
1010
<h1>Charts development pages</h1>
1111

12-
<ul id="listing"></ul>
12+
<!-- LISTING -->
1313
</body>
1414
</html>

‎dev/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99
<body>
1010
<h1>Web Component development pages</h1>
1111

12-
<ul id="listing"></ul>
12+
<!-- LISTING -->
1313
</body>
1414
</html>

‎dev/playground/button.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Button</title>
8+
<script type="module" src="../common.js"></script>
9+
10+
<script type="module">
11+
window.Vaadin = {};
12+
window.Vaadin.featureFlags = {};
13+
window.Vaadin.featureFlags.accessibleDisabledButtons = true;
14+
</script>
15+
<script type="module">
16+
import '@vaadin/button';
17+
import '@vaadin/icon';
18+
import '@vaadin/icons';
19+
import '@vaadin/tooltip';
20+
import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
21+
</script>
22+
</head>
23+
24+
<body>
25+
<section class="section">
26+
<h2 class="heading">Label & Icon</h2>
27+
<vaadin-button>Reply</vaadin-button>
28+
<vaadin-button>
29+
<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
30+
Reply
31+
</vaadin-button>
32+
<vaadin-button aria-label="Reply">
33+
<vaadin-icon icon="vaadin:reply"></vaadin-icon>
34+
<vaadin-tooltip slot="tooltip" text="Reply"></vaadin-tooltip>
35+
</vaadin-button>
36+
</section>
37+
38+
<section class="section">
39+
<h2 class="heading">Primary</h2>
40+
<vaadin-button theme="primary">Reply</vaadin-button>
41+
<vaadin-button theme="primary">
42+
<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
43+
Reply
44+
</vaadin-button>
45+
<vaadin-button theme="primary" aria-label="Reply">
46+
<vaadin-icon icon="vaadin:reply"></vaadin-icon>
47+
<vaadin-tooltip slot="tooltip" text="Reply"></vaadin-tooltip>
48+
</vaadin-button>
49+
</section>
50+
51+
<section class="section">
52+
<h2 class="heading">Tertiary</h2>
53+
<vaadin-button theme="tertiary">Reply</vaadin-button>
54+
<vaadin-button theme="tertiary">
55+
<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
56+
Reply
57+
</vaadin-button>
58+
<vaadin-button theme="tertiary" aria-label="Reply">
59+
<vaadin-icon icon="vaadin:reply"></vaadin-icon>
60+
<vaadin-tooltip slot="tooltip" text="Reply"></vaadin-tooltip>
61+
</vaadin-button>
62+
</section>
63+
64+
<section class="section">
65+
<h2 class="heading">Disabled</h2>
66+
<vaadin-button theme="primary" disabled>Primary</vaadin-button>
67+
<vaadin-button disabled>Secondary</vaadin-button>
68+
<vaadin-button theme="tertiary" disabled>Tertiary</vaadin-button>
69+
</section>
70+
71+
<section class="section">
72+
<h2 class="heading">Custom Layout</h2>
73+
<vaadin-button style="width: 150px">Reply</vaadin-button>
74+
<vaadin-button style="width: 150px">
75+
<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
76+
Reply
77+
</vaadin-button>
78+
<vaadin-button style="width: 150px" aria-label="Reply">
79+
<vaadin-icon icon="vaadin:reply"></vaadin-icon>
80+
</vaadin-button>
81+
<vaadin-button style="width: 150px; justify-content: start">
82+
<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
83+
Reply
84+
</vaadin-button>
85+
<vaadin-button style="flex-direction: column">
86+
<vaadin-icon icon="vaadin:reply"></vaadin-icon>
87+
Reply
88+
</vaadin-button>
89+
</section>
90+
</body>
91+
</html>

‎dev/playground/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Dev pages</title>
7+
<script type="module" src="../common.js"></script>
8+
</head>
9+
<body>
10+
<h1>Playground pages</h1>
11+
12+
<!-- LISTING -->
13+
</body>
14+
</html>

‎dev/rollup.config.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { rollupPluginHTML as html } from '@web/rollup-plugin-html';
55
import postcss from 'postcss';
66
import atImport from 'postcss-import';
77
import url from 'postcss-url';
8-
import { appendStyles, generateListing } from '../wds-utils.js';
8+
import { appendStyles, generateListing, isIndexPage } from '../wds-utils.js';
99

1010
export default {
1111
input: '**/*.html',
@@ -14,12 +14,17 @@ export default {
1414
nodeResolve(),
1515
html({
1616
bundleAssetsFromCss: true, // Use Aura CSS fonts
17-
flattenOutput: false, // Preserve "charts" folder
17+
flattenOutput: false, // Preserve sub-folder structure
1818
transformHtml: [
1919
(html) => appendStyles(html),
2020
(html, { htmlFileName }) => {
21-
const folderPath = htmlFileName === 'charts/index.html' ? '/charts' : '';
22-
return generateListing(html, `.${folderPath}`);
21+
// Index page listing
22+
if (isIndexPage(html)) {
23+
const path = htmlFileName.replace(/\/?(index.html)?$/u, '');
24+
const dir = `./${path}`;
25+
html = generateListing(html, dir);
26+
}
27+
return html;
2328
},
2429
],
2530
transformAsset: [

‎wds-utils.js‎

Lines changed: 52 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -21,30 +21,60 @@ export function appendStyles(html) {
2121
return html.replace(/<\/body>/u, `${preventFouc}\n</body>`);
2222
}
2323

24-
export function generateListing(html, dir, path) {
25-
if (html.includes('<ul id="listing">')) {
26-
// Add <base> to make index.html work when opening
27-
// http://localhost:8000/dev or http://localhost:8000/dev/charts without trailing slash
28-
const match = /\/(?<section>dev|charts)$/u.exec(path);
29-
if (match) {
30-
html = html.replace('<head>', `<head>\n<base href="${match.groups.section}/">`);
24+
export function isIndexPage(html) {
25+
return html.includes('<!-- LISTING -->');
26+
}
27+
28+
function isSubPage(dir, file) {
29+
const filePath = `${dir}/${file}`;
30+
if (fs.existsSync(filePath) && fs.statSync(filePath).isDirectory()) {
31+
const indexPath = `${filePath}/index.html`;
32+
return fs.existsSync(indexPath);
33+
}
34+
return false;
35+
}
36+
37+
export function generateListing(html, dir) {
38+
if (isIndexPage(html)) {
39+
const files = fs.readdirSync(dir || '.').filter((file) => file !== 'index.html' && file !== 'dist');
40+
41+
// Separate sub pages (folders with index.html) from HTML files
42+
const subPages = files.filter((file) => isSubPage(dir, file));
43+
const htmlFiles = files.filter((file) => file.endsWith('.html'));
44+
45+
let listing = '';
46+
47+
// Add sub pages section if there are any
48+
if (subPages.length > 0) {
49+
listing += `
50+
<h2>Sub pages</h2>
51+
<ul>
52+
${subPages
53+
.map(
54+
(file) => `<li>
55+
<a href="${file}/">${file}/</a>
56+
</li>`,
57+
)
58+
.join('')}
59+
</ul>`;
60+
}
61+
62+
// Add HTML files section if there are any
63+
if (htmlFiles.length > 0) {
64+
listing += `
65+
<h2>Pages</h2>
66+
<ul>
67+
${htmlFiles
68+
.map(
69+
(file) => `<li>
70+
<a href="${file}">${file}</a>
71+
</li>`,
72+
)
73+
.join('')}
74+
</ul>`;
3175
}
3276

33-
const listing = `
34-
<ul id="listing">
35-
${fs
36-
.readdirSync(dir || '.')
37-
.filter((file) => file !== 'index.html')
38-
.filter((file) => file.endsWith('.html') || file === 'charts')
39-
.map(
40-
(file) => `<li>
41-
<a href="${file}${file.endsWith('.html') ? '' : '/'}">${file}</a>
42-
</li>`,
43-
)
44-
.join('')}
45-
</ul>`;
46-
47-
return html.replace(/<ul id="listing">.*<\/ul>/u, listing);
77+
return html.replace(/<!-- LISTING -->/u, listing);
4878
}
4979

5080
return html;

‎web-dev-server.config.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { esbuildPlugin } from '@web/dev-server-esbuild';
2-
import { appendStyles, generateListing } from './wds-utils.js';
2+
import { appendStyles, generateListing, isIndexPage } from './wds-utils.js';
33

44
const theme = process.argv.join(' ').match(/--theme=(\w+)/u)?.[1] ?? 'base';
55

@@ -76,13 +76,13 @@ export default {
7676
body = appendStyles(body);
7777

7878
// Index page listing
79-
const devPageMatch = /^\/dev(?:\/(?<section>charts))?(?:\/index\.html|\/)?$/u.exec(context.path);
79+
if (isIndexPage(body)) {
80+
const path = context.path.replace(/\/?(index.html)?$/u, '');
81+
const dir = `.${path}`;
82+
body = generateListing(body, dir);
8083

81-
if (devPageMatch) {
82-
// If a group was captured, then it's in the /dev/charts path,
83-
// otherwise it should list the pages under the /dev folder
84-
const dir = devPageMatch.groups.section ? './dev/charts' : './dev';
85-
body = generateListing(body, dir, context.path);
84+
// Add <base> to make index pages work without trailing slash
85+
body = body.replace('<head>', `<head>\n<base href="${path}/">`);
8686
}
8787

8888
return { body };

0 commit comments

Comments
 (0)