kopia lustrzana https://github.com/shoelace-style/shoelace
prettier
konnorrogers
rodzic
41913c8c58
commit
d18db9adfa
|
|
@ -8,13 +8,12 @@
|
|||
* @typedef {Array<Replacement>} Replacements
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* @param {Document} content
|
||||
* @param {Replacements} replacements
|
||||
*/
|
||||
module.exports = function (content, replacements) {
|
||||
replacements.forEach((replacement) => {
|
||||
content.body.innerHTML = content.body.innerHTML.replaceAll(replacement.pattern, replacement.replacement)
|
||||
})
|
||||
}
|
||||
replacements.forEach(replacement => {
|
||||
content.body.innerHTML = content.body.innerHTML.replaceAll(replacement.pattern, replacement.replacement);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@ const typography = require('./_utilities/typography.cjs');
|
|||
const replacer = require('./_utilities/replacer.cjs');
|
||||
|
||||
const assetsDir = 'assets';
|
||||
const cdndir = 'cdn'
|
||||
const npmdir = 'dist'
|
||||
const cdndir = 'cdn';
|
||||
const npmdir = 'dist';
|
||||
const allComponents = getAllComponents();
|
||||
let hasBuiltSearchIndex = false;
|
||||
|
||||
|
|
@ -135,10 +135,10 @@ module.exports = function (eleventyConfig) {
|
|||
copyCodeButtons(doc); // must be after codePreviews + highlightCodeBlocks
|
||||
typography(doc, '#content');
|
||||
replacer(doc, [
|
||||
{pattern: "%VERSION%", replacement: customElementsManifest.package.version},
|
||||
{pattern: "%CDNDIR%", replacement: cdndir},
|
||||
{pattern: "%NPMDIR%", replacement: npmdir}
|
||||
])
|
||||
{ pattern: '%VERSION%', replacement: customElementsManifest.package.version },
|
||||
{ pattern: '%CDNDIR%', replacement: cdndir },
|
||||
{ pattern: '%NPMDIR%', replacement: npmdir }
|
||||
]);
|
||||
|
||||
// Serialize the Document object to an HTML string and prepend the doctype
|
||||
content = `<!DOCTYPE html>\n${doc.documentElement.outerHTML}`;
|
||||
|
|
|
|||
|
|
@ -85,4 +85,4 @@ Now you can start using Shoelace components in your app!
|
|||
|
||||
:::tip
|
||||
Are you using Shoelace with Angular? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/angular.md)
|
||||
:::
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -151,4 +151,4 @@ For more details, refer to Jest's [`transformIgnorePatterns` customization](http
|
|||
|
||||
:::tip
|
||||
Are you using Shoelace with React? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/react.md)
|
||||
:::
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -104,4 +104,4 @@ Now you can use the `v-sl-model` directive to keep your data in sync!
|
|||
|
||||
:::tip
|
||||
Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue-2.md)
|
||||
:::
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -124,4 +124,4 @@ Here is an example:
|
|||
<sl-button variant="primary" @click=" drawerIsOpen = false">Close</sl-button>
|
||||
</div>
|
||||
</sl-drawer>
|
||||
```
|
||||
```
|
||||
|
|
|
|||
|
|
@ -33,8 +33,14 @@ While convenient, autoloading may lead to a [Flash of Undefined Custom Elements]
|
|||
The traditional CDN loader registers all Shoelace elements up front. Note that, if you're only using a handful of components, it will be much more efficient to stick with the autoloader. However, you can also [cherry pick](#cherry-picking) components if you want to load specific ones up front.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/light.css" />
|
||||
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/shoelace.js"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/light.css"
|
||||
/>
|
||||
<script
|
||||
type="module"
|
||||
src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/shoelace.js"
|
||||
></script>
|
||||
```
|
||||
|
||||
</sl-tab-panel>
|
||||
|
|
@ -45,7 +51,10 @@ The traditional CDN loader registers all Shoelace elements up front. Note that,
|
|||
The code above will load the light theme. If you want to use the [dark theme](/getting-started/themes#dark-theme) instead, update the stylesheet as shown below and add `<html class="sl-theme-dark">` to your page.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/dark.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/dark.css"
|
||||
/>
|
||||
```
|
||||
|
||||
### Light & Dark Theme
|
||||
|
|
@ -194,4 +203,4 @@ TLDR:
|
|||
- `@shoelace-style/shoelace/%NPMDIR%` is for NPM
|
||||
|
||||
This change was introduced in `v2.5.0` to address issues around installations from NPM
|
||||
loading multiple versions of libraries such as the Lit web component library which Shoelace uses internally.
|
||||
loading multiple versions of libraries such as the Lit web component library which Shoelace uses internally.
|
||||
|
|
|
|||
|
|
@ -135,4 +135,4 @@ Once your translation has been compiled to JavaScript, import it and activate it
|
|||
|
||||
:::tip
|
||||
If your translation isn't working, make sure you're using the same localize module when importing `registerTranslation`. If you're using a different module, your translation won't be recognized.
|
||||
:::
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -127,7 +127,10 @@ The dark theme works by taking the light theme's [color tokens](/tokens/color) a
|
|||
To install the dark theme, add the following to the `<head>` section of your page.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/dark.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/dark.css"
|
||||
/>
|
||||
```
|
||||
|
||||
To activate the theme, apply the `sl-theme-dark` class to the `<html>` element.
|
||||
|
|
@ -146,4 +149,4 @@ Shoelace doesn't try to auto-detect the user's light/dark mode preference. This
|
|||
- Allow the user to override the setting in your app
|
||||
- Remember the user's preference and restore it on subsequent logins
|
||||
|
||||
Shoelace avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
|
||||
Shoelace avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
|
||||
|
|
|
|||
|
|
@ -137,4 +137,4 @@ Special thanks to the following projects and individuals that help make Shoelace
|
|||
- Positioning of dropdowns, tooltips, et al is handled by [Floating UI](https://floating-ui.com/)
|
||||
- Animations are courtesy of [animate.css](https://animate.style/)
|
||||
- Search is powered by [Lunr](https://lunrjs.com/)
|
||||
- The Shoelace logo was designed with a single shoelace by [Adam K Olson](https://twitter.com/adamkolson)
|
||||
- The Shoelace logo was designed with a single shoelace by [Adam K Olson](https://twitter.com/adamkolson)
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue