kopia lustrzana https://github.com/shoelace-style/shoelace
works with a 24 second docs refresh 😕
Cory LaViska
rodzic
de5ad1b1b9
commit
b8b6175a64
|
|
@ -3,6 +3,7 @@
|
|||
_site
|
||||
docs/dist
|
||||
docs/search.json
|
||||
docs/assets/images/sprite.svg
|
||||
dist
|
||||
node_modules
|
||||
src/react
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html
|
||||
lang="en"
|
||||
<html
|
||||
lang="en"
|
||||
data-layout="{{ layout }}"
|
||||
data-shoelace-version="{{ meta.version }}"
|
||||
>
|
||||
|
|
@ -31,9 +31,9 @@
|
|||
<meta property="og:image" content="{{ assetUrl(meta.image, true) }}" />
|
||||
|
||||
{# Shoelace #}
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.4.0/dist/themes/light.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.4.0/dist/themes/dark.css" />
|
||||
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.4.0/dist/shoelace-autoloader.js"></script>
|
||||
<link rel="stylesheet" href="/dist/themes/light.css" />
|
||||
<link rel="stylesheet" href="/dist/themes/dark.css" />
|
||||
<script type="module" src="/dist/shoelace-autoloader.js"></script>
|
||||
|
||||
{# Set the initial theme and menu states here to prevent flashing #}
|
||||
<script>
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
</sl-button>
|
||||
<sl-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
|
||||
<sl-icon slot="prefix" name="twitter"></sl-icon> Follow
|
||||
</sl-button>
|
||||
</sl-button>
|
||||
</div>
|
||||
|
||||
<button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div class="content__body">
|
||||
{% block content %}
|
||||
{{ content | safe }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
//
|
||||
// TODO - switch to local dist
|
||||
//
|
||||
const customElementsManifest = require('@shoelace-style/shoelace/dist/custom-elements.json');
|
||||
const customElementsManifest = require('../../dist/custom-elements.json');
|
||||
|
||||
//
|
||||
// Export it here so we can import it elsewhere and use the same version
|
||||
|
|
@ -42,17 +39,17 @@ module.exports.getAllComponents = function () {
|
|||
});
|
||||
|
||||
// Build dependency graphs
|
||||
allComponents.map(component => {
|
||||
allComponents.forEach(component => {
|
||||
const dependencies = [];
|
||||
|
||||
// Recursively fetch sub-dependencies
|
||||
function getDependencies(tag) {
|
||||
const component = allComponents.find(c => c.tagName === tag);
|
||||
if (!component || !Array.isArray(component.dependencies)) {
|
||||
const cmp = allComponents.find(c => c.tagName === tag);
|
||||
if (!cmp || !Array.isArray(component.dependencies)) {
|
||||
return;
|
||||
}
|
||||
|
||||
component.dependencies?.forEach(dependentTag => {
|
||||
cmp.dependencies?.forEach(dependentTag => {
|
||||
if (!dependencies.includes(dependentTag)) {
|
||||
dependencies.push(dependentTag);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -685,7 +685,7 @@ If you want to change the icons Shoelace uses internally, you can register an ic
|
|||
item.setAttribute('data-terms', [i.name, i.title, ...(i.tags || []), ...(i.categories || [])].join(' '));
|
||||
item.innerHTML = `
|
||||
<svg width="1em" height="1em" fill="currentColor">
|
||||
<use xlink:href="/assets/icons/sprite.svg#${i.name}"></use>
|
||||
<use xlink:href="/assets/images/sprite.svg#${i.name}"></use>
|
||||
</svg>
|
||||
`;
|
||||
list.appendChild(item);
|
||||
|
|
|
|||
Plik diff jest za duży
Load Diff
|
|
@ -85,9 +85,11 @@
|
|||
"@web/test-runner-commands": "^0.6.5",
|
||||
"@web/test-runner-playwright": "^0.9.0",
|
||||
"bootstrap-icons": "^1.10.3",
|
||||
"browser-sync": "^2.29.3",
|
||||
"cem-plugin-vs-code-custom-data-generator": "^1.4.1",
|
||||
"chalk": "^5.2.0",
|
||||
"change-case": "^4.1.2",
|
||||
"chokidar": "^3.5.3",
|
||||
"command-line-args": "^5.2.1",
|
||||
"comment-parser": "^1.3.1",
|
||||
"cspell": "^6.18.1",
|
||||
|
|
@ -104,7 +106,7 @@
|
|||
"eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
|
||||
"eslint-plugin-wc": "^1.4.0",
|
||||
"front-matter": "^4.0.2",
|
||||
"get-port": "^6.1.2",
|
||||
"get-port": "^7.0.0",
|
||||
"globby": "^13.1.3",
|
||||
"husky": "^8.0.3",
|
||||
"jsdom": "^22.1.0",
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
import chalk from 'chalk';
|
||||
import { execSync } from 'child_process';
|
||||
import commandLineArgs from 'command-line-args';
|
||||
import getPort, { portNumbers } from 'get-port';
|
||||
import { globby } from 'globby';
|
||||
import { deleteSync } from 'del';
|
||||
import browserSync from 'browser-sync';
|
||||
import chalk from 'chalk';
|
||||
import commandLineArgs from 'command-line-args';
|
||||
import esbuild from 'esbuild';
|
||||
import fs from 'fs';
|
||||
import { globby } from 'globby';
|
||||
import copy from 'recursive-copy';
|
||||
|
||||
function buildTheDocs() {
|
||||
execSync('npx @11ty/eleventy', { stdio: 'inherit', cwd: 'docs' });
|
||||
}
|
||||
|
||||
const { bundle, copydir, dir, serve, types } = commandLineArgs([
|
||||
{ name: 'bundle', type: Boolean },
|
||||
{ name: 'copydir', type: String },
|
||||
|
|
@ -96,10 +102,70 @@ fs.mkdirSync(outdir, { recursive: true });
|
|||
|
||||
if (serve) {
|
||||
// Dev
|
||||
execSync('npx @11ty/eleventy --serve --incremental', { stdio: 'inherit', cwd: 'docs' });
|
||||
buildTheDocs();
|
||||
|
||||
const bs = browserSync.create();
|
||||
const port = await getPort({
|
||||
port: portNumbers(4000, 4999)
|
||||
});
|
||||
|
||||
const browserSyncConfig = {
|
||||
startPath: '/',
|
||||
port,
|
||||
logLevel: 'silent',
|
||||
logPrefix: '[shoelace]',
|
||||
logFileChanges: true,
|
||||
notify: false,
|
||||
single: true,
|
||||
ghostMode: false,
|
||||
server: {
|
||||
baseDir: '_site',
|
||||
routes: {
|
||||
'/dist': './dist'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Launch browser sync
|
||||
bs.init(browserSyncConfig, () => {
|
||||
const url = `http://localhost:${port}`;
|
||||
console.log(chalk.cyan(`Launched the Shoelace dev server at ${url} 🥾\n`));
|
||||
});
|
||||
|
||||
// Rebuild and reload when source files change
|
||||
bs.watch(['src/**/!(*.test).*']).on('change', async filename => {
|
||||
console.log(`Source file changed - ${filename}`);
|
||||
buildResult
|
||||
// Rebuild and reload
|
||||
.rebuild()
|
||||
.then(() => {
|
||||
// Rebuild stylesheets when a theme file changes
|
||||
if (/^src\/themes/.test(filename)) {
|
||||
execSync(`node scripts/make-themes.js --outdir "${outdir}"`, { stdio: 'inherit' });
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
// Skip metadata when styles are changed
|
||||
if (/(\.css|\.styles\.ts)$/.test(filename)) {
|
||||
return;
|
||||
}
|
||||
|
||||
execSync(`node scripts/make-metadata.js --outdir "${outdir}"`, { stdio: 'inherit' });
|
||||
})
|
||||
.then(() => bs.reload())
|
||||
.catch(err => console.error(chalk.red(err)));
|
||||
});
|
||||
|
||||
// Reload without rebuilding when the docs change
|
||||
bs.watch(['docs/**/*']).on('change', filename => {
|
||||
console.log(`File changed - ${filename}`);
|
||||
execSync(`node scripts/make-search.js --outdir "${outdir}"`, { stdio: 'inherit' });
|
||||
buildTheDocs();
|
||||
bs.reload();
|
||||
});
|
||||
} else {
|
||||
// Build
|
||||
execSync('npx @11ty/eleventy', { stdio: 'inherit', cwd: 'docs' });
|
||||
// Prod build
|
||||
buildTheDocs();
|
||||
}
|
||||
|
||||
// Cleanup on exit
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ let numIcons = 0;
|
|||
await Promise.all([
|
||||
copy(`${srcPath}/icons`, iconDir),
|
||||
copy(`${srcPath}/LICENSE.md`, path.join(iconDir, 'LICENSE.md')),
|
||||
copy(`${srcPath}/bootstrap-icons.svg`, './docs/assets/icons/sprite.svg', { overwrite: true })
|
||||
copy(`${srcPath}/bootstrap-icons.svg`, './docs/assets/images/sprite.svg', { overwrite: true })
|
||||
]);
|
||||
|
||||
// Generate metadata
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue